react13 11.18. 28일차 TIL Team_Project 로그인, 회원가입 오늘은 피그마를 다듬고, 회원가입과 로그인 페이지 기능을 구현하였다.1. 피그마 정리 모습 작년에 xd를 사용하여 워크프레임을 만들어 본 경험이 있었는데 피그마도 비슷한 느낌이어서 사용하는 데에 크게 어렵지는 않았다.프로토타입 또한 설정하는 것이 간단해서 좀 재밌었다 ㅋㅋ2. 로그인 기능 구현오늘은 시간이 없는 관계로.. row_code를 첨부한다 ㅠㅠ 다음에 코드를 리펙토링하며 로직에 대한 해석을 작성할 예정이다.더보기import { useEffect, useState } from 'react';import { useNavigate } from 'react-router-dom';import supabase from '../supabase/supabase';import Home from './Home';.. 2024. 11. 18. 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. 이전 1 2 3 다음
