코르시카's Blog

■ React가 없다면? - react가 필요한 이유 public 폴더 밑에 pure.html을 작성 > Semantic 태그 추가 참조 : snusang.tistory.com/4 기능은 없으나, 의미상의 구분을 위한 태그 > 만약 Semantic 태그 안의 내용이 아주 방대하다면, 모듈화를 위해 분리하고 싶어질 것! 그것을 React가 해주며, component로 그것을 가능하게 해줌 ■ Component 코딩 방식 > App에 Component를 상속하고, render 메써드를 오버라이딩 하는 방식 추가 참고(JS의 class) : korshika.tistory.com/63?category=955367 > 하나의 최상위 태그만 존재해야 한다, 이 경우는 header Semantic tag > 위에서 ..

■ React local build 명령어 root dir 위치에서 npm run build 명령어를 사용 > 결과적으로 모든 파일을 compressing하여 효율성을 높여줌 > dev 모드에서 나오는 error 등등 도 다 handling 해줌 > 다른 효율성을 높여주는 방식 참조 [Webpack, Babel] : Link ■ build 결과물 로컬에서 확인하기 serve 사용, 한번만 사용할 local web 서버 배포를 진행해주는 package serve -s build 로 위에서 build 한 react를 serve로 띄워서 확인 가능 // -g는 package를 global로 설치 npm install -g serve --save -dev // --save option 추가 (dev 여야하는지는..

■ index.css > 파일 위치 - index.html이 최종 모든 file들이 loading되는 부분 - index.css 수정으로 index.html 최종본 보여주고 싶은 것의 css를 바꿔줄 수 있는듯 ■ App.css > App 자체는 component load 되는 것, 이것이 html index.html이 root tag를 가지고 index.js가 root에 App이라는 사용자 component tag를 load, App.css는 이 load되는 사용자 component의 css를 수정하는 것 ■ 강의 css index, App css모두 지우고 출발 참조 : www.youtube.com/watch?v=FbNvDu-XTVg&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFS..

■ react 실행시 (dev중, build로 compile하기 전) 1) 터미널 npm run start / npm start 명령어 입력 2) react에서 public 폴더에 index.html 를 찾음 ■ 실제 index.html 안의 tag의 변화 - load되고 나서 다음과 같이 변화 > 순서 entry file 1) index.html 2) index.js 3) App component 부름 (App.js) 4) App.js 내부 (a) function type (b) class type > 추가 class / function type 참조: overreacted.io/ko/how-are-function-components-different-from-classes/ ■ 실제 코딩하면서 변경하..

■ 해당 목차 > 1 ~ 5강 ■ React 쓰는 이유 - 가독성 증가 ( user-tag : component 라고 불림 ) - 유지보수의 편의성 - 재사용성 ■ 강의 방식 코딩 → 실행 → 배포 ■ React 메인 사이트 ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org ■ 이 강의 환경설정 node.js, npm, react 를 사용 > 환경은 window 1) 설치 과정 D:\...\first>npm install -g create-react-app // react 자체를 설치 create-react-app -V // 설치된 버..

■ Client Side Rendering 1) 정의: 모든 작업을 Client side에서 수행하는 것 > React / Vue / Angular 등등 요즘 핫한 Single Page Application 의 프레임워크가 해당 2) 과정: (a) 서버에서 client의 request에 의해 index html 파일 Client에 전송 (b) body 내부에 script loading script tag만 들어있음 ( 가장 추상적인 예시 ) (c) 기본적으로 빈 html이기 때문에 순간적으로 client는 빈 화면을 보여주고, app.js를 서버에 요청 서버는 다시 app.js를 client에 보내줌 (app.js 안에 다른 source 코드까지 모두 포함) (d) 추가 데이터 필요시, request로 ..