리액트에서 DOM 에 직접적인 접근을 할 때, ref
ref 알아보기
리액트 개발을 하다보면 DOM 에 직접적인 접근을 해야 할 때가 있습니다. 그럴 때는 ref 라는것을 사용합니다. 그런데 정확히 어떠한 상황에 DOM 에 직접적인 접근이 필요할까요? 필요한 상황은 다음과 같습니다.
input / textarea 등에 포커스를 해야 할때
특정 DOM…
Month: 3월 2016
[React.JS] 강좌 7편 Component LifeCycle API
이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]
이번 강좌에서는 React.js 컴포넌트의 LifeCycle API 에 관하여 배워보겠습니다.
LifeCycle API는, 컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어
상태를 업데이트하기 전 후로 실행되는 메소드 들 입니다.
이 메소드를…
[React.JS] 강좌 6-2편 Immutability Helper – State 내부 Array 에 원소 삽입/제거/수정
이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]
이 강의는 조금 오래되었습니다 😉
다음 포스트를 읽으시는 것을 권장 드립니다:
React 기초 입문 프로젝트 – 흔하디 흔한 할 일 목록 만들기 [Featured]
React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서…
[React.js] 강좌 6-1편 컴포넌트 Iteration (반복) – Map
이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]
이번 강좌에서는 다른 데이터를 지니고있는 같은 종류의 여러 컴포넌트를
효율적으로 렌더링 하는 방법에 대하여 알아보겠습니다.
1. JavaScript – Array.prototype.map
우선, JavaScript 의 Array 객체 내장함수인 map 함수에 대하여 알아볼까요?
정의
map() …
[React.JS] 강좌 5편 컴포넌트의 State 와 Props 사용하기
이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]
이번 강좌에서는 Component 에서 사용 할 데이터를 다루는 State 와 Props 에 대하여 알아보겠습니다.
1. 시작하기
강좌 4편 – Component 생성 및 모듈화 에서 사용하던 프로젝트를 계속해서 사용하겠습니다.
index.html
<!DOCTYPE html>…
[React.JS] 강좌 4편 Component 생성 및 모듈화
이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]
이번 강좌에서는 React.js 에서 사용되는 Component 를 생성하고, 이를 모듈화 하는 방법을 알아보도록 하겠습니다. 이 강좌는 이전에 설정한 React.js 작업환경에서부터 진행됩니다.
Component 생성 및 모듈화
다음 index.js 파일은, 이전 강좌에서 만들었지요?…
[React.JS] 강좌 3편 JSX
이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]
이번 강좌에서는 React.js 에서 사용되는 JSX 문법에 대하여 알아보겠습니다. React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 템플릿화 합니다. JSX를 사용하는것이 필수는 아니지만 이를 사용하면 다음과 같은 장점이 있습니다.…
[React.JS] 강좌 2.1편 손쉽게 React.js 작업환경 설정하기 / 프로젝트 시작하기
이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]
이번 강좌는 React.js 작업 환경설정 시 필요한 부연설명을 모두 생략하고 그냥 빠르게 작업환경을 설정하는데에 집중합니다.
앞으로 작성 될 강좌를 따라하게 될 때마다 새 프로젝트를 생성하거나 기존 프로젝트를 수정하거나 해야 되는데
그…
[React.JS] 강좌 2편 작업환경 설정하기
이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]
이번 강좌에서는 React 작업환경을 설정해보도록 하겠습니다. 저희는 NodeJS 환경에서 React를 사용 할 것이므로 NodeJS 및 npm이 설치되있어야 합니다. NodeJS 환경에서 React를 사용하는 방법은 대표적으로 webpack을 이용하는 방법이 있고, browserify를 이용하는…
[React.JS] 강좌 1편 소개 및 맛보기
이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]
React 강좌 01: 소개 및 맛보기
이 강좌에서는 React에 대한 간략한 정보와 특징에 대하여 알아보고,
간단한 예제를 통해 React를 사용해보도록 하겠습니다.
본 강좌는 ReactJS를 처음 배우는 JavaScript 개발자들을 대상으로 작성됐으며 앞으로…
내가 사용하는 Atom 커뮤니티 패키지 목록
내 노트북이 아닌 환경에서 코딩하게 될 때도 꽤 있으므로 atom 패키지 목록을 기록해두려고 한다.
atom-ternjs 자바스크립트를 위한 코드 인텔리전스
autoclose-html HTML Tag 자동으로 close
color-picker Ctrl+alt+c 로 HTML 색상 설정
git-plus 터미널 없이 git 사용
jshint 자바스크립트 문법 오류 검사…
[Node.js] GitHub Webhook 을 이용하여 push 될 때 마다 자동으로 pull 하기
요새 한동안 vim 을 사용하여 서버에서 직접 작업하다가 오랜만에 IDE가 사용하고싶어져서 Atom 을 사용하고있다.
그나저나, Atom이 처음 나왔을때는 솔직히 별로라고 생각했는데 지금보니 꽤나 괜찮은 것 같다.
Atom에서 작업 후, push 하면 서버에서 자동으로 pull 하는 환경을 만들고 싶어서 Node.js 로…