코르시카's Blog

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

■ Object - literal / constructor > Object 생성은 literal / constructor 방식이 있음 여러 데이터를 변수에 담는 것 보다 container로 Object를 사용하여 좀더 관련있고 효율적으로 관리 가능 - new 키워드 참조 : korshika.tistory.com/67 // 1. Literals and property function print(person) { console.log(person.name); console.log(person.age); } // Object로 save // 괄호 방식 : Object literal const hojune = {name : 'hojune', age: 4}; hojune.hasJob = true; // dynam..

■ 사용 경우 > Object constructor, Class 선언, 함수 새로 할당 ■ 사용 이유 > literal 방식과 다르게, 유사한 객체를 여러번 재사용 해야할 때 유용한 방식 ■ 사용 방식 > 생성자 방식의 new / this의 관계 추가 참조 : Link > new 키워드 사용시 동작 순서 new 키워드 사용 1) 빈 객체를 생성하여 this에 할당( Object literal ) 2) 함수 본문을 실행하고, 함수 내부 동작에 따라 this(함수 객체)에 프로퍼티를 추가해 this를 수정 (this binding) 3) (1)에서 만들어진 객체에 _proto_라는 property를 추가. Constructor 함수의 prototype 객체를 의미. 4) this를 반환 (때문에 new 키워..

■ RDS 추가 > 보편적인 mysql + easy create 마법사 + free tier 사용으로 과금 회피! max 저장소 21 GB로 설정하여 과금 회피(필요하다면?) ■ DB 접속 계정 설정 ■ DB 접속 security 설정 ★ EC2 보안 설정 security group을 DB 접속 inbound에 추가해주어야 EC2 인스턴스에서 DB접속 가능 하단의 [ EC2에서 RDS 연결 확인] 부분에서 관련 내용 확인 ★ 보안 그룹을 새로 추가해서 db 전용으로 차후에 configure 해줄 것임. > DB 유형 선택한 후 inbound 설정, EC2 security 추가 ■ DB instance 추가 설정 (1) > RDS 항목, DB instance에서 다음 노란색 부분에서 modify 설정 후 ..

■ React 추가 dependency 설치 1) axios 추가 참조 : www.dahae.kim/blog/how-to-use-axios/ wonit.tistory.com/304 > 기능 : 비동기로 url 통신을 하는 것을 쉽게 가능하게 해줌 > 현 프로젝트에서는 spring-boot backend와 통신을 하기 위함 2) Gatsby > 기능 : React에서도 pre-build 된 정적 사이트를 사용할 수 있게 해줌 추가 참조 : yohanpro.com/posts/ssr ■ Spring-boot IntelliJ에서 실행 및 확인 추가 참조 : vmpo.tistory.com/7 > @SpringBootApplication 실행 후 처음 compile화면으로 넘어감 > 다음과 같이 기본 포트 8080..