[JavaScript] arrow function(화살표 함수) 이란 무엇인가?
·
JavaScript
Arrow function ES6 문법 중 하나 this, arguments, super 또는 new.target을 바인딩하지 않음 항상 익명 메소드 함수가 아닌 곳에 적합 - 생성자로 사용할 수 없음. Arrow function 선언 // 함수 표현식 function() { ... } // 화살표 함수 표현식 () => { ... }​ // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 때 num => { ... } // 매개변수가 하나일 때, 소괄호 생략 가능 // implicit return → 함수와 return 식이 한줄이면, 중괄호{}를 생략하고 암묵적으로 return 된다. num => { return num++ } num => num++ // 위 표현과 동일 () => ..
[React] Hook이란 무엇인가?
·
React
Hook 이란? Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있도록 해줍니다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. [react reference] Hook은 class 없이 React 기능들을 사용하는 방법을 제시 → Hook을 통해 function component에서 state와 lifeCycle 사용 가능 Hook 사용 시 장·단점 장점(function component) 단점(class component) 계층의 변화 없이 상태 관련 로직을 재사용할 수 있음 컴포넌트 사이..
[React] 클래스 컴포넌트란 무엇인가?
·
React
Class component component 선언하는 두 가지 방법 중 하나. [클래스 컴포넌트 & 함수 컴포넌트] 현재는 자주 사용 되지 않음. state, lifeCycle등 사용 가능. Class component 사용 방법 class로 정의하고 render() 함수를 통해 JSX를 반환. Component로 상속 받아야 함. import React from 'react'; class App extends React.Component{ render(){ ... } export default App; state Component 내부에서 바뀔 수 있는 값 Class component - state 사용 constructor(생성자) 안에서 this.state 초기 값 설정 가능 constructor..
[React] React란 무엇인가? - React에 대한 개념 정리
·
React
React 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. [위키백과] facebook에서 제공해주는 프론트앤드 라이브러리. 사용자가 조작하기 위한 UI를 만들도록 도와줌. component 기반 싱글 페이지 애플리케이션, 모바일 애플리케이션 개발 시 사용 React 특징 1. Component 기반 구조 2. Data Flow 3. JSX 4. Virtual Dom 5. Props and State 1. Component 기반 구조 Component는 독립적인 단위의 소프트웨어 모듈이다. 스마트폰 액정이 고장 나면 서비스센터에 방문하여 액정을 고치면 된다. 스마트폰 배터리가 고장 나면 배터리를 고치면 된다. '액정', '배터리' 이를 Component 비유할 수 있..
[JavaScript/Array] 배열(Array)에서 forEach, filter, map 특징과 사용법
·
JavaScript
1. forEach forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행 [return value는 없음] 배열의 각 요소에 대해 실행. 중간에 break 문을 사용할 수 없음. 종료를 위해선 throw(예외)를 발생시켜야 함. 구문 arr.forEach(callback(element[, index[, array]])[, thisArg]) element : 처리할 현재 요소. index : 처리할 현재 요소의 인덱스 (= 현재 element의 index값). array : forEach를 호출한 배열. thisArg : callback을 실행할때 this로 사용되는 값. 예제 const array = [1,2,3,4,5]; const result1 = array.forEach((eleme..
[GitHub] GitHub란 무엇일까?
·
GitHub
Git Git은 분산 버전 관리 시스템중 하나. 로컬에서 관리되는 버전 관리 시스템. 텍스트 명령어 입력 방식. 장점 코드의 기록이 남아 누가, 언제, 무엇을, 왜, 어떻게 수정했는지 코드 리뷰가 가능. GitHub를 통해 자신의 Git을 쉽게 공유 가능. Visual Studio code, Android Studio 등 많은 IDE에서 Git 연동 제공. 빠르게 협업 환경을 조성. 요약 Git은 파일 버전들을 분산해서 관리할 수 있는 도구이고, 협업에 용이하다. GitHub GitHub는 Git을 사용하는 프로젝트를 지원하는 웹호스팅 서비스이다. 클라우드 방식으로 관리되는 버전 관리 시스템이다. 그래픽 유저 인터페이스(GUI) 방식. 그래픽 사용자 인터페이스 (graphical user interfac..