romiwaves

/React, Typescript 이것은... 직전 강의를 대충 + 너무 오래전에 듣고 다음 강의를 듣는 나의 탓. useState를 어떻게 시용했던 것인지 기억이 나질 않아서 공부 후 적어본다. 📌 useState가 대체 뭔데useState는 컴포넌트 안에서 변할 수 있는 값을 관리한다...라고 쓰면 나도 무슨 말인지 모르겠으니 예시 코드를 보자.const [state, setState] = useState(initialValue); - initialValue는 상태의 초기값이다. 즉, default value라고 할 수 있고 처음 이 함수가 시작될 때 가질 값을 설정할 수 있다.- state는 현재 상태의 값이라고 보면 된다.- setState는 상태를 업데이트하는 함수이다. 이 함수가 호출되면 리..

/Javascript, React 리액트 공부를 하다가 분명 저번 강의에서도 내가 활용하고, 적은 코드인데 기억이 안 나는 부분이 있어서 정리해보려고 함. 📌 Props가 대체 뭔데 Props는 Properties의 줄임..이라고 볼 수 있겠다. 리액트에서 컴포넌트에 정보를 전달할 때 사용하는 일종의 매개변수라고 보면 된다. 컴포넌트끼리의 정보 전달에도 유용하다. 부모 컴포넌트에서 자식 컴포넌트로 속성 형태로 전달된다. 예를 들어 보면,function Parent() { return ;}function Child(props) { return ( 안녕하세요, 제 이름은 {props.name}이고, 나이는 {props.age}살이에요! );} 위와 같은 코드에서 Parent는 ..

/React 오늘도 어김없이 오류를 마주한 로미뭔데 이게 개발하는 사람의 필수 소양인 구글링으로 해결해 보았다. 📌 React와 렌더러(React-dom)의 버전이 일치하지 않는 경우위의 경우는 package.json 파일의 의 dependencies 파트에서 확인 가능하다. 문제없음. 통과.  📌 렌더러(React-dom)의 버전이 너무 낮은 경우React-dom의 버전이 16.8.0 이하인 경우에는 Hooks를 지원하지 않아 해당 오류가 발생할 수 있다. 본인의 렌더러 버전을 확인한 후 업데이트해주자. 다만 위의 사진에서 볼 수 있듯 내가 설치한 react-dom은 18.3.1 버전이라... 이것도 해당사항 없음. 통과  📌 React-native마지막으로 해본 방법은 React-native가 ..

/JavaScript  밈 메이커 만들기 (4)/JavaScript    밈 메이커 만들기 (3)/JavaScript  밈 메이커 만들기 (2)/JavaScript  밈 메이커 만들기 (1)/JavaScript https://developer.mozilla.org/ko/docs/Web/API/Canvas_API 엘리먼트를 통해 그래픽을 그리기위한 수romiwaves.tistory.com ... 깃에 푸시한 기록은 있는데 왜 내 로컬 파일에는 한참 전의 버전으로 저장되어 있는지 모르겠다. 브랜치를 잘못 타고 있었다. 바보인가?? 아무튼 4편에서 언급하였던 것처럼 code challenge에 도전하였다. 폰트의 사이즈와 종류를 사용자가 바꿀 수 있도록 하는 기능을 추가하는 것! const fontSelect..

/JavaScript    밈 메이커 만들기 (3)/JavaScript  밈 메이커 만들기 (2)/JavaScript  밈 메이커 만들기 (1)/JavaScript https://developer.mozilla.org/ko/docs/Web/API/Canvas_API 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니romiwaves.tistory.com 📌 Adding Images- 로컬 이미지를 불러와 캔버스와 동일한 크기로 캔버스 위에 뿌려줄 수 있는 코드를 작성하였다. 우선 file을 input으로 받는다. 유의할 점은 type만 설정하면 어떤 형태의 파일이라 할지라도 다 받아온다. 우리가 필요한 것은 이미지를 받아 오는 것이므로, accept를 통해 이미지 파일만 받을 수 있..

/JavaScript  밈 메이커 만들기 (2)/JavaScript  밈 메이커 만들기 (1)/JavaScript https://developer.mozilla.org/ko/docs/Web/API/Canvas_API 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시romiwaves.tistory.com  📌 Mouse Painting- 사용자가 isPainting = true 상태에서 mousemove일 때 그림이 그려져야 한다.function onmove(event) { if(isPainting) { //isPainting 변수를 이미 선언해 둔 상황 ctx.lineTo(event.offsetX, event.offsetY); ..

/JavaScript  밈 메이커 만들기 (1)/JavaScript https://developer.mozilla.org/ko/docs/Web/API/Canvas_API 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디romiwaves.tistory.com  📌 Painting Lines- 캔버스를 클릭했을 때 선을 그리도록 하고 싶다: 그럼 클릭했을 때의 위치 좌표를 알아야 하고, 이론적으로는 (0,0)을 클릭해도 클릭되었다고 떠야 한다.function onclick(event){ ctx.lineTo(event.offsetX, event.offsetY); //클릭한 곳의 좌표 ctx.stroke(); //라인 ..

/JavaScript https://developer.mozilla.org/ko/docs/Web/API/Canvas_API 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용" data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/API/Canvas_API" data-og-url="https://developer.mozilla.org/ko/docs/Web/API/Canvas_API" data-og-image="https://scrap.kakaocdn.net/dn/dinJdB/hyX..