코르시카's Blog

■ 사용자 & 구현자 1) State : 구현자가 사용자를 위한 system의 상태관리를 위한 것 2) Props : 사용자 입장에서 보여지는 component API를 조작하기 위한 것 ■ Component를 state로 관리하기 > State는 App.js 등에서 주는 값으로 치환 > Component라는 class + props를 한 객체로 바라보고, state에서 props로 가지는 값을 하위 component에 주입하는 방식 > 상위 App의 State를 하위 Component로 전달하는 방식 ※ Props + component 활용된 부분 ■ Class의 Super란? 1) 정의 : 클래스를 생성할 때, 부모 클래스의 기능을 활용해서 메서드나 변수를 선언할 때 super를 사용 2) 사용 : ..

■ Component 파일관리 > 수천개의 component들을 모아서 관리하고 싶을 때 (원래는 index.js에 모여있는 등 관리 안되면 어려움) 1) 위와 같이 JS 파일로 분리 2) class defenition을 해당 JS에서 한후 export default Subject; 로 외부에 전달 3) App.js에서 import 하여 render 해줌 참조 : www.youtube.com/watch?v=8hGqznPGVc0&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=15

■ Component와 Props > Component : 사용자가 지정한 요소들 전체를 들고있는 큰 묶음 > Props : 사용자가 사용하고자 하는 Component 안의 요소들을 추가적으로 param을 통해 값을 외부에서 주입하고 싶을 때 사용, 그때 주입되는 attribute에 대입되는 대상을 props 라고 함 > 이를 통해 Component의 재사용성을 높일 수 있음 ※ never used 의 lint warning 경우 : // eslint-disable-line no-unused-vars 를 error 줄 옆에 추가 참조 : www.youtube.com/watch?v=pPCC2JWbPgk&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=13

■ 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로 ..

※ 추가될 수 있음 Node.js React next.js Babel ■ Redux & Reduce velopert.com/3528 리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i) | VELOPERT.LOG 이 포스트는 리덕스의 리도 모르는 독자들을 대상으로 작성된 글입니다. 리덕스가 왜 필요한지 알아보고, 리덕스를 편리하게 사용하기 위한 발악을 한번 해보겠습니다. 리덕스 왜 쓸까? 리액트 velopert.com medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%EA%B2%8C-%EC%A0%9C%EC%9D%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%AC%EC%9A%B8%EA%B1%B8%EC%9A..