분류 전체보기
-
[React] 리액트 작업 환경 설정하기React 2019. 5. 1. 15:20
리액트 작업환경 설정하기 준비물 : node.js, VSCode 등 Node.js 설치하기 Node.js 를 LTS 버전으로 설치한다. 윈도우의 경우 노드 공식 홈페이지 다운로드 페이지에서 설치한다. (https://nodejs.org/kr/) macOS, Linux 의 경우 nvm을 통해서 설치한다. nvm은 여러 종류의 node.js 버전을 설치할 수 있게 해주는 버전이다. 나중에 새 버전이 나왔을 때 업데이트 하기도 쉽고, 터미널을 통해 어떤 버전을 사용할지 설정할 수 있어서 편리하다. curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash nvm install --lts npm 대신 ... yarn N..
-
[React] LifeCycle 소개 및 사용법React 2019. 5. 1. 14:57
LifeCycle API 한국어로 번역하자면 '생명주기' 라고 할 수 있다. 컴포넌트가 브라우저 상에서 나타날 때 업데이트 될 때 사라질 때 중간 중간 과정에서 어떤 작업을 하고 싶을 때 LifeCycle API를 사용할 수 있다. LifeCycle API의 종류는 많다. constructor, getDerivedStateFromProps, componentDidMount, shoudComponentUpdate, getSnapshotBeforeUpdate, componentDidUpdate, componentWillUnmount, ... Mounting 컴포넌트가 우리 브라우저 상에 나타난다는 것을 의미한다. Updating 컴포넌트의 props가 바뀌거나 state가 바뀌었을 때를 의미한다. Unmou..
-
[React] 주요 개념 정리React 2019. 4. 24. 15:58
React 주요 개념 정리 다음은 리액트 공식 사이트(https://reactjs.org/)의 Docs 를 읽고 요약 정리한 내용입니다. Hello World 가장 단순한 React 예시 아래 코드는 페이지에 "Hello, world!"라는 제목을 보여준다. ReactDOM.render( Hello, world! , document.getElementById('root') );최신 자바스크립트 문법 let and const 문을 사용하여 변수를 정의한다. class 키워드를 사용하여 JavaScript 클래스를 정의한다. 객체와 달리 클래스 메소드 사이에 쉼표를 넣을 필요가 없다. 클래스가 있는 다른 많은 언어와 달리 JavaScript에서는 this 메소드의 값이 호출되는 방식에 따라 다..
-
[Java] Enum 클래스Programming Language/Java & Kotlin 2019. 4. 18. 15:51
열거체(enumeration type) JDK 1.5부터는 C언어의 열거체보다 더욱 향상된 성능의 열거체를 정의한 Enum 클래스를 사용할 수 있음 열거체의 장점 열거체를 비교할 때 실제 값 뿐만 아니라 타입까지도 체크함 열거체의 상수값이 재정의 되더라도 다시 컴파일할 필요가 없음 열거체의 정의 및 사용 자바에서는 enum 키워드를 사용하여 열거체를 정의할 수 있음 enum 열거체이름 { 상수1이름, 상수2이름, ... } enum Rainbow { RED, ORANGE, YELLOW, GREEN, BLUE, INDIGO, VIOLET } 이렇게 정의된 열거체는 다음처럼 사용함 열거체이름.상수이름 Rainbow.RED 열거체의 상수값 정의 및 추가 열거체의 첫번째 상수값은 0부터 설정되며, 그다음은 바로..
-
[React] 리액트는 무엇인가_01React 2019. 4. 16. 17:57
프론트엔드 라이브러리 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션임 어떤 유저 인터페이스를 동적으로 나타내기 위해서는 수많은 상태들을 관리해야함 예를 들어서 다음과 같은 html 코드가 있다고 가정해보자. Counter 0 + 버튼을 눌러서 숫자 0을 바꾸어주려면 var number = 0; var elNumber = document.getElementById('number'); var btnIncrease = document.getElementById('increase'); btnIncrease.onclick = function() { number++; elNumber.innerText = number; } 프로젝트의 규모가 커지고 다양한 유저 인터페이스와 인터렉션을 관리해야 한다면 번거롭고..
-
[Java] 스트림 APIProgramming Language/Java & Kotlin 2019. 4. 16. 16:50
스트림 API Java SE 8부터 추가된 스트림 API는 입력과 출력의 스트림과는 전혀 다른 개념 자바에서는 많은 양의 데이터를 저장하기 위해서 배열이나 컬렉션을 사용함 이렇게 저장된 데이터에 접근하기 위해서는 반복문이나 반복자(iterator)를 사용하여 매번 새로운 코드를 작성 데이터베이스의 쿼리와 같이 정형화된 처리 패턴을 가지지 못했기에 데이터마다 다른 방법으로 접근해야만 했음 이러한 문제점을 극복하기 위해서 Java SE 8부터 스트림(stream) API를 도입함 스트림 API는 데이터를 추상화하여 다루므로, 다양한 방식으로 저장된 데이터를 읽고 쓰기 위한 공통된 방법을 제공 배열이나 컬렉션뿐만 아니라 파일에 저장된 데이터도 모두 같은 방법으로 다룰 수 있음 스트림 API의 특징 스트림은 외..