아무거나

Event 이벤트 설치 아래 이미지에서 색칠된 제목인 modify title을 클릭했을 떄 PageHeader태그 바깥쪽에있는 App의 state를 바꾸는 작업을 시작하자. 우선 이해를 돕기 위하여 PageHeader의 Component를 풀어서 그걸 그대로 App에 도입하여 이벤트를 구현하자. PageHeader에서 아래 코드를 복사 ... {this.props.title} {this.props.subTitle} ... App.js에 1번의 복사한 코드를 아래와 같이 붙여넣고 PageHeader를 주석처리 한다. 그리고 props를 사용하는 부분을 state로 변경한다. ... render() { return ( {/**/} {this.state.header.title} {this.state.heade..

Component 두번째 state props는 사용자가 Component를 사용하는 입장에서 중요하며 state는 props의 값에 따라서 내부의 구현에 필요한 데이터들이 state이다. 즉, 사용하는 쪽(=props)과 구현하는 쪽(=state)을 격리시켜서 양쪽의 편의성을 각자 도모하는것이다. Props => Component(State) state 사용 [App.js] import React, { Component } from 'react'; import PageNav from './components/PageNav'; import PageHeader from './components/PageHeader'; import PageArticle from './components/PageArticle'..

컴포넌트 리액트의 필요성 설명하기전에 앞서 아래 시멘틱 태그가 정의된 html 코드를 참고하자. 시멘틱 태그: HTML5의 스펙이며 header, footer 태그와 같은 부분을 의미론적으로 적용할때 사용 public/ 경로에 example.html 라는 파일을 생성하여 코드를 아래와 같이 작성하자. WEB Page Hello HTML React Javascript WEB page 2 Hello Example. 만약 위의 태그별로 백만줄 또는 천만줄 이상이라고 생각해보자. 그러면 한 눈에 코드가 보이지 않기 마련이다. 그렇게 된다면 해당 줄이 긴 태그를 감추고 사용자 정의 태그로 나타낸다면 웹 페이지에서는 긴 태그가 모두 표시되겠지만 우리눈에는 사용자 정의 태그로 한 눈에 깔끔하게 보이게 될 것이다. (..

React 해당 샘플코드는 github에 제공되어 있습니다. 샘플코드 바로가기 React? facebook.com의 UI를 더 잘만들기 위해서 facebook에서 만든 javascript UI 라이브러리 공식 홈페이지 운영체제: 윈도우10 IDE: VS Code Component? 복잡한 코드를 사용자 정의 태그를 이용하여 편리하게 사용할 수 있다.(=component) 즉, 한번 정의해놓으면 여러곳에서 재사용할 수 있다. Component 장점 가독성 재사용성 유지보수 개발환경(CMD) NPM: Nodejs로 만들어진 프로그램을 쉽게 설치하게 해주는 일종의 앱스토어 https://nodejs.org/en/ 접속하여 설치한다. 설치여부 확인 // npm 설치여부 확인(버전 정보가 나오면 설치가 완료된것이..

Strategy Pattern 개념 Strategy Pattern이란 알고리즘군을 정의하고 각각을 캡슐화하여 교환해서 사용할 수 있도록 만든다. Strategy를 활용하면 알고리즘을 사용하는 클라이언트와는 독립적으로 알고리즘을 변경할 수 있다. 즉, 동적으로 알고리즘을 교체할 수 있는 구조를 말한다. 먼저 Duck이라는 슈퍼클래스와 각각의 오리별 클래스인 MallardDuck, RedheadDuck를 구현해보자. 위의 구조를 설명하자면 Duck 클래스에선 모든 오리들이 소리를 내고 헤엄을 칠 수 있어 quack(), swim() 메소드를 구현했고 오리들의 모양이 각각 다르기 때문에 display() 메소드는 추상 메소드이다. 그 외에도 다른 유형의 오리들이 Duck 클래스로부터 상속을 받는다. 여기서 만..

... (commit or discard the untracked or modified content in submodules) modified: ... (modified content, untracked content) ``` 위와 같이 에러메세지가 뜨면서 무시하고 push를 할 경우에는 repo에 제대로 저장되지 않는 현상이 일어난다. 그럴 경우 말 그대로 서브모듈로 뭔가 서브 디렉토리에 .git 저장소가 또 존재한다는 것이다. find -name ".git" 위의 명령을 통하여 하위 디렉토리에 .git 모듈이 존재하는지 확인하면 존재하는 목록이 표시된다. 그러면 하위 .git 폴더를 모두 삭제한다. 그러면 해결된다.

맛있다. 육수가 진하다 입에서 멤돈다 면발이 살아있다 충무로역에서 가까워서 좋음

아래와 같이 vuejs + springboot + gradle 프로젝트가 존재할 경우 vuejs(=client) 의 파일들을 빌드할 때 gradle 스크립트를 통하여 gradle명령 하나로 한번에 빌드하는 기능을 만들었다. 아래는 프로젝트의 구조이다. spring-boot-vuejs ├─┬ server → backend module with Spring Boot code │ └── src │ ├── main │ └── resources │ └── application.yml ├─┬ client → frontend module with Vue.js code │ ├── src │ ├── config │ └── index.js → build path ( move: resources/templates/* ) └..

vuejs에서 페이지를 라우팅 할 때마다 url에 # 기호가 생기는데 상당히 거슬리다. 이럴경우 아래와 같이 설정하면 해결된다. export default new Router({ mode: 'history', // mode값 추가 routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })

선택조건 낮은 Learning Curve 성능 안정적 큰 커뮤니티 또는 큰 단체에서 지원하며 문서화가 잘되어 있거나 레퍼런스 또한 많아야 한다. Vue 특징 낮은 Learning Curve 단순한 구성 요소 기존 자바스크립트 지식만으로 충분 컴포넌트 단위 관리 가능성 github 2017-06-30 현재 ( vuejs는 역사가 짧음에도 엄청난 성장을 보여주고 있다. ) Model-View 양방향 바인딩 지원 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법 Component-Based ( 단일 파일 Component -> 유지보수 용이하며 개발속도가 빠름 ) Virtual DOM 을 사용하여 빠른 렌더링 DOM의 복사본을 메모리 내에 저장하여 사용하며 변경 사항을 "가상의" 위치에서 처리하므로 "실제D..