본문 바로가기

전체 글53

11. 13. 26일차 TIL React 두번째 과제_마무리 오늘은 예비군을 갔다와서 기절한 후 아침에 일어난 미룬이는 .. 드디어 두번째 React과제를 마무리했다. 오늘한 작업추가기능삭제기능디테일 페이지 구현github 생성 및 브랜치 옮기기context 사용하여 상태 전역 관리하기vercel 배포하기1. 추가 기능const [selectedPokemon, setSelectedPokemon] = useState([]); // 포켓몬 선택 추가 const handleSelectPokemon = (e) => { if (selectedPokemon.length >= 6) { alert("포켓몬은 최대 6마리까지만 등록할 수 있습니다."); return; } const pokemonName = e.target.id; .. 2024. 11. 13.
11. 11. 25일차 TIL 라이브러리 없이 라우터(Router) 만들기 오늘은 챌린지 반 수업을 통해 react 라이브러리 없이 라우터(Rounter)를 만드는 방법에 대해 학습하였다.1. 라우팅 (복습)라우팅(Routing)은 애플리케이션에서 클라이언트의 요청 (URL)에 따라 적절한 콘텐츠나 페이지를 제공하는 과정을 의미한다. 주로 SPA(Single Page Application)에서 사용되며, 사용자가 URL을 변경할 때 페이지를 새로 고침하지 않고도 콘텐츠를 동적으로 업데이를 할 수 있게 한다. 1) 주요 요소URL 매핑 : 특정 URL 경로를 정의하고, 해당 경로에 맞는 컴포넌트나 페이지를 연결한다해시 라우팅 : URL의 해시(#)를 사용하여 페이지 전환을 관리한다.히스토리 관리 : 사용자가 뒤로 가기, 앞으로 가기와 같은 내비게이션을 할 수 있도록 브라우저의 히.. 2024. 11. 11.
11. 08. 24일차 TIL React 두번째 과제_01 (레이아웃,스타일) 오늘부터 React 개인과제를 진행하였다.오늘은 간단한 구조와 스타일을 작성하고 js파일에서 데이터를 그리는 작업을 했다.이번 과제는 설계단계에서 컴포넌트와 페이지를 분리하고 시작하였다.그리고 Router를 활용하여 페이지를 이동시킬 예정이다. 기본페이지는 Homepage이다.Home페이지에서는 로고와 포켓몬 도감으로 이동하는 버튼이 있다. 이후 버튼을 클릭하면 Dex페이지로 이동한다.Dex페이지에서는 js파일에서 데이터를 활용하여 CRUD 기능을 구현할 예정이다.지금 보니 여백을 조금 더 여유있게 두는 편이 좋을 거 같다. Dashboard는 내가 선택한 포켓몬이 들어가는 영역이다. 아직 구현하지 않았지만 추가된 포켓몬을 삭제할 수도 있다.음.. 이 영역에 reset 버튼도 만들어서 6개의 선택지를 한.. 2024. 11. 11.
11. 07. 23일차 TIL - router, eslint, 반응형 effect의 생명주기 오늘은 React 개인과제를 진행하였다. 이번 과제는 PokemonDex 사이트를 만드는 것이다. 과제를 통해 router의 사용법과 vscode ESlint의 오류를 알 수 있었다. 또한 챌린지반 과제를 진행하면서 반응형 effect의 생명주기에 대해서도 간략하게 학습하였다.1. RouterReact Router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 구현하기 위한 라이브러리이다. 이를 통해 사용자는 페이지를 새로 고치지 않고도 URL을 변경하고 다양한 컴포넌트를 렌더링할 수 있다. 1) 주요 개념RouterReact 애플리케이션 라우팅을 관리하는 컴포넌트이다. BrowserRouter와 HashRouter가 일반적으로 사용된다.BrowserRouter는 HTML5의 History AP.. 2024. 11. 8.
11. 06. 22일차 TIL - Flux, Redux, RTK 오늘은 제공된 강의와 챌린지반 수업을 통해 Flux와 Redux, RKT에 대해 배웠다.1. FluxFlux란, 단방향 데이터 흐름(unidirectional data flow)을 활용한 리액트용 애플리케이션 아키텍쳐(architecture)이다. Flux는 Facebook이 React에서 발생하는 복잡한 상태 관리를 해결하기 위하여 (React 컴포넌트 간 상태 전달, 데이터 흐름을 더 직관적이고 관리하기 쉽게) 고안하여 만들었다. 1) Flux Architecture의 구성 요소다음은 Flux의 기본 요소와 그들 간의 관계를 나타낸 도식이다. Action : 애플리케이션에서 어떤 이벤트가 발생했음을 나타내는 객체Dispatcher : 발생한 Action을 받아서 다른 요소들에게 전달하는 역할을 수행S.. 2024. 11. 6.
11. 05. 21일차 TIL - 리렌더링, 메모이제이션, 조건부 렌더링 오늘은 어제 마저 정리하지 못한 메모이제이션에 대한 개념에 대해 복습한 뒤, 챌린지반 과제를 통해 조건부 렌더링에 대해 학습하였다. 메모이제이션(memoization)과 리렌더링(re-rendering)은 성능 최적화와 관련된 개념으로 메모이제이션은 리렌더링 과정에서 발생할 수 있는 성능 저하를 줄이는 데 큰 기여를 하며 두 개념은 효율적인 애플리케이션 성능을 위해 함께 사용될 수 있다.1. 리렌더링리렌더링이란 UI 프레임워크에서 컴포넌트의 상태나 데이터가 변경될 때, 해당 컴포넌트를 다시 그리는 과정을 의미한다.1) 리렌더링 발생 조건컴포넌트에서 state가 바뀔 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트 모두2) 최적화최적화란 브라우저에서 비용이 .. 2024. 11. 5.

티스토리툴바