Pullanner project

Code Convention 🔵 JavaScript JavaScript Version ES6+를 사용합니다. function 화살표 함수를 기본으로 사용합니다. import import문의 순서는 custom eslint rule에 따릅니다. export export default는 가장 하단에 작성합니다. export는 변수 선언과 함께 작성...

Introduction 일관성 있는 형식으로 코드 작성 및 잠재적 에러를 발견하여 코드 퀄리티를 높이기 위하여 Code Formatter와 Linter를 도입했습니다. 이러한 도구를 사용하여 코딩 스타일에 대한 고민을 덜고, 코드 작성에만 집중할 수 있게 되었습니다. ESLint에도 코드 포맷팅 기능이 있지만, Prettier의 자동 코드 포맷팅 ...

husky 설치 husky를 devDependencies에 설치합니다. Git hook을 사용할 수 있게 다음 명령어 실행합니다. install한 후 자동적으로 Git hook 가질 수 있도록, package.json에 postinstall 설정 추가합니다. package.json에 사용할 script 명령어를 추가합니다. Prettier ...

1. Yarn을 선택한 이유 > 패키지 매니저로 Yarn을 선택한 이유에 대해서 정리해 보았습니다. > node_modules의 문제점 > 기존에는 node_modules를 기반으로 하는 npm 방식의 프로젝트를 생성하려고 하였으나, 다음과 같은 문제점이 있어서 보류하게 되었습니다. > node_modules 폴더 안에는 파일이 너무 많고, 이 폴더를...

Problem : yarn berry install Error yarn berry로 package를 관리하는 프로젝트를 git clone한 후 yarn install했을 때, Internal Error: The "yarn-path" option has been set 에러가 발생했습니다. 원인 : .yarnrc.yml 파일에 적힌 프로젝트의 .ya...

1. Vite를 선택한 이유 1-1. Webpack 개발 환경의 문제점 개발 서버 최초 시작 시 느린 빌드 속도로 인한 개발 경험 저하 Webpack을 사용했을 때, 규모가 큰 애플리케이션이 아니었음에도 불구하고 개발 서버를 처음 시작할 때 1분 정도의 시간이 걸리곤 했습니다. 프로젝트의 규모가 더 커진다면 이것보다 더 많은 시간이 걸리게 될 것...

Problem : process is not defined error 프로젝트에서 .env 파일을 생성해서 환경 변수를 선언하여 사용했는 데, Uncaught ReferenceError: process is not defined 에러가 발생했습니다. Solution : import.meta.env 객체 사용 프로젝트에서 Vite를 사용하고 있기 때문에...

Problem : icon(NavLink)이 active 상태일 때 하위 icon image 색이 변경되지 않음 Bottom Navigation Bar 컴포넌트의 IconLink(icon을 나타내는 NavLink)를 클릭했을 때, IconLink의 to 속성값 path로 이동하면서 IconLink의 자식 요소인 icon image와 icon text의 색...

Problem : ~ is not assignable to type Intrinsic Attribute Error BottomNavigationBar 컴포넌트에서 IconLink 컴포넌트에 IconLinkProps를 넘겨주었을 때, IconLinkProps에 ' ~ is not assignable to type Intrinsic Attribute Error...

Package Update Package Update를 진행하게 된 이유 TypeScript과 Storybook의 Major 버전 업데이트와 나머지 패키지들의 버전 업데이트를 반영하기 위해서, Pullanner 프로젝트의 전체 Package Update를 진행했습니다. npm-check-updates 라이브러리 사용 ncu 명령어를 실행하여 업데이트가...