맨 땅에 프론트엔드 개발자 되기

tsc와 tsconfig.json TypeScript를 사용하기 위해서 tsconfig.json 파일은 필수사항은 아니다. TypeScript가 전역으로 설치되어 있다면, tsc 명령어를 통해서 .ts로 작성된 파일을 .js로 컴파일 할 수 있다. $ tsc example.ts 위 명령어를 실행하면 동일한 경로에 js로 컴파일링된 example.js 파일이 생성된다. 그렇다면 왜 tsconfig.json 파일을 설정할까? vscode는 기본적으로 TypeScript에 대한 intellisense를 지원한다. (여담이지만, TypeScript도 마이크로소프트가 만들고, vscode도 마이크로소프트가 만듦. 마이크로소프트 다해먹어!! 짱짱맨!!) 우리가 개발을 하면서 어떤 코드가 잘못되었는지 빨간 밑줄을 쳐..

React Router는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있다. v6로 업그레이드 되면서 React Hooks 를 기반으로 한 React Router Hooks 들이 추가되었다. 쿼리스트링 파서(parser)를 따로 설치하지 않아도 될 정도로 편리한 기능들이 있어서 정리해보려고 한다. 기본 설치 $ npx creat-react-app react-router-practice $ npm i react-router-dom 프로젝트에 라우터 적용 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { BrowserR..

CRA(Create-React-App)는 React를 사용할 때 필요한 Babel 이나 Webpack 같은 패키지들을 한번에 설치해주는 도구라서 굉장히 편리하다. CRA + TypeScript 조합으로 사용할 때도 매우 간단한 방법으로 초기 세팅을 할 수 있다. CRA + TypeScript 명령어 $ npx create-react-app ts-react-practice --template typescript ts-react-practice 부분은 내 프로젝트 명을 써주면 되므로 그곳만 교체해서 사용하면 된다. 별도의 ES LInt나 Prettier 설정을 해줄 수도 있지만 나는 VS code의 Extension을 사용하고 있기 때문에 설정해주지 않았다. 기존 프로젝트에 TypeScript 적용하기 이미..