보통 개발환경 세팅을 할 때 CRA(Create-React-App), Vite, CNA(Create-Next-App)과 같이 간단하게 프로젝트를 구성할 수 있는 방법을 많이 사용하다보니 tsconfig.json 파일을 직접 작성할 경우가 많이 없었던 것 같습니다. 혹은 TypeScript만으로 프로젝트를 한다고 해도 tsc -init과 같은 명령어를 이용해서 세팅하고 자세히 들여다 보는 경우가 없어서 tsconfig.json 파일의 옵션들에 대해서 제대로 알기가 어려웠는데 이번에 react-world 프로젝트를 진행하면서 다시 찾아보게 되었습니다. 아래 소스코드는 react-world 프로젝트에서 작성한 tsconfig.json 파일입니다. // tsconfig.json { "compilerOptions..
NEXTSTEP의 react-shopping-cart 미션을 진행하던 중에 아래와 같은 상황을 접하게 되었습니다. ProductList라는 컴포넌트는 props로 타입이 Product인 product를 받아서, Product 컴포넌트의 props로 전달하면서 Product 컴포넌트를 렌더링해주고 있는데요. 글로 보면 상당히 혼란스럽네요. 그 이유는, 상품 목록을 화면에 출력해주기 위한 컴포넌트인 Product와, 리모트 데이터 스키마인 product의 타입인 Product가 같은 네이밍을 사용하고 있어서 그렇습니다. 처음에는 고민을 좀 했었는데요. 저는 타입스크립트의 interface나 type alias에 I, T와 같은 prefix를 붙이기 보다는 다른 방법으로 해결하고 싶었기 때문입니다. 고민했던 ..
Vue에서 data를 html template에 바인딩하기 위한 방법으로 Text Interpolation 문법이 있습니다. 문법은 "Mustache"의 문법을 사용하였고 아래와 같습니다. msg라는 식별자의 값이 변경이 될 때마다 업데이트됩니다. mustache tag는 vue의 데이터인 msg의 값으로 대체되는데요. msg라는 식별자의 값이 "Hello!"였다면 다음과 같이 변환이 됩니다. React와 비교해 보면 JSX에서 JavaScript의 표현식을 사용하기 위한 {} (curly braces syntax)와 동일하다고 볼 수 있을 것 같습니다. 그런데 표현되는 형식이 React의 {} 와는 차이가 있는데요. 바로 참조형 타입에 한해서입니다. React의 경우에는 만약에 msg라는 식별자의 값이..
선언형 프로그래밍, 모듈화. 코드를 읽기에 너무 편하다. 바닐라 자바스크립트로 짜는 코드도 참 매력있다. 중복은 무조건 제거하는 것. 프론트엔드에서의 상태 관리. 화면에 그려져야 할 데이터를 관리하는 것. 하루아침에 만들어질 수는 없고 의식하면서 계속 코드의 퀄리티를 높여 가는 것이 중요하다.
무조건 코드는 선언형으로 짤 것, 순수 함수로 짤 것 함수를 실행하는 쪽에서는 함수명만 보고도 코드의 동작을 알 수 있게끔 변수 명도 신경 써서 잘 짜야한다. remove delete update modify 비슷한 단어들이 있을 때 하나만 통일해서 써야한다. 비슷한 역할을 하는 코드끼리 위치를 모아서 정리하기 작성을 완료한 코드는 편집기의 코드 접기를 이용해 접어두고 흐름만 파악 리팩터링을 할 때는 너무 큰 범위로 하면 안 되고 작은 단위로 하면서 무조건 테스트 리팩터링엔 유닛 테스트가 꼭 필요하다, 필수 기존에 있던 A 기능을 리팩터링 했을 때 A가 제대로 동작하는지 + 다른 기능들이 문제없이 동작하는지 새롭게 B 기능을 추가했을 때 기존에 있던 A 기능이 정상적으로 동작하는지 실 서비스에서는 기능이..
하나의 이미지만 다운로드 받기 // download: (클릭하면) 다운 받아지게 되는 이미지 명 // href: 이미지 경로 특정 버튼을 클릭하여 다운로드 받고 싶은 경우에는 useRef 훅을 이용하여 a 태그에 ref를 걸고 버튼을 클릭했을 시에 aRef.current.click() 이런식으로 구현합니다. 캡처 이미지(브라우저의 이미지)를 canvas를 이용해서 다운로드 받기 (html2canvas 라이브러리) import html2canvas from 'html2canvas'; import Karina from './karina.png'; const Main = () => { const onCapture = () => { // html2canvas에서 html에서 캡처를 할 tag를 매개변수로 넣어주..
이벤트 콜백함수에 매개변수를 넣지 않아도 되는 경우에는 콜백함수를 바로 작성해야 컴포넌트가 Unmount 되었을 시에 이벤트를 remove 할 수 있습니다. 함수로 콜백함수를 한 번 감싸주게 되면 React.Strictmode에 의해 useEffect가 2번이 실행이 되는데 addEventListener와 removeEventListener에서 콜백함수를 감싸고 있는 함수의 주소가 다르기 때문에 cleanup이 되지 않아서 이벤트가 2번이 등록되게 됩니다. (removeEventListener에서 이벤트 삭제가 안됨) React.Strictmode가 useEffect를 2번 호출하는 이유는 이런 cleanup같은 예시를 포함하여 컴포넌트가 제대로 작동하는지 확인하기 위함인데 이벤트가 2번씩 등록되는 문제..
React Query 사용하기 먼저 react-query 라이브러리를 프로젝트에 설치해야 합니다. npm install react-query yarn add react-query 그 후에, queryClient를 생성합니다. client는 쿼리와 캐시를 관리합니다 QueryClientProvider를 적용합니다. React Query의 캐시와 client 설정을 자식 컴포넌트들이 사용할 수 있도록 합니다. queryClient를 props로 받습니다. useQuery를 실행합니다 useQuery는 서버로부터 데이터를 fetch하는 hook입니다. App.jsx [코드 1-2] React Query 세팅 react-query 라이브러리로 부터 QueryClient와 QueryClientProvider를 i..
