이번에는 부트스트랩 웹페이지 실습 소스를 이용해 모듈화 하는 실습을 진행한다. 1. 예제 페이지 프로젝트 셋팅 https://startbootstrap.com/previews/new-age 해당 웹페이지에서 소스코드를 다운로드 한다. 압축을 풀면 파일은 이렇게 들어있다. css와 assets 폴더를 public 폴더 안에 그대로 넣어준다. index.html에 있는 내용은 프로젝트에 있는 index.html에 덮어주고, body 내용은 app.js에 넣어준다. 로 되어있는 주석을 찾아바꾸기로 {/* */}로 바꿔주고. 스타일의 경우도 {{style=}} 이렇게 바꿔준다. (참고로 max-width가 리액트 jsx에서는 maxWidth이다.) 실행해보면 부트스트랩 예제 페이지와 동일한 페이지가 생성된다. ..

컴포넌트는 화면을 구성하는 단위이다. 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트 두가지가 있다. 1. 클래스형 컴포넌트 상태를 알수있는 값인 state를 사용할 수 있는 컴포넌트 render를 무조건 위치해야 한다. class 앞에 export default라는 의미는 외부에서 참조할 수 있게 선언한다는 의미이다. App.js에서 import를 해서 사용 해보자. App.js에 필요없는 부분을 지우고 ClassComponent를 참조하게 한다. 2. 함수형 컴포넌트 상태값이 없는 단순한 컴포넌트 함수형 컴포넌트 또한 동일하게 export default를 붙여 생성을 해준다. 함수형 컴포넌트는 render()가 필요 없다. 함수형 컴포넌트는 한개의 태그를 반환해야 하기 때문에 Fragment 태그를 추..

첫 번째로 개발에 필요한 node.js이다. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 이곳에서 크게 상관은 없지만 안전하게 LTS 버전을 받아서 설치한다. 설치 후 터미널에서 node -v를 하게되면 버전이 확인이 된다. 두 번째로 개발을 하기위한 IDE이다. VS Code와 WebStorm 두가지 중 WebStorm이 더욱 편리하고 UI/UX도 좋다고 생각한다. React 신규 프로젝트를 만들어 준다. Create를 누르면 알아서 이것저것 설치하고 프로젝트가 생성이 된다. [React] 1. SPA Framework란? node_module..

SPA는 Single Page Application의 약자로 최초 페이지 로딩시에만 서버에서 소스코드를 가져온 뒤 데이터가 변경되거나 필요한경우에만 서버에 호출해 동적으로 표현해주는 형태로 개발하는 방식을 말한다. 필요할때만 서버 호출을 해 빠르고 트래픽이 적다는 특징이 있다. 구현 방식은 React, Vue, Angular 세개가 대표적이다. 주로 많이쓰이는건 React이며, Vue의 경우 가볍다는 특징이 있고 Angular는 매우 무겁고 복잡하다는 특징이 있다.

브라우저에 보여지는 화면을 어디서 랜더링을 하냐에 따라 SSR, CSR로 나뉜다. SSR (Server Side Rendering) ssr은 서버에서 html을 만들어서 클라이언트로 뿌려주는 방식으로 정적인 화면에 주로 사용한다. 장점 SEO(검색엔진 최적화) 가능 빠른 초기 로딩 속도 낮은 자바스크립트 의존도 단점 잦은 서버 요청 CSR대비 상대적으로 느린 속도 모든 페이지 새로고침 사이트 간 상호작용 어려움 CSR (Client Side Rendering) csr은 서버에서 html과 static 파일을 받아오면 사용자의 요청에 따라 자바스크립트를 통해 동적으로 클라이언트에서 랜더링 하는 방식이다. 장점 사이트 상호작용 활발 초기로딩 이후 렌더링이 빠름 웹앱에 유용 자바스크립트의 다양한 라이브러리(R..