takeU

이번 회고는 작년과 다르게 두서가 없다. 원래 진작에 썼어야 됐는데, 이거 쓰려고 앉기만 하면 졸려서.. 생각을 너무 안하고 살았더니, 어떤 말을 써야할지조차 잘 안떠오른다. 일년동안 생각없이 하고 싶은 것 다 하고, 먹고 싶은 것 다 먹고, 사고 싶은 것 다 샀다. 딱히 어떤 보상을 받아야만 하는 명분은 없지만, 그래도 온전한 성인이 되었다는 본인을 자축하는 의미로 한 해를 보냈다. 아무래도 배부르고 등따시니까 절박함은 사라졌고, 내가 계획하지 않아도 매일의 스케줄이 고정으로 짜여있으니 좀 나태해지지 않았나 싶다. 상반기엔 좀 새로운 내가 되어보겠다고 "열심히" 살았다. 생각하지 않고 그냥 하고싶은대로 움직였다. 아침에 눈뜨면 운동가고, 술먹고 싶으면 술먹고, 공연보고 싶으면 공연보러 가고 ... 건강..

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); } }..