공부 기록일지📚

컴포넌트 기본 구조 컴포넌트 명의 폴더 ├─ index.tsx # 화면에 보여질 컴포넌트 ├─ styles.tsx # emotion(CSS in JS)으로 만들어진 UI 파일 프로젝트 폴더 구조 및 파일별 기능 설명 👩‍🦰 폴더 설명 components - 페이지를 구성하는 작은 단위의 컴포넌트를 모아놓은 폴더(기능 별 구분) contexts - 전역으로 공유되는 값들을 담은 context폴더 투두리스트 컨텍스트, 권한 컨텍스트 hooks - 커스텀 훅을 모아놓은 폴더 pages - 라우팅의 기준점이 되는 페이지 컴포넌트를 모아놓은 폴더 typings - 공유 타입들 정의 폴더 utils - 독립적인 기능을 모아놓은 폴더 axios 인스턴스, 유효성 검사 로직 👩‍🦰 구현 기능 라우팅 URL별 페이지 생..

최근에 CRA없이 webpack을 직접 설정하거나 Vite를 사용했기 때문에 CRA의 경우는 따로 webpack 설정을 해본 적이 없다. 또한, CRA는 따로 보일러 플레이팅 작업을 하지 않아도 이미 세팅되어 있기 때문에 여기서 더 건들이는 것보단 있는 그대로 사용한 경우가 대다수였다. 이번에 원티드 사전 과제를 진행하면서 프로젝트 조건으로 CRA 사용이 있었고 여기서 나는 typescript를 적용했기 때문에 웹팩과 타입스크립트 config만 수정해주면 된다고 생각했다. 하지만, CRA를 사용하면서 웹팩의 config는 본적이 없다. 그 이유는 CRA에 설정파일이 숨겨져 있기 때문이다. CRA는 내부적으로 프로젝트 디렉토리를 간결하게 유지하기 위해 웹팩 설정(webpack config)나 script ..

react router dom으로 중첩 라우팅을 하는 방법은 크게 2가지가 있다. 1. 페이지 단위 컴포넌트의 가장 바깥에 (wrapper처럼) 레이아웃 컴포넌트를 감싸서 해당 레이아웃 컴포넌트에서 children props으로 받는 방법 => 레이아웃 컴포넌트를 페이지 단위 컴포넌트 마다 import해줘야 한다. 🔺(번거롭다) 2. 레이아웃 컴포넌트에서 자체에서 판단하여 라우팅하는 하기 ✔ 해당 방법에서도 내부적으로 2가지 갈래로 중첩라우팅을 표현하는 방법이 다르다. 아래의 2-1, 2-2 에 자세한 내용을 확인할 수 있다. 레이아웃 컴포넌트: 부모 컴포넌트, 중첩시킬 라우터의 index에 해당 페이지 단위 컴포넌트: 자식 컴포넌트, 중첩된 라우터, index/something에 해당 2-1 Outle..

회원가입 컴포넌트를 만들면서 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로 처..

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

FC를 쓰지 말아야 하는 이유 children을 암시적으로 가지고 있다. (원치않는 에러를 발생시킬 수 있음) 제네릭을 지원하지 않는다. 네임 스페이스 패턴을 이용할 때 더 불편하다 FC를 이용하면 코드가 더 길어진다. defaultProps와 정상적으로 동작하지 않는다. 결국 리액트 18 이상에서 없어졌다. 🤔 index.d.ts문서를 봐도 deprecated라고 명시되어 있다. 이 부분에 대해서 언급하기 이전에 함수 선언식과 함수 표현식(+화살표 함수) 복습 Function Declarations(함수 선언식) vs Function Expressions(함수 표현식) 우리가 기본적으로 함수를 작성할 때 사용하던 문법은 함수 선언식이다. function 키워드가 맨 앞에있는 친구 함수 표현식도 func..