React-Typescript Setup (without CRA)

creat-react-app 없이 프로젝트 셋업하기 React 프로젝트를 생성할 때, npm에서 제공하는 creat-react-app(CRA)를 사용하여 쉽게 생성할 수 있다. 하지만 직접 webpack, babel 등을 사용하여 CRA의 도움 없이 프로젝트를 생성해

Webpack & babel 설정 지난 포스트에서 React & Typescript 설치 및 기본 설정을 했다. 이제부터는 Typescript를 여러 브라우저에서 지원하는 버전의 Javascript로 변환하는 일 등을 맡아서 할 Webpack & bebel 설정을 하

이번에는 개발자가 코딩을 하기에 편리한 기능들을 지원해주는 eslint와 prettier를 셋업해보겠다.1) eslint 설치 $ npm install -D eslint 2) prettier와 react 관련된 패키지 설치$ npm install -D eslint-co

React 파일 구조 리액트를 공부하면서 프로젝트의 파일 구조에 대한 고민이 참 많았다. 일단은, 리액트 공식 문서에 파일 구조 관련한 대략적인 내용이 있기는 하다. (공식 문서) 하지만 정말 대략적인 내용이고, 아래의 내용이 꽤 강조된 모습으로 쓰여져있다. "이

Font 설정하기 프로젝트에서 사용할 폰트를 설정해보겠다. 1. 폰트 파일 추가 1) 폰트 파일 다운로드 구글폰트(google fonts)에서 폰트를 다운로드 받는다. 원하는 폰트가 없으면 구글링해서 폰트 파일을 받아도 무방하다. 폰트 파일 확장자가 다수 존재하는데

환경변수 설정하기 환경변수를 통해 프로젝트 내 외부에 노출하지 말아야 할 정보(Api key, Password 등)들을 노출시키지 않을 수 있다. 1. .env 파일 생성 및 환경 변수 설정 프로젝트의 루트 경로에 생성하며, 파일의 내용은 key=value 형태로 써