그린티_

서론JavaScript로 개발하다 보면 조건문에서 ==랑 ===를 뭘 쓸지 고민하게 됨처음엔 "둘 다 같은 거 비교하는 거 아닌가?" 싶었는데, 실제로 써보니 ==가 예상과 다르게 동작하는 경우가 꽤 있었음예를 들어 API에서 받은 데이터가 문자열 "1"인데 숫자 1과 비교할 때, ==로 비교하면 true가 나오길래 편하다고 생각했음근데 나중에 null == undefined이 true라든가, "" == 0이 true라는 걸 보고 "이건 좀 위험하다" 싶었음면접에서도 ==와 ===의 차이는 거의 무조건 나오는 질문이고, 타입 변환(Type Coercion)까지 설명할 수 있어야 제대로 된 답변이 되겠다 싶어서 정리해봄본론1. == (동등 연산자, Loose Equality)==는 비교할 때 타입이 다르면..

서론JavaScript로 처음 개발을 시작했을 때는 변수 선언에 크게 신경을 안 썼음let이랑 const만 쓰면 된다고 해서 그렇게 하고 있었는데, 면접 준비를 하다 보니 "var, let, const의 차이를 설명해보세요"라는 질문이 정말 자주 나옴단순히 "var는 옛날 거고 let은 변수, const는 상수"라고 답하면 부족하고, 스코프, 호이스팅, TDZ, 재선언/재할당 네 가지 관점에서 정확하게 설명할 수 있어야 함이전에 호이스팅 글에서 살짝 다뤘는데, 이번에는 var vs let vs const를 중심으로 깊게 정리해봄본론1. 스코프(Scope) 차이 — 가장 핵심적인 차이var: 함수 스코프var는 함수 스코프(Function Scope)를 가짐. if, for, while 같은 블록({})을..

서론JavaScript로 개발하다 보면 Array.prototype.map, Object.prototype.toString 같은 표현을 자주 보게 됨처음엔 "prototype이 뭔데 여기저기 붙어있지?" 싶었고, class 문법만 쓰다 보니 프로토타입을 깊게 생각해본 적이 없었음근데 면접 준비하면서 "JavaScript는 프로토타입 기반 언어입니다"라는 말이 계속 나오고, class도 결국 프로토타입의 문법적 설탕(syntactic sugar)이라는 걸 알게 됨"그러면 진짜 상속은 어떻게 동작하는 거지?" 싶어서 프로토타입부터 프로토타입 체인까지 정리해봄본론1. 프로토타입이 뭔데?JavaScript에서 모든 객체는 숨겨진 링크를 가지고 있음. 이 링크가 가리키는 객체를 프로토타입(Prototype)이라고..

서론클로저를 공부하면서 "렉시컬 스코프"라는 개념이 나왔는데, 사실 스코프 자체를 제대로 정리한 적이 없었음개발하다 보면 "이 변수 왜 여기서 접근이 안 되지?", "같은 이름의 변수인데 왜 값이 다르지?" 같은 상황을 겪게 되는데, 이게 전부 스코프 때문이었음면접에서도 "스코프가 뭔가요?", "스코프 체인이 어떻게 동작하나요?" 같은 질문이 자주 나온다고 해서, 이번에 스코프와 스코프 체인을 처음부터 정리해봄본론1. 스코프(Scope)란?스코프는 변수에 접근할 수 있는 범위를 의미함쉽게 말해서, "이 변수를 어디서 쓸 수 있는가?"를 결정하는 규칙function greeting() { const message = '안녕하세요'; // message는 greeting 함수 안에서만 접근 가능 cons..

서론JavaScript로 코드를 짜다 보면 가끔 이상한 상황을 마주함분명 변수를 아래에서 선언했는데 위에서 쓸 수 있거나, 함수를 선언하기 전에 호출해도 잘 동작하는 경우가 있음처음엔 "JavaScript가 위에서 아래로 실행되는 거 아니었어?" 싶었고, 면접 준비하면서 호이스팅(Hoisting)이라는 개념이 이걸 설명한다는 걸 알게 됨var, let, const, 함수 선언이 각각 어떻게 호이스팅되는지, 그리고 면접에서 자주 나오는 TDZ(Temporal Dead Zone)까지 정리해봄본론1. 호이스팅이란?호이스팅은 변수와 함수의 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 현상실제로 코드가 물리적으로 이동하는 건 아니고, JavaScript 엔진이 코드를 실행하기 전에 선언부를 먼저 메모리에..

서론JavaScript로 개발하다 보면 함수 안에 함수를 쓰는 경우가 정말 많음React에서 useState, 이벤트 핸들러, useEffect 안에서 외부 변수를 참조하는 것도 사실 다 클로저와 관련이 있었음처음엔 "함수가 끝났는데 왜 변수가 살아있지?" 싶었고, 면접 준비하면서 클로저가 단골 질문이라는 걸 알게 됨"클로저가 뭔가요?"라는 질문에 제대로 대답하려면 렉시컬 스코프부터 알아야 해서, 처음부터 정리해봄본론1. 먼저 렉시컬 스코프(Lexical Scope)를 알아야 함클로저를 이해하려면 렉시컬 스코프부터 알아야 함function outer() { const name = '그린티'; function inner() { console.log(name); // '그린티' } inner()..

서론React 프로젝트를 하다 보니 API 호출이 정말 많았음useEffect에서 fetch로 데이터를 받고, 로딩 상태, 에러 상태를 관리하고... "매번 이렇게 해야 하나?" 싶었음그리고 데이터를 받은 후에 같은 데이터를 또 받으려고 하면 불필요하게 API를 또 호출하더라"이미 받은 데이터인데 왜 다시 받아?"라는 생각이 들었음, 그러다가 React Query와 SWR 같은 라이브러리를 발견했음이들이 어떻게 다르고, 언제 뭘 써야 하는지 정리해봄본론문제 1: 반복되는 데이터 페칭 코드// 모든 컴포넌트에서 이렇게 해야 함...function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoa..

서론React 코드를 작성하면서 항상 궁금했음 "React가 뭐가 그렇게 빠르지? 매번 다시 렌더링하는데?" 찾아보니 Virtual DOM이라는 게 있고, Reconciliation이라는 과정이 있더라 "실제 DOM을 직접 건드리지 말고, 가상의 DOM에서 비교한 다음에 필요한 것만 업데이트한다"는 거 같았음 그래서 Virtual DOM이 뭐고, Reconciliation이 뭐고, 어떻게 빠르게 하는지 정리해봄본론DOM이 뭐냐?먼저 DOM(Document Object Model)을 이해해야 함 안녕하세요 첫 번째 문단 이 HTML을 브라우저가 해석하면 이런 구조의 DOM 트리가 생김:Document └── html └── body └── d..

서론React를 쓰다 보니 useState, useEffect 같은 Hook들을 자주 쓰게 됨근데 같은 로직을 여러 컴포넌트에서 반복하게 되는걸 확인함"이걸 어디 따로 빼서 재사용할 수 없을까?" 싶었음그러다가 Custom Hooks라는 게 있다는 걸 알게 됨Custom Hooks를 쓰면 로직을 재사용 가능한 함수로 만들 수 있다고 함그래서 Custom Hooks가 뭐고, 어떻게 만드는지 정리해봄본론Custom Hooks란?Custom Hook은 state 로직을 재사용하기 위한 JavaScript 함수여러 컴포넌트에서 같은 로직이 반복되면, 그걸 Custom Hook으로 만들어서 공유할 수 있음Custom Hook의 규칙:함수 이름은 use로 시작해야 함 (useXxx 형태)Hook은 Hook 안에서만..

Framer Motion으로 React 애니메이션 마스터하기서론React에서 애니메이션을 만들려고 하니까 CSS 애니메이션도 있고, 라이브러리도 여러 개더라 그 중에 Framer Motion이라는 게 있다고 들었음. 처음엔 "그냥 CSS로 하면 되지 않나?" 싶었는데, 찾아보니 훨씬 강력하더라 Framer Motion을 쓰면 복잡한 애니메이션을 간단하게 만들 수 있다고 함. 그래서 Framer Motion이 뭐고, 어떻게 쓰는지 정리해봄.본론Framer Motion이 뭐야?Framer Motion은 React를 위한 애니메이션 라이브러리 선언적 문법으로 복잡한 애니메이션을 간단하게 만들 수 있음Framer Motion의 철학:애니메이션을 "선언적으로" 작성 (CSS 프레임처럼)JSX 안에서 완전히 제어 ..