Age of Discovery

서버를 따로 구현하지 않고 S3 스토리지로 배포되어있는 데이터를 그대로 받아와야했다. 웹팩에서 환경변수를 주입해 axios get요청으로 데이터를 받아와보자! npm install dotenv npm install webpack-env 우선 dotenv와 webpack-env 패키지를 설치한다. 그리고 .env 파일을 생성 후 gitignore에 넣어주자 (깃헙에 올리지 않기 위함) env파일엔 외부에 알려지지 않아야하는 클라이언트 아이디 or 시크릿키 or api주소 등이 있다. API_ENDPOINT=http://localhost:3000/ 위와 같은 형식으로 좌항은 대문자로 입력해야한다. 또한 문자열이라고 따옴표를 넣어주면 안된다. 웹팩으로 파일이 프로젝트가 세팅되어있으면 webpack.common..

사용자가 쉽게 커스텀하고 이용이 가능한 input 라이브러리를 만들어보려고 한다. input하나만드는데 보일러 플레이트가 많은 CRA는 설치하기 싫었고 CRA없이 초기세팅을 웹팩으로 빌드했다. css는 emotionJS를 사용하기로 결정했다 css in js를 구현할 때 jsx문법 내에서 style={{}}로 하는것 보단 css={{}}로 작성하는게 더 익숙했기 때문이다. (현재 진행중인 링크게더 프로젝트에서 쓰고 있다.) 딱히 성능상의 유의미한 차이는 없다ㅋㅋ... 웹팩세팅 관련 글은 다음에 다뤄보도록 하겠다. (길어질거 같음..) npm i -D @emotion/react @emotion/styled emotion 패키지를 설치해주고 typescript를 사용하는 경우 tsconfig.json의 컴파..