hippo/devloghippo/devlog개발 환경 ·
Monorepop 프로젝트를 구성하기 위해 Turborepo 의존성 설치 및 환경 구성을 진행한다. corepack 설치 이제 Root 에 pnpm-workspace.yaml 을 생성합니다. 저의 경우 apps 폴더 하위에 ui-kit 을 사용하는 프로젝트들을 만들예정이기 때문에 아래와 같이 작성합니다.
CI/CD ·
현재 업무를 진행하면서 Nginx 에 대한 설정으로 여러가지 성능과 이슈를 처리하고 있다. 이부분들을 기억하기 위해 간단하게 Task 에 대한 처리 과정을 남긴다. 리버스 프록시란 클라이언트와 웹 서버 간의 중개자 역할을 하는 서버로, 클라이언트로부터의 요청을 대신 받아 웹 서버에 저달하고, 웹 서버의 응답을 클라이언트에게 전달하는…
개발 환경 ·
최근에 프로젝트를 진행하기 위한 Starter Boiler Plate를 미리 구성해놔야겠다는 생각이들어서 초기 셋팅을 잡아보고 있는데요. 당연히 아는줄 알았던 부분도, 부족한 부분 그리고 잘못알았던 부분들도 있었고 생각보다 도움이 많이 된 것 같습니다.
CI/CD ·
이전 포스트에서는 PR 생성 및 Github Action Trigger 를 통한 테스트 Action 실행과 Slack 으로 연동해서 최종 Reporting 하는 방법까지 알아보았습니다. 이제 마지막 Vercel 로 Deploy 를 진행하는 방법을 포스팅하도록 하겠습니다.
CI/CD ·
이전 포스트에서는 Issue 생성부터 Husky 를 적용해서 dev 로 자동 배포하는 작업까지 진행해보았습니다. 그럼 이제 실제로 6번 PR 을 통해서 build, lint, type 등 테스트 진행과정과 각 단계별 상태를 자동으로 Slack 과 연동하여 Reporting 및 Deploy 해주는 기능에 대해서 알아보도록 하겠습니다.
CI/CD ·
앞선 포스트에서 구축하려하는 CI/CD 에 대한 개념과 관련된 기술에 대한 이해에 대한 설명을 간략하게 진행하였습니다. 이제 실제로 제가 작성한 프로세스와 디테일한 코드를 기준으로 확인해보겠습니다. 전체적인 프로세스는 아래와 같습니다.
CI/CD ·
회사에서 운영하는 프로젝트는 여러가지 절차가 존재하게 되는데요. CI(Continuous Integration, 지속 통합) 과 CD(Continuous Deploy,지속 배포) 는 어느 프로젝트이건 필요한 절차이며, 관리입니다.
Git·도구 ·
husky, git hook, github Action 을 사용해서 현재 CI/CD 를 자동화 시키려고 진행중이다. 짬을 내서 진행하는 도중 갑작스럽게 오류가 발생하여 확인해보니 간단한 깃헙 설정이 필요한 부분이었다.
Git·도구 ·
현재 회사에서 진행하고 있는 프로젝트에서도 Git Flow 기반으로 소스 관리를 진행하고 있다. 이번에 Nextjs 13 버전으로 아는 지인과 함께 프로젝트 하나를 기획하고 진행하려 한다. 환경 옵션을 잡는 중 해당 프로젝트도 협업이다 보니 Git Flow 를 적용하여 진행하려 하기에 간단하게 정리한다.
CI/CD ·
프로젝트에서 현재 프론트엔드 Quality Check 를 위한 SonarQube 관련 미션이 들어왔다. CI/CD 에 연동된 방식이 아닌 로컬에서 언제든지 현재 Code Quality 를 체크할 수 있도록 해달라는 미션이었다.
Git·도구 ·
블로그를 개발하던 중 문득 파일구조 상 네이밍을 변경해야 할 경우가 생겼다. 1deps 의 파일 네이밍을 대문자로 하여 소문자로 통일하기 위한 작업을 진행하였고, 아무 생각없이 여느떄와 같이 PUSH! 그때부터 지옥이 내 눈앞에 펼쳐지고 말았다.
개발 환경 ·
React Project 에서 패키지 매니저를 PNPM 을 사용하고 있다. Gatsby 4버전 을 사용하는데 몇가지 플러그인에서 Deprecated된 Peer-dependency 를 사용하기 때문에 Install 시에 아래와 같은 로그가 발생한다.
개발 환경 ·
이번 프로젝트에서 프로젝트 환경 을 구성하면서 package 의존성을 관리할 수 있는 Package Manager 에 대한 고민을 하게 되었다. 결과적으로는 pnpm 을 선택했고 왜 pnpm을 선택하였는지, 그리고 npm 과의 차이점을 기록한다.
개발 환경 ·
바쁜 나날동안 블로그 만들기를 꾸준히 진행을하다가 이번에 npm -> yarn Berry 로 Package Manager 를 변경하려고 한다.
Git·도구 ·
git 에 commit을 하고 push를 날렸는데 Repository에 들어가보니 폴더가 열리지 않는다. 그리고 폴더에는 아래와 같은 그림처럼 화살표가 보인다.
개발 환경 ·
개인적인 프로젝트를 진행하면서 발생했던 에러 모음 발생시 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 를 난독화하거나 특정 텍스트를 추출 하는 용도이다.
Git·도구 ·
webpack 과 관련되어 설정 후 git 에 올리려는 순간 VS Code 소스제어에 이상한 표시가 뜬다. 흠...너무 많다 저걸 다 올릴 필요없이 설정 파일만 올려야겠다...라는 생각이 들어서 node_modules 경로를 제외시키기로 한다.
개발 환경 ·
실무에서 주로 사용하는 대표적인 로더들에 대한 실습을 진행해본다. CSS-Loader : css 코드를 javascript 로 가져와서 사용 가능
개발 환경 ·
웹팩은 자바스크립트, 스타일시트, 이미지, 폰트 등 모든 소스를 각각의 모듈로 바라보기 때문에 import 구문을 사용하여 외부 소스를 활용한다.
개발 환경 ·
package.json 에 devDependencies 확인 이전에는 몰랐는데 이런 라이브러리 들을 사용할때 가장 먼저 봐야하는것이 help 를 통한 설명인것 같다. 각 command 가 어떤 역할을 하는지 알 수 있다.
개발 환경 ·
ES2015 부터 모듈을 지원했기 때문에 이전에는 script 를 html 에서 불러와 로딩하여 사용하였다. 위와 같이 진행하면 app.js 는 math.js 에서 sum 함수를 불러와 사용하지만, sum 함수가 전역 스코프에 노출되는 점으로 인해 문제가 발생할 여지가 있다.
Git·도구 ·
위와 같이 터미널에서 명령어를 치면 권한관련 'Operation not permitted' 에러 메시지가 나오게 된다. [설정]-[보안 및 개인 정보 보호]-[개인정보 보호]-전체 디스크 접근 권한]-[터미널]에 대한 보안을 해제 하면 된다.
Git·도구 ·
어느날 여느때와 같이 알고리즘을 풀고 깃에 올리려는 순간?? 에러가 발생한다. 찾아보니 Git Hub 에서 8월 13일부로 인증을 Password 에서 Token 으로 변경하였다.
개발 환경 ·
앞서 플러그인 사용법을 봤지만 이번에 새로 사용하는 겸 기록해둔다. 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)는 전 세계 자바스크립트 개발자들이 올려놓은 공개된 라이브러리 저장소에 올라와 있는 자바스크립트 라이브러리를 명령어로 설치 및 관리할 수 있는 패키지 매니저 이다.
