JavaScript 패키지 관리 아키텍처 심층 분석npm, Yarn, pnpm의 진화와 메커니즘들어가며: 단순한 “패키지 설치 도구”가 아닌, 프로젝트의 인프라개발을 하다 보면 누구나 한 번쯤 npm install을 입력해봤을 것입니다.하지만 단 한 줄의 명령어 뒤에 숨은 복잡한 메커니즘과 아키텍처적 선택에 대해 진지하게 생각해본 적은 많지 않습니다.사실, JavaScript 생태계에서 패키지 매니저의 선택은 단순한 도구 결정이 아닙니다.그건 팀의 개발 문화와 철학을 반영하는 아키텍처적 결정입니다.빌드 속도, 캐시 전략, CI/CD 효율성, 그리고 팀 전체의 생산성까지 이 한 선택에 영향을 받습니다.JavaScript 패키지 매니저의 역사는 말 그대로 ‘문제 해결의 역사’입니다.npm으로 시작해 Yarn..

저희 회사에서는 openapi 스펙으로 api 스펙을 정의하여 백엔드와 프론트엔드간에 api 스펙을 공유하고 있습니다.프론트엔드에서는 openapi generator에서 제공하는 typescript-axios를 사용하여 타입스크립트로 코드젠을하여 api에 대한 타입 정의를 자동적으로 생성하고 있습니다.openapi generator에 대한 간단한 소개와 사용하면서 부딪친 버그들을 소개하겠습니다.openapi generator란openapi-generator는 위에서 설명한 것 처럼 openapi 스펙으로 정의된 문서를 다양한 코드로 코드젠을 해주는 도구입니다.  install설치 방법은 공식문서를 참고 하시는 것이 제일 좋습니다. 예시는 brew를 사용하여 설치하는 방법입니다.brew install op..

vs code extentions에 대해서 작성한 글에 이어서 현재 제가 사용하고 있는 확장기능에 대해서 작성합니다 1. HTML Snippets 확장기능 이름처럼 html snippet으로 html이나 jsx 파일에서 태그들을 쉽게 작성할 수 있게 해줍니다. 그림처럼 태그를 입력한 후 tab키를 누르면 코드가 작성됩니다. 만약 실수로 창을 껐다면 ctrl + space를 누르면 창이 다시 나타납니다 2. Reactjs code snippets react를 사용할 때 컴포넌트 등을 쉽게 만들 수 있는 스니펫입니다. 저는 주로 rsc 단축어를 많이 사용합니다 3. Path Intellisense Path Intellisense는 path를 가이드해주는 확장기능입니다. 4. Prettier - Code fo..

vscode의 ssh 익스텐션을 설치하면 vscode를 통해 원격 접속이 가능하고 폴더 구조와 파일 수정을 vi를 사용하지 않고 vscode를 통해 가능하여 애용하는 익스텐션이다. 새로운 서버에 개발환경을 구축해야하는 상황이 되어 기본적인 node mysql apache설치를 끝낸 후 vscode를 통해 ssh 접속을 하려 했으나 아래와 같은 에러가 나타났다 vscode remote ssh the vs code server failed to start 해당 에러를 검색하고 해결하기 위해 시도를 해보았지만 실행이 되지 않았다. 찬찬히 처음부터 진행을 해보기로 하였다. https://code.visualstudio.com/docs/remote/troubleshooting#_installing-a-suppor..

vscode에서 사용하는 개인 설정 파일입니다.vscode는 ctrl + , 를 통해 설정을 바꾸거나 json파을을 통해 설정을 변경 할 수 있습니다.통일된 개발 환경을 위해 json파일을 사용하는 것을 선호합니다. json파일을 적용하기 위해서는 아래와 같이 파일을 만들어야 합니다 .vscode/setting.json 사용중인 기본 세팅{ "editor.tabSize": 2, "editor.formatOnSave": true, "prettier.jsxSingleQuote": true, "prettier.printWidth": 100, "prettier.singleQuote": true} tabSize : tab시에 공백을 몇칸으로 줄지 설정formatOnSave : 저장시에 코드 포멧터를 자동 적용 (..

"files.associations": { "*.tpl": "html", "*.master": "html" }

vscode를 사용하여 ec2 리모트 extention 다운로드 : remote development ec2 pem키 또는 비밀번호 설정 f1 누른 후 opne config 둘 중 아무거나 Host vscode에서 사용 할 이름 HostName ec2호스트주소 User ec2유저이름 IdentityFile ~/.ssh/aws_ec2.pem identityfile을 사용하려면 해당 경로에 pem키를 넣어야함

win 단축키 설명 ctrl + F 문자 찾기 ctrl + H 선택한 문자를 다른 문자로 변경 tap 들여쓰기 shift + tab 내여쓰기 ctrl + \ 화면 분할 ctrl + W 분할 된 창 닫기 ctrl + alt + ➡ or ⬅ 분할 된 창으로 이동 shift + alt + down 위에 행 복사 추가 shift + alt + up 아래에 행 복사 추가 약어로 랩핑(Wrap)랩핑할 코드 선택모든 명령 표시 실행 / “Ctrl + Shift + P”(Windows), “Cmd + Shift + P”(macOs)Emmet: Wrap with Abbreviation(Emmet: 약어로 랩핑)를 입력하거나 목록에서 선택(“Enter”)div, span 등의 Emmet 문법(ex: .wrapper, sp..

VS Code 확장 기능(Extensions) 2탄 : https://jcon.tistory.com/180 Korean Language Pack for Visual Studio Code한글화 확장 기능 Prettier가장 대중적으로 쓰이는 코드 포멧터기본 설정 방법 : 컨트롤 + , 를 누른 후 formatOnSave검색 후 체크설정이 완료 되면 저장 시 마다 자동으로 인덴트 등을 잡아준다. 상세한 설정은 다른 포스팅에서 다룰 예정beautify와 같이 쓸 경우 충돌이 나니 둘 중 하나만 사용할 것Beautifybeautify는 코드의 들여쓰기를 정리해주는 확장기능 입니다 설치 후에 키 지정이 필요합니다 기여 탭에 명령 탭을 보면 두가지 메뉴가 보입니다 selection은 선택된 부분의 코드를 정리해주고..