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와 같은 아이콘 컴포넌트를 만드는 이유는 아이콘 관리 및 사용의 일관성과 편의성..