일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- elasticsearch
- Oracle
- it
- Design Patterns
- devops
- Spring
- springboot
- jsp
- ReactJS
- MySQL
- IntelliJ
- AWS
- JPA
- jenkins
- Spring Boot
- javascript
- redis
- ubuntu
- tool
- linux
- db
- laravel
- 맛집
- php
- Gradle
- 요리
- docker
- Web Server
- java
- Git
- Today
- Total
목록Javascript & HTML & CSS (69)
아무거나
Update와 Delete 업데이트 기능 구현 src/component/CreateContent.js를 복사하여 UpdateContent.js 로 생성한다. [UpdateContent.js] import React, { Component } from 'react'; class UpdateContent extends Component { render() { console.log('UpdateContent render') return ( Update ) } } export default UpdateContent; App.js에서 UpdateContent를 사용하기 위해서 mode에 Update관련 로직을 추가를 해준다. [App.js] import React, { Component } from 'react'..
Create 버튼 클릭시 저장 mode 변경 기능 이번 내용에서는 생성에 대한 부분을 만들것이다. 즉, Create 버튼을 클릭하면 Content의 목록에 새로운 값이 추가될것이다. App.js 코드를 아래와 같이 버튼을 추가하자. [App.js] ... return ( ... {/*추가*/} create update ); ... 위의 추가된 ul태그 안에 버튼들을 Component로 분리시켜보자. 먼저 src/components/Control.js 파일을 만들고 아래 내용을 추가하자. [Control.js] import React, { Component } from 'react'; class Control extends Component { render() { {/* 아래 ul태그는 App.js에서 선..
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 설치여부 확인(버전 정보가 나오면 설치가 완료된것이..
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..
아래와 같은 코드가 있다. 테스트1 테스트2 테스트3 function test.TestFunction(id, selectVal) { console.log('id: ' + id); console.log('selectVal: ' + selectVal); } 여기서 onChange기능에 test.testFunction 함수를 사용하여 선택한 select box의 값을 해당 함수의 매개변수로 전달하려고 한다. 그러기 위해선 this.value 함수를 사용하여 전달하면 된다.
Javascript var, let, const 차이점 Key Point var, let: 변수를 선언하는 키워드이다. const: 상수를 선언하는 키워드이다. Example Code // 1. var는 값을 재 할당 가능하다. var name = "test"; name = "test2"; // 2. let은 var처럼 재 할당이 가능하다. let score = "1"; score = "2"; // 3. const는 값 재할당이 불가능하며 선언과 동시에 리터럴 값을 할당해야 한다. const PI = "3.14"; let, const는 ECMA6에 도입된 키워드이며 var 타입으로 인한 혼동을 방지하기 위하여 만들어 졌다. var 타입의 혼동이 일어나는 이유에 대해선 아래를 참고하자. var는 변수명을 ..