DH의 개발 공부로그

IntrinsicAttributes 오류 IntrinsicAttributes 의 사전적 의미: 내장 속성, 고유 속성 타입스크립트와 리액트를 이용해서 간단한 투두리스트 예제를 만드는 연습을 하고 있는데, 하위 컴포넌트에 props를 전달하는 과정에서 해당 오류가 발생하였고, 해결한 방법을 정리 해보겠습니다. Type '{ toDo: ToDoItem; }' is not assignable to type 'IntrinsicAttributes'. Property 'toDo' does not exist on type 'IntrinsicAttributes'. // 해당 유형은 IntrinsicAttributes에 할당할 수 없습니다. 라는 형태의 오류 // 하위 컴포넌트의 전달하는 props의 타입을 지정을 해주..

서론 이번에는 원티드 프리온보딩을 통해서 지금까지 프로젝트에 사용했던 라우터 방식말고 새로운 방식이 있다는 것을 알게 되어서 이 글을 작성하면서 정리하게 되었습니다. 이번에 정리하면서 작업해 볼 방식은 React Router v6.4에 추가된 방식입니다. 기존 방식 import { BrowserRouter } from 'react-router-dom' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( // 최상단 root에서 BrowserRouter로 감싸기 ) import { Route, Routes } from 'react-router-dom' const App = (..

Vite란? Vite는 공식문서에 따르면 프랑스어로 "빠르다"를 의미하며, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞추어서 탄생한 빌드 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다.(e.g. Hot Module Replacement) 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다. Create React App대신 Vite를 사용하는 이유? 우선 CRA는 자바스크립트 코드로 구성된 툴인 Webpack을 사용합니다. 자바스크립트는 기본적으로 interpreted 언어이기 때문에 느립니다. 코드의 ..

React Router 우선 라우팅의 개념을 간단하게 알아보면 사용자가 요청한 링크주소 즉, URL에 맞는 페이지를 찾아서 보여주는 것이라고 할 수 있습니다. MPA 방식에서는 여러페이지를 분리해두고 페이지간의 이동으로 이 라우트 시스템을 구축을 하지만, 그러나 SPA 방식의 리액트에서 라우트 시스템을 구축하기위해 React Router를 사용을 하는 것 입니다. React Router 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있습니다. 이 라이브러리는 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다. 신규페이지를 불러오지 않는 SPA에서 각각의 URL에 따라 선택된 페이지를 렌더링 해주는 라이브러리 라고 볼 수 있습니다. 사용하기 1. 설치 np..

0. 소개 프로젝트 작업을 하면서 checkbox가 필요하게 되었고, 다양한 방법중에 Set과 useState를 이용한 방법으로 작업을 해보았습니다. Set과 useState를 이용한 방법을 예제와 함께 정리해보겠습니다 1. Checkbox 컴포넌트 분리 우선 checkbox가 하나가 담겨져 있는 컴포넌트와, 그 checkbox들을 담고있는 list 컴포넌트를 분리해서 파일을 만듭니다. 예제 파일의 구조는 다음과 같습니다. // CheckBox import React from "react"; export default function CheckBox() { return ( checkHandled(e)} /> {text} ) } // CheckBoxList import React, { useState } ..

env 사용이유 개발을 하다보면 외부로 알려지면 안되는 API_KEY나 db관련 정보 등등 보안이 필요한 값들이 있습니다. 이러한 값들을 보안이나 유지보수를 용이하게 하기 위해 .env 파일에 환경변수로 만들어 변수를 꺼내와 사용하는 것 입니다. .env 파일 .env 파일은 항상 프로젝트의 최상위 루트에 파일을 만들어 놓아야 합니다. 그리고 깃에 .env 파일이 올라가면 안 되기 때문에 꼭! gitIgnore에 .env를 꼭 추가시켜줍니다!! gitIgnore > .env CRA에서 .env 사용하기 1. 환경변수 작성 create-react-app에서는 보안이 필요한 환경변수의 외부 유출을 방지하기 위해 REACT_APP_으로 시작되지 않는 환경변수는 무시하기 때문에 항상 변수명은 REACT_APP_..

useEffect()란? useEffect는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말합니다. 이전에 정리한 클래스 컴포넌트에서의 리액트 라이프사이클을 함수 컴포넌트에서 대체할 수 있는 것이 바로 이 리액트 훅인 useEffect입니다. 클래스 컴포넌트에서 라이프사이클 1. 마운트 되고 나서 componentsDidMount 2. 업데이트 되었을 때 componentDidUpdate 3. 언마운트 될 때 componentWillUnmount ※ Tip useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.기본형태 useEffect(function, deps) f..

리액트 컴포넌트에는 생명 주기가 있습니다. 이것을 라이프사이클(Life cycle)이라고 많이 표현합니다. 라이프 사이클은 컴포넌트가 실행되거나, 업데이트 또는 제거될 때 특정한 이벤트들을 호출하는 것입니다. 이러한 리액트의 라이프 사이클은 클래스 컴포넌트에서만 사용할 수 있으며, 함수 컴포넌트에서 사용하고 싶을 경우에는 리액트 훅인 useEffect를 이용하여 비슷하게 작업을 할 수가 있습니다. 출처: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ 마운트 컴포넌트가 처음 실행이 될때 생성단계를 마운트(Mount)라고 표현을 합니다. 마운트에 해당되는 생명주기에는 다음과 같은 메서드들이 있습니다. constructor getDerivedSt..