MOLLY

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 패키지 누..

1. 왜 eslint-config-prettier와 eslint-plugin-prettier를 사용할까?2. 설치 및 설정 방법3. .eslintrc.json 파일의 불필요한 항목 정리4. 정리 완료한 .eslintrc.json 파일 ESLint를 사용하여 팀으로 코드 스타일과 규칙을 동일하게 하면 코드 스타일의 일관성이 지켜지고 협업을 원활하게 할 수 있다. 하지만 우리가 지정한 ESLint 패키지와 옵션 때문에 매우 번거롭고, 개발 속도가 늦어질 것을 우려해서 Prettier와 통합해 코드 자동 정렬과 포맷 충돌 방지를 하려고 한다. 코드를 저장할 때마다 코드 스타일이 Prettier 규칙에 따라 정렬되고, ESLint와 충돌하지 않도록 관리하면 더 편해지고 개발 속도 또한 더 빨라지지 않을까? 이..

1. eslint-config-airbnb 사용 이유2. eslint-plugin-simple-import-sort 사용 이유  1. eslint-config-airbnb 사용 이유: eslint-config-airbnb는 엄격한 규칙을 기반으로 하고 있지만, 필요에 따라 설정을 커스터마이징하여 팀의 요구에 맞출 수도 있음   최신 JavaScript와 React 프로젝트에 강력한 가이드라인을 제공하는 것이 가장 큰 장점 [결론] 사용하는 이유- 품질 보장: 코드의 안정성과 오류 방지- 협업 최적화: 팀 간 일관된 코드 스타일 유지- 최신 기술 지원: React와 ES6+ 규칙 내장- 생산성 향상: 접근성과 유지보수성 강화  (1) 엄격하고 일관된 코드 스타일- Airbnb 스타일 가이드는 엄격한 규칙을..

목차 >1. 로컬에 폰트 파일 저장2. layout.tsx에서 폰트 주입3. font를 className에 일일이 넣지 않아도 글로벌로 적용되게 하는 법4. 폰트, 자간/행간 적용된 결과물5. 색상 적용하는 법  1. 로컬에 폰트 파일 저장가장 먼저 폰트를 저장해야 한다.  public 폴더에 font를 넣으면 반영되지 않고, Next.js의 에러가 뜬다.그래서 font는 꼭 app 폴더 하위에 넣어줘야 font가 잘 반영된다. 로컬에 폰트 파일을 저장해 사용하면 성능, 안정성, 보안 측면에서 유리하단 이점이 있다. 1. 성능 향상: 폰트 파일을 서버(CDN)가 아닌 로컬에서 불러오므로 네트워크 요청 지연을 줄여 로딩 속도가 빨라짐. 캐싱이 더 효율적이며, 브라우저가 폰트를 빠르게 로드함2. 외부 의존성..