👩‍🎤 프론트엔드

컴포넌트 잘 만들기: 데이터 추상화하기

토스ㅣSLASH 22 - Effective Component 지속 가능한 성장과 컴포넌트 영상을 참고하여 글을 작성하였습니다. 제품은 항상 바뀐다. 변경사항은 자주 발생한다 좋은 제품을 위해서는 변경은 반드시 필요하다 변경은 예측 불가능하다 변경에 대응하기 Item이라는 컴포넌트 이름만 보고는 컴포넌트가 어떤 역할을 하는지, 어떻게 보여지는지 알 수 없다. 변경에 유연하게 대응하도록 컴포넌트 만들기 컴포넌트? 컴포넌트는 3가지 특징을 갖는다. 1. 컴포넌트는 데이터를 관리한다 컴포넌트는 두가지 데이터를 관리한다. 외부에서 주입 받은 데이터 내부 데이터(상태) 2. 컴포넌트는 UI를 보여준다. 컴포넌트는 데이터를 어떻게 보여줄 것인지를 결정한다. 3. 컴포넌트는 사용자와 상호작용한다. Headless 기반..

TS2339: Property 'reset' does not exist on type 'EventTarget'.

form 요소의 reset 메서드를 사용하고 싶은데 아래와 같은 에러가 발생한다. const handleFormSubmit = async (e: React.FormEvent) => { ... e.target.reset(); // TS2339: Property 'reset' does not exist on type 'EventTarget'. } TS2339: Property 'reset' does not exist on type 'EventTarget'. 해결 방법 1. 타입 단언하기 e.target에 as를 사용해서 HTMLFormElement 타입을 단언해줄 수 있다. (e.target as HTMLFormElement).reset(); const handleFormSubmit = async (e: R..

Property 'Authorization' does not exist on type 'AxiosHeaders'

현재 프로젝트에서 jwt를 사용하고 있기 때문에 axios interceptor를 이용해서 토큰에 따라 request 헤더 설정을 해주어야한다. 아래와 같이 interceptor를 설정하였다. axios.interceptors.request.use((request) => { request.headers ? (request.headers.Authorization = `Bearer ${token}`) : (request.headers = { Authorization: `Bearer ${token}` }); }); // 또는 axios.interceptors.request.use((request) => { if (request.headers) { request.headers.Authorization = `Be..

[React] useState 초기값이 undefined이 되는 오류

문제 상황 props로 전달한 값을 state의 초기값으로 사용하였다. 하지만 state 값은 props로 전달된 값 다르게 undefined로 설정되었다. 원인 useState(initialValue)에서 initialValue는 첫번째 렌더링에서만 사용된다. 그 후에는, props로 전달된 intialValue 값이 변하더라도 적용되지 않는다. props가 바뀌면 재렌더링이 일어나지 않나요? 부모 컴포넌트의 state를 props로 전달한 경우만 재렌더링이 일어난다. 위의 경우는 부모 컴포넌트의 state를 전달한 것이 아니라 변수를 전달했기 때문에 렌더링이 다시 일어나지 않는다. 해결 방법 1. useEffect useEffect 사용해서 props로 전달된 initialValue가 변경되면 set..

[React] Webpack으로 React 시작하기 2 - react, typescript, eslint, prettier

2022.12.29 - [react] - [React] Webpack으로 React 시작하기 1 - webpack, babel-loader [React] Webpack으로 React 시작하기 1 - webpack, babel-loader Webpack Webpack은 모던 자바스크립트 어플리케이션을 위한 모듈 번들러이다. Webpack은 프론트엔드 개발 환경에서 주로 사용하고 있는 모듈 번들러이다. HTML, CSS, Javascript, 이미지 등을 모두 하나의 파 min-kyung.tistory.com 길고 험난한 웹팩 설정의 길.. react 설치 npm i react react-dom 이제 대략적인 웹팩 설정을 마치고 리액트를 설치한다. typescript 설치 및 설정 파일 npm i -D ty..

[React] Webpack으로 React 시작하기 1 - webpack, babel-loader

Webpack Webpack은 모던 자바스크립트 어플리케이션을 위한 모듈 번들러이다. Webpack은 프론트엔드 개발 환경에서 주로 사용하고 있는 모듈 번들러이다. HTML, CSS, Javascript, 이미지 등을 모두 하나의 파일로 번들링한다. 의존 모듈이 하나의 파일로 번들링된다. React와 Webpack 프로젝트를 시작하면서 Webpack 번들러를 사용해서 리액트 개발 빌드 환경을 직접 구성하기로 하였다. 그냥 CRA를 쓰면 안되나? 웹팩 설정은 사실 귀찮고 boilerplate라고 작성해주어야하는 부분이 많아서 이를 간단하게 설정하고 싶은 경우에는 Create React App인 CRA를 사용할 수 있다. 리액트 공식문서에도 최소한의 툴체인으로 시작하는 방법으로 CRA를 소개하고 있다..ㅎ ..