Jeonny-Boilerplate ? vite를 활용해 React + Typescript 개발 환경(프로젝트)를 생성합니다. 대부분의 리액트 프로젝트에서 기본적으로 사용되는 라이브러리가 포함되어있고, 코드 포맷팅을 돕기 위한 도구들도 추가되어 있습니다. npm에 배포되어 있어서, 누구든 쉽고 빠르게 사용할 수 있습니다. https://www.npmjs.com/package/jeonny-boilerplate 왜 만들었나요? 매번 새로운 프로젝트를 진행할 때마다, vite, cra로 프로젝트를 생성하고, eslint, prettier, 기타 라이브러리들을 추가적으로 설치하는 과정이 번거로웠습니다. 특히 eslint, prettier는 설정 과정에서 종종 에러가 발생하기도 해서, 시간을 더욱 잡아먹곤했습니다...

1. 프로젝트 생성 명령어 사용 npx create-react-app myapp --template=typescript tsconfig.json 수정 compilerOptions에 “baseUrl”: “./src” 추가 → 기본 절대 경로를 설정하는 구문 2. ESLint 1) vsc 익스텐션 - eslint 설치 2) package.json 수정 CRA로 기본 생성된 코드 제거 → lint 설정은 package.json에서 할게 아니라 .eslintrc.json에서 할 거라서! "eslintConfig": { // 삭제 "extends": [ // 삭제 "react-app", // 삭제 "react-app/jest" // 삭제 ] // 삭제 }, // 삭제 npm scrips에 스크립트 추가 ... "..

≪이펙티브 타입스크립트≫ (댄 밴더캄 지음, 장원호 옮김, 인사이트, 2021) 1장. 타입스크립트 알아보기 (아이템1 ~ 아이템 5) 1장에서는 타입스크립트의 전체적인 내용을 이해하는데 도움이 되는 내용을 다룹니다. 타입스크립트란? 자바스크립트와의 관계 타입스크립트의 타임에 관해 덕 타이핑 가능여부 기타 등등. 아이템2. 타입스크립트 설정 이해하기 function add(a,b){ return a+b } add(10, null) 위 코드는, 오류없이 타입 체커를 통과할 수 있을까요? 설정이 어떻게 되어있는지 모른다면 대답할 수 없다 ! 타입스크립트 컴파일러는 정말 수많은 설정을 가지고 있어서, 설정마다 결과가 다르기 때문입니다. 타입스크립트를 설정하는 방법? 커맨드 라인을 이용합니다. $tsc --no..

≪이펙티브 타입스크립트≫ (댄 밴더캄 지음, 장원호 옮김, 인사이트, 2021) 1장. 타입스크립트 알아보기 (아이템1 ~ 아이템 5) 1장에서는 타입스크립트의 전체적인 내용을 이해하는데 도움이 되는 내용을 다룹니다. 타입스크립트란? 자바스크립트와의 관계 타입스크립트의 타임에 관해 덕 타이핑 가능여부 기타 등등. 아이템1. 타입스크립트와 자바스크립트의 관계 이해하기 타입스크립트는 자바스크립트의 슈퍼 셋(Super Set, 상위 집합)입니다. 원티드 프리온보딩 챌린지 프로그램이나 다른 타입스크립트 강의에서 위의 요약문을 들었던 적이 몇 번 있었습니다. 이번 아이템1.을 통해서 이를 명확하게 이해할 수 있었습니다. JS와 TS는 밀접하게 연결된 관계이며, TS는 문법적으로도 JS의 상위집합입니다. 문법 오류..

≪이펙티브 타입스크립트≫ (댄 밴더캄 지음, 장원호 옮김, 인사이트, 2021) 이펙티브 타입스크립트 완독하기 말 그대로 책 한권을 완독하는 프로젝트입니다. 올해 말에 리액트 + 타입스크립트를 활용하여 사이드 프로젝트를 진행할 예정인데, 이를 위해 타입스크립트를 학습하기 위해 시작하게 되었습니다. 화이팅 🔥 대상독자 왜 타입스크립트를 사용해야 하는지 알고 싶은, 그리고 타입스크립트를 보다 효과적으로 사용하기 위한 방법을 알고 싶은 타입스크립트 초급자 또는 중급자 책의 구성 이 책은 아이템의 모음입니다. 즉, 타입스크립트의 어떤 측면에 대한 구체적인 조언을 담은 짧은 길이의 기술적 에세이의 모음입니다. 책의 제목은 내용의 핵심을 나타냅니다. (타입스크립트를 사용하며 꼭 기억해야할 것들) 본문은 제목에서 말..