https://www.udemy.com/course/clean-code-react/udemy의 '클린코드 리액트' 강의를 듣고 정리했습니다.    State 컴포넌트 상태, 전역 상태, 서버 상태와 이를 관리하기 위한 행동들이 있다. 상태란 사물, 현상이 놓여있는 모양이나 형편을 뜻하며, 예시로는 '무방비 상태', '건강상태', '기차가 끊긴 상태' 등등이 있다.  상태는 언제 바꾸는지, 최적화는 언제 해야 할지, 불변성은 왜 필요할지 등을 고민해봐야 한다.     올바른 초기 값 설정초기 값가장 먼저 렌더링 될 때 순간적으로 보일 수 있는 값당연히 초기에 렌더링 되는 값.   초기값을 지키지 않을 경우렌더링 이슈, 무한 루프, 타입 불일치로 의도치 않은 동작으로 런타임 에러가 생길 수 있다.넣지 않으면..

https://www.udemy.com/course/react-query-react/ udemy의 'React Query / TanStack Query : React로 서버 상태 관리하기' 강의를 보고 정리했습니다. Query Key post에 해당하는 댓글을 가져오기 위해, 동일한 로직으로 댓글을 불러왔다. 하지만 다른 게시글임에도 불구하고 동일한 코멘트가 렌더링 된다. 다른 포스트를 불러와도 모두 같은 코멘트가 보이게 된다. 이유는 위에서 사용한 queryKey 때문이다. 모든 쿼리 키에 ‘comments’라는 동일한 쿼리 키가 적용되어 있다. 리액트 쿼리에서는 쿼리 키가 동일한 경우 해당 쿼리의 데이터는 이미 캐시 되어 있으므로 새로운 데이터를 가져오지 않는다. 대신에 트리거가 발생했을 때, 새로운..

https://www.udemy.com/course/react-query-react/ udemy의 'React Query / TanStack Query : React로 서버 상태 관리하기' 강의를 보고 정리했습니다. 리액트 쿼리란? TanStack Query는 리액트 앱의 서버 상태를 관리하는 라이브러리이다. 클라이언트 상태란 웹 브라우저 세션과 관련된 모든 정보를 의미한다. 이는 서버와 관련이 없다. 서버 상태는 클라이언트에 표시하는데 필요한 데이터를 말하며, db에 저장되는 블로그 게시물 데이터 등이 이에 해당한다. 게시물을 표시하기 위해 클라이언트에 데이터가 있어야 하지만, 데이터는 여러 클라이언트에 표시될 수 있도록 서버에 저장된다. 리액트 쿼리는 클라이언트에서 서버 데이터 캐시를 관리한다. 리액..

최근에 프로젝트 api 주소를 github에 올렸다가 서버비 폭탄 맞고 ncp에 구제 요청하는 상상을 해본 적이 있습니다. 그런 김에 해결책을 찾아보았는데요 마침 '환경변수'를 이용하는 방법을 찾았습니다. 왼쪽의 파일은 .env 파일이고, 이 파일을 gitignore에 입력하여 github에 올라가지 않게 합니다. 그리고 컴포넌트에서 오른쪽처럼 사용하면 특정 문자열을 숨길 수 있습니다. 지금까지 환경변수를 사용해본 적은 없지만, 다른 사람의 프로젝트를 참고해서 쉽게 사용해 봤습니다. 하지만 역시 인생은 쉽지 않습니다. 바로 process가 not defined 라네요. 어떻게 써봐도 안 돼서 문제점을 더 찾아보다가, vite에서는 환경변수 사용법이 다르다는 것을 알게 되었습니다. 위의 방법은 CRA에서 ..

기존의 디자인은 사진을 교체할 필요 없이, CSS 설정만 하면 됐었습니다. 하지만 변경된 디자인에서는 두 개의 사진을 교체하는 작업이 필요하게 됐습니다. 조건은 두 가지입니다. 1. 버튼 클릭하면 두 번째 사진이 렌더링 되고, 클릭을 떼면 다시 첫 번째 사진으로 돌아오기 2. ★버튼을 누르는 동안 두 번째 사진이 유지★ 정말 간단해 보일 수도 있으나, 이를 위해 여러 번의 눈물겨운 삽질이 있었습니다. 1. 조건부 렌더링 처음 시도해 본 방법은 useState와 삼항연산자를 통해 조건부 렌더링을 하는 것이었는데요, 클릭할 때마다 T/F값이 변하며, 변하는 T/F값에 따라 다른 사진을 렌더링 하는 방식입니다. 단 true로 변경되어도, setTimeout을 통해 0.2초 뒤에 다시 false로 돌아오게 했습..

https://studysmart.tistory.com/126 리액트 사진 슬라이드 구현하기 이번 프로젝트의 서비스 소개 페이지가 슬라이드 형식으로 구성되어 있기에, 연습 겸 슬라이드를 구현해 볼 겁니다. 시작에 앞서 인터넷에서 맘에 드는 사진 3개를 다운받아서 기본 세팅을 했습 studysmart.tistory.com 지난번에 만든 슬라이드에 모바일 터치 슬라이드를 추가해 볼 겁니다. 지난번 코드에서 useRef를 통해 사진을 감싸는 div를 참조해줍니다. 그리고 터치가 시작된 위치와 끝난 위치를 저장하기 위한 touch State도 생성합니다. 모바일 화면의 터치를 구현해야 하기에, onTouchStart, onTouchMove, onTouchEnd 이벤트를 이용합니다. 참조하고 있는 div태그 내에..