본문 바로가기

Dot24

S3, CloudFront, 도메인 연결, Dev Server 추가 팀 프로젝트를 하기 이전에 프로젝트 배포는 주로 Github Pages나 Netlify를 이용했다. 본격적으로 팀 프로젝트 및 미션을 진행하면서 AWS(S3 + CloudFront)로 배포하는 방법을 배웠고, 그동안 내가 했던 배포는 다 차려진 밥상이었다는 것을 알게 되었다. 밥도 하나 스스로 짓지 못하는 나를 발견하게 된 것은 덤이었다. 그래서 Dutch-Dutch 프로젝트에 AWS로 배포하는 방법을 적용해보려고 한다. 사실 이번 프로젝트에서 이미지 파일이나 동적 웹 콘텐츠가 있는 것도 아니어서 AWS로 배포하는 게 오버 엔지니어링에 가깝다고 느낀다. 하지만 배웠으니깐 적용해보고 싶다는 생각이 컸다. 또, 이대로 있으면 '추억'이 되어 사라져 버릴 것 같았다. 무엇보다 기록하는 것은 항상.. 2021. 9. 10.
Webpack) 잡다한 지식들 웹팩을 공부하면서 알게된 잡다한 지식들 정리하는 포스트 목차 scripts Command & Flags 빌드 파일 실행하는 방법 scripts // package.json "scripts": { "start": "webpack serve --config webpack/webpack.config.js --env env=dev" } serve // webpack-dev-server를 실행하는 커맨드. --config // webpack 설정 파일의 경로를 제공하는 플래그. -c도 동일한 기능. (예: -c ./webpack.config.js) --env // 함수일 때 설정에 전달된 환경 플래그. (위의 코드 설명: 함수일 때 환경 플래그를 사용하여 설정에 env라는 프로퍼티로 dev를 전달) webpack.. 2021. 8. 26.
Webpack) Asset Modules Asset Modules 웹 애플리케이션을 제작하면서 HTML, CSS, JS와 더불어 아이콘, 사진, 비디오 등 다양한 Asset을 추가하게 된다. Asset Modules은 로더를 추가하지 않아도 이러한 asset 파일들을 사용할 수 있도록 도와주는 모듈이다. 쉽게 말해서 Asset Modules는 Asset 파일들을 처리하는 방식들을 모아놓은 모듈이고, 정의하는 방식에 따라 브라우저가 한 번에 다운로드하는 파일의 개수, 파일의 용량을 결정한다. Asset Modules의 종류로는 총 4가지, asset/resource, asset/inline, asset/source, asset이 있다. 목차 asset/resource asset/inline asset/source asset asset/resour.. 2021. 8. 25.
React + Typescript + Webpack + Babel + ESLint + Prettier + Husky + Emotion 프로젝트 boilerplate 기준은 깃허브에서 새로운 repository를 만들고, 로컬로 clone한 상태에서 시작하는 것을 기준으로 한다. (README.md 파일만 있다고 가정한다) 목차 기본 폴더 및 파일 세팅 React, Typescript Babel, Webpack ESLint, Prettier Husky, Lint-staged Emotion 기본 폴더 및 파일 세팅 다음과 같이 폴더와 파일을 추가한다. public/index.html .gitignore build node_modules yarn-error.logpackage.json { "name": "dutch-dutch", "version": "0.0.1", "description": "dutch-dutch is dutch treat .. 2021. 8. 24.

티스토리툴바