COCSOS - guitar, computer, etc

#react router dom? 한 페이지에 모두 담으면 무겁다. Route? path정보에 따라서 렌더링할 컴포넌트를 결정해줌 페이지 별 분할 Link ? 클릭시 to 로 이동시킴 import React from 'react'; import {BrowserRouter, Route, Link} from 'react-router-dom'; import Rooms from './Rooms' export default function App(){ return( 홈 사진 방 소개 ) } function Home(){ return 홈이다 }

일주일만에 다시 리액트를 공부한다. 대학교를 다니며 알바를 하며 장학금을 받는 대학생들이 갑자기 존경스러워진다. #SPA란? 우선 npx create-react-app 으로 프로젝트 기본 환경 세팅 Single Page Application 이다. 기존의 사이트가 Multi Page application이라면, SPA는 한 페이지로 이루어져있다. 한페이지란, 한번 페이지를 로딩한 뒤로는 뒤로가기를 눌러도 새로 HTML 페이지를 로딩하지 않는다는 말. 그러면 브라우져 뒤로가기, 앞으로가기를 누르면 어떻게 하라구? # useEffect useEffect( ()=>{ window.onpopstate = function (event){ setPageName(event.state); }; }, {}); 를 통해 ..

#npm start 개발용이며 최적화 X #https로 로긴하고 싶을 땐 set HTTPS=true && npm start 원래 인증서가 필요함 #npm run build 배포 시 사용하는 명령어 -> build폴더 내 정적 파일이 생성되어 서버사이드 렌더링이 불가한것. #npm serve -s build(위치) build 위치로 서버를 제공한다 #build 폴더 내 css 파일 - 기존 src에있는 css이 하나로 병합된 것 - animation 속성 ? 컴파일 -> 2줄(벤더 접두사 포함이라 하위 브라우져 지원) 동적 import 사용한 경우 별도 js파일로 만들어짐 큰 이미지 파일은 media 파일에 생성 / 작은 이미지는 js내부에 내장됨 (빠르긴 함 http2.0부터는 빨라서 http 호출 감소..