오늘 새벽 찡찡찡찡 거리면서 썼던 이번 작업 회고다. 컴포넌트 분리와 스타일링에 대한 고민을 했었다. 어찌 보면 기초의 기초의 기초를 모른다고 봐도 무방한,,, 컴포넌트 분리를 통해, 유지 보수 용이와 재사용성을 늘리는 것이 리액트의 장점이라고 하는데..... 나는 이런 거 1도 생각 안 하고 그냥 들이박으면서 개발을 하니 기본적인 것도 몰랐던 것이다. 그래서 복잡하게 생각 말고 기본으로 돌아가기로 했다. 그냥 유지 보수하기 편한 만큼까지만 완성하고 분리시켜 버리자! 일단 페이지에 구현할 내용을 하드코딩으로 때려 박고 CSS까지 전부 적용한다. 그리고 완성된 코드를 그대로 복사해서 새로운 컴포넌트를 생성한다. Header 포지션에 위치하기에 컴포넌트 이름을 Header로 설정했다. 기존의 코드를 지우고 ..

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로 돌아오게 했습..