#04 리액트를 사용한 팬레터 웹사이트 개발 : 팬레터 등록 기능 구현 및 유효성 검사 , 글자수 제한 방법

#03 리액트를 사용한 팬레터 웹사이트 개발 ▼: DummyData로 리스트 UI 구현 및 클릭한 사람 데이터만 보이기 ▼ #03 리액트를 사용한 팬레터 웹사이트 개발 : DummyData로 리스트 UI 구현 및 클릭한 사람 데이터만 ▼ #02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-component) ▼ #02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-compone zerotonine2da.tistory.com 개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 팬레터 입력창(AddForm) : 팬레터 등록 기능 구현 유효성 검사 : 닉네임과 내용 미입력시 등록되지 않도록 적용 최대 글자..

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

#03 리액트를 사용한 팬레터 웹사이트 개발 : DummyData로 리스트 UI 구현 및 클릭한 사람 데이터만 보이기

▼ #02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-component) ▼ #02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-component) ▼ #01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정 ▼ #01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정 개인프로젝트 (리액트 팬레 zerotonine2da.tistory.com 개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 홈 화면 UI: Dummy Data(fakeData.json)를 이용한 리스트 UI 구현 + 멤버별 팬레터 출력 (1) Dummy Data(fakeData.j..

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

#02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-component)

▼ #01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정 ▼ #01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정 개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 프로젝트 셋업 깃허브 브랜치 생성 Router.jsx 설정 전역스타일링 ( GlobalStyle.jsx ) 설정 (1) 프로젝트 셋업 CRA boilerplate 로 프로젝트 생성 : zerotonine2da.tistory.com 개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 홈 화면 UI: 배너 및 헤더 파트 UI 구현 (1) 홈 화면 UI 구현 : 기본틀 import AddForm from 'components/AddForm'; import Header from..

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

#01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정

개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설 프로젝트 셋업 깃허브 브랜치 생성 Router.jsx 설정 전역스타일링 ( GlobalStyle.jsx ) 설정 (1) 프로젝트 셋업 CRA boilerplate 로 프로젝트 생성 : yarn create react-app practice React 안 쓰는 파일 삭제 : logo.svg / reportWeb / Setuptest / App.test.js / App.css [변경] App.jsx & index.jsx: React.StrictMood & reportWebvitals() 삭제 pages/ , components/ , shared/ , assets/ 폴더 작성 및 필요 컴포넌트 사전 작성 styled-components, react-r..

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

리액트 팬레터 홈페이지 만들기: 3단계. Redux 리팩토링

0. 2단계 context으로 생성한 홈페이지 리액트 팬레터 홈페이지 만들기: 2단계. contextAPI로 리팩토링 0. 1단계 props-drilling으로 생성한 홈페이지 리액트 팬레터 홈페이지 만들기: 1단계. props-drilling 만들기 완료. 1. 필수 요구 사항 styled-components 를 이용하여 스타일링 전역 스타일에 reset.css 를 적용해 zerotonine2da.tistory.com 1. [3단계] 중 [3단계] 구현 & TIL redux 브랜치 : 모두 redux 라이브러리를 이용한 코드로 리팩터링 (1) props처럼 계속 부모>자식 컴포넌트로 전달을 안 해도 되는 장점이 있음 (2) 기존에 받아온 데이터의 형식과 리덕스로 전달받은 값이 약간 달라서 헷갈리는 부분..

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

리액트 팬레터 홈페이지 만들기: 2단계. contextAPI로 리팩토링

0. 1단계 props-drilling으로 생성한 홈페이지 리액트 팬레터 홈페이지 만들기: 1단계. props-drilling 만들기 완료. 1. 필수 요구 사항 styled-components 를 이용하여 스타일링 전역 스타일에 reset.css 를 적용해주고 box-sizing이 border-box가 되도록 설정 styled-components에 props를 넘김으로 인한 조건부 스타일링 적용 팬레터 zerotonine2da.tistory.com 1. [3단계] 중 [2단계] 구현 & TIL context 브랜치 : props-drilling의 작업 코드로 react context API를 사용 (전역상태를 이용한 코드로 리팩터링) (1) 확실히 props로 하는 것보다 코드가 간결해졌고, 이해하기 ..

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