공부 기록일지📚

회원가입 컴포넌트를 만들면서 input 태그에 들어가는 state들이 많아져서 공통되는 부분을 커스텀 훅으로 분리할 때, 생긴 이슈에 대해서 정리한다. 우선 타입스크립트는 변수(e.g. const hello)는 명시적으로 타입을 지정해주지 않아도 잘 추론한다. 하지만, 매개변수나 리턴값의 경우 추론을 내가 원하는 대로 해주지 못하는 경우가 많기 때문에 이때 명시적으로 써주는 것이 필요하다. 보통은 코드를 작성하다가 TS가 에러를 뱉어내며 스스로 추론하지 못할 때 그 때 타입을 선언해주면 된다. src>hooks>useInput.ts import { useCallback, useState, SetStateAction, Dispatch } from 'react'; type Handler = (e: React..

이전 세팅하기 1에서 빌드하는 방법을 배웠다. 하지만 이 번들된 js파일은 변경 사항이 생기면 다시 빌드를 해야 변경 사항이 적용된다. CRA로 react 프로젝트를 만들었을 때는 hot reloading(변경 사항을 바로 반영하여 dev환경에서 바로 확인가능한 기능)세팅이 이미 되어있어 따로 처리할 필요가 없었는데 수동으로 할 경우엔 webpack.config에 추가해줘야 한다. webpack-dev-server :hot reloading 을 위해서 추가로 설치해야하는 웹팩 라이브러리 🔺공식 홈페이지에서 global 설치보다는 -D 를 권장하여 local로 사용하길 바란다고 써있다. 웹팩 컨피그를 수정하기 전에 위의 라이브러리를 dev 환경에 설치해준다. yarn add -D webpack-dev-se..

사용 패키지 매니저: yarn 우선 기본적으로 사용해야할 라이브러리를 설치해준다. D 는 yarn add -D 옵션으로 dev dependency를 의미한다. react react-dom typescript // TS적용시 eslint (D) //문법체킹 prettier eslint-plugin-prettier eslint-config-prettier (D) //코드 포맷체킹과 eslint 과 연동을 위한 플러그인 웹팩의 동작원리 웹팩은 Node.js 환경에서 실행되는 JS어플리케이션의 일종으로, 복잡한 의존성 관계들을 가지는 여러 정적 파일(JS, CSS, Sass 등)들을 번들링하여 적은 정적 파일들을 만들어내는 모듈 번들러이다. tsx파일을 TS로 변환해주고 그 다음 webpack이 babel로 처..

생활코딩 이고잉님의 유투브 `React 서버 통신에 회의가 든다면 - RTK Query`를 기반으로 작성하였습니다. Server Hook 사용법 ./app/api 의 api 객체를 이용하기 RTK Query로 서버와 통신 읽기: useGetCountQuery ({name}) 쓰기: userSetCountMutation() -첫번째 원소 함수({name, value}) 로 데이터 전송 RTK Query의 특징 1️⃣ use-Query는 읽기 전용(read-only) - 객체를 리턴 // {} - data, isFetching, isLoading 중요 isLoading은 state가 초기화되기 전(undefined)일때 첫번째 로딩시 isFetching은 loading시마다 실행 - 자동실행 2️⃣ use-..

Array.from() 해당 메서드는 유사 배열 객체(array-like object)나 반복가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만든다. 첫번째 매개변수로는 `배열로 변환하고자 하는 유사 배열 객체나 반복 가능한 객체`를 넘기고 두번째 매개변수(optional)로 배열의 모든 요소에 대해 호출할 매핑 함수를 전달한다. 세번째 매개변수(optional)는 thisArg로 매핑 함수를 실행할 때 this로 사용할 값을 넘겨주면 된다. 시퀀스 생성기(range)로도 사용할 수 있다. 유사 배열 객체(array-like object) : length 속성과 인덱싱된 요소를 가진 객체 순회 가능한 객체(iterable object): Map, Set 등 객체의 요소를..

Redux Toolkit Query (RTK Query)는 웹 어플리케이션에서 데이터를 로딩하는 흔한 케이스를 간단하게 하는 진보된 데이터 패칭, 캐싱 툴이다. RTK Query는 Redux Toolkit core의 위에서 작성되었고, RTK의 API들은 `createSlice`와 `createAsyncThunk`를 확장해서 만들어졌다. RTK Query는 `@reduxjs/toolkit` 패키지의 추가적인 애드온으로 포함되어져 있다. Redux Toolkit을 사용해도 RTK Query Api를 사용하지 않아도 되지만 RTK Query의 데이터 패칭과 캐싱이 많은 사용자들에게 혜택을 가져다 줄것이라고 예상한다. 즉, RTK Query는 강력한 data fetching, caching 툴이다. 웹 어플리..

모노리포 도입 배경 기존에 프론트엔드 팀은 40개가 넘는 repository를 각 도메인 및 기능 시스템 단위로 생성하여 멀티 리포(multi repo)방식으로 서비스를 운영하고 있었다. 멀티 리포 구조 레포(repository 의 발음이 리포지토리라서 리포라고 하겠습니다.) 멀티 리포 구조는 폴리리포(polyrepo)구조라고도 부른다. 분리된 각 모듈은 멀티 리포 구조에서 고유한 저장소가 있는 독자적 프로젝트가 된다. 각 프로젝트는 자율성이 높으며 독립적인 개발, 린트, 테스트, 빌드, 게시, 배포 파이프라인이 존재한다. 멀티 리포의 장점: 각 프로젝트가 고유의 저장소를 가지게 됨으로써, 다르 프로젝트와의 의존성을 가지고 있고 않아 독립적으로 빠르게 개발이 가능하며 비교적 크기가 가벼워 프로젝트 관리 ..

다형성이란 다른 모양의 코드를 가질 수 있게 해주는 것이다. 타입스크립트에서 다형성을 이룰 수 있는 방법은, 제네릭을 사용하는 것! 제네릭은 placeholder 타입을 쓸 수 있도록 해준다. concrete 타입 (X) placeholder 타입(O) , TS가 placeholder타입을 나중에 concrete 타입으로 바꿔준다. 즉, 같은 코드에 다른 타입을 부여할 수 있게 된다. // 브라우저 API인 로컬스토리지를 클래스와 제네릭으로 구현 // 글로벌 scope에서 interface Storage는 이미 구현된 Web Storage API라는 것을 알 수 있다. // 여기에 값을 추가하게 되면 기존 API에 새 프로퍼티를 추가하게 된다. // 그것을 방지하기 위해 SStorage 로 명명한다. /..