0. 라이프사이클

모든 리액트 컴포넌트에는 라이프사이클이 존재합니다. 말 그대로 생명주기입니다. 컴포넌트가 마운트 되기 전 후, 업데이트가 되는 시기, 또 언마운트된 시기 등 10가지의 메서드로 라이프사이클이 정의됩니다. 


1. 마운트 단계

:페이지에 컴포넌트가 나타남

1) constructor : 컴포넌트 클래스 생성자

2) getDerivedStateFromProps : State를 Prop와 동기화하는 단계에 불리는 메서드

3) render : 렌더링 단계에 불리는 메서드

4) componentDidMount : 마운트 후 불리는 메서드


2. 업데이트 단계

컴포넌트 정보를 업데이트 함(리렌더링)

5) getDerivedStateFromProps : State를 Prop와 동기화하는 단계에 불리는 메서드(마운트 단계 뿐 아니라 업데이트 단계에서도 호출됩니다)

6) shouldComponentUpdate : 컴포넌트 리렌더링 여부를 결정하는 메서드, false 리턴시 업데이트 하지 않습니다.

* 최적화를 위해서 중요한 메서드입니다. 리렌더링을 최소화 하기 위해서 잘 활용해야 합니다.

7) render : 리렌더링 단계에 불리는 메서드

8) getSnapshotBeforeUpdate: 컴포넌트 변화를 Virtual Dom에서 Dom으로 반영 직전 불리는 메서드

9) componentDidUpdate: 컴포넌트의 업데이트 후 불리는 메서드

업데이트는 props, state가 변경될 때, 부모 컴포넌트가 리렌더링될 때, forceUpdate가 호출 될 때 이렇게 4가지 경우에 호출됩니다.


3. 언마운트 단계

:페이지에서 컴포넌트가 사라짐

10) componentWillUnmount : 컴포넌트가 사라지기 직전에 불리는 메서드



'Web Front > React.js' 카테고리의 다른 글

[React] create-react-app으로 React App 만들기  (0) 2018.08.06

1. create-react-app 설치

먼저 글로벌에 create-react-app을 설치합니다.

yarn global add create-react-app


2. 프로젝트 생성

create-react-app project-name


놀랍게도 이렇게하면 React 프로젝트가 생성됩니다. 갓페이스북!! 참고로 create-react-app은 페이스북에서 제공해주는 것이랍니다.

위 명령어로 제가 한번 생성해보겠습니다.


react-todolist라는 프로젝트를 생성했습니다. 참고로 프로젝트 이름에 대문자는 사용할 수 없습니다.

생성한 프로젝트는 아래와 같은 폴더 구조를 갖습니다. 딱 필수로 필요한 것들만을 포함하고 있습니다.


Dependency를 보면 react, react-dom, react-scripts가 포함되어 있습니다.



3. 실행

yarn start


yarn start 명령어를 입력하니 아래와 같이 React 프로젝트가 실행되었습니다!


yarn 명령어는 아래와 같이 있습니다. 설치가 완료되면 저렇게 목록을 보여줍니다. 

그런데 마지막 happy hacking!?? 이건 뭘까요 ㅋㅋㅋ Happy hacking 키보드 사고싶다..


끝!!

'Web Front > React.js' 카테고리의 다른 글

[React] Component LifeCycle API정리  (0) 2018.08.07

1. 로컬 저장소 만들기

1. Git init

2. Git add


3. Git commit


2. 원격 저장소에 올리기

1. Git Remote Add

원격 저장소의 URL을 추가합니다. 앞으로 원격 저장소에 Push할 때에 이 URL을 사용하게 됩니다. 


2. Git push

끝!

0. 개봉기

드디어 츄바스코 아즈텍이 왔습니다.!!! 



너무 이쁘지 않나요..ㅜㅜ 



구매는 풋스케이프에서 현재 할인 중이라 8만원이 안되게 구입하였습니다. 

여름 대비해서 할인을 하고 있어요 ^^ 


홍보는 아니니까 오해하지 마세요.. 엄청 찾아보고 샀답니다.


1. 후기

후기를 남기는 가장 큰 이유가 사이즈입니다.

신어보지 않고 인터넷 구매를 하다 보니까 사이즈가 너무 고민 됬습니다. 


저는 원래 운동화 구두 보통 260을 신습니다. 그런데 신발에 따라서 260사면 좀 클 때도 있어요. 

인터넷 후기를 찾아보니.. 아즈텍은 한 치수 낮춰서 사라는 말이 많아서 250??? 260??? 엄청나게 내적갈등을 하다가 260을 샀습니다.

결과는 250샀으면 큰일날 뻔 했어요 ㅋㅋㅋㅋ  정사이즈로 가십쇼 정사이즈가 딱 맞습니다.


앞쪽이 좀 모이는 신발 구조라 작은 사이즈를 사면 아플 것 같아요. 

제가 여행가기 전에 사서 3박 4일동안 거의 10만보를... 걷다가 느꼈는데 정사이즈여도 새끼 발까락과 검지 발까락이 살짝 겹처서 아프더군요.

셋 째날 부터 발이 매우 아프긴 했지만 대체로 편한신발입니다. 꾸역 꾸역 10만보를 걸었으니까요!! 


평점은 8점/10점 입니다. 매우 이쁘고 편한 신발이지만 가성비가 좋은 신발은 아니죠..


샌들 주제에 10만원 가까이 하다니... 그래도 다른 색으로 또 살거에요 너무 편해요!! 



'리뷰 > 기타' 카테고리의 다른 글

[리뷰] 마제스터치 컨버터블2 크림치즈  (0) 2018.07.15

0. 사게된 이유

마제스터치 컨버터블2 를 산 이유는 바로 데스크탑과 맥북에서 번갈아가면서 쓰기 위함입니다. 
맥북을 모니터에 연결하고 쓰려다 보니.. 블루투스 키보드가 필요해젔습니다.  그때부터 고민에 빠젔죠.. 

매직키보드를 사서 키보드를 두 개 두고 맥북 연결할 때 매직키보드를 꺼낼까?? 
-> 자리가 좁다..!! 

매직 키보드 한 개로 데스크탑, 맥북을 같이 쓸까??
-> 데스크탑에서 쓰기는 키감도 구리고 배열도 다르다.. 게임해야돼!!

그래서 블루투스 기계식 키보드를 사서 같이 쓰기로 했습니다. 

결론 부터 말하자면!!

맥북과 데스크탑에서 같이 쓰기에 마제스터치 컨버터블2 는 백 점 만점에 백 점입니다!!


1. 개봉기



상자도 너무 이뻐요... 필코!!!




구성품은 위와 같이 간단합니다.




짜잔!! 연결이 됬습니다. 키감도 너무 도가도각 좋아서 게임하기에도 좋을 것 같습니다.



역시 갈축은 마제스터치!!  너무 좋네요 ㅋㅋㅋㅋ

기분 전환겸 장패드도 교체하였습니다. 맥북으로 블루투스 연결을 할 때에는 Ctrl + Alt + Fn 숫자키로 전환할 수 있습니다.

그리고 데스크탑과 겸용으로 사용할 때 유에스비 연결을 해서 쓴다면 건전지 없이 영구적으로 사용할 수 있습니다. 

아주아주 만족스럽습니다!!



2. 결론

블루투스와 유선을 겸용으로 사용하는 경우 마제스터치 컨버터블2는 정말 편리하고 좋은 키보드입니다.

뿐만 아니라 유선으로만 사용하거나 블루투스로만 사용하는 경우에도 좋은 키보드 인 것 같습니다. 너무 이쁘고 키감이 좋거든요..^^

제 점수는요

10점/10점!! 

첫 후기인데 너무 점수가 후한 것 같기도 한데.. 최근 제가 산 것 중에 가장 만족스럽습니다. 하하하!! 





'리뷰 > 기타' 카테고리의 다른 글

[리뷰] 츄바스코 아즈텍  (0) 2018.07.16

0. 뷰 CLI

싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 W ebpack, Browserify와 같은 도구가 필요합니다.

Webpack은 웹 앱의 자원들을 자바스크립트 모듈로 변한해 하나로 묶어 웹 성능을 향상시켜 주고,  빌드 자동화 기능까지 포함한 강력한  자바스크립트 모듈 번들러이다. 비슷한 모듈 번들러로 Browserify가 있다.


그러나 Webpack을 이용해 직접 프로젝트를 구성하기에는 상당히 배워야할 것이 많습니다. 그래서 뷰 프레임워크에서는 개발자들이 편하게 프로젝트를 구성할 수 있도록 CLI(Command Line Interface)도구를 제공합니다. 이를 뷰 CLI라고 합니다.



1. 뷰 CLI 설치

bpack을 이용해 직접 프로젝트를 구성하기에는 상당히 배워야할 것이 많습니다. 그래서 뷰 프레임워크에서는 개발자들이 편하게 프로젝트를 구성할 수 있도록 CLI(Command Line Interface)도구를 제공합니다.

아래와 같이 명령어를 입력하여 간단하게 설치할 수 있습니다.



설치가 완료되면 아래와 같이 vue 명령어를 첬을 때 명령어로 인식되는 것을 볼 수 있습니다.



2. 뷰 CLI 명령어

뷰 CLI 명령어 중 가장 중요한 명령어는 vue init 입니다. vue init은 초기 프로젝트 구성을 도와줍니다. 그리고 아래와 같은 프로젝트 템플릿 구성이 있습니다.


  vue init webpack  : 고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 지원


  vue init webpack-simple : 웹팩 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용


  vue init browserify  : 고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사등을 지원


  vue init browserify-simple : 브라우저파이 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용


  vue init simple  : 최소 뷰 기능만 들어간 HTML 파일 1개 생성


  vue init pwa  : 웹팩 기반의 프로그레시브 웹 앱(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트


이들 템플릿은 지원하는 기능이 다르지만 크게보면 전체적으로는 비슷합니다.

1. 웹팩이나 브라우저리파이 같은 모듈 번들러를 프로젝트 자체에 포함하여 바로 사용할 수 있다.

2. .vue 파일을 HTML, CSS, js파일로 변환해 주기 위한 뷰 로더(Vue Loader)를 포함하고 있다.

결론적으로 .vue 파일 방식으로 어플리케이션을 개발하려면 뷰 로더와 이를 지원하는 웹팩, 브라우저리파이 같은 모듈 번들러가 필요하다.


템플릿 중 웹팩이나 다른 기능에 신경 쓰지 않고 뷰 프레임워크 자체에 집중할 수 있는 템플릿은 webpack-simple 입니다. webpack 템플릿은 다양한 기능을 포함하고 있어서 파악하는데 시간이 소요됩니다.


3. 뷰 CLI로 프로젝트 생성하기


1. vue init 명령어로 프로젝트 생성하기


2. npm install을 입력하여 뷰 애플리케이션을 구동하기 위한 관련 라이브러리 다운로드하기.


아래는 설치까지 완료된 후 프로젝트의 폴더 구조입니다. 이 중 package.json 파일은 프로젝트 정보를 담고 있는 설정 파일임과 동시에 npm명령어 및 뷰로 애플리케이션을 제작하는 데 필요한 라이브러리 정보들을 포함하고 있습니다.


npm install을 입력하면 package.json의 라이브러리 목록이 모두 node_modules 폴더 밑에 설치가 됩니다.




3. npm run dev로 실행하기!


실행을 하면 마침내 아래와 같이 8080포트로 index.html이 열리게 됩니다!!







'Web Front > Vue.js' 카테고리의 다른 글

[Vue.js] 뷰 디렉티브(vue Directive)  (0) 2018.06.13

뷰 디렉티브(vue Directeve)

HTML 태그 안에 v- 접두사를 가지는 모든 속성이다.

디렉티브는 화면의 요소를 더 쉽게 조작할 수 있게 도와준다. 뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신된다.


v-bind 는 아이디, 클래스, 스타일 등의 HTML속성 값에 뷰 데이터 값을 연결할 때 사용한다.

<p v-bind:class="test">v-bind 테스트</p>


v-if 는 지정한 뷰 데이터값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다.


v-for  은 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력한다.


v-show  v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. 다만 v-if는 해당 태그를 완전히 삭제하지만 v-show는 css효과만 display:none; 으로 준다.


v-on  은 화면 요소의 이벤트를 감지하여 처리할 때 사용한다. 예를 들어 v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메서드를 실행할 수 있다.


v-model  은 Form에서 주로 사용되는 속성으로 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. * <input>, <select>, <textarea> 태그에만 사용할 수 있다.



'Web Front > Vue.js' 카테고리의 다른 글

[Vue.js] 뷰 CLI 를 통한 프로젝트 생성  (0) 2018.06.14

개념정리

라우팅과 SPA

2018. 6. 6. 17:06


라우팅(routing)

라우팅이란  어떤 네트워크 안에서 통신 데이터를 보낼 경로를 선택하는 과정이다. 그리고, 웹 페이지 간의 이동 방법이다. 현대 웹 앱 형태 중 하나인 싱글 페이지 어플리케이션(SPA)에서 주로 사용된다.


라우팅을 이용하면 화면 간의 전환이 매끄러울 뿐 아니라 일반적으로 브라우저에서 웹페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안 화면이 깜빡이는 현상도 없앨 수 있다. 


뷰, 리액트, 앵귤러 모두 라우팅을 이용하여 화면 전환을 하고 있으며, 프론트엔드 프레임워크를 사용하지 않고 일반 HTML 파일들로도 라우팅 자바스크립트 라이브러리를 통해 라우팅 방식의 페이지 이동을 구현 할 수 있다.



SPA(Single Page Application)

페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션




User Settings 파일을 열어서 아래와 같이 설정을 해주시면 됩니다.


{
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
}

 


간단하쥬 



https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/