먼저 Working Directory를 Github repository와 연동시킴 2. 코드를 Push 한 후에, Settings가서 Github Page section에서 master 체크 후 save 3. package.json에 homepage와 script 추가 4. cmd에서 npm run deploy (predeploy는 deploy를 실행 시, 자동으로 실행됨) 5. 다시 github settings(2번)으로 가면 gh-pages라는 브랜치가 생성되어 있음. 그럼 그 브랜치로 Source 변경 후, Save. 6. 끝! 주소로 들어가보면 […]
미리보기 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에서 […]
React에서 array의 data들을 모두 보여주고 싶을 때 간단히 하면 <div>arr[0]</div> <div>arr[1]></div>…식으로 여러개 반복하며 쓸 수 있다. 하지만 array의 크기가 정해지지 않았을 때는 한계가 있다. 따라서 array나 반복되는 코드를 구현할 때는 map()함수를 이용하면 된다. 2개의 object를 갖는 array가 있을 경우, 이렇게 array를 map을 이용해 render하는 변수를 만든 후, return 문에서 사용하면 된다! (return 할 때, key나 […]
npx create-react-app로 리액트 프로젝트 생성 시 아래처럼 오류가 날 경우, 해결방법 해결법 완료 npx create-react-app 설치가 제대로 되었습니다!
npx create-react-app로 리액트 프로젝트 생성 시 아래처럼 오류가 날 경우, 해결방법 해결법 C:\Users\jjagu\AppData\Local\npm-cache 해당 폴더로 이동해서 캐쉬 삭제 완료
https://nodejs.org/ko/ 홈페이지에서 원하는 버전을 다운받는다. (설정은 모두 그대로) 2. cmd에서 설치 확인(node.js와 npm 모두 확인)
useEffect : Rendering 될 때마다 실행되는 함수로 이해 기본 사용법 특정 element가 rendering 될 때만 실행시키기 처음 페이지가 rendering 됐을 때만 실행시키기
설명은 공식문서가 잘되어있고 그보다 직접 보는게 빨라서 코드만 정리해놓기 Vanilla JS였다면 document.querySelector();로 가져오고, 값 변환 후에, innerHTML을 해야했지만 useState를 이용하면 값 가져오는 것과 변환까지 한번에 되는 장점이 있다 계속 보면서 익숙해지자
1.Edit in settings.json 2. 속성 추가 *전체json 3. 끝!!!!!! Emmet 최고
CORS: Cross-Origin Resource Sharing 이슈 해결하기 (참고 사이트: https://create-react-app.dev/docs/proxying-api-requests-in-development/) 1.터미널에서 proxy를 설치한다. 2. src 디렉토리내에 setupProxy.js를 생성한 후, 모듈을 구현한다. target에 포트번호는 response할 포트번호를 작성하면 된다.