치춘짱베리굿나이스

CRA 없이 타입스크립트 환경설정 Typescript + Yarn으로 프로젝트 초기화 Typescript + Yarn으로 프로젝트 초기화 프로젝트 초기화 및 환경설정 공식적인 내생각 간단하게 토이 프로젝트를 하나 시작하면서 프로젝트 초기화를 했기 때문에 이를 기록 차원에서 적어본다 또 이상한데서 삽질을 했기 때문… (타 blog.chichoon.com 여기서 이미 타입스크립트 환경설정을 해봤지만 CRA를 썼었다 이번엔 CRA 없이 환경설정을 해보자 create-react-app이 편하긴 하다… 뭐 백엔드는 리액트를 안 쓰니까 설정을 손수 해야 하긴 하지만 말이다 설치와 초기화 npm 초기화 $> npm init package.json을 추가해주자 타입스크립트 설치 $> npm i -D typescript..

프로젝트 초기화 및 환경설정 공식적인 내생각 간단하게 토이 프로젝트를 하나 시작하면서 프로젝트 초기화를 했기 때문에 이를 기록 차원에서 적어본다 또 이상한데서 삽질을 했기 때문… (타입스크립트 플래그를 잘못 적어서 자바스크립트 버전으로 초기화됐다) 다음에는 안하길 빈다 1. 프로젝트 생성 create-react-app을 통한 프로젝트 생성 $> yarn create react-app jiychoi-standard-time --template typescript 레포지토리 이름이 파스칼케이스라 디렉토리 이름을 .으로 설정하니 프로젝트명 규칙에 위반되어 (대문자를 포함하면 안된다고 한다) 제대로 프로젝트 생성이 되지 않았다 별개의 프로젝트를 생성 후 디렉토리만 옮겨주었다 2. 타입스크립트, 린터 설치 typ..

yarn 지금까지 프로젝트에선 npm만 썼었는데, 이번에 프리온보딩 첫 번째 개인과제를 yarn으로 세팅하게 되었고 마침 참여중이었던 다른 프로젝트에서도 프론트엔드 개편과 함께 yarn을 써보자는 이야기가 나와서 이참에 정리해보려고 한다 약간 이름이 얀이 머냐 얀이 이러면서 좀 비호감이었는데 방금 아이콘 찾아보니 너무 귀여워서 급호감됨 고양이 못참지 yarn이란? 기본적으로 npm과 같은 자바스크립트 패키지 매니저로, 패키지 설치와 삭제를 돕는다 다만 yarn은 npm의 느린 속도와 불안정함을 보완하기 위해 태어난 녀석이라 상대적으로 빠르고, yarn.lock과 package.json에 등록된 패키지만을 설치하기 때문에 안정적이다 npm과의 차이점 속도 npm은 작업을 순차적으로 수행하기 때문에 이전 패..

stylelint CSS, SCSS와 같은 스타일시트 코드 작성 시 정렬 및 오류를 찾아주는 분석 도구 eslint와 같이 코드 실행 없이도 코드 내에서 잘못된 점을 바로 찾아준다 스타일시트 특성상 작성한 코드 양이 많아질 수록 개발자도 헷갈려서 중복된 스타일을 적용할 가능성이 높아지는데, stylelint를 통해 일관된 코드와 순서를 지키면 중복 코드 작성 여지가 확 줄어든다 설치하기 $> npm install -D stylelint stylelint-config-standard stylelint-config-styled-components stylelint-processor-styled-components stylelint-config-standard-scss stylelint-config-reces..

eslint Javascript & JSX의 정적 분석 도구 Javascript는 코드 실행 후에 에러를 파악할 수 있는데 (동적 분석), 이를 실행 없이도 코드 내에서 바로 찾을 수 있도록 (정적 분석) 도와주는 도구이다 eslint는 코드 그 자체를 분석해 문법 오류나 안티 패턴 (패턴을 지키지 않은 부분) 을 찾아주어 일관된 코드 스타일을 유지하게 해 준다 설치하기 npm install eslint -D -D 옵션은 개발 단계에서만 해당 도구를 사용하겠다는 의미이다 (배포 단계에서는 적용되지 않는다는 뜻) 설정하기 npx eslint --init Javascript에서 React를 이용하여 개발하고자 한다면 다음과 같이 설정한다 세팅이 완료되면 eslintrc.js 파일이 생성된다 (json 형식을..

create-react-app으로 리액트 환경 세팅하기 npm 설치하기 (+ npx) Nodejs, npm, npx nodejs, npm, npx Node.js Node.js Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 오픈소스 자바스크립트 엔진에 비동기 이벤트 처리 라이브러리를 결합한 플랫폼으로, 자바스크.. blog.chichoon.com npm은 node.js 기반 패키지들을 쉽게 설치하고 관리하도록 도와주며, npx는 이러한 패키지들을 쉽게 실행시킬 수 있도록 돕는다 최신 버전 Node.js를 설치하면 npm과 npx가 따라온다 버전 체크 npm -v npx -v create-r..