● 3~4일차 작업 분배 ❍ Comment.tsx~ infinite Query 훅처리 (준석) query Invalidation, query mutation hook 으로 처리하기 (Comment.tsx) FeedComment, Comment 로직 통일하기 (분리의 필요성을 못 느끼겠어요) ❍ useQuery hook처리 (다은) 중복적으로 쓰이는 useQuery hook으로 처리하기 생각보다, 2일차때 작업했던것들이 시간이 오래걸려 주말까지 넘어가 작업을 이어했습니다. 오늘 8월 14일(월)요일에 useQuery hook처리를 한 이후에 준석님과 함께 1차목표를 달성하였습니다. :) 오늘은 서로 주말동안 작업한 코드리뷰와 함께, 2차목표를 세우는 작업이 주였습니다. ● useQuery hook으로 처리..
CodeStates BootCamp
● 2일차 작업 분배 ❍ Comment.tsx(준석) query Invalidation, query mutation hook 으로 처리하기 (Comment.tsx) FeedComment, Comment 로직 통일하기 (분리의 필요성을 못 느끼겠어요) ❍ Header.tsx(다은) Header query → hook으로 분리 (myPage를 키로 하는 query호출이 여러 곳에서 이루어집니다. ) Header Container 컴포넌트로 분기 처리 하기 (같은 JSX 코드가 반복) ● Header.tsx query hook처리하기 먼저 로직분리를 하려고 Header.tsx를 봤더니 떡하니 쿼리가 있었읍니다.. 저희는 모든 쿼리와 뮤테이션을 hook으로 만들어서 처리하는게 좋지 않겠냐는 이야기가 있었기 때문..
저희 팀은 query와 mutation 관련된 함수들을 src > api 폴더로 만들어 따로 관리하였었는데요, 로직을 나누고 작업을 하면서 각자 작업하다보니 중복이 생긴지 모른채 작업했었답니다ㅠ_ㅠ;; 게다가 작업을 같이 병행하면서 중복을 제거하는게 쉽지 않았기때문에 프로젝트가 마무리되기 이전에도 수정하지 못했었어요. 배포 후 터진 에러들이 많았기 때문에.. 그래서 프론트엔드 팀원이신 한분과 함께 같이 리팩토링을 진행하게 되었습니다. ● 1일차 작업 분배 ❍ queryfn.ts (준석) 중복되는 로직 삭제 (getWalkmateList ) ❍ mutationfn.ts (다은) post, patch, delete 요청에 맞춰서 함수명 통일하기 (현재 add, edit, delete.. 마구잡이임) + 겹치..
이전에 react-observer-intersection로 무한스크롤을 구현한적이 있었는데요, 메인 프로젝트에서도 무한스크롤을 구현해야했기 때문에 적용예시 코드를 찾아보았습니다. 인피니티 쿼리로 무한스크롤 구현하려고 하니, 막상 막막했습니다. https://codesandbox.io/p/sandbox/github/tanstack/query/tree/main/examples/react/load-more-infinite-scroll?embed=1 @tanstack/query-example-react-load-more-infinite-scroll Synced template from GitHub @tanstack/query at /examples/react/load-more-infinite-scroll cod..
현업에서 styled-components 아니면 emotion을 많이 쓴다고 해서 emtion 쓰는 법을 정리 해보려고 합니다.. styled-components는 너무 많이 써봤기 때문에 emotion을 써보려합니당당구리 ● css 모듈만 사용하기 npm create vite@latest vite 프로젝트를 만든 후, npm i @emotion/react 이모션을 설치해줍니다. 이후, tsconfig.json 파일에 아래 코드를 추가해 설정해줍니다. "jsxImportSource": "@emotion/react", 그럼 끝 !! import { css } from '@emotion/react' export default function App() { return ( Hover to change colo..
대략 코드작성 및 배포를 마치고, 제가 코드 작성 시 마주했던 문제점들에 대해 하나씩 정리해볼까 합니다.. 저는 이미지 미리보기를 구현해야했는데, type이 file인 input을 클릭 후 이미지를 올리면 이미지가 보이지 않는 문제를 마주했었습니다. 그래서 input을 통해 받아오는 이미지의 형태가 어떤건지 콘솔에 찍어보았더니, 파일형식으로 이미지를 받아오는 것을 확인할 수 있었습니다. 처음 접해보는 파일 형식.. 이게 무엇인가..? 이 객체 형태 그대로 img 태그의 src속성으로 직접적으로 주입하니 이미지가 보이지 않았습니다. 그래서 이게 왜그런가..? 그리고 대충인터넷을 뒤적거렸더니 base 64 로 변환해서 주입해야한다는 블로그 글을 보고 해결을 하긴 했지만, 어떻게 제가 해결했는지 이해가 되지 ..
