전체 글

HTTP란 무엇인가?HTTP(HyperText Transfer Protocol)는 클라이언트-서버 간의 요청/응답을 처리하는 프로토콜입니다.HTTP는 클라이언트와 서버 간의 요청-응답을 처리하는 애플리케이션 계층 프로토콜입니다. 기본적으로 stateless하며, 요청 방식(메서드)과 응답 코드, 헤더, 바디 등의 개념을 포함합니다. GET, POST, PUT, DELETE 같은 메서드를 사용해 리소스를 요청하고 조작합니다. 또한, HTTP/1.1, HTTP/2, HTTP/3 등의 버전이 있으며 성능과 보안 측면에서 차이를 보입니다.주요 개념HTTP의 특징Stateless (기본적으로 상태를 유지하지 않음)Request-Response 구조메서드(GET, POST, PUT, DELETE 등)와 역할HTTP..

추상화(Abstraction)란?추상화는 코드의 복잡성을 줄이기 위해 핵심적인 기능만 노출하고, 불필요한 세부 사항을 숨기는 개념입니다. 예를 들어, 자동차를 운전할 때 내부 엔진 동작을 몰라도 '엑셀을 밟으면 가속된다'는 것만 알면 됩니다. 프로그래밍에서도, 함수나 클래스가 내부 로직을 감추고 인터페이스만 제공하면, 더 쉽게 이해하고 유지보수할 수 있습니다. 복잡성을 줄이고, 사용자가 필요한 정보만 보이도록 설계내부 구현을 숨기고, 인터페이스만 제공하여 유지보수성을 향상**객체지향 프로그래밍(OOP)에서 핵심 원칙 중 하나 ✅ 추상화의 핵심 역할 → "불필요한 세부 사항을 숨기고, 핵심 기능만 제공"✅ 쉽게 이해할 수 있는 비유 → "자동차의 가속 원리를 몰라도 운전 가능"✅ 실제 코드 적용 가능성 →..

📌 Trunk-Based Development vs GitHub Flow 차이점둘 다 가벼운 브랜치 전략으로, 빠른 배포를 목표로 합니다. 하지만 몇 가지 중요한 차이가 있습니다.🚀 1. Trunk-Based Development (TBD)✅ 핵심 개념:main 브랜치(=Trunk)에서 직접 개발하고,짧은-lived feature 브랜치만 사용하며,하루에도 여러 번 main에 머지하는 방식.✅ 특징:브랜치는 짧게 유지 → 몇 시간 또는 하루 이내 병합Long-lived feature 브랜치 없음 → develop 브랜치 XCI/CD 필수 → main에 병합 시 항상 배포 가능 상태 유지✅ 워크플로우:main에서 직접 개발하거나 짧은-lived 브랜치 생성빠르게 개발 후 main에 머지CI/CD가 ma..

애자일 방법론(Agile Methodology)이란?애자일(Agile) 방법론은 빠른 개발과 지속적인 개선을 목표로 하는 소프트웨어 개발 방식입니다.고객의 요구 사항 변화에 유연하게 대응하고, 반복적인 개발과 피드백을 통해 품질을 개선하는 것이 핵심입니다.🛠 애자일 방법론의 핵심 개념반복적(Iterative) 개발 → 짧은 주기로 기능을 추가 및 개선고객 중심(Customer Collaboration) → 고객 피드백을 지속적으로 반영자율적인 팀(Self-organizing Team) → 개발팀이 주도적으로 의사결정변화 수용(Embrace Change) → 계획보다 적응을 중요하게 생각작동하는 소프트웨어(Working Software) → 문서보다 실제 동작하는 제품을 우선📜 애자일 선언(Agile ..

React의 Synthetic Event란?Synthetic Event(합성 이벤트)는 React가 브라우저의 기본 이벤트를 감싸서 제공하는 래퍼(wrapper) 객체입니다.즉, 브라우저 이벤트를 추상화한 React만의 이벤트 시스템입니다. React에서 이벤트 핸들러를 사용할 때 onClick, onChange 같은 속성을 JSX에서 작성하면, 내부적으로 Synthetic Event가 생성되어 브라우저의 native event를 감싸게 됩니다.1. Synthetic Event가 필요한 이유 ✅ 브라우저 간 호환성 유지React는 모든 이벤트를 자체적으로 관리하므로, 브라우저마다 이벤트 동작이 다르게 구현되는 문제를 해결할 수 있습니다.✅ 성능 최적화이벤트 리스너를 개별 DOM 요소에 붙이는 것이 아니라..

제어 역전(Inversion of Control, IoC)과 의존성 주입(Dependency Injection, DI)의 개념 및 차이점1. 제어 역전(Inversion of Control, IoC)제어 역전(IoC)은 객체의 흐름(제어)을 개발자가 직접 관리하는 것이 아니라 외부에서 제어권을 가져가고, 필요한 시점에 객체를 실행하는 디자인 패턴을 의미합니다.쉽게 말해, 객체의 생성과 실행 흐름을 프레임워크나 컨테이너에 맡기는 방식입니다.예제 1: 제어 역전이 없는 코드 (개발자가 직접 객체를 제어)class Service { run() { console.log("Service is running!"); }}class Application { constructor() { this.serv..

문제 정의불필요한 조건문과 중복된 로직이 가독성과 유지보수성을 해쳤습니다.if(pageQery !== null) { const page = Number(pageQuery); const start = page === 1 || page === 0 ? 0 : (page - 1) * MOIMS_ITEMS_PER_PAGE; // ...}급하게 구현하느라 생각이 가는 대로(?) 작성했던 코드.하지만 지나고 보니 너무나도 이상해 보였습니다.단순한 조건문 개선 상황이지만, 이런 실수를 계속 반복하면 안 된다고 생각했습니다.나는 앞으로도 이런 짓을 할 것인가? 하는 성찰의 순간이 찾아왔습니다.해결 과정🔍 왜 이해가 안되고 무슨 문제가 있었을까?page === 1 || page === 0 → 불필요한 조건문NaN,..

문제 정의목표: 사용자가 최대 3개의 태그를 입력할 수 있는 UI 구현해야 했습니다.처음엔 인풋 하나만 보이고, 사용자가 Tab 또는 Enter로 다음 인풋을 추가하는 방식입니다.문제: 한글 입력 중(IME 조합 상태) Tab 또는 Enter를 누르면,새 인풋이 빈 값이 아니라 마지막에 조합되던 한글이 남은 채로 생성되었습니다.의문: 영문 입력에서는 멀쩡한데 왜 한글에서만 이런 문제가 발생하는 것인지 의문이었습니다.해결 과정useFieldArray 오류 의심처음에는 React Hook Form의 useFieldArray 사용 방식이 잘못됐다고 생각해, append 시 ID 중복 문제, setValue 강제 초기화 등 여러 시도를 했으나 실패하였습니다.한글 입력 시 IME(입력기) 조합중 이벤트문제를 검색..

1. 설치pnpm add -D @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest jest jest-environment-jsdom mswpnpm create jest@latest2. jest.config 설정import type { Config } from 'jest';import nextJest from 'next/jest.js';const createJestConfig = nextJest({ dir: './',});const config: Config = { // Automatically clear mock calls, instances, context..

1. husky 추가pnpm add husky2. husky initpnpm exec husky init3. package.json 수정lint 와 format 만 수정{ "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint --cache .", "prepare": "husky", "format": "prettier --cache --write ." }}4. pre-commit, pre-push 파일 작성pre-commitpnpm lint pre-pushpnpm format 추가. build 및 chore 커밋 자동화위까지 설정해도 린팅 및 포맷팅이 잘 되..