전체 글
-
무한스크롤 커스텀 hook코드잇 2024. 6. 10. 21:12
서문이전의 포스팅 중 하나인 [BLOB] 프로젝트 회고의 프로젝트에서 무한스크롤 구현하면서 발생한 문제와 이를 해결한 방식을 담고 있습니다. 구현무한스크롤데이터 가져오는 과정과 로딩 및 에러 처리를 쉽게 구현하기 위해 React Query의 useInfiniteQuery 훅 이용ViewPort에 보여지는 요소를 체크하기 위해 react-intersection-observer의 useInView 훅 이용 처음 무한스크롤 훅 코드 부분export default function useInfiniteQueries(variant: 'feedPage') { const queryKey = [variant]; let queryFn; // variant에 따라 다른 queryFn을 사용 if (variant =..
-
[BLOB] 프로젝트 회고코드잇 2024. 6. 9. 23:26
프로젝트 소개혹시 여행 중 오래된 정보나 부정확한 정보로 인해 불편함을 겪은 적이 한번쯤 있지 않으신가요? 또한 교통상황, 사건 사고 등 여행 중 실시간으로 업데이트되는 정보들을 모아볼 수 있는 곳이 없어서 . 날씨 이슈로 행사가 취소된다든가, 시시각각 바뀌는 현지 상황을 알지 못해 여행 중 예기치 못한 일들을 겪게 되기도 합니다.이러한 불편함을 해결하기 위해 블롭이라는 서비스를 생각하게 되었습니다. 문제 해결 과정은 여기 링크 참조 해주세요.무한스크롤 커스텀 hook카테고리 버튼 상태관리 / 컴포넌트 props 분리 협업각자 분업하는 것이 아닌, 협업을 하는 것에 중점을 두고 기획과 코드 컨벤션을 맞추는데 시간을 많이 투자했다. 프론트엔드 5명, 백엔드 2명, 디자이너 1명과 같이 협업을 시작했다...
-
scss 에서 global styles가 스토리북에 적용안되는 문제코드잇 2024. 5. 3. 16:22
Storybook에서 SCSS로 작성된 전역 스타일을 적용하려면, .storybook/preview.js 파일에서 해당 SCSS 파일을 import해야 합니다.예를 들어, global.scss라는 전역 스타일 파일이 있다면, 다음과 같이 import할 수 있습니다:import '../styles/global.scss'; 이렇게 하면, Storybook에서 global.scss 파일의 스타일이 적용됩니다.또한, SCSS 파일을 처리하려면 Storybook의 webpack 설정을 수정해야 합니다. .storybook/main.js 파일에서 webpackFinal 설정을 다음과 같이 추가하세요:이제 Storybook에서 SCSS로 작성된 전역 스타일을 적용할 수 있습니다. module.exports = { ..
-
[리팩토링] 클라이언트에서 쿠키 설정 js-cookie코드잇 2024. 3. 30. 15:38
이전에 올린 Taskify 프로젝트 리팩토링을 진행하였다. 토큰을 로컬스토리지에 저장했는데 이 부분을 쿠키에 저장하는 코드로 바꾸었다. 로그인 요청을 했을 때, 서버에서 accessToken을 header에 set-cookie로 보내지 않고 body에 저장해서 보내고 있었다. 그래서 이전 코드에서는 로컬 스토리지를 이용해 토큰을 저장했다. 로컬 스토리지에 저장할 경우 보안상의 위험이 있다고 한다. js-cookie 라이브러리를 이용하면 클라이언트에서도 쿠키를 저장하고 읽을 수 있다. api에서 리프레쉬 토큰을 주지 않아서 똑같이 보안상의 위험이 있다. 그래도 나중에 리프레쉬 토큰을 백엔드에서 줄 수도 있기 때문에 미리 토큰으로 저장하는 코드를 작성했다. 참조 링크 https://www.npmjs.com/..
-
[Taskify] 프로젝트 회고코드잇 2024. 3. 26. 15:00
개발 기간 : 3.8~ 3.25 거의 3주간의 프로젝트를 진행했다. 프로젝트 주제는 노션과 비슷한 일정관리 서비스이다. 😄 좋았던 점저번 프로젝트에서 문제점이었던 부분을 해결하려고 노력했다. hooks 사용을 해서 파일안에 기능적인 부분은 모두 hooks로 분리시켰고, 코드 가독성이 좋아졌다. 😢 아쉬웠던 점많이 나태해졌던 것 같다. 기능 구현을 일주일이면 가능하다고 예상했고, 시간이 남을거라고 생각해서 천천히 진행해버렸다.그리고 에러가 마주쳤을 때, 해결하지 않고 일단은 나중에 처리해야지 라는 안일한 생각을 가져버렸다. 문제 상황이 발생했을 때 해결 과정을 기록을 하지 않은게 아쉽다. 다음에는 문제가 왜 발생했는지. 어떻게 개선해 나갈 건지. 개선한 코드에 대한 설명을 정리하도록 작성해보자. ..
-
[위클리 회고] 3월 2주차위클리 회고 2024. 3. 17. 23:31
다음 주에 끝을 내야하는데 생각보다 구현을 많이 못했다. 새로운 기술을 쓰다보니 늦어지게 되는 것 같다. 👍 Keep - hooks를 프로젝트에서 처음 사용해보았다. hooks는 기능별로 나누거나 공통적으로 쓰일 때 나눌 수 있다. react에서 공통적으로 쓰이는 부분을 hooks로 따로 뺐다. 🥹 Problem - 꼼꼼함이 부족해졌다. 기능 구현에 집중하고 자잘한 부분은 나중으로 미뤄버리는 나쁜 습관이 생겼다. 👊 Try - 특히 api 요청 후 에러처리를 대충했던 것 같다. 나중에 하자고 하고 결국 못하는 경우가 저번 프로젝트 때 생겼기 때문에, 눈에 보이는 부분은 할 수 있을 때 하도록 하자. - PR을 잘게 나눠서 보내도록 노력해야겠다. PR 수정사항이 길어질수록 팀원들이 보기 힘들어 지기 때문..
-
[위클리 회고] 3월 1주차위클리 회고 2024. 3. 12. 13:13
목요일 부터 중급 프로젝트가 시작되었다. 이번 프로젝트에서는 공통 컴포넌트 나누기, hooks에 익숙해지는게 목표다. 👍 Keep - 팀원들과 공통 컴포넌트를 피그마로 잘 나누었다. 서로 겹치는 공통 컴포넌트를 따로 표시하였고, 공통 컴포넌트 역할 분배도 하였다. 🥹 Problem - 자리에 앉아서 공부를 시작하는게 힘들다. - 블로그를 2월 1일 이후로 작성을 안했다. - 이번 프로젝트에서 새로운 기술들을 도입했는데 아직 공부가 부족하다. 👊 Try - 공부 시작하는게 힘들 때, 자리에 앉아서 딱 10분만 집중해서 공부해보자. - 위클리 회고를 통해서 1주에 최소 한 번이상 블로깅을 할 생각이다. - 한 번에 다 학습하려고 하지말고, 필요할 때 학습하는 식으로 공부하자.