시작하는 중

오픈 단톡방에서 신기한 것을 봐서 정리하려고 한다. 바로.. useState에 함수를 넣는 것 https://github.com/vinitus/useStateHook/blob/master/src/App.tsx GitHub - vinitus/useStateHook: useState 훅 깊게 파보기 useState 훅 깊게 파보기. Contribute to vinitus/useStateHook development by creating an account on GitHub. github.com 내가 만든 예시이다. 중요한 부분을 살펴보자면 // App.tsx ... function one1(): number { console.log('One1 function is called'); return 1; } fu..

https://github.com/vinitus/newpost_refactor GitHub - vinitus/newpost_refactor Contribute to vinitus/newpost_refactor development by creating an account on GitHub. github.com 코드는 여기 간단하게 한 페이지를 리팩토링할 것이다. 이 페이지의 목적은 1. 레시피 게시글 작성이니 만큼 제목, 간단소개, 소요시간, 기준량, 재료, 만드는 단계를 제공해야한다. 2. 이미지는 멀티파트로 보내고, 텍스트들은 application/json으로 보내야한다. 3. 이미지는 드래그 앤 드롭이 가능해야하고, 이미지를 미리보기 할 수 있어야한다. 서버는 없애놨기에 API 요청은 다음과 같이 ..

이미 리액트 라우터는 잘 써왔고, 6.4에 생긴 기능들도 잘 사용하고 있다. 좋은 기능들이 많이 생겼는데, 나도 좀 더 알아보고 정리해두려고 한다. 모든 것을 짚지는 못하고, 중요하다고 생각하는 기능들만 정리할 것이다. 출발~ 리액트 라우터가 무엇인지 간단하게 짚고 넘어가려고 한다. react router의 공식문서에서 React Router enables "client side routing". 리액트 라우터는 "클라이언트 측 라우팅"을 가능하게 한다. 라고 했다. 지금 당장 프로젝트를 하나 만들어서 실행시켜보면 이런 페이지가 나온다. 나는 vite를 사용 중이기에 CRA(createReactApp)과는 조금 다르다. 첫 화면도 다르고 주소도 조금 다른데, vite는 5173 포트를 사용한다. 여기서 ..

iterable 객체 iterable은 영어 뜻 그대로라면, "반복 가능한", "반복 가능"이라는 뜻이다. mdn의 내장 iterable 타입 문서에 따르면, String, Array, TypedArray, Map and Set 는 모두 내장 iterable이다. iterable 객체는 iterable protocol을 따른다. iterable protocol 1. 이 타입들은 for ... of 구문을 사용할 수 있다는 특징이 있다. 2. 전개 연산자 [...]을 사용할 수 있다. 3. 또한, [Symbol.iterator]를 적용할 수 있다는 것이다. Symbol.iterator는 mdn의 문서에서다음과 같이 설명하고 있다. object를 반환하는, arguments 없는 function. itera..