본문 바로가기

전체 글212

husky 를 통해 Git 훅 적용 설명Husky는 Git Hook을 더 쉽게 관리하고, 팀 협업에서 일관성을 유지할 수 있도록 돕는 JavaScript 라이브러리입니다.가볍고 빠르며 광범위한 지원으로 다양한 환경과 워크플로어에 쉽게 통합해 사용 가능합니다.기능Git Hook 설정 자동화: Git Hook을 직접 작성하지 않고, package.json 또는 설정 파일에서 간단히 관리 가능.Node.js와 통합: JavaScript를 사용하여 Git Hook 스크립트를 작성 가능하다.일관성 유지: 프로젝트의 Git Hook 설정을 팀원과 공유 가능.가볍고 빠름 (2KB, runs in ~1ms )custom directory : git 설정 옵션 core.hooksPath 설정하여 custom hooks 의 directory 따로 관리 가능.. 2025. 1. 4.
git Patch 생성과 적용 Patch 생성git diff 와 git format-patch 명령어들로 패치 파일을 생성할 수 있습니다. 이 파일은 다른 사람에게 변경 사항을 전달하거나 나중에 적용할 때 사용됩니다.※ git patch 라는 명령어가 있는 것이 아니다.1. git diff 현재 작업 중인 변경 사항을 비교하고, 그 차이를 패치 형식으로 출력합니다. git diff > patch.diff 명령을 사용하면, 현재 작업 디렉토리에서의 변경 사항을 patch.diff라는 파일로 저장할 수 있습니다.git diff > patch.diff※ diff 형식두 파일 간의 차이를 나타내는 파일입니다.커밋 메시지나 작성자 정보와 같은 메타데이터는 포함되지 않습니다.ex)--- old_file.txt+++ new_file.txt@@ .. 2025. 1. 3.
git hook 정리 설명Git Hook은 특정 Git 이벤트가 발생했을 때 자동으로 실행되는 스크립트를 말하며 기본적으로 쉘 스크립트로 실행됩니다.클라이언트 측 Hook개발자의 로컬 저장소에서 실행됩니다. 주로 commit, merge, push 와 같은 작업 이전에 코드를 검증하거나 자동화 작업을 수행하는 데 사용됩니다.pre-commit: 커밋 전에 실행, 코드 검증 및 테스트 수행.prepare-commit-msg: 커밋 메시지 작성 전 기본 메시지를 수정.commit-msg: 커밋 메시지가 작성된 후, 메시지 검증.post-commit: 커밋 후 실행, 알림 전송이나 로그 작성.pre-merge-commit: 병합 커밋 생성 전에 실행.pre-push: 푸시 전에 실행, 테스트나 검증 수행.post-checkout:.. 2025. 1. 3.
[CSS] 기본 display(inline, block, inline-block) 이해와 style 제한 예전에 css 배우고 난 이후 제대로 공부한게 많지 않아 기본 display(inline, block, inline-block) 에 대한 이해가 부족한 것 같아 정리※ flex 를 자주 쓰기도 하고 대강 안다고 생각하면서 제대로 짚지 않아 정리할 필요성을 느낌1. block 설명*block 요소는 전체 너비를 차지하고, 항상 새로운 줄에서 시작하여 레이아웃에 큰 영향을 미칩니다.style 관련기본적으로 부모 컨테이너의 전체 너비를 차지(width: 100%)하며 높이는 콘텐츠 크기에 맞춰(height: auto)집니다.width와 height 속성을 사용하여 크기를 지정할 수 있습니다.margin, padding, border를 모두 적용할 수 있습니다.2. inline 설명inline 요소는 기본적으로.. 2024. 12. 31.
<a role="button"> 과 <button> 차이는 무엇일까? [접근성, SEO] 상황 설명텍스트 형식의 요소에 click 이벤트를 달아서 사용하려 할 때 다음과 같은 의문점이 들었다 "link 느낌의 요소라면 button 태그보다 a 태그를 쓰는 것이 더 적절하지 않나?"거기에 더해서 role="button 속성을 사용해서 접근성을 보완해서 사용하면 적절하겠다는 결론에 다다라서 최종적으로 ... 형태로 구성했다.그러던 와중 SEO 측면에서 과연 이런 방식이 유용한지에 대해 의문이 생겨 내용을 찾아보게 됐다.WAI-ARIA의 role 이해WAI-ARIA role 은 웹 페이지의 요소가 수행하는 기능을 명시적으로 정의하여 스크린 리더나 다른 보조 기술이 해당 요소를 이해하고 적절한 방식으로 상호작용할 수 있도록 도움을 줍니다. HTML 요소는 본래 기본 역할을 가지고 있지만, ARIA.. 2024. 11. 28.
nextjs middleware.js | ts 설명middleware.ts는 Next.js에서 애플리케이션의 특정 경로 요청에 대해 공통적으로 실행할 작업즉 middleware 를 정의하여 요청(Request)이 처리되기 전에 실행됩니다. 직접적으로 response 및 request / response header 헤더를 수정하거나 rewriting, redirecting 등을 처리 할 수 있습니다. 프로젝트 루트 즉 쉽게 pages나 app 과 같은 레벨에서 작성해서 사용합니다.주요 예시 1. 인증 및 권한 부여 (Authentication and Authorization)특정 페이지나 API 경로에 대한 액세스 권한을 부여하기 전에 사용자 신원을 확인하거나 세션 쿠키를 확인 할 수 있습니다.2. 서버 측 redirects (Server-Side .. 2024. 11. 26.
React Hook Form 이해 설명form 을 다룰 때 사용하는 라이브러리로 최적화, 유효성 검증, api 등 유용한 기능 등을 제공합니다.controlled/uncontrolled components 란uncontrolled components: 값이 DOM에서 관리되는 컴포넌트로, React 상태와 별개로 DOM 자체가 입력값을 보관하여 리렌더링이 최소화되는 방식의 컴포넌트controlled components: 값이 React 상태로 관리되는 컴포넌트로, value와 onChange 이벤트를 통해 실시간으로 상태가 제어되는 방식의 컴포넌트주요 기본 기능1. 최적화React Hook Form 는 주로 uncontrolled components 를 사용하여 불필요한 리렌더링을 방지하고 직관적인 api 를 제공하여 효과적으로 로직을 .. 2024. 11. 2.
[React] 지나친 추상화 및 파일 분리 시 주의점 설명평소 최대한 코드를 분리하여 각 코드/파일의 기능을 최소화하여 형태와 기능을 한눈에 파악할 수 있게 구성하는 방식으로 개발해왔는데최근 코드 리뷰 중 지나친 추상화 및 코드/파일 분리로 오히려 로직의 흐름을 따라가기 힘들다는 조언을 받아 수정하면서 배운 내용을 정리하고자 한다.주의점1. 복잡한 구조로 인한 가독성 저하지나치게 많은 파일과 추상화된 컴포넌트를 생성하면, 코드가 여러 레이어로 나뉘어 복잡해지며 직관적으로 요소의 스타일이나 기능을 파악하기 어려워지기 때문에 이해하는 데 오히려 시간이 많이 걸릴 수 있습니다. 예를 들어 작은 수정사항에도 여러 파일을 확인해야 할 수도 있습니다2. 불필요한 코드 중복과 비효율성모든 상황에 맞추어 사용할 수 있는 범용적인 컴포넌트를 만들려고 하면 실제로 필요 이상.. 2024. 11. 2.
shadcn/ui 의 Form component 활용 설명shadcn/ui component 들 과 react-hook-form 들의 기능을 활용해 구성된 form 형식의 컴포넌트기능 및 장점FormField 를 통해 form field 를 제어zod 를 사용해 form 데이터 유효성 검사접근성 및 오류 메시지를 핸들링 가능React.useId() 를 사용하여 고유 id 활용적절한 aria 속성 적용다른 스키마 라이브러리와도 사용 가능스타일과 마크업 커스텀이 자유로움기본적인 Form component 구조 ( { /* 실제 form field ㅣlabel */} { /* 실제 form field 요소 */} { /* form field 설명 */} .. 2024. 9. 11.
typescript Optional Properties 이해 설명일반적으로 javascript 는 유효하지 않은 속성에도 접근이 가능하며 undefined 를 반환한다. 객체에 해당 속성이 자체가 없는 경우나 속성이 아직 정의되지 않은 경우 모두 undefined 인 조금은 아이러니한 상황을 마주 할 수 있다.typescript 에서 Optional Properties 를 활용해 앞서 언급한 위 두 상황을 조금 더 명확하게 표현 할 수 있다.// appleCount 속성의 타입이 number이거나 undefined입니다.interface fruitStoreA { appleCount: number| undefined}// appleCount 속성이 존재하지 않을 수 있으며, 존재한다면 그 타입이 number입니다. // appleCount 속성에 접근할 경우,.. 2024. 8. 3.
[TypeScript] if/else, switch 대신 객체 리터럴 패턴 활용 객체 리터럴 패턴을 활요한 조건문 로직 구현특정 조건에 따라 각기 다른 로직을 구현할 경우 if/else 혹은 switch 를 활용하는 방식이 기본적이나 객체 리터럴 방식으로 구현 시 장단점에 대해 정리해보려 한다.간단 예시type SelectionType = "A" | "B" | "C"function testObjPattern(selection:SelectionType) { const ObjPattern:Record string> = { A: () => "apple", B: () => "bear", C: () => "car" } return ObjPattern[selection]}코드 설명특정 조건에 따라 실행될 로직을 리터럴 형식의 객체안에 로직을 구현하고, 실제 사용하기.. 2024. 7. 3.
[JS] 코딩 테스트 문제 : 동전 교환 [배낭(KnapSack) 알고리즘] 문제 : 동전 교환(냅색 알고리즘)문제 설명다음과 같이 여러 단위의 동전들이 주어져 있을때 거스름돈을 가장 적은 수의 동전으로 교환해주려면 어떻게 주면 되는가? 각 단위의 동전은 무한정 쓸 수 있다. ▣ 입력설명첫 번째 줄에는 동전의 종류개수 N(1각 동전의 종류는 100원을 넘지 않는다. ▣ 출력설명첫 번째 줄에 거슬러 줄 동전의 최소개수를 출력한다. ▣ 입력예제 131 2 515 ▣ 출력예제 13설명 : 5 5 5 동전 3개로 거슬러 줄 수 있다.오답 노트function solution(m, coin) { let answer = 0; let answerArr = []; sortArr = coin.sort((a, b) => b - a); for (const c of sortArr).. 2024. 5. 29.

티스토리툴바