분류 전체보기 (12) 썸네일형 리스트형 [Javasciprt] 말머리 붙히기 타이틀 앞에 말머리 붙히는 태그이다. [React] #05-2 Server Side Rendering React-Router (simple) https://stepover10.tistory.com/13 기본세팅 코드에서 SPA를 사용하기 위해 React-Router를 연결해보겠다. 먼저 npm 모듈을 설치해주자 npm install --save react-router-dom 그리고 정말 간단하게 코드를 작성해보겠다 server/server.js import path from 'path'; import express from 'express'; import React from 'react'; import { renderToString } from 'react-dom/server'; // 라우터 모듈 삽입 import { StaticRouter } from 'react-router-dom'; import App from '../src/App'; .. [React] #05-2 Server Side Rendering 기본세팅 React SSR의 경우는 직접 만드는 방법과 라이브러리를 사용하는 방법이 있다. 유명한 라이브러리는 NextJS가 있다. 이제 코드를 작성해 보겠다. Node의 Express로 먼저 Server 세팅을 진행해보겠다. Webpack으로 진행을 해도 되고 create-react-app으로 진행을 해도 무방하다. 웹팩 세팅은 좀 까다로우니 지금은 CRA로 진행을 해보겠다. create-react-app projectname npm install --save exrpess npm install --save @babel/core @babel/node @babel/preset-env @babel/preset-react npm install --save nodemon nodemon 실시간으로 서버파일 수정시 자동으.. [React] #05-1 Server Side Rendering 이란? 프로젝트 작업 시의 결정하는게 있다 그것이 바로 Server Side Rendering / Client Side Rendering 이 2가지의 생각하고 결정한다 줄여서 SSR / CSR 이라고 한다. 있는 말 그대로 SSR은 Server에서 webpage를 Render하여 유저에게 보여주는 방식이고 CSR은 유저가 웹에 접속 시의 Render를 웹브라우저 자체에 맡겨서 렌더한다. 기본적으로 React는 CSR로 작업이 이루어 진다. 커뮤니티다 검색엔진에 꼭 들어가야 한다 SSR을 추천한다 사내 커뮤니티다, 사내 CMS, 폐쇄몰이다 CSR을 추천한다 2개의 차이점은 속도라고 많이들 이야기한다 최초 접속시의 SSR같은 경우는 이미 Server에서 렌더가 되었기 때문에 보이는 시간이 빠르다는 것이다 하지만 유.. [React] #04 생명주기(LifeCycle) React에는 생명주기(LifeCycle)란 것이 있다. 컴포넌트가 생성되고 업데이트가 되고 지워지는 과정에서 실행되는 React의 기본 함수가 있다 componentWillMount 컴포넌트 render가 실행되기 전에 실행 최초 한번만 실행 componentDidMount 최초 한번만 실행 ender 이후에 실행 componentDidUpdate 컴포넌트가 업데이트 될때마다 render 이후에 실행 componentWillReceiveProps 새로운 Props를 받았을때 실행 shouldComponentUpdate 컴포넌트 업데이트가 될때 업데이트 여부 결정 하는 함수 componentWillUpdate 컴포넌트가 render전에 실행 componentWillUnmount 컴포넌트가 삭제될때 실행 .. [JavaScript] event 대하여 Front개발에서 이벤트를 쓸일이 엄청 많다 그 중 click 이벤트로 예시로 블로그를 작성해보겠다 일단 기본적인 click 이벤트를 보자. 아래의 코드를 크롬 콘솔에 찍으면 마우스 클릭 시 마다 해당 정보를 확인 할 수 있다. 클릭 영역의 위치 또는 path키를 통해 element도 확인할수 있다 // document의 click영역을 확인할수 있다 document.addEventListener('click', (event) => { console.log(event) }); 이젠 엘리먼트를 잡아서 확인해보자 TEST_ID document.querySelector('div').addEventListener('click', (event) => { console.log(event) }) 위에 코드로 확인보면.. [React] #03 Context API에 대하여 App의 규모가 커지면 커질수로 컴포넌트는 많아진다. 작업을 하다보면 컴포넌트간 연결을 해야할 경우가 꼭 생긴다! 하지만 React는 기본적으로 단방향 데이터 흐름으로 진행이 되고 있다. 먼저 시작전에 단방향 데이터 흐름에 대한 이미지를 확인해보자 위의 흐름도 처럼 컴포넌트에서 컴포넌트로 데이터를 넘겨줄때 다양한 데이터를 넘겨 줄수 있다 object, array, function이 대표적이다. 하지만 규모 커지면 컴포넌트가 엄청 많아지게 된다고 했다 만약 어떠한 정보를 팝업으로 처리한다고 가정하자. 이럴때 완료를 눌러 팝업을 닫음과 동시에 컴포넌트를 업데이트 해줘야 한다. 하지만, 단방향 흐름이기 때문에 다시 처음부터 렌더링이 시작이 된다 이것은 굉장히 비효율적이다! 또한, 렌더링이 많이질수록 APP의 .. [React] #02 Component / Props / State에 대해서 Component에 대해서 알아보자 React에서는 JSX 파일 안에 Component를 만들어서 import하여 사용한다. 쉽게 생각하면, 하나의 함수라고도 생각할수 있고 모듈이라고도 생각할수 있다. 우선 카멜표기법 camelCase, 파스칼표기법 PascalCase 알아야 한다 기본적으로 React는 Component 명은 PascalCase를 사용한다 아래는 코드는 기본Component의 선언문이다 import React from 'react'; export defalut class MainView extends React.Component { //... } MainView라는 Component는 PascalCase를 사용하고 있다. camelCase 컴포넌트에 사용할 수 없다. 그렇다면, came.. 이전 1 2 다음
