리액트 팬레터 홈페이지 만들기: 1단계. props-drilling 만들기 완료.

1. 필수 요구 사항 styled-components 를 이용하여 스타일링 전역 스타일에 reset.css 를 적용해주고 box-sizing이 border-box가 되도록 설정 styled-components에 props를 넘김으로 인한 조건부 스타일링 적용 팬레터 등록 시 id는 uuid 라이브러리를 이용 2. [3단계] 중 [1단계] 구현 props-drilling 브랜치 : useState만으로 상태관리해서 코드 작성 context 브랜치 : props-drilling의 작업 코드로 react context API를 사용 (전역상태를 이용한 코드로 리팩터링) redux 브랜치 : 모두 redux 라이브러리를 이용한 코드로 리팩터링 3. 배운 점 특정 멤버의 댓글 클릭 > 상세페이지 이동 > 수정/홈..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 15.
• textsms

#05 리액트 숙련 : 투두리스트의 상세페이지 연결하기(성공)

0. 어제 실패한 상세페이지 연결 😢😢 #04 리액트 숙련 : 투두리스트의 상세페이지 연결하기 [원하는 기능]: 투두리스트의 상세페이지 만들기 -> react-router-dom 적용 TIL ▶원하는대로 구현이 안되고 있음..😢 조금 더 공부해봐야할 것 같음..! 1. Router.js 에서 설정 완료 import { BrowserRouter, Route, zerotonine2da.tistory.com 1. 오늘 연결된 상세페이지 😊😊 [어제 연결이 이상했던 이유] ▶우선 home 화면을 제대로 설정하지 않았음. + App.jsx에서 바로 진행하려고 했음. ▶ react router dom의 사용법 미숙 [구현 정리] 1. App.jsx에서 로 구성하기 2. Home.jsx를 보여주고 싶은 메인화면으로 ..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 10.
• textsms

[React 숙련] 리액트 react-router-dom

0. react-router-dom (패키지) 설치하기 ▶ 터미널 : yarn add react-router-dom 1. 페이지 컴포넌트 작성 (단일페이지 구현 -> 다중 페이지로 구현) ▶ scr > pages 폴더 > 4개의 페이지 구성 2. Router.js 파일 생성 (router 구성하는 설정 코드 작성-> 주입) import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Home from '../pages/Home'; import About from '../pages/About'; import Contact from '../pages/Contact'; import Works from '../pages/Works'; const..

• format_list_bulleted React
• · 2023. 11. 9.
• textsms