hippo/devloghippo/devlog개발 환경 ·
Monorepop 프로젝트를 구성하기 위해 Turborepo 의존성 설치 및 환경 구성을 진행한다. corepack 설치 이제 Root 에 pnpm-workspace.yaml 을 생성합니다. 저의 경우 apps 폴더 하위에 ui-kit 을 사용하는 프로젝트들을 만들예정이기 때문에 아래와 같이 작성합니다.
개발 환경 ·
최근에 프로젝트를 진행하기 위한 Starter Boiler Plate를 미리 구성해놔야겠다는 생각이들어서 초기 셋팅을 잡아보고 있는데요. 당연히 아는줄 알았던 부분도, 부족한 부분 그리고 잘못알았던 부분들도 있었고 생각보다 도움이 많이 된 것 같습니다.
개발 환경 ·
React Project 에서 패키지 매니저를 PNPM 을 사용하고 있다. Gatsby 4버전 을 사용하는데 몇가지 플러그인에서 Deprecated된 Peer-dependency 를 사용하기 때문에 Install 시에 아래와 같은 로그가 발생한다.
개발 환경 ·
이번 프로젝트에서 프로젝트 환경 을 구성하면서 package 의존성을 관리할 수 있는 Package Manager 에 대한 고민을 하게 되었다. 결과적으로는 pnpm 을 선택했고 왜 pnpm을 선택하였는지, 그리고 npm 과의 차이점을 기록한다.
개발 환경 ·
바쁜 나날동안 블로그 만들기를 꾸준히 진행을하다가 이번에 npm -> yarn Berry 로 Package Manager 를 변경하려고 한다.
개발 환경 ·
개인적인 프로젝트를 진행하면서 발생했던 에러 모음 발생시 Setting.json 에 "eslint.workingDirectories": [{ "mode": "auto" }], 설정 추가
개발 환경 ·
Eslint 를 사용하기 위한 간단한 방법을 포스팅한다. 보통 개인프로젝트로 개발할때는 크게 신경을 안쓰고 하는경우도 있는데 Eslint 를 습관화 하는 버릇을 들이자.
개발 환경 ·
방대한 코드이기에 모든 분석은 불가하고 vite 가 어떤 환경에서 사용되고 장점인 esbuild 개발 구성에 대해서 nodemodule 내 소스 분석을 통해 정리한다. 왜 vite 가 빠를것인가? 우리는 웹 생태계가 발전함에 따라 각 서비스마다 방대하고 복잡한 코드를 가진다.
개발 환경 ·
각기 다른 환경을 일원화 시켜주는 바벨에 대해 공부해본다. 해당 포스팅은 김정환님의 강의를 보며 정리하였다. 하단 참조 사이트 참고 앞서 공부했던것 같이 플러그인을 모아서 따로 preset 을 만들어서 하는것 보다 현재는 바벨에서 제공하는 프리셋을 사용한다고 한다.
개발 환경 ·
각기 다른 환경을 일원화 시켜주는 바벨에 대해 공부해본다. 해당 포스팅은 김정환님의 강의를 보며 정리하였다. 하단 참조 사이트 참고 모던 웹 프론트엔드 환경이 거듭할수록 각 브라우저별로 같은 javascript라도 각기 다르게 지원하는 함수 혹은 메서드들이 생겨나기 시작하였다.
개발 환경 ·
VSCode 설정할때 유용한 플러그인들 정리 색 테마 : Night Owl 파일 아이콘 테마 : Material Icon Theme 문법 검사 : ESLint, TSLint 실습 환경 보조 : Live Server 기타 : Prettier, Project Manager, Auto Close Tag, GitLens,...
개발 환경 ·
대표적으로 많이 사용하는 Plugin 에 대한 개념 설명 및 실습을 정리하는 포스팅이다. loader 와 같이 custom 으로 작성하는 일은 거의 없으며 웹펙에서 제공하는 플러그인을 알아본다.
개발 환경 ·
실무에서 주로 사용하는 대표적인 로더들에 대한 실습을 진행해본다. loader 를 통해서 파일단위로 다양한 처리를 하였다면 plugin 을 통해서는 bundling 된 결과물을 처리한다. 예를 들면 bundling 된 javascript 를 난독화하거나 특정 텍스트를 추출 하는 용도이다.
개발 환경 ·
실무에서 주로 사용하는 대표적인 로더들에 대한 실습을 진행해본다. CSS-Loader : css 코드를 javascript 로 가져와서 사용 가능
개발 환경 ·
웹팩은 자바스크립트, 스타일시트, 이미지, 폰트 등 모든 소스를 각각의 모듈로 바라보기 때문에 import 구문을 사용하여 외부 소스를 활용한다.
개발 환경 ·
package.json 에 devDependencies 확인 이전에는 몰랐는데 이런 라이브러리 들을 사용할때 가장 먼저 봐야하는것이 help 를 통한 설명인것 같다. 각 command 가 어떤 역할을 하는지 알 수 있다.
개발 환경 ·
ES2015 부터 모듈을 지원했기 때문에 이전에는 script 를 html 에서 불러와 로딩하여 사용하였다. 위와 같이 진행하면 app.js 는 math.js 에서 sum 함수를 불러와 사용하지만, sum 함수가 전역 스코프에 노출되는 점으로 인해 문제가 발생할 여지가 있다.
개발 환경 ·
앞서 플러그인 사용법을 봤지만 이번에 새로 사용하는 겸 기록해둔다. HtmlWebpackPlugin 의 경우 정의된 html 파일에 빌드 결과물을 추가해준다.
개발 환경 ·
빌드를 할 대상 파일을 작성한다. 즉, entry 속성은 웹팩에서 우리가 빌드를 할 대상의 파일 경로를 작성하며 이는 웹팩 변환의 가장 먼저 동작하는 진입점이기도 하다.
개발 환경 ·
Prettier 는 VS Code 에서 사용자의 코드를 정리해주는 확장 프로그램이 있다. 왼쪽 바에서 마켓 플레이스 진입 후 Prettier 설치한다.
개발 환경 ·
모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다. 이처럼 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 된다.
개발 환경 ·
현재 공부하고 있는 강의에서 webpack 에 대한 유투브 분석 강의를 보았다. 유투브 링크 이 영상의 초기에는 특정 Application 을 만들어 놓고 집에서 쾌적한 인터넷 환경에서 할 경우와 어딘가 굉장히 느린 환경에서 웹 페이지 속도를 크롬 개발자 도구로 보여주며 시작을 하게 된다.
개발 환경 ·
웹팩 결과 파일 디렉터리 패스 변환 전의 경우에는 html 에서 sciprt 내 cdn 으로 불러왔기 때문에 lodash.js, index.js 를 호출하게 된다.
개발 환경 ·
위 json 파일에 정의한대로 webpack 을 build 할 때 우리는 여러가지 옵션을 줄 수 있다. 예로 --entry , --output 같이 파일, 위치 등을 본인이 원하는 폴더에 생성하겠다는 옵션 같은것들 말이다.
개발 환경 ·
웹팩(Webpack)이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.
개발 환경 ·
NPM(Node Package Manager)는 전 세계 자바스크립트 개발자들이 올려놓은 공개된 라이브러리 저장소에 올라와 있는 자바스크립트 라이브러리를 명령어로 설치 및 관리할 수 있는 패키지 매니저 이다.
