📍배경 styled-components로 팀 프로젝트를 시작했는데, 어떻게 폴더 구조를 정해야 할까? 다양한 글을 읽고 내가 내린 결론은... 📍폴더 구조 ✅프론트엔드 기술 스택 - Next.js - TypeScript - Styled-components ⭐ 여기에 중점! ✅폴더 구조 /* root ├─components │ ├─common │ │ ├─Button.styled.ts : 재사용 스타일 (에시) │ │ ├─Input.styled.ts │ ├─Header : 개별 컴포넌트 (예시) │ │ ├─index.tsx : 로직 │ │ └─styled.ts : 스타일 │ ... ├─enum │ └─index.tsx : 상수화를 위한 문자열 데이터 보관 폴더 ├─pages │ ├─404.tsx : /err..

팀 프로젝트에서 반응형 헤더를 구현한 기록을 정리 📍max-width 를 사용하여 화면이 꽉차지 않게 하기 랜딩 페이지에서 헤더 아래의 캐러셀만 화면에 꽉차게 하고, 헤더(GNB), 메인 컨텐츠, 푸터는 max-width: 1200px 을 주어 화면에 꽉차지 않게 설정 width 1200px이 넘는 뷰포트에서도 최대 1200px 까지만 늘어남 추가로 padding: 0 1rem; 을 부여 📍모바일 드롭다운 메뉴 구현 width 768px 이하의 뷰포트에서는 display: none; 으로 navbar를 없어지게 하고, 모바일 메뉴 버튼 (햄버거 아이콘)을 생기게 한다 레이아웃 컴포넌트에서 모바일 메뉴 버튼을 클릭함에 따라 메뉴 오픈, 클로즈상태로 바뀌게 한다 왜 헤더가 아닌 레이아웃 컴포넌트에서 상태를 ..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅JSDoc / TSDoc 형태의 주석을 작성하면 에디터에서 주석 정보를 제공해준다 ✅@params, @returns 구문과 문서 서식을 위해 마크다운을 사용할 수 있다 ✅주석에 타입 정보를 포함하면 안된다 => 코드를 봐야할지, 주석을 봐야할지 혼란 초래 📍JSDoc / TSDoc 의 장점 ✅대부분의 에디터에서 함수에 붙은 JSDoc 스타일의 주석을 툴팁으로 표시해 준다 - 함수 설명을 툴팁으로 표시 /** Generate a greeting. Result is formatted for display. */ function greetJSDoc(name: string, title: string) { return `Hello ${title} $..

📍문제 링크 https://www.acmicpc.net/problem/18233 18233번: 러버덕을 사랑하는 모임 첫 번째 줄에 정수 N, P, E가 공백으로 구분되어 주어진다. (1 ≤ N, P ≤ 20, 1 ≤ E ≤ 1,000,000) 그 다음 줄부터 N개의 줄에 걸쳐 회원 1부터 순서대로 xi와 yi가 공백으로 구분되어 주어진다. (1 ≤ xi www.acmicpc.net 📍알고리즘 분류 - 브루트포스 📍문제 풀이 (백트래킹) DFS를 활용해 nCp 조합을 구하고, 각 경우의 수가 범위를 만족하면서 전체 합이 E인 것을 구하면 된다 1. 조합을 구해야 하므로 백트래킹 코드를 만든다. 스택에는 실제 데이터가 아닌 인덱스만 담는 것이 간편하다 (중복을 제거하기 쉽고, 속도도 빠름) 2. p 가짓수..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅퍼블릭 API에 코드가 노출되면 타입을 추출하는 방법은 무궁무진하다 - 따라서 사용 편의성을 위해 가능한 모든 타입을 export 해주는 것이 좋다 📍라이브러리 사용자가 타입 정보를 직접 작성해야 한다면 ✅일반적으로 모든 타입 정보가 잘 export 되어야 하지만, 그렇지 않다면, 명시적으로 작성해야 한다 ✅타입 정보를 추출할 도구가 많기 때문에 의도적으로 타입 정보를 숨기는 것은 불가능하다 예시) ReturnType, Parameters 제네릭 타입을 활용해 타입 정보를 추출 // export하지 않은 인터페이스 interface SecretName { first: string; last: string; } interface SecretS..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅@types 의존성 관련 3가지 버전 - 개별 라이브러리 버전 - 그 라이브러리들의 @types 버전 - typescript 라이브러리 버전 ✅라이브러리를 업데이트하는 경우, 해당 @types 역시 업데이트해야 함 ✅TS로 작성된 라이브러리 : 타입 선언을 자체적으로 포함 ✅JS로 작성된 라이브러리 : DefinitelyTyped에 타입 선언을 공개하여 커뮤니티 차원에서 유지 보수 📍실제 라이브러리와 타입 모듈의 버전이 다른 경우 예) 타입 선언의 버전이 더 빠른 경우 react@16.8.6 @types/react@16.8.19 => 타입 정보의 버전이 더 빠름 ✅단순히 patch 버전만 다르기 때문에, 타입 선언을 업데이트할 필요는 없지만..

📍참고 https://semver.org/ Semantic Versioning 2.0.0 Semantic Versioning spec and website semver.org 📍시맨틱 버저닝(semantic versioning - semver) ✅소프트웨어 버전 관리를 위해 버전 번호를 정하는 법칙 버전을 major, minor, patch 로 나눠 구분한다 예) 1.0.0 버전의 patch 버전은 0 ✅각 버전 번호가 바뀌는 상황 - major : 기존 버전과 호환되지 않게(하위호환성 보장 X) API가 바뀌는 경우 - minor : 기존 버전과 호환되면서(하위호환성 보장) 새 기능 추가 - patch : 기존 버전과 호환되면서 버그를 수정 ✅기타 - 1.0.0 이 첫 공개 API이다 - 0.y.z 는..

📍문제 링크 https://www.acmicpc.net/problem/1890 1890번: 점프 첫째 줄에 게임 판의 크기 N (4 ≤ N ≤ 100)이 주어진다. 그 다음 N개 줄에는 각 칸에 적혀져 있는 수가 N개씩 주어진다. 칸에 적혀있는 수는 0보다 크거나 같고, 9보다 작거나 같은 정수이며, 가장 www.acmicpc.net 📍알고리즘 분류 - 다이나믹 프로그래밍 📍문제 풀이 N * N (4 { const N = +input.shift(); const board = input.map((row) => row.split(" ").map(Number)); // 아예 memo를 여유있게 넉넉하게 만들기 const memo = Array.from({ length: N + 10 }, (_) => Array..