MOLLY

0. 들어가며1. API와 Hook 관리 구조 혼란 → apis 폴더와 hooks 폴더의 역할 분리로 해결2. Next.js App Router에서 default export 에러 발생 → 올바른 props 처리로 해결3. ToastPopup 적용 후 무한 리렌더링 발생 → Token 만료 처리 수정으로 해결  0. 들어가며오늘 작성할 문제보다 더 많은 문제가 있었는데, 작성하기도 뭐 하다 싶을 정도로 자잘한 문제이거나 작성하기 애매한 문제는 과감히 제하였다. 또, 기술 트러블 슈팅은 프로젝트 중간중간에도 올렸기 때문에 오늘은 3가지만 가져와 봤다. 근데 협업보다 기술 트러블 슈팅을 더 작성하기 어려워야 하는데 왜 협업 내용이 더 쓰기 어려웠단 느낌이 드는 거지?.. 혼란하다 혼란해 첫 기술 문제는 AP..

0. 들어가며1. PM 및 Design | 비효율적인 문서 관리 및 소통 방식 개선2. FE & Design | 소통 방식 통일3. 팀 전체 | 팀원 전체의 진행상황 파악이 잘 안 됨 → 팀 전체 생성 요청4. Design | 디자인 시스템에 들어가는 요소의 명확한 기준 부재 → 서로 다른 페이지 3개 이상 들어가면 디자인 시스템으로 들어가는 걸로 확정5. BE | API 명세서 불일치 문제 해결 → 구체적인 수정 요청 후 백엔드와 협의하여 문서 일관성 확보6. PM | 기획을 너무 러프하게 해옴 → 피드백 전달7. 마무리하며 0. 들어가며저번에 갖고 온다고 했던 협업 관련 트러블 슈팅을 들고 왔다 (주섬주섬)프로젝트하며 대략적으로 작성을 해두었지만 막상 블로그에 올리려니 귀찮아져서 조금 미뤘다,,,..

0. 들어가며1. 요청 URL 확인2. API 명세서에 프로토콜이 http가 아니라 https로 작성돼 있어서 s를 추가해 요청3. imageId 중복 요청 삭제4. 해결 | Back-end Code가 POST가 아닌 PUT으로 구현돼있음을 확인 후, HTTP Method 수정해 해결    0. 들어가며 POST http://sandbox-momentia.vsfe.me:8080/v1/image/258 요청이 허용되지 않는 메소드라는 에러가 떴다.  서버의 API 문서대로 구현을 했는데도 해당 에러가 뜨길래 여러 가지 시도를 했다.  1. 요청 URL 확인IMAGE.imageUploadComplete(imageId) 가 올바른 URL을 반환하는지 console.log() 로 확인했다. console.log..

0. 들어가며1. 부트캠프 수료 직후부터 4개월 | 방황의 시간 및 깨달음 너무 두렵고 회피하고 싶었던 것, 그리고 해결책2. 9월부터 12월까지 | 스스로의 이슈 디버깅 (1) 내 발전과 성장이 눈에 보이지 않을 때의 해결책 (2) 한 달 인턴 (3) 프로덕트 캠프 (4) 2024년에 다녔던 컨퍼런스, 세미나, 네트워킹 중 일부 (5) 팀 프로젝트 시작3. 현재 | 진행 중인 팀 프로젝트 & 커밋 리그 1등4. 마무리하며 0. 들어가며2024년 말에 들어서면서부턴 정말 바빠졌다.연말마다 새해로 넘어가는 자정을 기다리고 한 해를 회고하는 시간을 보통 갖곤 했는데, 이번은 그러지 못했다. 새해가 온 줄도 모르고 팀 프로젝트 프로그래밍하기 바빴기 때문이다. 그래서 힘들었냐고?NOPE. 눈코 뜰..

0. 폰트 파일 다운로드 선택 기준1. 폰트 파일 추가2. 로컬 폰트 설정3. Tailwind CSS 설정4. RootLayout 의 body 태그에 폰트 주입5. globals.css 에서 한글 폰트를 font-family 에 주입해 프로젝트 전역에 자동 적용6. 영어는 className 에 font-sans 를 넣어서 사용OTHER | 1. ttf, woff 차이OTHER | 2. 폰트 파일에 이미 굵기가 지정돼있는데 weight: '400' 처럼 또 따로 지정해 줘야 하는 이유  Next.js에서 폰트 전역으로 설정하는 방법이번 프로젝트에서는 영어 텍스트에만 자동으로 Montserrat 폰트를 적용하고, 한글 텍스트는 Pretendard 폰트를 적용하는 것으로 디자인 시스템이 나왔다. 폰트를 불러오..

1) Storybook 사용 이유2) Storybook 설치3) Storybook 세팅4) Storybook 실행   Storybook: UI 컴포넌트를 독립적으로 개발, 테스트, 문서화하는 도구 주로 디자인 시스템을 구축하거나 공용 컴포넌트를 여러 프로젝트에서 재사용하려고 할 때 사용한다. 상태가 복잡한 컴포넌트(UI 상태, 에러 상태 등)를 개발할 때, 디자이너와의 협업 과정에서 컴포넌트를 자주 공유해야 할 때 유용하다. 효율적인 개발 환경을 만들고, 디자인 시스템 구축 과정에서의 혼란을 줄일 수 있다.읽어보면 좋을 자료(https://fe-developers.kakaoent.com/2022/220609-storybookwise-component-refactoring)  1) Storybook 사용 ..

1. 폴더 구조2. Icon.tsx 컴포넌트3. iconSizes.ts: Icon 크기 관리4. tailwind.config.ts 에 제공되지 않는 크기(30px) 추가5. globals.css에서 SVG에 적용할 기본 스타일 설정6. 아이콘 컴포넌트 생성7. 아이콘 사용8. [참고] SVG 최적화 방법 2가지 이번 프로젝트에서는 사용하는 아이콘이 많으므로, 아이콘을 개별적으로 import해서 사용하는 방식이 아닌 Icon.tsx 을 만들어 중앙 관리 컴포넌트를 사용하는 방식으로 관리할 것이다. 직전 프로젝트에서 아이콘의 SVG 코드가 반복되고, 관리가 불편했어서 이번 프로젝트에선 그 부분을 해결하고자 한다. Icon.tsx와 같은 아이콘 컴포넌트를 만드는 이유는 아이콘 관리 및 사용의 일관성과 편의성..

1. 디자인 시스템이 필요한 이유2. 디자인 시스템을 구축하면 좋은 점3. 디자인 시스템 구축 순서 및 방법 (with storybook)  설문 조사에서 디자인 시스템을 사용하는 응답자의 약 90%가 주당 최소 1시간의 작업 시간을 절약했다고 보고했다. 약 50%는 매주 6시간 이상 작업을 절약할 수 있다고 말했다.- Invision DSM ‘디자인 시스템을 왜 도입해야 하는 거지? 🤔’ 라는 의문이 떠오른다면 이 링크(https://yozm.wishket.com/magazine/detail/1830/)를 참고하길 바란다. - 프로젝트 초기에 주요 UI 패턴을 분석하여 디자인 시스템에 반영- 팀의 요구사항에 맞는 워크플로우를 설정하고 지속적으로 개선    1. 디자인 시스템이 필요한 이유1) 중복 개..

(1) 해결을 위한 시도(2) 드디어 해결  Run autofix to sort these imports! (simple-import-sort/imports) 에러 Qodana에서 알려줬던 에러를 해결하고 push 했더니 이번엔 또 import가 정렬되지 않는다는 에러가 생겼다.아니 한 번에 좀 알려주지 왜 자꾸 하나씩 늘어나는 거냐? 그래도 간단하지 않을까 싶었는데, 해결하기까지 생각보다 더인 2시간 반 정도 걸렸다.. 어떤 시도를 했고, 어떻게 해결했는지에 대한 이야기를 이제 시작하겠다.  (1) 해결을 위한 시도1. eslint-config-airbnb와 일부 패키지의 버전 충돌 경고 해결을 위해 호환되는 버전으로 재설치했던 게 문제인가 싶어, pnpm update --latest 명령어를 통해 모..

1. Qodana 에러 | ESLint 패키지가 설치되지 않았거나, 올바르게 설정되지 않아서 발생2. 해결을 위한 시도 및 추측3. 드디어 해결4. Referenced UMD global variable 경고  1. Qodana 에러 | ESLint 패키지가 설치되지 않았거나, 올바르게 설정되지 않아서 발생 우리팀은 Qodana를 통해서 정적 코드 분석을 하고 있다.GitHub Actions를 통해 Qodana를 실행시켜보니 위와 같은 에러가 발생했다. 위 에러는 ESLint 패키지가 설치되지 않았거나, 올바르게 설정되지 않아서 발생하는 에러로, 정적 코드 분석 도구에서 ESLint를 인식하지 못할 때 나타난다.  2. 해결을 위한 시도 및 추측가장 먼저 원인을 예상해보았다. 1. ESLint 패키지 누..