🌊 TIL : 2023년 5월 25일 오늘 한 것 과제 실습으로 나온 story book 으로 컴포넌트를 제작 react hook 복습 잘한 점 상황 간략한 상황 설명 - 솔로프로젝트 리팩토링을 하며 공통 컴포넌트를 분리하며 storybook을 제작해보았다. 액션 - 두 컴포넌트를 공통으로 분리하였는데, 자꾸 오류가 발생하였다. 분명 방금 전 까지만 해도 괜찮았었는데, FilterButton 컴포넌트를 제작한 후로 작동되지 않아 코드에 문제가 있는 것은 아니라고 생각하였다. 검색해보니 React에서 undefined를 반환하고 있어 생긴 문제였다. Alert의 코드는 변경하지 않았기 때문에 다른 이상이 있을 거라 생각하지 않아 그저 새로 작성한 Alert.stories.js 파일만을 고치려고 노력하였다...

🌊 TIL : 2023년 5월 24일 오늘 한 것 styled-component 실습 story book 라이브러리 클론 코딩 어려웠던 부분 storybook 옵션이 자꾸 헷갈린다. 이 부분은 조금 더 공식 문서를 읽으며 파악해가야 할 것 같다.

🌊 TIL : 2023년 5월 22, 23일 갑작스레 가족 경조사가 생겨 부트캠프 22일 일정 종료 후 지방에 다녀왔습니다. 23일을 불참하게 되어 혼자 진도 따라잡기용 자습하였습니다. 오늘 한 것 react custom hook 코드 분할 그림으로 배우는 HTTP Network Basic - HTTP프로토콜, HTTP 메세지, 상태코드 custom component

🌊 TIL : 2023년 3월 14일 오늘 한 것 useMemo useCallback TanStack Query

🌊 TanStack Query (리액트 쿼리) * 아직 공부 중입니다. 리액트를 사용하여 개발하면 웹에서 데이터를 받아 관리해야하는 일이 많습니다. React Query, 현재는 이름이 변경된 TanStack Query는 강력한 비동기 상태 관리 라이브러리로, 서버의 데이터를 클라이언트에 가져오거나 캐시를 관리, 데이터 업데이트 등 비동기 과정을 더욱 편하게 하는데 사용됩니다. 예를 들어, useEffect로 데이터를 받아오는 컴포넌트를 만들고 그 컴포넌트를 다른 컴포넌트에서 호출하였을 때, 값을 재사용하거나 같은 상태를 공유하는 것이 아닌, 컴포넌트를 호출하는 여러 컴포넌트를 걸쳐 계속해서 새로운 값을 받아오며 네트워크 통신이 발생하게 됩니다. 따로 캐싱을 관리하지 않아서인데요. TanStack Que..

🌊 TIL : 2023년 5월 18일 오늘 한 것 솔로프로젝트 nav 기능 수정 → 페이지 이동 및 nav를 제외한 영역 클릭시 nav close 북마크가 없을 때나, 빈 페이지, 페이지 주소 잘못 입력하여 접근 시 출력 되는 컴포넌트 작성 접근성을 위한 css 수정 느낀점 merge는 신중히 해야한다.. 이미 merge 했는데 갑자기 콘솔에 에러가 출력되어 코드 한줄 수정하고 pr 하기를 반복했는데 꼼꼼히 더 확인했으면 없었을 에러인데 자책하였다.. 오늘 솔로프로젝트 마지막 날이었는데, 완성은 하였지만 사실 아직도 redux-toolkit은 와닿지 않고 억지로 짜내서 만든 것 같다 ㅠㅠ 조금 더 많은 경험을 쌓으면 자연스럽게 코딩을 할 수 있을까.. 기대 한다. 오늘은 일찍 자야지!! (근데 벌써 1시..

🌊 Coz Shopping 코드스테이츠에서 진행한 일주일간의 솔로 프로젝트로, 메인페이지/상품리스트 페이지/북마크 페이지로 이루어져있는 SPA 웹페이지입니다. 깃허브 https://github.com/dreamogu/fe-sprint-coz-shopping GitHub - dreamogu/fe-sprint-coz-shopping Contribute to dreamogu/fe-sprint-coz-shopping development by creating an account on GitHub. github.com 기술 스택 JavaScript React.js Post.css Yarn redux, react-redux, redux/toolkit ESLint Prettier React-Router-Dom R..

🌊 TIL : 2023년 5월 17일 오늘 한 것 솔로프로젝트 무한 스크롤 구현 filter 리팩토링 어려웠던 부분 새로운 라이브러리를 사용하는 것이 낯설게 느껴졌다. 무한스크롤이 원래는 페이지로 쪼개서 스크롤이 내려가면 페이지가 1이되고, 추가로 데이터를 요청해야 했는데, 현재 사용하고 있는 api에선 10개 이하의 데이터 또는 100개만 가지고 올 수 있어 100개를 전체 다 가져온 후, 페이지로 나눠 스크롤이 내려가면 페이지 상태가 1씩 증가하고, 그만큼 곱하여 상품 배열을 slice하여 출력하였는데. 처음 사용해보는 라이브러리라 찾아보는데 꽤 걸렸습니다. 느낀점 인터넷에 많은 내용이 있어도 내가 스스로 써봐야 라이브러리에 대한 이해도를 높일 수 있는 것 같다. 무한스크롤 라이브러리를 사용하면서 계..