그린티_

서론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 안에서 완전히 제어 ..

서론웹 개발이랑 면접에서 기술면접에서 CSR, SSR이라는 용어가 자꾸 나옴React는 CSR이고, Next.js는 SSR도 지원한다고 함처음엔 "둘 다 HTML인데 뭐가 달라?" 싶었지만, 찾아보니 장단점이 확실히 다름그래서 CSR과 SSR이 정확히 뭐고, 언제 뭘 써야 하는지 정리해봄본론CSR (Client Side Rendering) 이해하기CSR은 렌더링을 클라이언트(브라우저)에서 함서버는 빈 HTML과 JavaScript만 보내고, 브라우저가 나머지 일을 함CSR의 흐름1. 유저가 웹사이트 접속 ↓2. 서버가 빈 HTML 파일 전송 ↓3. 브라우저가 JavaScript 다운로드 및 실행 ↓4. JavaScript가 DOM을 동적으로 생성 R..

서론React 최적화 관련 글 보다가 useMemo랑 useCallback이라는 Hook을 발견했음둘 다 성능 최적화를 위한 거라고 하는데, 처음엔 "둘이 뭐가 다른 거야?" 싶었음코드 보면 사용법도 비슷하고, 둘 다 의존성 배열 쓰는 것도 같아서 헷갈렸음근데 찾아보니까 하나는 값을 메모이제이션하고, 하나는 함수를 메모이제이션하는 거였음그래서 useMemo와 useCallback의 차이점과 언제 쓰는지 정리해봄본론useMemo와 useCallback은 둘 다 불필요한 연산이나 리렌더링을 방지하기 위한 Hook임하지만 메모이제이션하는 대상이 다름메모이제이션이 뭐냐면?메모이제이션(Memoization)은 이전에 계산한 값을 저장해뒀다가 재사용하는 기법임같은 계산을 반복하지 않아도 됨성능이 향상됨React에서..

서론React로 프로젝트 만들다가 컴포넌트 구조가 깊어지니까 답답한 상황이 생기는걸 볼 수 있음최상위 컴포넌트에 있는 데이터를 맨 아래 컴포넌트에서 써야 하는데, 중간에 있는 컴포넌트들한테도 전부 props로 넘겨줘야 했음중간 컴포넌트들은 그 데이터를 쓰지도 않는데 단순히 전달만 하는 용도로 props를 받고 있었음"이거 뭔가 비효율적인데?" 싶어서 찾아보니까 이게 props drilling이라는 문제였고, 해결 방법도 있더라그래서 props drilling이 뭔지, 어떻게 해결하는지 정리해봄본론props drilling은 상위 컴포넌트의 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트들을 거쳐가는 현상을 말함쉽게 말하면 데이터를 아래로 계속 파내려가는(drilling) 느낌props drillin..

서론React 공부하면서 useState는 익숙해졌는데, 어느 날 코드 보다가 useRef라는 게 나오더라고 처음엔 "이것도 상태 관리하는 건가?" 싶었는데 막상 써보니까 useState랑은 완전 다른 용도였음특히 input 태그에 자동으로 포커스 주고 싶을 때 useRef 없이는 방법이 없더라 그래서 useRef가 정확히 뭐고 언제 쓰는 건지 정리해봄본론useRef는 렌더링에 영향을 주지 않고 값을 저장하거나 DOM 요소에 직접 접근할 때 사용하는 Hook임useState와 비슷해 보이지만 완전 다른 용도로 쓰임useState vs useRef 차이점useState의 특징값이 바뀌면 컴포넌트가 다시 렌더링됨화면에 보이는 데이터를 관리할 때 사용값이 변경되면 사용자가 즉시 확인 가능useRef의 특징값이..

서론요즘 프론트엔드 공부하면서 React를 배우고 있는데, 처음엔 그냥 "웹 만드는 라이브러리구나~" 정도로만 생각했음근데 쓰다보니까 일반 HTML/CSS/JS로 만드는 것과 확실히 다른 느낌이 들더라고 특히 버튼 클릭하면 화면이 바뀌는 거 만들 때 코드가 훨씬 깔끔해지는 게 신기했음그래서 React가 정확히 뭔지, 왜 다들 쓰는 건지 궁금해서 찾아봤음본론React는 페이스북(지금은 Meta)에서 만든 UI를 만들기 위한 JavaScript 라이브러리임쉽게 말하면 웹 페이지의 화면을 더 편하게 만들 수 있게 도와주는 도구라고 보면 됨React의 핵심 특징1. 컴포넌트 기반화면을 레고 블록처럼 작은 조각(컴포넌트)으로 나눠서 만들 수 있음버튼, 헤더, 카드 같은 걸 각각 컴포넌트로 만들어서 조립하는 느낌코..

차이메서드동작예시결과append(x)리스트 끝에 x 전체를 하나의 요소로 추가[1, 2].append([3, 4])[1, 2, [3, 4]]extend(iterable)리스트 끝에 iterable의 각 요소를 하나씩 추가[1, 2].extend([3, 4])[1, 2, 3, 4]🔍 예시로 비교a = [1, 2]b = [3, 4]a.append(b)print(a)출력:[1, 2, [3, 4]] # 리스트 안에 리스트가 들어감a = [1, 2]b = [3, 4]a.extend(b)print(a)출력:[1, 2, 3, 4] # 리스트가 합쳐짐기억 팁!append“박스를 통째로 붙임”extend“박스를 열어서 안의 물건만 꺼내서 넣음” nums.append(list(permutations(arr, i)..