새로운 React 프로젝트를 시작하면서 상태관리 라이브러리를 고르는데, 팀원중에 React를 아예 처음 접하시는 분이 계시고, 프로젝트 기간은 짧아서 그나마 러닝커브가 낮은 Recoil을 사용해보기로 했다. (그렇지만 결국 다시 Redux로 돌아가게 되었다. 이건 뒤에…) 일단 Redux 대신 Recoil을 선택했던 이유는 페이스북에서 React 비동기 처리를 위래 만들었던 라이브러리로 훨씬 리액트스러움 (hooks) 보일러플레이트가 많지 않음(Redux는 한 처리를 위래 type > […]
나홀로 프로젝트 진행 중, 정리하지 않으면 도저히 안될것 같아서 회원가입부터 정리를 시작 스택 Frontend: React (redux, axios) Backend: NodeJs, express DB: MongoDB 구현 순서 모델 설계 백엔드 로직 구현 프론트 컴포넌트 구현 Redux action, reducer와 axios로 데이터 통신 모델 설계 원래 모델에 다른 속성도 많은데 회원가입 기능에 관한 것만 정리하기 위해서 간단하게 정리했다. 먼저 회원스케마를 […]
(출처 : https://www.youtube.com/watch?v=qiii35VZvBE&list=PLKWa_W4Kolgwt9pboQ34OkkJSmuNTtO-z) 전체 코드는 유튜브에 있음 Side bar 구획 logo / navbar / updated-courses / stats / name side-bar는 fixed로 고정하고, top / left / bottom 모두 지정 2. logo(img)는 block으로 지정한 후에 크기고정 (만약 크기가 정확하면 width: 100%으로 하고, div 조절) 3. navbar 구성 : object array로 변수 지정하고 map함수를 이용 currentPage라는 state를 […]
미리보기 Navigation 구조 1.MenuItems.js Navigation에 들어갈 list의 data (title, url, className *nav-links-mobile은 mobile 화면에서만 보일것) 2. Button.js / Button.css Button Component (Navigation에서는 Desktop에서 Sign-Up Button 사용) 3. Navbar.js / Navbar.css clicked가 false 일 땐 toggle == bars && menu className = .nav-menu clicked가 true 일 땐 toggle == times && menu className = .nav-menu.active MenuItems에서 […]
npx create-react-app로 리액트 프로젝트 생성 시 아래처럼 오류가 날 경우, 해결방법 해결법 C:\Users\jjagu\AppData\Local\npm-cache 해당 폴더로 이동해서 캐쉬 삭제 완료
useEffect : Rendering 될 때마다 실행되는 함수로 이해 기본 사용법 특정 element가 rendering 될 때만 실행시키기 처음 페이지가 rendering 됐을 때만 실행시키기
설명은 공식문서가 잘되어있고 그보다 직접 보는게 빨라서 코드만 정리해놓기 Vanilla JS였다면 document.querySelector();로 가져오고, 값 변환 후에, innerHTML을 해야했지만 useState를 이용하면 값 가져오는 것과 변환까지 한번에 되는 장점이 있다 계속 보면서 익숙해지자
1.Edit in settings.json 2. 속성 추가 *전체json 3. 끝!!!!!! Emmet 최고
1. 터미널에서 client 디렉토리로 이동 후 react-router-dom 설치 2. Routing 파일 내에 react-router-dom과 routing 할 component import 3. 함수에서 Router를 return 4. 복습 겸 이해를 돕기 위한 App.js (Routing) 전체 코드