JayGo 개발 연습장

일반 CSS의 문제점CSS는 DOM 요소의 스타일을 지정한다. 보통 하나의 웹 애플리케이션을 만들 때 두 개 이상의 자바스크립트 모듈 파일로 프로젝트를 쪼개서 관리하며, 파일이 쪼개지는 방식에 따라 담당하는 UI 영역의 CSS 파일도 분리하는 게 일반적이다.자바스크립트는 ES6부터 .js를 모듈로 분리해 내는 것이 언어의 표준으로 채택됐다. 그에 따라 모듈을 분리한 자바스크립트 파일은 네임 스페이스를 공유하지 않게 되었고, 변수나 함수의 이름을 지정할 때 전역 네임 스페이스만을 따를 때보다 조금 더 자유가 생겼다(다른 모듈의 변수-함수명을 신경 쓸 필요가 없어졌다). 하지만 CSS는 전역으로 선택자 이름이 공유되면서, 컴포넌트 기반 UI 개발을 할 때 걸림돌이 되었다./* Home 컴포넌트(Home.cs..

React Router는 리액트로 작성된 웹 애플리케이션의 라우팅 구현을 위해 사용되는 라이브러리다. 해당 라이브러리를 사용한 라우팅 구현 방법 중 BrowserRouter와 createBrowserRouter 두 가지에 대해 한번 살펴보자.MPA와 SPA의 라우팅 컨셉라우팅에 대해 살펴보기에 앞서, 리액트 라우팅의 특징을 잘 이해하기 위해 MPA(Multi Page Application)와 SPA(Single Page Application)에서 각각 라우팅을 어떤 식으로 처리하는지 컨셉을 살펴보자.웹 애플리케이션 개발에서 라우팅은 사용자가 특정 경로로 접근했을 때 그 경로에 해당하는 자원을 제공해 주는 것을 의미한다. /면 홈, /dashboard면 대시보드, /dashboard/edit이라고 하면 대..

프로그래밍을 하다 보면 불특정 다수의 곳에서 동일한 값을 반복해서 참조해야 하는 경우가 생긴다. 해당 경우에 값을 리터럴 하게 직접 작성해 주면, 이후에 해당 값을 변경해야 하는 시점에 값을 작성한 모든 곳을 전부 찾아내 수정을 해줘야 할 것이다. 이는 엄청난 괴로움을 발생시키는 끔찍한 일이다.CSS로 스타일링을 할 때에도 이런 문제 상황은 빈번하게 발생한다. 스타일 가이드에 따라 많은 곳에서 반복적으로 사용되는 색상값, 폰트 사이즈 등이 예시이다. CSS는 이러한 상황을 효과적으로 처리하기 위해 사용자 지정 CSS 속성을 제공한다.기타 프로그래밍 언어에서의 변수와 마찬가지로, CSS 변수는 특정 값을 참조하는 이름을 정의할 수 있게 해준다.해 준다. 그리고, 해당 스타일 값이 사용돼야 하는 곳에 변수명..

할 일 관리 서비스 준비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..