분류 전체보기 (64) 썸네일형 리스트형 모노레포 개발 초기 환경 세팅 초기 세팅의 결과 목표[x] client와 server를 분리된 폴더에서 개발할 수 있다.[x] root환경에서 client와 server의 dev 모드를 실행할 수 있다.[x] vscode에서 저장을 하면 prettier와 eslint가 자동으로 돌아간다. Node.js 및 Pnpm 설치버전 확인확인한 날짜 분류 LTS 버전 명령어 다운로드 링크2024-11-04Node.jsv22.11.0node -v참고 링크2024-11-04pnpmv9.12.3pnpm -v참고 링크Node.js 설치 방법위의 다운로드 링크에 들어가서 설치pnpm 설치 방법npm install -g pnpmpnpm 초기화 및 워크스페이스 설정package.json 파일 생성pnpm initpackage.json 내용 수정{ "nam.. 패키지 버전관리 틸드(~)와 캐럿(^) 정리하게 된 계기"tailwindcss": "^3.4.14","vite": "^5.4.10",package.json에 버전을 명시할 때 버전 앞에 붙는 틸드 ~ 와 캐럿 ^ 이 무슨 뜻인지 정확하게 이해하고자 정리하였다. (전에 글로 읽었었는데 까먹었다…)Software Versioning틸드와 캐럿에 대해 알아보기 전에 소프트웨어의 버전을 작성하는 방법부터 간단하게 이해하고 넘어가자. 소프트웨어의 버전을 명시하는 방법은 다양할 수 있다. 그 중 node.js와 npm은 모두 **시멘틱 버저닝(Semantic Versioning)**이라는 소프트웨어 버전 변경 규칙을 사용한다.Semantic Versioning시멘틱 버저닝은 Major.Minor.Patch 형태로 버전을 작성한다.https://semve.. EsLint와 Prettier의 충돌 막기 자주 사용하는 EsLint와 Prettier의 충돌 해결 방식ESLint와 Prettier 모두 코드 포매팅 기능이 있어서 서로 충돌이 발생할 수 있다. 이 문제를 해결하기 위해 보편적으로 eslint-config-prettier 와 eslint-plugin-prettier 플러그인을 추가로 설치한다.eslint-config-prettier: Prettier와 겹치는 ESLint의 포매팅 규칙을 비활성화eslint-plugin-prettier: Prettier의 포매팅 규칙을 ESLint 규칙으로 동작하게 함바로 eslint에서 prettier와 겹치는 포멧팅룰은 삭제하고 prettier의 포멧팅 룰을 eslint의 룰로 포함시켜 eslint를 prettier와 함께 쓰는 것이였다.이제는 권장하지 않는다.. husky & lint-staged로 코드 품질 올리기 🐶 Husky가 뭔가요모노레포로 개발 환경을 설정하면서 다른 팀원분들의 레포지토리를 많이 참고했는데 husky라는 라이브러리를 많이 쓰시는 것을 알게 되었다. 그리고 멘토링을 받으면서 자동화에 관심이 있다면 husky 사용을 추천받아 husky가 뭔지 알아보기로 했다.EsLint를 강제하는 방법이전에 팀원과 코드를 깔끔하게 작성하기 위해, 유지보수를 위해, 팀이 하나의 공통된 코드 스타일을 사용하고 코드의 품질을 올리기 위해 eslint, prettier를 사용하기로 했다. prettier는 auto save를 설정해놨기 때문에 어길일이 없지만 eslint를 명령어로 돌려야 돌아가게 된다. 그래서 PR을 올리기 전에 lint를 한 번 돌리고 올려야 하는데 만약 이를 까먹고 안 하는 경우가 발생한다면? .. SVG 파헤치기 SVG를 파헤치게 된 이유…블록 코딩 사이트를 만드는 팀 프로젝트를 진행하면서 blockly라는 블록 조립 라이브러리를 사용하게 되었다. 기획대로 UI를 수정하려고 보니 라이브러리의 많은 UI 요소들이 SVG로 만들어져 있었다. 이를 제대로 다루기 위해서는 SVG에 대한 이해가 선행되어야 된다고 생각했고 그래서 이 글에서 svg에 대해 알아보기로 했다.SVG 알아보기SVG는 뭐길래 안 깨지는 거니?SVG(Scalable Vector Graphics)는 이름에서 알 수 있듯이 벡터 기반의 그래픽 파일 포맷이다. JPEG와 같은 픽셀 기반의 래스터 파일과는 달리, SVG는 점과 선 등 기하학적 요소에 수학 공식을 적용해 이미지를 생성한다. 그래서 그래픽의 크기를 마음대로 조절해도 화질이 깨지지 않아 특히 아.. 잠깐, eslint의 새로운 config 시스템에 대해 아시나요? 문제 상황처음에 vite + react + typescript로 기본 프로젝트 설정을 진행했는데 eslint 9.13.0 버전이 설치되었고 기본 설정 파일은 eslint.config.js였다. 그래서 해당 파일에 팀원분께 받은 .eslintrc.js 파일 내용을 eslint.config.js 에 무지성으로 그대로 복사했더니 다음과 같은 에러를 마주했다.A config object is using the "00" key, which is not supported in flat config system 해당 에러를 마주하면서 flat config system에 대해 처음 알게 되어서 정리하게 되었다.Flat Config System?ESLint v9.0.0부터는 기본적으로 flat config file fo.. Yarn Berry와 Pnpm 알아보기 그룹 프로젝트를 시작하면서 팀원들과 함께 패키지 매니저 선택에 대한 고민을 하게 되었다. 기존에 많이 사용되어 온 npm의 문제점을 개선한 다양한 모던 패키지 매니저가 등장했는데, 그 중 특히 주목받고 있는 pnpm 을 사용하기로 했다. 멘토님께서 yarn berry도 언급해 주셔서 pnpm이 yarn berry와 비교를 해본 뒤 패키지 매니저를 결정하기로 했다. (근데 사실 이미 pnpm을 사용하기로 이야기를 나눈 후에 yarn berry도 찾아보는 형식으로 이야기가 진행된 것이라 pnpm 걍 쓸 것 같다.)이 글에서 npm의 문제점을 짚어보고, 이를 해결하려는 yarn berry와 pnpm에 대해 간략하게 정리했다.기존 npm(또는 Yarn 1)의 문제점유령 의존성 (Phantom Dependency.. div 테두리 겹침 현상 해결하기 div의 테두리(border)가 겹치는 현상이 발생했다.border: 5px solid blue; 이 문제를 해결하기 위해서 구글링을 하다가 border-collapse 라는 속성을 알게 되었다. border-collapse는 표(table)에서 cell의 테두리가 분리(seperated)될지 상쇄(collapsed)될지 결정할 수 있는 속성이다. 근데 지금은 table의 cell이 아닌 div의 테두리가 겹치는 것이라서 다른 해결 방법이 필요해 보였다. 그때 한 동료분이 outline이라는 속성을 알려주셨다. mdn에 들어가서 outline에 대한 설명을 읽으면 border와의 차이점에 대해 나와있다.outline은 border와 다르게 콘텐츠 밖에 그려지며 절대 공간을 차지하지 않는다. 위의 예시에서.. 이전 1 2 3 4 5 ··· 8 다음
