Development Vlog

useEffect, useCallback, useMemoReact에서 제공하는 훅(Hook)으로, 각각 컴포넌트의 성능 최적화 및 부수 효과 관리를 도와주는 기능을 제공합니다.useEffectuseEffect는 컴포넌트가 렌더링된 후에 사이드 이팩트를 수행할 수 있게 해줍니다. 데이터 fetching, 수동 DOM 조작 등이 포함됩니다.useEffect(() => { // 렌더링 후 실행할 코드 return () => { // 정리가 필요한 경우 실행할 코드 }}, [dependencies]); 두 번째 인자로 의존성 배열을 전달하면, 해당 배열의 값이 변경될 때만 실행됩니다. 빈 배열을 전달하면, 컴포넌트가 처음 마운트될 때만 실행됩니다.useCallbackuseCal..

Styled Components란?Styled Components는 React에서 컴포넌트를 만들면서 동시에 해당 컴포넌트의 스타일을 작성할 수 있게 해주는 CSS-in-JS 라이브러리입니다. JSX로 컴포넌트를 만들듯이, CSS를 자바스크립트 코드 안에서 작성할 수 있는 방식으로, React 컴포넌트와 스타일을 보다 직관적으로 결합할 수 있도록 도와줍니다. Styled Components 사용 이유React에서도 일반적으로 CSS 클래스 이름은 전역적인 특성을 가지고 있습니다. 그래서 특정 파일에 CSS 스타일을 정의하고 해당 컴포넌트에만 적용하더라도, 동일한 클래스 이름을 가진 다른 컴포넌트에도 그 스타일이 영향을 줄 수 있습니다. Styled Components는 자동으로 고유한 클래스 이름을 생성..

1. AddItemuseState Hook을 사용하여 `values` 상태를 관리하여 여기에 `imgFile`이라는 이미지 파일을 저장합니다.const [values, setValues] = useState({ imgFile: null,}); `handleChange` 함수는 자식 컴포넌트 `FileInput`에서 전달받은 파일 정보를 `values` 상태에 업데이트 합니다.const handleChange = (name, value) => { setValues({ [name]: value, });}; 이제 `values`와 `handleChange` 함수를 `FileInput` 컴포넌트에 prop으로 내려줍니다.2. FileInputa. 파일 선택 시 미리보기 이미지 설정`handleChan..

React Router란?React Router는 리액트 애플리케이션에서 여러 페이지를 관리하고, 페이지 간에 탐색할 수 있도록 도와주는 라이브러리입니다. 사용자들은 한 페이지에서 다른 페이지로 이동할 수 있으며, URL에 따라 컴포넌트를 로드할 수 있습니다. React Router의 핵심 컴포넌트는 Router, Routes, Route, Link 네 가지입니다. 설치 방법아래 명령어를 사용하여 React Router를 설치해야 합니다.npm install react-router-dom RouterRoutersms React Router에서 페이지의 현재 URL과 페이지 기록 데이터를 가지고 관리합니다. React Routrer의 다른 기능을 사용하려면, 모든 컴포넌트를 Router 컴포넌트 내부에 감..

JSON 파일 데이터 렌더링포켓몬 데이터를 렌더링하고, 정렬과 필터링 기능을 만들기 위해, `pokemon.json` 파일을 불러온 후, `map` 메소드를 활용해 데이터를 렌더링하고, `sort`, `filter` 메소드를 사용하여 정렬과 필터링 기능을 구현할 수 있습니다.// pokemon.json[ { "id": 1, "name": "이상해씨", "types": [ "풀", "독" ] }, { "id": 2, "name": "파이리", "types": [ "불꽃" ] }, { "id": 3, "name": "꼬부기", "types": [ "물" ] }, 우선 위의 `pokemon.json`..

StateReact에서 state는 컴포넌트의 동적인 데이터를 관리하는 방법입니다. `state`는 각 컴포넌트가 자신의 데이터를 저장하고 이를 기반으로 UI를 업데이트할 수 있도록 해줍니다. 주요 특징로컬 상태 관리 : 각 컴포넌트는 자체 `state`를 가질 수 있으며, 이 상태는 해당 컴포넌트 내에서만 사용됩니다. 즉, 다른 컴포넌트와 공유되지 않습니다.비동기적 업데이트 : 상태 업데이트는 비동기적으로 이루어질 수 있습니다. 여러 개의 `setState` 호출이 있을 경우, React는 최적화하여 배치 처리할 수 있습니다.초기 상태 설정 : 컴포넌트가 처음 렌더링될 때 초기 `state`를 설정할 수 있으며, 클래스 컴포넌트에서는 생성자(consteuctor)에서, 함수형 컴포넌트에서는 `useSt..

Props란?JSX 문법에서 컴포넌트를 작성할 때, 컴포넌트에도 속성을 지정할 수 있습니다. React에서 이렇게 컴포넌트에 지정한 속성을 `Props`라고 부릅니다. `Props`는 `Properties`의 약자이며, 컴포넌트에 속성을 지정해주면 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달됩니다.// App.jsfunction App() { return ( );}export default App;import diceBlue01 from './asset/dice-blue-1.svg';function Dice(props) { console.log(props); return ;}export default..

React란?React는 FaceBook에서 개발한 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다. 주로 단일 페이지 애플리케이션(SPA)에서 사용되며, 컴포넌트 기반 아키텍처를 통해 UI를 효율적으로 관리할 수 있도록 돕습니다. 특징컴포넌트 기반 : UI를 독립적인 재사용 가능한 컴포넌트로 나누어 개발할 수 있습니다.가상 DOM : 변경 사항을 효율적으로 관리하기 위해 실제 DOM을 업데이트하기 전에 가상 DOM에서 변경 사항을 비교합니다.단방향 데이터 흐름 : 데이터가 부모 컴포넌트에서 자식 컴포넌트로 흐르며, 이를 통해 데이터 흐름을 명확하게 유지할 수 있습니다.React 설치 방법Node.js가 이미 설치되어 있다고 가정하고 진행합니다.폴더 생성 :..

`Axios`란?`Axios`는 JavaScript에서 HTTP 요청을 처리하기 위한 라이브러리입니다. `Axios`를 통해 웹에서 `API`와 상호작용할 수 있고, `GET`, `POST`, `PUT`, `DELETE` 등 다양한 HTTP 메소드를 쉽게 사용할 수 있습니다. `Axios`는 Promise 기반으로 작동하여 비동기 요청을 관리하고, 요청과 응답의 인터셉터, 자동 JSON 변환, 타임아웃 설정 등의 기능을 제공합니다.GET 리퀘스트`GET` 요청은 서버에서 특정 데이터를 조회하기 위해 사용됩니다. 클라이언트가 서버에 요청을 보내고, 서버는 해당 요청에 대한 응답으로 데이터를 반환합니다.// axiosasync function getAxios(id) { const res = await ..

HTTP 메소드란?HTTP 메소드란 웹에서 클라이언드(브라우저)와 서버 간의 통신을 정의하는 방법이며, method 옵션은 요청의 유형을 지정하며, `GET`, `POST`, `PATCH`, `DELETE` 등의 값을 가질 수 있고, method를 지정하지 않으면 기본 값은 `GET`입니다. `GET` : 서버로부터 데이터를 요청할 때 사용`POST` : 서버에 데이터를 전송할 때 사용`PUT` : 서버의 기존 리소스를 업데이트하거나 새로운 리소스를 생성할 때 사용`DELETE` : 서버에서 특정 리소스를 삭제할 때 사용`PATCH` : 리소스의 부분적인 업데이트를 수행할 때 사용`fetch()` 기본 문법const res = await fetch('url');// 리스폰스 상태 코드res.status;..