티스토리

BUTTER

검색하기

블로그 홈

BUTTER

stepover10.tistory.com/m

stepover10 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[Javasciprt] 말머리 붙히기 타이틀 앞에 말머리 붙히는 태그이다. 공감수 0 댓글수 0 2019. 10. 12.
[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'; .. 공감수 0 댓글수 0 2019. 10. 1.
[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 실시간으로 서버파일 수정시 자동으.. 공감수 0 댓글수 0 2019. 9. 30.
[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에서 렌더가 되었기 때문에 보이는 시간이 빠르다는 것이다 하지만 유.. 공감수 0 댓글수 0 2019. 9. 29.
[React] #04 생명주기(LifeCycle) React에는 생명주기(LifeCycle)란 것이 있다. 컴포넌트가 생성되고 업데이트가 되고 지워지는 과정에서 실행되는 React의 기본 함수가 있다 componentWillMount 컴포넌트 render가 실행되기 전에 실행 최초 한번만 실행 componentDidMount 최초 한번만 실행 ender 이후에 실행 componentDidUpdate 컴포넌트가 업데이트 될때마다 render 이후에 실행 componentWillReceiveProps 새로운 Props를 받았을때 실행 shouldComponentUpdate 컴포넌트 업데이트가 될때 업데이트 여부 결정 하는 함수 componentWillUpdate 컴포넌트가 render전에 실행 componentWillUnmount 컴포넌트가 삭제될때 실행 .. 공감수 0 댓글수 0 2019. 9. 20.
[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) }) 위에 코드로 확인보면.. 공감수 1 댓글수 0 2019. 9. 19.
[React] #03 Context API에 대하여 App의 규모가 커지면 커질수로 컴포넌트는 많아진다. 작업을 하다보면 컴포넌트간 연결을 해야할 경우가 꼭 생긴다! 하지만 React는 기본적으로 단방향 데이터 흐름으로 진행이 되고 있다. 먼저 시작전에 단방향 데이터 흐름에 대한 이미지를 확인해보자 위의 흐름도 처럼 컴포넌트에서 컴포넌트로 데이터를 넘겨줄때 다양한 데이터를 넘겨 줄수 있다 object, array, function이 대표적이다. 하지만 규모 커지면 컴포넌트가 엄청 많아지게 된다고 했다 만약 어떠한 정보를 팝업으로 처리한다고 가정하자. 이럴때 완료를 눌러 팝업을 닫음과 동시에 컴포넌트를 업데이트 해줘야 한다. 하지만, 단방향 흐름이기 때문에 다시 처음부터 렌더링이 시작이 된다 이것은 굉장히 비효율적이다! 또한, 렌더링이 많이질수록 APP의 .. 공감수 0 댓글수 0 2019. 9. 17.
[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.. 공감수 0 댓글수 0 2019. 9. 17.
[React] #01 JSX 문법이란? React의 JSX에 대해서 정리해보았다 JSX는 React 공식 홈페이지에서는 아래와 같이 설명하고 있다. JSX는 JavaScript 새로운 문법이라고 생각하는게 심플하다 기본적으로 "Component" 를 담고 있다 파일 확장자가 *.JSX지만 *.JS그대로 사용하기도 한다. 기본적인 문법으로는 변수안에 HTML 코드를 넣어보자 const element = Hello, world!; 이제 위의 문법을 render()를 통해서 DOM Node에 추가한다 브라우저는 JSX를 모른다 JavaScript를 구문으로 React에서 트랜스파일하여 보여준다고 한다 const element = Hello React; ReactDOM.render( element, document.getElementById('roo.. 공감수 0 댓글수 0 2019. 9. 16.
Javascript 안드로이드 회전 이슈 문제 Frontend 에서 안드로이드로 이미지 첨부하고 미리보기를 만들었을때 회전되어서 나오는 이슈가 있다. 해당 부분을 수정하는 방법에 대해서 적어본다 작업 환경은 Chrome / Jquery 사용했다 태그를 HTML 입력하면 간단하게 파일을 첨부할수 있다. 하지만 미리보기는 볼수 없다 이미지 미리보기 코드를 잡아줘야 한다. 먼저 태그를 감지하자 document.getElementById('imageFileList').addEventListener('change',function(){ let files = this.files; }); files변수를 consle.log로 보면 삽입된 파일 리스트를 확인할수 있다. input type="file" ReadOnly다 임의로 수정할 수 없다. files를 Arra.. 공감수 0 댓글수 0 2019. 9. 16.
[React] #00 시작하기전 React 스터디를 시작하기 전 알아야 할 것들은 정리해 보았다 이 글은 굉장히 주관적인 글이다 React는 Front 영역에서 DOM 조작을 보다 용이하게 해준다고 생각이 든다.Frontend 개발은 DOM 조작이 필수적으로 들어간다. React는 단순히 View 컨트롤만 한다고 생각할 수 있지만 그것만으로도 엄청난 개발 효과를 낼 수 있다. React 공식 홈페이지에서는 아래와 같이 설명한다 React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. HTML 삽입 Javascript의 DOM 조작 대해서 먼저 간단하게 확인해보자 const text = '.. 공감수 0 댓글수 0 2019. 9. 10.
React Typescript Webpack 세팅 React와 Typescript Webpack SCSS 를 유연하게 사용하기 위해 프론트 세팅을 해보자 기본적으로 작업하기 위한 세팅을 정리했다 물론 편한 CRA가 있지만 작업하다 보면 프로젝트 성격에 맞게 세팅을 해야하는 경우가 있다 npm install -g create-react-app create-react-app react-test cd react-test 터미널에서 npm start 실행 우선 폴더 구조를 먼저 잡아보자 dist : Webpack에서 빌드가 되면 모아지는 폴더 src : JS, SCSS 작업파일 public : 기본 html server : 백엔드 작업 파일 및 기본 서버 폴더 기본 서버는 Node + Express 로 작업을 했다 먼저 작업할 폴더의 package.json 파.. 공감수 0 댓글수 0 2019. 9. 7.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.