myinfo7091 님의 블로그

오늘의 학습내용 :  중첩 라우팅, useSearchParams ◆ 중첩 라우팅 중첩 라우팅(Nested Routing)은 특정 라우트 내에서 추가적으로 라우트를 정의하는 방식이다. 여러 계층의 UI를 웹 애플리케이션에서 구성할 때 사용할 수 있다. 하나의 Route 안에 또다른 Route를 포함시키고, 이를 통해 복잡한 구조를 더 효율적으로 렌더링할 수 있다. 만약 /home이라는 페이지의 하위에 Location이라는 컴포넌트가 있을 경우, /home/location 으로 접속하면 home 컴포넌트 안에서 location 컴포넌트를 함께 보여줄 수 있게 된다. (참고: https://monamigoon.tistory.com/ ) // Outlet 으로 중첩 라우팅 구현하기import { Outlet }..

오늘의 학습내용 :  Dynamic Route, Path Parameter  ◆ Dynamic Route 동적 라우팅(Dynamic Routing)은 웹 어플리케이션에서 클라이언트의 요청에 따라 동적으로 경로를 처리하는 라우팅 방식이다. 사용자의 입력과 상태의 변화 등 여러 조건에 따라 서버가 제공할 페이지와 리소스를 결정하며, 정적 라우팅(Static Routing)과는 다르게 라우팅 규칙이 실행 시에 결정된다. 어떤 웹사이트가 전체 아이템을 보여주는 리스트 페이지와 특정 아이템의 정보를 보여주는 상세 페이지로 구성되어 있을 때, 특정 아이템 카드를 클릭하면 해당 아이템의 id값에 해당하는 데이터로 이동하는 것을 알 수 있다. 동적 라우팅은 라우트 경로에 특정 값을 넣어주고 각각에 맞는 페이지로 이동할..

오늘의 학습내용 :  React Router Dom  ◆ Router Dom 리액트 라우터 돔을 통해 여러 페이지를 가진 웹을 만들어 볼 수 있다. 일반적으로 웹페이지를 이용할 때 여러 페이지를 오가며 이동할 수 있는 것처럼, react-router-dom은 페이지 이동 기능을 처리할 수 있게 해 준다. 라우팅(Routing)이란?웹 어플리케이션에서 라우팅은 사용자가 요청한 URL에 맞는 페이지를 보여주는 것을 의미한다. 다양한 주소에 대해 요청이 들어오고, 네트워크에서 각각에 맞는 경로를 선택해서 해당 컨텐츠로 이동시켜 주는 작업이다. React Router 라이브러리를 통해 리액트에서 컴포넌트 기반의 라우팅 시스템을 구축할 수 있다.   '평소처럼 a 태그를 사용해도 되는 게 아닐까?' 라고 생각할 ..

오늘의 학습내용 :  Action Creator  ◆ Action Redux에서 Action은 영단어의 본뜻과 마찬가지로 행동(동작)을 말한다. 정확히는 상태에 영향을 미치는 어떤 행동인데, 스토어에 저장된 데이터에 변화를 주기 위함이다. Action은 자바스크립트 객체 형태로 존재하며, type이라는 필드를 반드시 포함한다. { type: 'ADD_TODO', text: '내배캠 강의 복습하기'} 개발자는 type 필드를 통해 해당 Action이 정의할 수 있고, 객체에 포함된 부가적인 데이터를 통해 Action을 처리하게 된다. 애플리케이션의 규모가 클수록 객체는 훨씬 더 많은 데이터를 포함하게 되고, 디버깅할 때 redux-devtools 등의 도구를 이용해서 각 Action을 살펴보아야..

오늘의 학습내용 :  Redux  ◆ ReduxRedux는 자바스크립트 어플리케이션 상태 관리 라이브러리로, React Tool kit을 설치해서 React 라이브러리와 함께 사용할 수도 있다. 프론트엔드 개발에서는 전역 상태 관리 라이브러리로 표현되는데, Global State를 관리하도록 돕기 때문이다.동일한 상태와 액션이 리듀서에 전달되면 순수함수인 리듀서는 멱등성을 보장한다.다른 상태관리 라이브러리에 비해 엄격한 코드 구성 방법을 갖추고 있어 코드 유지보수에 유용하다.액션, 상태 변화가 로그에 기록되기 때문에 개발자가 디버깅하기 용이하다.다만 리덕스를 사용해서 코드를 작성할 경우 필수적으로 만들어지는 파일이 있는데다가 스토어와 컴포넌트를 연결할 때 메서드를 필요로 하기 때문에 사용되는 코드의 양이..

오늘의 학습내용 :  useEffect, useRef, useContext Hook  ◆ useEffect  useEffect는 side effect를 발생시킬 때 사용하는 React Hook이다. 쉽게 말해서 어떤 컴포넌트가 렌더링 된 이후마다 특정한 작업을 수행하도록 설정하고 싶을 때 사용하는 것이다. React 공식 문서에서 useEffect는 외부 시스템과 컴포넌트의 싱크를 맞춘다고 설명하는데, 렌더링이 끝난 다음에 실행되기 때문에 컴포넌트의 렌더링 과정을 순수하게 유지시킬 수 있다. import React, { useEffect } from "react";const App = () => { useEffect(() => { console.log("hello useEffect"); }); ..

오늘의 학습내용 :  styled 컴포넌트  ◆ CSS in JS CSS in JS는 스타일의 정의를 자바스크립트로 작성된 컴포넌트에 바로 삽입하는 방식이다. 쉽게 말해 자바스크립트 코드로 css 코드를 작성하여 컴포넌트를 꾸밀 수 있다고 생각하면 좋다. 이전까지 배웠던 style 관련 코드를 작성할 때에는 css 파일을 생성하고 이를 import 했지만, 조금 더 간편한 방법으로 컴포넌트 꾸미기가 가능하다.왜 이런 방식의 개발이 주류가 될까?기존에는 HTML, CSS, JS를 별도의 파일로 정리하는 방법을 선호했지만, React 등 모던 자바스크립트 라이브러리가 등장하면서 웹 애플리케이션을 재사용하기 편리한 여러 블록으로 분리하여 개발하는 컴포넌트 기반의 방식이 많이 쓰이게 되었다. 웹 페이지를 여러 ..

useState, 제출 - 삭제 기능 구현 ◆ useState App.jsx에 국가별로 메달 집계를 표시하는 리스트를 추가한다. useState를 활용해서 데이터를 저장하고 출력하는 React hook에 익숙해질 필요가 있었다.function App() { const [country, setCountry] = useState(''); const [gold, setGold] = useState(0); const [silver, setSilver] = useState(0); const [bronze, setBronze] = useState(0); const [medalList, setMedalList] = useState([]); const handleSubmit = (event) => { ..

오늘의 학습내용 :  React 컴포넌트  ◆ 컴포넌트 컴포넌트(Component)란, 프로그래밍에서 재사용할 수 있는 독립된 모듈들을 말한다. 컴포넌트를 기반으로 하는 프로그래밍에서는 블록을 조립하듯 화면을 구성하게 되는데, 웹 컴포넌트는 이를 웹에서 적용할 수 있도록 정한 것이다. React는 컴포넌트 기반의 구조라는 특징을 갖는데, 페이지를 컴포넌트로 구성하고, 하나의 컴포넌트가 다른 여러 개의 컴포넌트 조합으로 구성될 수 있다. 개발자는 컴포넌트를 활용해 사용되는 전체 코드의 양을 줄일 수 있고, 개발 시간을 단축할 수 있으며, 유지 보수 비용을 줄일 수 있다.  ◆ useState hook useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook이다. 먼저 컴포넌트의 최..

react 프로젝트 셋업, 폼 ui 구현  이번 개인 프로젝트로는 올림픽 메달 집계를 관리해 보는 Olympic Medal Tracker를 제작한다. 강의에서 배운 리액트 컴포넌트와 이벤트 관리, state 관리를 통해 필요한 기능을 구현할 수 있다. 과제를 수행하면서 리액트 컴포넌트 useState 관리에 익숙해질 것으로 기대된다. 이번 개인과제에서도 1~3일차에 해당하는 로드맵이 있는데, 제작하다 보니 순서를 거의 지키지 않게 되었다... 이번에도 필수 구현사항들을 먼저 만들어보고, TMDB 영화 검색 사이트처럼 나중에 추가 목표들을 하나씩 도전해볼 계획이다. 터미널을 열고 Vite로 리액트 프로젝트를 셋업한다. 이제 브라우저에서 React 앱을 열어볼 수 있다.yarn create vite my-m..