aeiou Repository

모노레포 란? 두 개 이상의 프로젝트 코드가 동일한 저장소에 저장되는 소프트웨어 개발 전략입니다. 하나의 레포지토리에서 코드가 관리되지만, 모듈별로 독립적인 프로젝트를 구축할 수 있습니다. 의존성 패키지가 하나의 레포지토리에서 관리되어 프로젝트 호환성과 배포 프로세스 등 관리 포인트가 줄어든다는 장점이 있습니다. 이번 토이프로젝트에서는 프론트(next.js)와 백엔드(nest.js) 모듈을 모노레포로 구성해보려합니다. Yarn 설치 & init npm install -g yarn cd repository_name yarn init node.js 모노레포 도구로는 yarn과 lerna가 많이 사용됩니다. 저는 yarn의 내장기능인 workspace 를 사용해 모노레포를 구성하겠습니다. { "name": "..

시작하기 전에 오랜만에 새로운 프로젝트 시작하려다 마주친 삽질... Next.js를 시작하는 사람이라면 Node.js를 예전부터 사용하던 사람일 가능성일 클 것 같아 작성해둔다. 기존 Node.js 버전과 Next.js lastest 버전이 맞지 않아 버전 업데이트를 해줘야했다. Node.js는 홈페이지에서 LTS로 다시 다운로드. (14.?.? -> 18.4.0) npm은 아래 명령어로 최신버전으로 업데이트 가능하다 (9.3.1? -> 9.4.1) npm install -g npm@latest create-next-app 으로 프로젝트 생성 npx create-next-app@latest --typescript proceed에 따라서 enter 연타하다보면 프로젝트가 생성된다. ESLint 사용여부 >..

critical dependency the request of a dependency is an expression 에러 처음 하고자 했던건 json에 img path를 저장해두고 화면에서 바로바로 import해서 사용하고 싶었다. 그냥 이렇게 사용하니 에러는 안나지만 이미지를 불러오지 못했고ㅠ (webpack img설정은 모두 해줬고 dataset을 tsx로 바꿔 import를 미리 해주고 불러오는 것까지는 가능!) 다음으로 Project.tex 내에서 forEach로 import해주려고하니 이때부터 ritical dependency the request of a dependency is an expression 에러 발생 ㅠㅠ 여기서 부터 검색어를 잘못잡았던것같다. 해당에러를 해결하려고 하니 gith..

create-react-app 으로 프로젝트 생성 // create-react-app & cra-template-typescript 설치 npx install -g create-react-app cra-template-typescript // 프로젝트 생성 npx create-react-app "프로젝트명" --template typescript create-react-app 에서 --template 옵션만 typescript로 설정해도 기본적인 라이브러리가 모두 포함된 프로젝트가 생성됩니다. src 내의 파일을 보면 tsx로 생성되어있습니다. ESLint 설정 ESLint 란? ESLint는 자바스크립트를 ES 표준 규격에 맞는지 자동으로 분석해주는 도구입니다. 문법상 오류만 표시되도록 지정할 수도 있..

create-react-app 으로 만든 typescript 프로젝트에 webpack 적용하기 필요한 패키지 설치 npm i -D file-loader ts-loader npm i -D webpack webpack-cli html-webpack-plugin webpack-dev-server npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react npm i -D typescript @babel/preset-typescript ts-loader fork-ts-checker-webpack-plugin npm i -D rimraf webpack 관련 패키지 webpack: Webpack(웹팩) 라이브러리 webpack-cli: Webpac..