Todo List 제작
간단한 Todo List 제작 input태그에 값을 넣어 버튼을 누르면 addItem이 호출되서 상태 값이 변경되고, 변경된 상태 값에 따라 TodoItem값이 추가된다. <!DOCTYPE html> <html> <head> <title...
Posts by Tag
js
리액트 라이프사이클
React 라이프 사이클 메서드
리액트 이벤트
React 이벤트 다루기
리액트 상태 다루기
React의 상태 다루기 웹앱은 상호적인 시나리오를 많이 가지고 있고, 사용자와 상호작용 결과 또는 서버로부터 데이터로 컴포넌트의 특정 부분이 변경될 수 있다. 이때 변경될 수 있는 데이터를 상태라고 한다. 간단한 예제를 이용해서 상태 처리를 해보자. 예제는 1초마다 화면의 숫...
JSX
JSX의 동작
속성 전달
속성 전달
결합된 컴포넌트 제작
팔레트 카드 만들기 팔레트 카드(특정 색을 확인할 수 있는 작은 사각형 카드)라는 간단한 예제를 이용해서 여러 컴포넌트가 결합된 형태를 구현할 예정이다. 간단한 예제이지만, 두 단계의 체계적인 접근방법을 이용해서 만들어보자. 주된 비주얼 요소의 식별 컴포넌트가 돼야 할...
React Styling
리액트 방식의 스타일링 리액트를 이용해 웹앱을 구성하더라도, 일반적으로 쓰이는 CSS를 이용해서 스타일을 지정할 수 있다. 하지만 리액트에서는 인라인 방식의 스타일링은 선호하는데 이 방법이 비주얼 컴포넌트의 재사용성을 높이고, UI의 모양과 동작에 관련된 사항이 안전하게 담긴 작...
React Component
함수와 컴포넌트 다른 언어를 포함해서 자바스크립트의 함수는 코드를 명확하고 재사용 가능하도록 만든다. 그리고 함수의 또 하나의 가치는 함수 안에서 다른 함수를 호출할 수 있다는 것이다. 이 점을 생각하고 전의 내용의 render메소드 살펴보자. <div id="contai...
React 시작
JSX다루기 이전 글에서 나왔듯이 리액트는 JSX를 이용해서 자바스크립트와 HTML태그를 합쳐 사용자 인터페이스 요소와 기능을 정의할 수 있다. 하지만 브라우저는 JSX를 모르기 때문에, 알 수 있도록 평범한 자바스크립트로 변환시켜야 한다. 이를 해결하기 위한 두 가지 방법으로 ...
React 소개
“리액트 웹앱 제작 총론”이라는 책을 이용해서 React 기본을 배워보자! 이 책을 선택한 이유는 단순히 인터넷상에서 많이 추천한 책이라서 선택하였다. 리액트 배경 멀티 페이지 디자인 예전의 웹앱의 경우 멀티 페이지 디자인 방식을 택하였다. 멀티 페이지 디자인은 바뀐 내용을...
vue.js - 컴포넌트 - Events, slot
사용자 정의 이벤트 Vue에서는 자식 컴포넌트의 문제가 발생했을 때, 부모 컴포넌트로 알리는 방법은 사용자 정의 이벤트로 알릴 수 있습니다. 모든 Vue인스턴스는 $on(eventName)을 사용하여 이벤트를 감지하거나 $emit(eventName)을 사용하여 이벤트를 ...
vue.js - 컴포넌트 - Props
컴포넌트 관계 컴포넌트는 부모-자식 관계에서 가장 일반적으로 사용하기 위한 것입니다. 여기서 부모와 자식 컴포넌트는 서로에게 데이터를 전달하거나, 이벤트를 알릴 필요가 있습니다. Vue에서 부모-자식 컴포넌트 관계는 props(아래)와 events(위로)라고 얘기할 ...
vue.js - 컴포넌트
컴포넌트란? 컴포넌트는 작고 그 자체로 제기능을 하며, 재사용할 수 있는 부품입니다. 거의 모든 어플리케이션 인터페이스는 컴포넌트 트리로 추상화 할 수 있습니다. Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue인스턴스 입니다. 컴포넌트 사용법 &l...
vue.js - 인스턴스 생명주기
Vue 인스턴스 생명 주기 크게 생성, 초기화, 갱신, 소멸의 4가지 단계로 구분됩니다. 생성(Create) 단계 이벤트와 생명주기 메소드가 초기화됩니다. 메소드 옵션, 계산된 속성 등 Vue인스턴스의 속성으로 바인딩하고 데이터 속성 변화를 감시하도록 설정...
vue.js - 리스트 렌더링
리스트 렌더링 비슷한 템플릿을 반복해서 나타날 때 v-for디렉티브를 사용하면 쉽게 리스트를 렌더링 할 수 있습니다. v-for 디렉티브의 범위를 숫자로 지정할 경우 0부터 시작하지 않고 1부터 시작합니다. 배열을 이용해서 표현할 경우 아래와 같은 예시로 표현할 수 ...
vue.js - 폼 입력 바인딩
사용자 입력 데이터 바인딩 v-model 디렉티브를 이용해서 input, textarea, select등과 같은 폼과 관련된 태그의 데이터를 바인딩 할 수 있습니다. v-model 디렉티브를 사용하면 폼 관련 태그의 입력과 데이터 바인딩을 양방향으로 손쉽게 할 수 있습니...
vue.js - 데이터 바인딩
클래스와 스타일 바인딩 데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일 등을 조작하기 위해서 사용합니다. Vue에서는 v-bind 디렉티브를 이용해서 표현합니다. 이를 이용해서 태그의 속성값을 동적으로 지정할 수 있습니다. <div id="app"&g...
vue.js - 이벤트 헨들링
이벤트 제어 v-on 디렉티브를 이용해서 이벤트를 등록할 수 있습니다. v-on 대신 약어 @를 이용할 수 있습니다. v-on 디렉티브를 이용해서 등록한 이벤트는 vue.js에 의해서 관리합니다. 이벤트가 등록된 DOM요소가 제거되면 vue.js가 알아서 이벤트를...
vue.js - 조건부 렌더링
조건부 렌더링 웹사이트마다 상황에 따라 다른 화면 또는 컨텐츠를 제공할 경우 유용하게 사용가능합니다. vue에서는 이러한 경우에 v-show와 v-if 디렉티브를 제공합니다. v-show css의 display속성을 이용한 화면 표시 여부를 결정합니다. j...
vue.js - 데어터와 메소드
메소드 methods란 옵션 속성에 함수들을 정의한 객체 전달 code pen 데이터 Vue 인스턴스의 data 객체에 있는 모든 속성을 프록시 처리 쉽게, 하나의 데이터로 공유하는 개념 예시 // 데이터 객체 var data = { a: 1 } //...
vue.js - 템플릿 문법 - Directive
Directive(디렉티브)란 디렉티브는 v- 접두사가 있는 특수 속성입니다. 디렉티브 중 v-for을 제외한 단일 javascript 표현식입니다. 디렉티비의 역할은 표현식 값이 변경될 때마다 DOM에 반응적으로 적용하는 것입니다. 모든 디렉티브 속성을 확인하고 싶...
vue.js - 템플릿 문법 - Interpolations
템플릿 문법의 종류 Interpolations Directive Component Tag Interpolations(보간법) 이란 html문법에서 script태그 안쪽이 아닌 부분에서도 중괄호 두 개를 이용하여 javascript를 쓸 수 있게하는 문법 ...
vue.js 시작
Vue.js의 시작
front end
Webpack - 시작하기
이번 포스팅에서 webpack 공식사이트의 getting started로 기본 개념을 익혀보도록 합니다. Webpack? 자바스크립트 코드가 많아지고 거대화되면서 파일을 관리하는 것이 힘들어졌습니다. Webpack은 이러한 점들을 쉽게 지원하는 도구 중 하나입니다. 코...
vue.js - 컴포넌트 - Events, slot
사용자 정의 이벤트 Vue에서는 자식 컴포넌트의 문제가 발생했을 때, 부모 컴포넌트로 알리는 방법은 사용자 정의 이벤트로 알릴 수 있습니다. 모든 Vue인스턴스는 $on(eventName)을 사용하여 이벤트를 감지하거나 $emit(eventName)을 사용하여 이벤트를 ...
vue.js - 컴포넌트 - Props
컴포넌트 관계 컴포넌트는 부모-자식 관계에서 가장 일반적으로 사용하기 위한 것입니다. 여기서 부모와 자식 컴포넌트는 서로에게 데이터를 전달하거나, 이벤트를 알릴 필요가 있습니다. Vue에서 부모-자식 컴포넌트 관계는 props(아래)와 events(위로)라고 얘기할 ...
vue.js - 컴포넌트
컴포넌트란? 컴포넌트는 작고 그 자체로 제기능을 하며, 재사용할 수 있는 부품입니다. 거의 모든 어플리케이션 인터페이스는 컴포넌트 트리로 추상화 할 수 있습니다. Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue인스턴스 입니다. 컴포넌트 사용법 &l...
vue.js - 인스턴스 생명주기
Vue 인스턴스 생명 주기 크게 생성, 초기화, 갱신, 소멸의 4가지 단계로 구분됩니다. 생성(Create) 단계 이벤트와 생명주기 메소드가 초기화됩니다. 메소드 옵션, 계산된 속성 등 Vue인스턴스의 속성으로 바인딩하고 데이터 속성 변화를 감시하도록 설정...
vue.js - 리스트 렌더링
리스트 렌더링 비슷한 템플릿을 반복해서 나타날 때 v-for디렉티브를 사용하면 쉽게 리스트를 렌더링 할 수 있습니다. v-for 디렉티브의 범위를 숫자로 지정할 경우 0부터 시작하지 않고 1부터 시작합니다. 배열을 이용해서 표현할 경우 아래와 같은 예시로 표현할 수 ...
vue.js - 폼 입력 바인딩
사용자 입력 데이터 바인딩 v-model 디렉티브를 이용해서 input, textarea, select등과 같은 폼과 관련된 태그의 데이터를 바인딩 할 수 있습니다. v-model 디렉티브를 사용하면 폼 관련 태그의 입력과 데이터 바인딩을 양방향으로 손쉽게 할 수 있습니...
vue.js - 데이터 바인딩
클래스와 스타일 바인딩 데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일 등을 조작하기 위해서 사용합니다. Vue에서는 v-bind 디렉티브를 이용해서 표현합니다. 이를 이용해서 태그의 속성값을 동적으로 지정할 수 있습니다. <div id="app"&g...
vue.js - 이벤트 헨들링
이벤트 제어 v-on 디렉티브를 이용해서 이벤트를 등록할 수 있습니다. v-on 대신 약어 @를 이용할 수 있습니다. v-on 디렉티브를 이용해서 등록한 이벤트는 vue.js에 의해서 관리합니다. 이벤트가 등록된 DOM요소가 제거되면 vue.js가 알아서 이벤트를...
vue.js - 조건부 렌더링
조건부 렌더링 웹사이트마다 상황에 따라 다른 화면 또는 컨텐츠를 제공할 경우 유용하게 사용가능합니다. vue에서는 이러한 경우에 v-show와 v-if 디렉티브를 제공합니다. v-show css의 display속성을 이용한 화면 표시 여부를 결정합니다. j...
vue.js - 데어터와 메소드
메소드 methods란 옵션 속성에 함수들을 정의한 객체 전달 code pen 데이터 Vue 인스턴스의 data 객체에 있는 모든 속성을 프록시 처리 쉽게, 하나의 데이터로 공유하는 개념 예시 // 데이터 객체 var data = { a: 1 } //...
vue.js - 템플릿 문법 - Directive
Directive(디렉티브)란 디렉티브는 v- 접두사가 있는 특수 속성입니다. 디렉티브 중 v-for을 제외한 단일 javascript 표현식입니다. 디렉티비의 역할은 표현식 값이 변경될 때마다 DOM에 반응적으로 적용하는 것입니다. 모든 디렉티브 속성을 확인하고 싶...
vue.js - 템플릿 문법 - Interpolations
템플릿 문법의 종류 Interpolations Directive Component Tag Interpolations(보간법) 이란 html문법에서 script태그 안쪽이 아닌 부분에서도 중괄호 두 개를 이용하여 javascript를 쓸 수 있게하는 문법 ...
vue.js 시작
Vue.js의 시작
front-end
Electron에 대해서
Electron이란?
Todo List 제작
간단한 Todo List 제작 input태그에 값을 넣어 버튼을 누르면 addItem이 호출되서 상태 값이 변경되고, 변경된 상태 값에 따라 TodoItem값이 추가된다. <!DOCTYPE html> <html> <head> <title...
리액트 라이프사이클
React 라이프 사이클 메서드
리액트 이벤트
React 이벤트 다루기
리액트 상태 다루기
React의 상태 다루기 웹앱은 상호적인 시나리오를 많이 가지고 있고, 사용자와 상호작용 결과 또는 서버로부터 데이터로 컴포넌트의 특정 부분이 변경될 수 있다. 이때 변경될 수 있는 데이터를 상태라고 한다. 간단한 예제를 이용해서 상태 처리를 해보자. 예제는 1초마다 화면의 숫...
JSX
JSX의 동작
속성 전달
속성 전달
결합된 컴포넌트 제작
팔레트 카드 만들기 팔레트 카드(특정 색을 확인할 수 있는 작은 사각형 카드)라는 간단한 예제를 이용해서 여러 컴포넌트가 결합된 형태를 구현할 예정이다. 간단한 예제이지만, 두 단계의 체계적인 접근방법을 이용해서 만들어보자. 주된 비주얼 요소의 식별 컴포넌트가 돼야 할...
React Styling
리액트 방식의 스타일링 리액트를 이용해 웹앱을 구성하더라도, 일반적으로 쓰이는 CSS를 이용해서 스타일을 지정할 수 있다. 하지만 리액트에서는 인라인 방식의 스타일링은 선호하는데 이 방법이 비주얼 컴포넌트의 재사용성을 높이고, UI의 모양과 동작에 관련된 사항이 안전하게 담긴 작...
React Component
함수와 컴포넌트 다른 언어를 포함해서 자바스크립트의 함수는 코드를 명확하고 재사용 가능하도록 만든다. 그리고 함수의 또 하나의 가치는 함수 안에서 다른 함수를 호출할 수 있다는 것이다. 이 점을 생각하고 전의 내용의 render메소드 살펴보자. <div id="contai...
React 시작
JSX다루기 이전 글에서 나왔듯이 리액트는 JSX를 이용해서 자바스크립트와 HTML태그를 합쳐 사용자 인터페이스 요소와 기능을 정의할 수 있다. 하지만 브라우저는 JSX를 모르기 때문에, 알 수 있도록 평범한 자바스크립트로 변환시켜야 한다. 이를 해결하기 위한 두 가지 방법으로 ...
React 소개
“리액트 웹앱 제작 총론”이라는 책을 이용해서 React 기본을 배워보자! 이 책을 선택한 이유는 단순히 인터넷상에서 많이 추천한 책이라서 선택하였다. 리액트 배경 멀티 페이지 디자인 예전의 웹앱의 경우 멀티 페이지 디자인 방식을 택하였다. 멀티 페이지 디자인은 바뀐 내용을...
etc
cmake 기초 작성
CMake
디자인 패턴 시작
프로그래밍을 하면서 리펙토링 또는 구조를 잡을때 어떻게 하면 더 나은 방법일지 고민을 하지만 좋은 방법이 쉽게 떠오르지 않았다. 그래서 이론적인 부분으로서 디자인 패턴을 다시 한 번 공부하면서 정리해보려 한다.
packaging tool
Webpack - 시작하기
이번 포스팅에서 webpack 공식사이트의 getting started로 기본 개념을 익혀보도록 합니다. Webpack? 자바스크립트 코드가 많아지고 거대화되면서 파일을 관리하는 것이 힘들어졌습니다. Webpack은 이러한 점들을 쉽게 지원하는 도구 중 하나입니다. 코...
framework
Electron에 대해서
Electron이란?