개발15 [fork, nvm] fork와 환경변수충돌(?) 기록용 목차 개요개발을하면서 커밋을하고 fork앱에서 push를 할 때 생긴 일이 있는데 husky의 pre-push 를 할때 아래와 같이 파일을 세팅하였는데pnpm이 없다라고하는 일이 일어났었다.pnpm lintpnpm tsc husky 이슈를 찾아보기https://github.com/fork-dev/Tracker/issues/311 Pre-commit hook can't find node · Issue #311 · fork-dev/TrackerHey there, I'm using husky to run a pre-commit hook on my repo, and everything runs correctly in my terminal when I run git commit -m "some messa.. 2024. 12. 2. [npm] npm 회원가입 목차https://www.npmjs.com/ npm | HomeBring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Javawww.npmjs.com 회원가입 하기https://www.npmjs.com/signup npm | Sign Up www.npmjs.com회원가입 폼에서 등록한 이메일로 온 password입.. 2024. 12. 1. [git,husky] husky, lint-staged는 무엇인가? 목차 Husky를 알기에 앞서Husky를 알기에 앞서 일단 "git hook"이라는 것을 알아야한다.git hook?git hook은 git의 특정 이벤트가 발생하는 것에 반응하여 자동으로 실행하는 스크립트이다. ex) commit, push git hook의 단점- 설정이 까다롭다.- 팀원들이 사전에 레포지토리를 clone을 받고 정식 절차를 거쳐야 hook이 실행됨을 보장한다. 위의 단점을 커버하는 방법?git hook을 반드시 적용하게 끔 할 수있는 방법이 있을까?이럴 때 사용하는게 husky라고 한다. Husky?https://typicode.github.io/husky/ Husky typicode.github.io위는 허스키에대한 홈페이지 이다.내용을보면 자동으로 커밋메시지, 코드 등을 .. 2024. 8. 13. [vscode, prettier] vscode에서 프리티어 자동저장 시키기 목차 vscode에서 prettier를 자동 적용 시키게해보자프로젝트 내부에서 사용하고있는 .prettierrc파일이 있다. 하지만 파일을 저장할때 저장이안되는 이슈가있었다. 적용방법익스텐션 설치익스텐션 Prettier - Code formatter를 설치해준다. 프로젝트 루트에 .prettierrc파일 추가프로젝트 루트에 해당 세팅을 추가해준다. VScode 세팅에 Default Formatter 설정맥기준 [command + , ] 명령어를 통해서 설정을 열어준다.그리고 default formatter를 검색후 우측의 Editor: Default Formatter에 Pretteir를 적용해준다. VSCode 파일저장시 프리티어 설정되게 설정format on save 검색Editor : Forma.. 2024. 7. 12. [Git] Github commit message 템플릿 화하기 목차 왜 템플릿를 하는가?git commit message 를 작성하다보니 비슷하게 반복하는 내용을 적어줘야하는 불편함이 생겼다. 그래서 git commit message를 템플릿화 하는 방법이있지 않을까 해서 알아본 내용을 공유하려고 한다. 적용방법 템플릿화 할 txt파일 생성템플릿을 적용하고싶은 프로젝트 root에 commit-template.txt라는 파일을 생성해준다.commit-template.txt# 타입: feat, fix, docs, style, refactor, test, chore 중 하나# 스코프: 변경된 코드의 범위를 지정# 제목: 50자 이내로 간결하게 변경 사항을 요약feat(auth): add OAuth2 login# 본문: 변경 사항에 대한 자세한 설명# 여러 줄로 작성.. 2024. 6. 22. [pnpm] pnpm 알아보기 목차 PNPM이란?PNPM(Package Now, Performant Managing)은 Node.js 생태계에서 패키지를 관리하기 위한 패키지 매니저이다.PNPM은 NPM(Node Package Manager) 및 Yarn과 같은 다른 패키지 매니저들과 비슷한 기능을 제공하지만, 몇 가지 중요한 차이점과 장점이 있다. 주요 특징 및 장점성능 향상PNPM은 패키지를 설치할 때 하드 링크와 심볼릭 링크를 활용하여 디스크 공간을 절약하고 설치 속도를 크게 향상시킨다. 이는 중복된 패키지의 다운로드를 방지하고, 패키지 설치 시간을 줄여준다.저장 공간 절약패키지들이 전역적으로 저장되기 때문에, 동일한 패키지가 여러 프로젝트에서 공유될 수 있다. 이는 디스크 공간을 크게 절약해준다.고유의 Node 모듈 구조.. 2024. 6. 13. [node.js, 라이브러리]UUID와 'uuid' 라이브러리 알아보기 목차 UUID란 무엇인가?UUID(Universally Unique Identifier)는 전 세계적으로 고유한 식별자를 생성하기 위해 사용되는 표준이다. 이는 시스템 간에 고유한 ID를 보장해야 하는 다양한 상황에서 유용하다. UUID는 주로 데이터베이스의 기본 키, 트랜잭션 ID, 디바이스 식별자 등 다양한 용도로 사용 된다.UUID는 128비트 길이의 숫자로, 32개의 16진수 문자로 표현된다. 예를 들어, `123e4567-e89b-12d3-a456-426614174000`과 같은 형태를 가진다. UUID의 버전UUID에는 여러 버전이 있으며, 각 버전은 특정한 생성 방식을 따른다. 주요 버전은 다음과 같다.UUIDv1 : 시간과 노드(일반적으로 MAC 주소)를 기반으로 생성된다.UUIDv3 .. 2024. 6. 3. [Next.js,TS,Three] 나의 3D캐릭터Three.js에 표출하기 - 개인기록 목차 사전 작업https://www.youtube.com/watch?v=1ZDjzJm3vPY&t=182s프로필용 캐릭터를만드는 방법은 위 유튜브에 적혀있다.언급된건 4개지만 사용하는건 PPM을제외한 아래 3개 사이트이다.Profile Pic Maker ⇢ https://pfpmaker.com/Ready Player Me ⇢ https://readyplayer.me/Blender ⇢ https://www.blender.org/download/Mixamo ⇢ https://www.mixamo.com/#/아바타 만들기위 유튜브를 참고해서 위 링크중 Ready Player Me 에서 아바타를 만들어서 .glb 형식으로 다운로드 해준다. Blender 다루기당시 blender 최신버전인 4.1버전을 다운로드하.. 2024. 5. 28. [Next.js, React] useState, useEffect 코드 컨벤션 목차 useState 상태 변수와 설정 함수의 명명상태 변수와 설정 함수는 의미 있는 이름을 사용한다.상태 변수는 단수형 명사, 설정 함수는 `set` 접두사를 사용한다.예 `const [count, setCount] = useState(0);`초기 값 설정상태 변수의 초기 값은 올바른 타입을 사용하여 명확하게 설정한다.예: `const [name, setName] = useState('');`상태 초기화 함수초기 상태를 계산하는 데 복잡한 로직이 필요하면 상태 초기화 함수를 사용한다.예: `const [value, setValue] = useState(() => computeInitialValue());`상태 그룹화관련된 상태 값은 객체로 그룹화하여 관리한다.const [formState, setFor.. 2024. 5. 23. TSX에서의 코드 컨벤션 목차 파일 및 폴더구조폴더 구조 : 컴포넌트는 기능별 또는 도메인 별로 폴더를 구성한다.src/ components/ Header/ Header.tsx Header.styles.ts Header.test.tsx Button/ Button.tsx Button.styles.ts Button.test.tsx pages/ Home/ Home.tsx Home.styles.ts Home.test.tsx 네이밍 컨벤션 파일명컴포넌트 파일은 PascalCase를 사용한다.`Header.tsx`, `Button.tsx`컴포넌트 명컴포넌트 이름도 PascalCase를 사용한다.`const MyComponent: Rea.. 2024. 5. 23. 이전 1 2 다음
