JayGo 개발 연습장

타입스크립트 공부(타입스크립트 공식 문서)자바스크립트는 코드가 실행될 때(런타임에) 타입이 결정된다. 자바스크립트의 코드가 어떻게 동작하는지를 알 수 있는 유일한 방법은 직접 호출해 보고 무슨 일이 벌어지는지 직접 보는 것이다. 즉, 코드 작성 시 코드 동작의 예측을 어렵게 만든다는 단점이 있다.그래서 나온게 타입스크립트(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의 변경 여부 등 비교 연산이 필요한 경우가 많이 있다. 그래서, 리..

Udemy Git Hash를 사용할 때 앞에 7자리만 사용해도 된다. git log --oneline을 실행하면 축약된 로그를 볼 수 있고, 여기엔 7자리로 축약된 해시가 있다.일반적으로 Git에서 head는 branch를 가리키고, branch는 해당 브랜치의 가장 최신 커밋을 가리킨다. 즉, head와 branch는 보통 일치된 상태이다. 하지만, git checkout 를 통해 이전 커밋으로 이동한다면 head와 commit이 분리된 상태가 된다(detached 된 상태가 된다). 이런 상황에서 커밋이나 어떠한 동작을 하려고 하면 Git은 에러를 뱉어준다.해당 상황에서 head를 다시 가장 최신 커밋이 있는 branch 위치로 이동시키고 싶다면 그냥 git switch 을 해주면 된다. 상당히 간단..

Udemy Props Drilling이 발생하면 유지 보수도 어렵고, 디버깅도 어려울 수 있다. 이런 상황을 위해 리액트는 상태를 좀 더 쉽게 관리할 수 있도록 createContext 메서드를 제공한다.createContext는 컴포넌트들이 상태를 등록하고 사용할 수 있는 Context를 제공한다. Context는 애플리케이션에서 전역적으로 접근하고 싶은 데이터를 저장할 수 있는 공간이다.createContext는 보통 컴포넌트 외부에서 정의하고 호출한다. 컴포넌트 리렌더링 시 새로운 Context를 계속 다시 만들면 비효율이 발생하고, 관리되는 상태에 문제가 생길 수 있기 때문이다.createContext()의 결과로 생성된 컨텍스트 객체에는 provider와 consumer라는 메서드가 존재한다. ..

Udemy DOM을 리렌더링 하는 것은 굉장히 비싼 비용을 치러야 하는 작업이다. 따라서, 리액트에선 불필요한 리렌더링을 줄이는 것만으로도 웹 애플리케이션의 성능을 엄청나게 개선할 수 있다.리액트 훅과 리액트 내장 메서드를 사용해서 불필요한 리렌더링을 방지하기 위한 여러 방법이 있다.useMemo 훅과 리액트 내장 메서드인 memo는 메모이제이션 기법을 사용해 리렌더링을 최소화한다.메모이제이션이란, 컴퓨터 과학에서 동일한 연산을 반복하지 않도록 연산 결과를 메모해 두고(메모리에 저장해 두고), 해당 연산이 다시 호출됐을 때 메모된 연산이라면 결과를 바로 가져오도록 하는 기술이다.메모이제이션을 사용하면 불필요한 연산을 줄일 수 있으며, 리액트에서는 말 그대로 '불필요한 연산을 줄여줄 수 있다'.useMem..

Udemy 함수명은 동사로 시작하도록 짓자.input 태그의 required를 설정해주면 필수로 값을 요구할 수 있고, minlength 어트리뷰트에 값을 넣어주면 최소 글자수를 검증할 수 있다.input 창 입력 시 유효성 검증에서 문제가 발생하면 문제가 생긴 곳에 자동으로 포커스되게 해주거나, 유효성 검증에서 문제가 생긴 이유를 명확하게 보여준다거나, 이와 같이 User Friendly하게 개발을 하도록 항상 노력해야 한다. 에러 메시지를 alert 해준다거나 안내 문구를 띄워줄 땐 누구나 이해할 수 있도록 쉽고 직관적이게, 그리고 이후 유저의 동작이 유도되도록 포커스-하이라이트 하는 등의 UX를 클라이언트 개발자로서 신경쓰자.React로 TODO APP 만들기onChange 이벤트 핸들러의 이벤트 ..

Udemy 컴포넌트의 주목적은 UI를 렌더링 하는 거다. 그러니 상태를 변경하는 로직이 컴포넌트 내부에 비대해지는 것은 원래 목적과는 조금 다른 방향이 될 수 있다.useState 훅으로 만든 상태와 상태 변경 함수는 컴포넌트 내부에서만 사용 가능하다. 때문에, 상태 변경 로직을 컴포넌트 외부로 떼는 게 어려우며, 이런 문제를 해결하기 위해 등장한 것이 useReducer이다.useReducer를 이용하면 컴포넌트 외부에서 상태를 변경하는 로직을 사용할 수 있다.[state, dispatch] = useReducer(reducerFunc, initState) 형태로 사용하고, useReducer의 첫 번째 인자로 전달한 reducerFunc를 컴포넌트 밖에 선언하는 식으로 활용한다. reducerFunc..