TwentyTwentyOne

✅ React의 상태 관리 방식 비교: useState, Redux, Zustand, Recoil프론트엔드 실무와 면접에서 빠지지 않는 질문 중 하나는 바로 **“React에서 상태 관리를 어떻게 하시나요?”**입니다.React는 다양한 방식의 상태 관리 도구를 제공하며, 각각의 방식은 사용 목적, 규모, 복잡도에 따라 적절하게 선택해야 합니다.이번 글에서는 가장 많이 사용되는 4가지 상태 관리 방법을 비교하고, 실무에서 언제 어떤 도구를 선택해야 하는지를 중심으로 설명합니다.📌 1. 상태의 종류를 먼저 이해하자상태 구분 설명 예시로컬 상태컴포넌트 내부에서만 사용하는 상태모달 open 여부, 입력 필드전역 상태여러 컴포넌트에서 공유해야 하는 상태로그인 정보, 장바구니, 테마서버 상태외부 API 요청 결..

✅ CSS 전처리기(SASS, LESS)를 사용하는 이유와 장단점은?CSS만으로도 스타일링은 가능하지만, 유지보수성, 가독성, 재사용성이 중요한 규모에서는 한계가 존재합니다.이러한 문제를 해결하기 위해 등장한 도구가 바로 **CSS 전처리기(Preprocessor)**입니다.이번 글에서는 특히 **SASS(SCSS)**와 LESS를 중심으로 왜 쓰는지, 언제 쓰는지, 실무에서 어떤 문제를 해결해주는지를 정리합니다.📌 1. CSS 전처리기란?CSS 전처리기는 변수, 함수, 중첩(Nesting), 조건문 등 프로그래밍 개념을 CSS에 도입한 확장 문법입니다.컴파일 과정을 거쳐 일반 CSS 파일로 변환되며, 복잡한 스타일링 구조를 단순화하는 데 유리합니다.대표적인 전처리기:이름 확장자 특징SASS(SCSS)..

✅ CSS Flexbox와 Grid의 차이점과 사용 사례는?프론트엔드 면접에서 “Flexbox와 Grid의 차이점은?”이라는 질문은 단순 문법 암기보다는, 어떤 상황에 어떤 레이아웃 시스템을 선택하는지를 통해 레이아웃 설계에 대한 감각을 확인하려는 질문입니다.이번 글에서는 두 레이아웃 시스템의 철학적 차이, 실제 사용 예제, 실무에서의 선택 기준까지 완벽히 정리합니다.📌 1. Flexbox vs Grid – 핵심 개념 비교항목 Flexbox Grid축1차원(주축/교차축)2차원(행과 열 모두)정렬 단위아이템 중심 정렬레이아웃 전체 구조 중심 정렬제어 방향한 방향 (row/column)행과 열 동시 제어사용 목적컴포넌트 내부 정렬전체 페이지/섹션 레이아웃브라우저 지원IE11 일부 지원IE는 미지원 (Mod..

사르트르의 자유의지 vs 생성형 AI – 기계는 선택할 수 있는가?“인간은 자유를 선고받은 존재이다.”– 장 폴 사르트르, 『존재와 무』인간은 매 순간 선택하며 살아갑니다.어떤 말, 어떤 행동, 어떤 관계 속에서든 우리는 자유의지에 의해 스스로를 구성합니다.하지만 이제 우리는 묻습니다:AI는 선택할 수 있을까?AI에게도 자유의지가 있는가?이번 글에서는 실존주의 철학자 사르트르의 ‘자유’와 ‘책임’ 개념을 통해,AI가 가진 의사결정 구조와 인간의 자유 사이의 본질적인 차이를 탐구합니다.📌 사르트르의 ‘자유’란 무엇인가?사르트르는 인간을 **“자신의 본질을 스스로 창조하는 존재”**라고 보았습니다.우리는 주어진 본질이나 목적 없이 태어나,행위를 통해 자신을 규정해나가야 하는 존재입니다.“실존은 본질에 앞선..

✅ TypeScript를 사용하는 이유와 장단점은?“왜 TypeScript를 쓰시나요?” 이 질문은 프론트엔드 개발 면접에서 거의 빠지지 않는 질문입니다.단순히 “정적 타입 언어라서요”를 넘어서, 협업, 리팩토링, 실무 유지보수 관점에서 "왜" 써야 하는지, 언제 쓰면 효과적인지까지 설명할 수 있어야 합니다.이번 글에서는 TypeScript의 기술적 강점, 실무 경험 기반 장단점, 그리고 현실적인 선택 기준을 함께 정리해보겠습니다.📌 1. TypeScript란?TypeScript는 JavaScript에 타입 시스템을 추가한 정적 타입 언어입니다.컴파일 시점에서 오류를 잡고, 개발 도구의 자동완성(Autocomplete), 코드 탐색(Jump to Definition) 등을 가능하게 합니다.functio..

✅ ES6 이상의 주요 기능: Arrow Function, Promise, Async/Await 완전 이해하기현대 JavaScript의 핵심은 ES6 이후 등장한 문법들입니다. 이 중 Arrow Function, Promise, Async/Await는 특히 비동기 처리와 가독성 향상에 중요한 기여를 한 문법입니다.이번 글에서는 이 세 가지 기능을 단순 문법 설명이 아닌 실무 활용 및 문제 해결 중심으로 파헤쳐 보겠습니다.📌 1. Arrow Function (화살표 함수)✅ 정의function 키워드 없이 더 간결하게 함수를 작성할 수 있는 표현식.const add = (a, b) => a + b;✅ 주요 특징항목 내용this기존 스코프의 this를 바인딩 (Lexical this)문법return 문 생..

✅ JavaScript에서 클로저(Closure)란 무엇이며 어떤 상황에서 사용하나?클로저(Closure)는 자바스크립트 엔진의 동작 방식과 실행 컨텍스트에 대한 깊은 이해를 묻는 대표적인 면접 질문입니다. 단순한 개념 설명을 넘어서, 어떤 문제를 해결하는 기술인지를 중심으로 접근해봅시다.📌 1. 클로저란 무엇인가?클로저란 함수가 자신이 선언될 당시의 스코프(Lexical Scope)에 접근할 수 있는 능력을 의미합니다.함수가 외부 함수의 지역 변수에 접근하고, 해당 외부 함수가 실행을 마친 후에도 그 변수에 계속 접근할 수 있는 상태를 유지하는 것이죠.function outer() { let count = 0; return function inner() { count++; return ..

✅ JavaScript의 원시 타입과 참조 타입의 차이는? 완전 정복 가이드프론트엔드 면접에서 자주 등장하는 **JavaScript의 원시 타입(Primitive Type)**과 **참조 타입(Reference Type)**의 차이는, 단순한 이론적 지식이 아니라 코드 설계, 버그 추적, 성능 최적화까지 연결되는 실전 지식입니다.이번 글에서는 면접 대비를 넘어 실무에서의 적용 방법까지 정리해보겠습니다.📌 1. 기본 개념: 메모리 저장 방식이 다르다🔹 원시 타입 (Primitive Type)**불변 값(Immutable)**이며, 값 자체를 저장함.변수에 할당 시 값이 복사되어 전달됨.typeof로 식별 가능타입 예시string'hello'number42booleantruenullnullundefine..