takeU

netlify serveless(functions)를 사용할 때 키를 감추기 위해 프록시 사용CRA로 설계했다가 Vite로 마이그레이션하는 과정 중에 설정하는 법 정리Create React App (CRA)src 폴더 내 setupProxy.js 생성const { createProxyMiddleware } = require("http-proxy-middleware");module.exports = function (app) { app.use( "/.netlify/functions", createProxyMiddleware({ target: "http://localhost:9999", changeOrigin: true, }) );};Vitevite.config.js 파..

3. 리액트 훅 깊게 살펴보기 3.1. 리액트의 모든 훅 파헤치기 3.1.1. useState 함수형 컴포넌트 내부에서 상태를 정의하고, 관리할 수 있게 해주는 훅 const [state, setState] = useState(initialState) useState의 초깃값에 함수를 넣는 것 - 게으른 초기화 (lazy initialization) 게으른 초기화 함수는 state가 처음 만들어질 때만 실행 초깃값이 복잡하거나 무거운 연산을 포함할 때 사용 3.1.2. useEffect 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 매커니즘 function Component() { useEffect(() => { // code }, [props, state]) 첫 번째 인수..

2. 리액트 핵심 요소 깊게 살펴보기 2.1. JSX란? XML과 유사한 내장형 구문 페이스북에서 개발 자바스크립트 표준의 일부는 아님 자바스크립트 엔진이나 브라우저에서 직접 실행되거나 표현되지 않음 트랜스파일러로 변환이 필요 2.1.1. JSX의 정의 JSXElement JSX를 구성하는 가장 기본 요소 HTML의 element와 비슷한 역할 HTML 태그와 구분짓기 위해 대문자로 시작 (표준은 아님) JSXAttributes JSXElement에 부여할 수 있는 속성 JSXSpreadAttributes - 전개 연산자와 동일 JSXAttribute - 속성 JSXAttributeKey JSXAttributeValue JSXElement - 다른 JSX 요소가 들어갈 수 있음 ( 잘 안쓰임 ) JSXF..

React Hook 정리 개발하면서 끊임없이 훅으로 코드를 짜면서도 잘 모르고 사용하는 부분이 많아 정리를 해볼 필요가 있다 생각이 들음. 꼭 필요한 내용들 위주로 작성하려 함. React Hook 이란? 우선 Hook이 도입되기 이전의 방식인 Class형 컴포넌트의 문제점은 다음과 같다 생명주기 메소드를 사용할 때, 해당 메소드에 설계 의도 이외의 코드가 들어가는 상황이 빈번해지고, 이는 버그를 유발하고 무결성을 해치게 됨. this 는 재사용성과 구성을 복잡하게 함. 이러한 문제를 안고 React 16.8 버전에 추가된 React Hook의 특징 컴포넌트로부터 상태 관련 로직을 추상화 할 수 있다. 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다. Hook을 도입했지만, Class를 ..

예시로 파일 업로드를 하는 인풋에 새로운 커스텀 버튼을 달아 작동하게 하고 싶은 상황 input에 useRef를 통해 래퍼런스를 추가해준 상태에서 커스텀 버튼의 클릭 이벤트로 클릭을 발생시키는 상황을 만들면 기존 react-hook-form의 register.ref 위에 덮어씌워져 훅폼의 데이터에 추가가 되지 않는 상황이 생김. 즉, 추가 커스텀 버튼을 누르면 input file 선택 버튼이 클릭 되어야하고 그와 동시에 input file에 추가된 파일데이터가 훅폼에 추가가 되어야하기때문에 인풋의 ref에 커스텀 버튼 클릭을 위한 ref와 훅폼의 ref가 동시에 걸려야 함. import React from 'react'; import { useForm } from 'react-hook-form'; exp..

아이템 51 - 의존성 분리를 위해 미러 타입 사용하기 각자 필요한 모듈만 사용할 수 있도록 구조적 타이핑을 적용 즉, 의존성을 분리해 사용자가 사용에 용이하도록 함 작성중인 라이브러리가 의존하는 라이브러리의 구현과 무관하게 타입에만 의존한다면, 필요한 선언부만 추출하여 작성 중인 라이브러리에 넣는 것(미러링)을 고려해볼 수 있음 다른 라이브러리의 타입 선언 대부분을 추출해야 한다면, 차라리 명시적으로 @types 의존성을 추가하는 것이 나음 유닛 테스트와 상용 시스템 간의 의존성을 분리하는데도 유용 아이템 52 - 테스팅 타입의 함정에 주의하기 헬퍼 함수를 통한 테스팅 // lodash의 map import { map } from "lodash"; // 매개변수, 반환 타입 모두 체크 가능 functi..

아이템 41 - any의 진화를 이해하기 일반적인 타입들은 정제되기만 하는 반면, 암시적 any와 any[]타입은 진화할 수 있음 function range(start: number, limit: number) { const out = []; // Type is any[] for (let i = start; i < limit; i++) { out.push(i); // Type of out is any[] } return out; // Type is number[] } any를 진화시키는 방식보다 명시적 타입 구문을 사용하는 것이 안전한 타입을 유지하는 방법 아이템 42 - 모르는 타입의 값에는 any 대신 unknown을 사용하기 함수의 반환값에 타입 선언을 강제할 수 없기 때문에, 호출한 곳에서 타입 ..

아이템 31 - 타입 주변에 null 값 배치하기 한 값의 null 여부가 다른 값의 null 여부에 암시적으로 관련되도록 설계하면 안 됨 API 작성 시에는 반환 타입을 큰 객체로 만들고, 반환 타입 전체가 null이거나 null이 아니게 만들어야 함 클래스를 만들 때는 필요한 모든 값이 준비되었을 때 생성하여 null이 존재하지 않도록 하는 것이 좋음 strictNullChecks는 반드시 필요함 function extent(nums: number[]) { let min, max; for (const num of nums) { if (!min) { min = num; max = num; } else { min = Math.min(min, num); max = Math.max(max, num); } }..

아이템 21 - 타입 넓히기 넓히기 (widening) 런타임에 모든 변수는 유일한 값을 가진다 타입스크립트가 작성된 코드를 체크하는 정적 분석 시점에, 변수는 '가능한' 값들의 집합인 타입을 가진다 상수를 사용해 변수를 초기화할 때 타입을 명시하지 않으면 타입 체커는 타입을 결정해야 한다 즉, 단일 값을 가지고 할당 가능한 값들의 집합을 유추해야 한다 interface Vector3 { x: number; y: number; z: number; } function getComponent(vector: Vector3, axis: 'x' | 'y' | 'z') { return vector[axis]; } let x = 'x' let vec = {x: 10, y: 20, z: 30} getComponent(..

아이템 11 - 잉여 속성 체크의 한계 인지하기 구조적 타입 시스템에서 발생할 수있는 오류를 잡을 수 있도록 &#39;잉여 속성 체크&#39; 수행 객체 리터럴을 변수에 할당할 때 함수에 매개변수로 전달할 때 잉여 속성 체크는 할당 가능 검사와는 별도의 과정 타입 단언문을 사용하면 적용되지 않음 인덱스 시그니처를 사용해 속성을 예상할 수 있도록 함 interface Room { numDoors: number; ceilingHeightFt: number; } const r : Room = { numDoors: 1, ceilingHeightFt: 10, elephant: &#39;present&#39;, } // elephant가 없다고 에러가 발생 구조적 타이핑에 의한 오류 const obj = { num..