프로그래머의 뇌 (펠리너 헤르만스 지음) 📍목차 1장 | 코드 더 잘 읽기 1. 코딩 중 겪는 혼란에 대한 이해 📍요약 ✅코드를 읽을 때 혼란이 생기는 이유 3가지 - 지식(LTM) 부족 - 정보(STM) 부족 - 두뇌의 처리 능력(Working Memory) 부족 => 코드 읽을 때 3가지 인지 과정이 모두 발생 ✅인지 과정 1. LTM에서 정보 인출 (키워드의 의미 => 프로그래밍 언어를 알고 있는지) 2. STM에 정보 일시 저장 (메서드나 변수의 이름 => projectName 변수는 프로젝트명을 가리키는 변수... ) 3. Working Memory에서 코드를 읽고 처리 (for loop 의 시작 인덱스가 맞나 틀리나.. ) => 이 3가지 인지 과정은 동시에 발생하며 상호 보완적 작용 예) 처..

📍lazy ✅컴포넌트의 최초 렌더링까지 코드 로딩(예-import 문)을 지연시킬 수 있다 const SomeComponent = lazy(load) 📍lazy(load) ✅lazy loading 컴포넌트를 선언하기 위해 컴포넌트 바깥에서 lazy 함수를 호출한다 import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ✅매개변수 load - Promise 또는 .then() 과 함께 쓰이는 유사 Promise 객체를 리턴하는 함수 - lazy 함수로 반환한 컴포넌트가 최초 렌더링되고나서야 load 콜백 함수가 호출된다 - load 콜백 함수 호출이 로드된 후, resolve까지 대기했다..

h2 element에 적용하는 사례 gradientText { background: -webkit-linear-gradient(45deg, red, blue); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

📍forwardRef✅컴포넌트가 특정 DOM 노드를 ref를 가진 부모 컴포넌트에게 노출하게 해준다즉, useRef로 만든 ref가 props로 타고 내려와 매개변수로 받아 지정할 DOM node를 활용하기 위한 기능const SomeComponent = forwardRef(render) 📍forwardRef(render)✅forwardRef를 호출하여 컴포넌트가 ref를 받아 자식 컴포넌트로 전달하게 한다import { forwardRef } from 'react';const MyInput = forwardRef(function MyInput(props, ref) { // ...}); ✅매개변수render- 컴포넌트를 위한 렌더링 콜백 함수 (가짜 컴포넌트 같은 역할, forwardRef로 래핑하..

📍디바운스 // App.tsx import "./styles.css"; import { useState } from "react"; import { useDebounce } from "./useDebounce"; export default function App() { const [keyword, setKeyword] = useState(""); const debouncedKeyword = useDebounce(keyword, 500); return ( Debounce + React + TypeScript {debouncedKeyword} setKeyword(e.target.value)} /> ); } // useDebounce.tsx import { useEffect, useState } from "r..

📍예시 - 아래처럼 객체로 이루어진 배열이 있다. name필드의 모든 value를 union type으로 받으려면 어떻게 해야할까? // 뽑아내고 싶은 타입 // "javascript" | "typescript" | "react" | "vue" | "svelte" | "nextjs" | "nestjs" | "nodejs" | "java" | "spring" | "go" // 데이터 const SKILL_LIST = [ { name: "JavaScript", value: "javascript", }, { name: "TypeScript", value: "typescript", }, { name: "React", value: "react", }, { name: "Vue.js", value: "vue", },..

📍token이 cookie에 없을 때 로그인한 유저를 위해 token을 보내줘야 할 때, 토큰이 cookie에 없고 store에 있다면? 서버에서 실행되는 메서드이기 때문에 client의 자원에 접근 불가하다 따라서 CSR 방식을 사용하는 수 밖에 없다..

📍ES2023 - 2023년 6월 말에 최종 확정될 것으로 보이는 ECMAScript의 새로운 spec이 발표됨 - 브라우저 벤더들이 추가가 확실시되는 spec을 미리 추가하기 때문에 미리 사용해볼 수 있다 (크롬에서는 미리 적용되어 사용할 수 있음) 📍Array.prototpye.findLast() & findLastIndex() ✅배열의 원소 중에서 조건을 만족하는 가장 마지막 원소 혹은 그 인덱스를 반한다 - 이미 존재하던 Array.prototype.find() 와 findIndex() 가 조건을 만족하는 맨 앞 원소를 찾던 것과 완벽히 반대되는 기능 const isEven = (number) => number % 2 === 0; const numbers = [1, 2, 3, 4]; console..