JayGo 개발 연습장

할 일 관리 서비스 준비Task 목록을 칸반 보드 형태로 관리해 주는 서비스를 만들어보려고 준비 중이다. 해당 프로젝트 시작 전 몇 가지 사항에 대해 알아보는 시간을 가졌다.Context API 사용:Context를 사용해 상태를 관리하는 다양한 패턴이 있다. Provider를 별도로 만들고, 매개 변수로 Context.Provider 내부에 들어가야 하는 컴포넌트들을 받아, Context 생성, 정의, 데이터 제공 등을 전담하는 함수를 만들어 사용하면 깔끔하게 상태를 관리할 수 있다.useContext로 컨텍스트를 바로 받아와 사용하기보단, 별도의 커스텀 훅으로 래핑 해서 사용하면 타입 좁히기나 예외 처리 등 좀 더 안전하게 컨텍스트를 사용할 수 있다. useMyContext와 같은 식으로 컨텍스트 사..

Tic-Tac-Toe 만들기리액트 공식문서에 틱택토 게임의 주요 기능을 직접 구현해 봤다.uesEffect를 사용해서 특정 상태가 업데이트된 이후의 동작을 핸들링 하려고 했는데, 결과적으로 실행 순서를 제어하는 게 쉽지는 않았다. 의도치 않게 두 개 이상의 useEffect가 관리하는 상태가 물리면서 상태 업데이트 동작이 두 번씩 실행되기도 하고, A 상태가 업데이트돼서 DOM에 반영된 이후에 후속 작업을 하고 싶은데 이런 디테일한 실행 순서 관리가 마음대로 되지 않아 애를 먹었다.useEffect 사용 경험이 많지 않아서, 계속 연습이 필요하겠다. 여러 자료들에서 'useEffect`를 두고 굉장히 다루기 까다로운 훅이라고 하는 걸 봤는데, 오늘 개발하면서 그게 좀 와닿았다. 분명히 이유가 있는 상황에..

감정 일기 만들기 with React, TypeScript타입스크립트를 써보니, 공통되는 타입 정의를 어디서 어떻게 만들고 불러와서 사용할지에 대한 고민이 추가적으로 생기게 됐다. 여러 글을 찾아보니 별도로 types 파일을 만들어서 정의하는 것 같긴 한데, 이걸 페이지 단위로 할지, 기능 단위로 할지, 아니면 통합할지 등등, 여러 결정의 요소가 있는 것 같다. 좀 더 여러 레퍼런스 찾아보면서 공부를 잘해봐야겠다.이벤트 핸들러를 붙일 때 매개 변수로 들어오는 이벤트 객체 e에도 타입을 붙여줘야 하는데, 리액트에서는 보통 React.MouseEvent와 같은 식으로 쓰는 것 같다. 이벤트 유형에 따라 MouseEvent가 아니라 다른 값이 올 수 있다(e.g. onChange 이벤트에선 React.Chan..

인프런 제네릭 함수는 함수에 전달되는 인수의 타입에 따라 반환 값의 타입을 가변적으로 바꿔주는 함수를 의미한다.기본적으론 인수에 number가 들어가면 number, string이 들어가면 string, number[]가 들어가면 number[]가 나온다. 인수에 들어간 타입이 반환 값에 그대로 적용된다.function func(value: T) { return value}let num = func(10); // 매개 변수 숫자형, 반환된 num 또한 숫자형let str = func('string'); // 매개 변수 문자열, 반환된 num 또한 문자열let bool = func(true); // 매개 변수 불리언, 반환된 num 또한 불리언물론, 전달된 매개 변수와 다른 반환 값 타입을 갖도록 제네릭..

타입스크립트 공부(공식 문서)유니언 타입으로 값을 받으면 실제로 들어온 값의 타입이 유니언 타입 중 어디에 해당하는지를 몰라 문제가 생길 수 있다. 이럴 경우 자체적으로 타입을 구분하는 분기 처리를 하여 타입에 맞는 사용을 해야 하는데, 이때 사용되는 분기문을 '타입 가드(Type Guard)'라고 부른다.타입을 좁히기 위해 자바스크립트의 비교 연산이 사용되며, Truthy-Falsy에 대한 이해가 필요하다. 타입에 해당하는 값을 true 또는 false로 만들기 위한 적절한 조건을 잘 세워야 하는 것이다.Truthy-Falsy 값에 부정 연산자(!)를 이중(!!)으로 사용할 경우 단순히 값이 Boolean 타입으로 변환되는 게 아니라, true 또는 false 값을 사용한 리터럴 타입으로 변환된다. 이..

타입스크립트 공부(타입스크립트 공식 문서)자바스크립트는 코드가 실행될 때(런타임에) 타입이 결정된다. 자바스크립트의 코드가 어떻게 동작하는지를 알 수 있는 유일한 방법은 직접 호출해 보고 무슨 일이 벌어지는지 직접 보는 것이다. 즉, 코드 작성 시 코드 동작의 예측을 어렵게 만든다는 단점이 있다.그래서 나온게 타입스크립트(Typescript)다. 타입스크립트 공식 문서에 따르면, 타입스크립트의 목표는 자바스크립트 프로그램의 정적 타입 검사이다.자바스크립트에서 에러가 발생하지 않는 방식(e.g. 객체에 존재하지 않는 프로퍼티에 접근하기, 에러가 아니라 undefined를 반환)이더라도 정적 타입 시스템에 따라 오류가 발생할 수 있는 경우라면 에러를 발생시키고 이를 알려줘야 한다. 이 역할을 타입스크립트가 ..

감정 일기장 리팩토링textarea에 onChange로 이벤트 핸들러를 등록해서 창의 텍스트가 변경될 때마다 이벤트를 발생시키고 값을 가져오는 식으로 구현을 했었다.하지만 onChnage는 너무 많은 이벤트를 연속적으로 발생시키고 리렌더링 횟수가 굉장히 많아질 수 있다는 생각이 들어서(실제론 리액트의 자체적인 최적화 로직 덕분에 그렇게 성능이 떨어지진 않는다고 함), Dobunce를 구현해 이벤트가 Delay time 이상 연속되지 않을 때에만 값을 가져오도록 했었다.그런데, 디바운스도 좋은 해결책은 아니었다. 코드 상으로 디바운스 딜레이 타임 이후에 setState 함수가 실행이 됐는데, 만약에 딜레이 타임이 끝나기 전에 변경된 상태를 활용해야 하는 동작이 처리되는 요청이 들어온다면 당연하게도 setS..

감정 일기 프로젝트 개선New 페이지와 Edit 페이지 합치기확실히 유사한 틀을 갖고 있는 페이지를 하나로 합치고 차이를 Props로 관리하니 아래로 전달해줘야 했던 State들을 관리하기에도 좀 더 수월했다.유사한 UI를 갖고 있고, 다뤄야 하는 state와 props가 비슷한 경우엔 적절하게 페이지나 컴포넌트를 묶어서 만들어주는 게 좋을 수 있겠다는 걸 배웠다.커스텀 훅의 존재 목적은 아래 중 하나여야 한다.상태 관리: 커스텀 훅 내부에서 상태를 관리(useState), 외부 상태를 제공(useContext)해야한다.함수 반환: 컴포넌트에서 사용할 수 있는 함수나 데이터를 반환하고, 해당 반환값은 적절한 시점에 동작하도록 유도해야 한다.호출 즉시 동작을 실행하지 말아야 한다: 커스텀 훅 내부에서 어떤..

React 공부(모던 리액트 Deep Dive, 리액트 공식 문서)useState의 인자로 state의 초기값을 전달할 수 있다.만약에 인자로 콜백 함수를 전달하면(e.g. useState(() => { return 1 }) 최초 마운트 시에만 실행되며, 해당 콜백 함수의 리턴 값으로 state가 초기화된다.useState에 전달하는 함수는 순수해야 하고(순수 함수여야 하고), 인수를 받지 않아야 하며, 반드시 어떤 값을 반환해야 한다. 해당 반환 값이 state가 된다.setState 함수는 다음 번 state 값을 전달할 수 있다. 다만, setState(age + 1) setState(age + 1) setState(age + 1) 이렇게 같은 함수를 세 번 연속으로 실행하면 값은 1만 증가된다. ..

모던 리액트 Deep Dive들어가며(리액트의 역사), 리액트 개발을 위해 꼭 알아야 할 자바스크립트 챕터를 읽었다.몇 가지 기억에 남는 내용을 기록해둔다.리액트 이전엔 관심사를 HTML, CSS, JavaScript와 같이 분리하였지만.리액트도 관심사를 분리하지만, 관심사를 컴포넌트 기반으로 나눈다. 같은 기능을 하는 컴포넌트에 대해 HTML과 JavaScript가 함께 작성된다.컴포넌트 기반 관심사 분리, 단방향 바인딩, 선언적 UI 변경 등 리액트 생태계가 혁신적으로 성장할 수 있던 몇 가지 주요 키워드들이 있다. 앞으로 공부하면서 하나씩 깊게 잘 알아가봐야겠다.Props, 리액트 훅에서 사용되는 의존성 배열, Virtual DOM의 변경 여부 등 비교 연산이 필요한 경우가 많이 있다. 그래서, 리..