코드잇
-
카테고리 버튼 상태관리 / props 분리코드잇 2024. 6. 13. 21:48
서문이전의 포스팅 중 하나인 [BLOB] 프로젝트 회고의 프로젝트에서 카테고리 버튼 상태관리를 구현하면서 발생한 문제와 이를 해결한 방식을 담고 있습니다. 카테고리 버튼 상태관리 (문제)1. 메인 카테고리의 화살표 상태는 최근에 클릭한 메인 카테고리 하나만 true로 바뀌어야 한다.서브 카테고리는 메인 카테고리의 종류에 따라서 색상과 상태가 바뀐다. 예를 들어 '추천' 카테고리에서 서브 카테고리인 '음식점'을 클릭한 후, '비추천' 카테고리를 클릭하면 화면 상에서는 서브 카테고리가 아무것도 클릭되지 않은 상태가 되어야 한다. 2. 카테고리 버튼은 글쓰기 모달과 필터링 모달에서 사용된다. 글쓰기 모달은 카테고리 버튼이 단일 선택만 가능하지만, 필터링 모달에서는 중복 선택이 가능하다. (해결책 도출)1...
-
무한스크롤 커스텀 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로 분리시켰고, 코드 가독성이 좋아졌다. 😢 아쉬웠던 점많이 나태해졌던 것 같다. 기능 구현을 일주일이면 가능하다고 예상했고, 시간이 남을거라고 생각해서 천천히 진행해버렸다.그리고 에러가 마주쳤을 때, 해결하지 않고 일단은 나중에 처리해야지 라는 안일한 생각을 가져버렸다. 문제 상황이 발생했을 때 해결 과정을 기록을 하지 않은게 아쉽다. 다음에는 문제가 왜 발생했는지. 어떻게 개선해 나갈 건지. 개선한 코드에 대한 설명을 정리하도록 작성해보자. ..
-
[오픈마인드] 프로젝트 회고록코드잇 2024. 2. 1. 20:33
오늘 프로젝트 발표를 했고, 프로젝트 일정은 끝이 났다. 오픈 마인드는 익명의 사용자들이 질문과 답변을 하는 서비스이다. 😄 좋았던 점 최대한 깃허브를 이용해서 작업한 부분이 좋았다. 개인 레포지토리를 파서 서로 포크하는 방식이 아닌 팀 레포지토리를 파서 포크하여 공동 작업자로 작업했었다. 이외에도 이슈들을 칸반보드로 오늘 할 일과 끝난 일 관리, 플랜트 플로우로 프로젝트 일정 관리, 위키 문서에 팀 규칙과 컨벤션 정리, 디스커션탭을 이용하여 팀원들의 회고를 정리했었다. 덕분에 깃허브에 대한 숙련도가 올라갔다고 생각한다. 깃허브 주소 https://github.com/OPENMIND-TFT/OPENMIND GitHub - OPENMIND-TFT/OPENMIND: 질문과 답변을 나누는 플랫폼 OpenMin..
-
[오픈마인드] 하위 컴포넌트 안에서 전체화면 모달 띄우기코드잇 2024. 1. 31. 15:53
하위 컴포넌트 안에서 전체화면 모달 띄우기 프로젝트 추가 기능으로 삭제 버튼 클릭 시 모달이 나오게 기능 구현했다. 하위 컴포넌트 안에서 모달을 만들고 width: 100%를 해도 컴포넌트 안에서만 모달이 생성된다. 하위 컴포넌트의 모달도 전체 화면에 가득차게 보여주고 싶다. z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; z-index만 넣으면 되는 문제였는데 context api를 써서 어떻게든 해결하려고 했던 것 같다. 여기서 top: 0만 썼었는데 left: 0을 추가시켜줘서 화면 끝에 오도록 맞춰주었다.