코르시카's Blog

중요 Create React App(프론트엔드)과 Spring Boot(백엔드) 각각의 장점을 최대한 활용하기 위해 분리해서 작업(코딩, 빌드)하는 방법 > 프론트엔드 서버와 백엔드 서버 이렇게 분리하는 등 융통성 있게 운영하기 수월 > 이후 배포는 EC2를 이용, 자동 배포를 통해 업데이트 할 계획 ■ React app으로 frontend 환경 분리 npx create-react-app myapp // 설치 완료 시 cd myapp npm start > 이름 편리하게 myapp으로 설정 ■ Springboot로 backend 환경 분리 > Jtbrain의 IntelliJ 사용 예정 > Eclipse 보다 더 사용하기 편리하달까??? 하는 이유에서 선택 > 의존성 + 빌드 환경 관리는 다음 이유에서 gr..

■ Class 1) 정의 프로그램안에 객체로써 서로 관련이 있는 property(fields)와 method를 가지고 특정 기능을 수행할 수 있는 대상 ※ dataclass : method는 없이 data property 만 가지고 있는 class class persion{ ... name; age; speak(); ... } 2) 세부 내용 (a) incapsulation : 접근가능 / 접근 불가능한 datatype으로 구분 보통 객체 메써드만으로 접근 가능한 방식으로 구현하는게 맞음 (b) 상속 : 부모의 method, property를 상속 (c) 여러가지 class( meta class 등 )이 존재 > 기본적으로 template / blueprint 와 같은 역할 > 객체 생성시 메모리에 적재..

■ Overriding 1) 정의 부모 - 자식 class 로 상속을 할 때, 자식 class에서 부모에서 정의된 매써드를 같은 이름의 매써드로 바꿔치기 하는 것 ( 객체지향 언어의 다형성과 관련있음) 상속 관계에 있는 클래스 간에 같은 이름의 메소드를 정의하는 것, 만약 자식클래스가 부모클래스에서 선언된 것과 같은 메소드를 가질 때, 메소드 오버라이딩이라고 함. ■ Overloading 1) 정의 - Java 등... 언어에서 같은 class안에 이름이 같으나 다른 기능을 하는 여러 매써드를 정의할 수 있음 1) 메소드 이름이 같아야 한다. 2) 리턴형이 같아도 되고 달라도 된다. 3) 파라미터 개수가 달라야 한다 . 4) 파라미터 개수가 같을 경우, 데이터타입이 달라야 한다. * 리턴타입은 시그니처에..

■ Js This의 범위 1) 영향을 주는 것 (a) 엄격 / 비엄격 엄격 / 비엄격은 global 또는 block 안에서 각각 선언할 수 있음 (b) 함수의 호출방식 (c) 화살표 함수 사용 여부 2) this의 정의 실행 컨텍스트( global, function, eval )에 따라 달라짐 또한 엄격 / 비엄격에 대해서 다음과 같음 비엄격 모드 엄격 모드 this 항상 객체 그 어떤 값도 가능 ※ 실행 컨텍스트이므로, runtime때 dynamic하게 바뀜! ■ 문맥 1) 기본 바인딩 - 전역 문맥 global execution context, this는 엄격 / 비엄격 모드 관계 없이 전역 객체 참조 // 웹 브라우저에서는 window 객체가 전역 객체 console.log(this === wind..

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

■ 사용방법 개별 repository 만들기 project-name project-name-client project-name-server 1) root-main 프로젝트 생성 / or Clone git clone https://github.com//project-name.git 2) 초기 submodule 등록 git submodule add -b master https://github.com//project-name-client.git client git submodule add -b master https://github.com//project-name-server.git server > client, server 폴더와 .gitmodules 파일이 생성 > 변경 된 내용을 root-main에 co..