MOLLY

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. 외부 의존성..

(1) 브랜치 종류(2) Git Flow 사용한 개발 흐름(3) Git Flow, 언제 사용하면 좋을까?  Git Flow 전략 Git Branch 전략은 여러 가지가 있지만, 대표적으로 여러 프로젝트에서 널리 사용되고 있는 대표 브랜치 전략 중 하나인 Git Flow에 대해서 알아보도록 하자. (위 출처의 내용 중 필요한 부분만을 뽑아서 요약했다는 것을 참고해주었으면 좋겠다.) Git Flow는 가장 전통적으로 많이 사용되는 방식이다.  (1) 브랜치 종류1. master: 제품 출시 버전을 관리하는 메인 브랜치2. develop: 다음 출시 버전을 위해 개발하는 브랜치3. feature: 새로운 기능을 개발하는 브랜치4. release: 다음 출시 버전을 준비하는 브랜치5. hotfix: 출시된 제품..

0. 한 줄 요약1. unknown 타입2. never 타입3. enum 타입  TypeScript의 unknown, Never, 열거형인 enum 타입의 개념 및 특징에 대해 알아보자.  0. 한 줄 요약- unknown: 타입을 모를 때 안전하게 처리하려고 사용- never: 절대 실행되지 않을 코드를 명시- enum: 한정된 값의 집합을 정의하여 가독성과 유지보수를 높임  1. TypeScript 컴파일러 옵션 중 암묵적인 any 타입 비허용 옵션 on   1-1) [효과] 개발자가 냅다 any 타입으로 작성하고 잊어서 코드가 JavaScript처럼 동작하는 상황을 미연에 방지 가능 ⇒ 안정적인 개발 가능   1-2) [방법] tsconfig.json 파일에서 noImplicitAny 옵션을 tru..

1. Page Router2. App Router (Next.js 13+)3. 주요 차이점  Next.js 공식 문서: https://nextjs.org/docs/app/building-your-application/routing Next.js에서의 Routing 방식은 총 2가지다.전통적인 파일 라우팅 방식인 Page Router와 서버 중심의 렌더링 최적화를 제공 중인 새로운 라우팅 방식인 App Router. 이 둘의 차이점과 Next.js에서 추천하고 있는 라우팅 방식에 대해 알아보자. 결론부터 말하자면, Next.js에선 App Router를 추천 중이다.정확히 어떤 차이가 있길래 Next.js는 App Router를 추천할까?바로 App Router에서는 최신 기술과 구조적 이점을 최대한 활용..

1. Git 초기 세팅 명령어(1) npm으로 pnpm을 전역에 설치(2) Next.js 설치(3) Tailwind CSS 설치 및 세팅(4) TanStack Query, Zustand 설치 및 세팅(5) eslint-config-airbnb 설치 및 세팅(6) .gitignore(7) 끝! 커밋을 잊지 말자2. 팀원들과 따옴표, 쌍따옴표 Prittier가 안 맞아요!3. GitHub에 빈 폴더를 넣고 싶어요!  pnpm 패키지 매니저를 사용해서 Next.js + TypeScript + Tailwind CSS + TanStack Query + Zustand 를 설치하려고 한다면 축하한다. 지금부터 프로젝트 설치 명령어와 세팅을 아주 상세하게 알려주겠다. 터미널에 다음과 같은 명령어를 입력하면 된다.  1..

(1) 문제 인식(2) 해결을 위한 고민과 시도들(3) 해결(4) 문제의 원인이었던 pnpm과 패키지 매니저에 대하여  배포 시, NextUI 적용이 안 되는 에러 → .npmrc 파일 추가 및 pnpm을 다시 설치해 해결yarn을 사용했었던 직전 프로젝트에서는 NextUI가 잘 적용됐었는데, pnpm을 사용하는 이번 프로젝트에서는 적용이 수월하지 않아 2일 간 우울하기도 했고 고생했다. 하지만 깊게 몰입하여 문제를 해결한 경험이 하나 더 생겼다. UI 관련 문제로 꽤나 시간을 보내게 되다 보니 아예 ‘다른 디자인 시스템으로 변경’하거나 ‘내가 직접 CSS를 할지’에 대해 깊게 고민하며 갈등하였다.하지만 문제를 포기하는 것은 내키지 않아서 더욱 다양한 관점에서 바라보고, 시도를 해보았다. 다른 분들은 나..

0. TL;DR1. 이진수와 2의 보수법2. 부동 소수점3. 문자 인코딩과 디코딩  0. TL;DR이진수: 모든 양수를 0과 1로 표현하는 방법2의 보수: 모든 음수를 0과 1로 표현하는 방법부동 소수점: 모든 소수(분수)를 0과 1로 표현하는 방법문자 집합 & 인코딩: 모든 문자를 0과 1로 표현하는 방법  들어가며컴퓨터는 0과 1만을 이해한다.데이터가 컴퓨터 내에선 어떠한 방식으로 표현이 되는지 알아보자. 이진수, 2의 보수, 부동 소수점, 문자 집합과 인코딩에 대해 중점적으로 살펴볼 것이다. 참고로,‘문자 집합’은 컴퓨터가 이해할 수 있는 문자들의 모음이다.‘인코딩’은 문자 집합을 이용해서 0과 1로 변환하는 과정이다.  1. 이진수와 2의 보수법이진법: 0과 1로 모든 수를 표기하는 방법이진수: ..

0. TL;DR1. 명령어2. 연산코드3. 주소 지정  0. TL;DR명령어: 무엇을 대상(오퍼랜드)으로 무엇을 수행(연산코드)하는 것주소 지정: 유효 주소*를 찾는 방법즉시 주소 지정직접 주소 지정간접 주소 지정레지스터 주소 지정레지스터 간접 주소 지정  1. 명령어: 무엇을 대상(오퍼랜드)으로 무엇을 수행(연산코드)하는 것이처럼 명령어는 명령의 대상과 동작으로 이루어진다. 명령어는 컴퓨터를 동작시키는 실질적인 정보다. 오퍼랜드(operand): 명령어를 수행할 대상대상(데이터)이 직접 명시되기도 하고, 대상의 위치*가 명시되기도 함연산코드(op-code): 오퍼랜드로 수행할 동작 👾 [중요] 대상의 위치: 레지스터(CPU에 있는 작은 임시 저장 장치)의 이름, 메모리 주소  실제 컴퓨터로 동작시키는..