Front-end

# React hooks란? 2019.06 정식 출시된 기능 class형 컴포넌트의 길어지는 코드 길이 문제 중복 코드, 가독성 문제 등등을 해결하기 위해 등장 # useState const [state, setState] = useState(초기값); state란? 컴포넌트의 상태 예를들어 현재 time = 5시라면 useState는 이 시간을 간편하게 생성하고 업데이트 시켜준다. state의 생성과 동시에 가져야 할 초기값을 useState에 인자로 넣어주면 state와 setState라는 두가지요소를 배열형태로 return 해준다. 현재 상태값은 state라는 변수에 들어있고 state를 변경시켜주고 싶을 때는 setState라는 변수를 이용해서 변경시켜줄수 있다. state, setState라는 ..

# 호이스팅 이란? 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가과정을 거치면서 소스코드를 실행하기 위한 준비를 한다. 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다. 소스코드의 평가 과정이 끝나면 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다. 자바스크립트 엔진은 선언들이 어디에 있든 상관없이 다른 코드보다 먼저 실행한다. 쉽게 말해 자바스크립트 엔진이 코드를 실행하기 전 선언문을 끌어올리는 것을 말한다. 정확히 말하자면 선두도 끌어 올려진 것 처럼 동작한다. 모든 식별자(변수,함수, 클래스 등)은 호이스팅 된다. # 변수 호이스팅 변수는 3단계에 걸쳐 생성된다..

# Styled Componens styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com CSS파일을 따로 만들지 않고 자바스크립트에서 CSS를 사용하게 해주는 라이브러리 CSS-JS 라이브러리 중에 제일 유명함 스타일이 첨부되는 현 컴포넌트에만 영향을 주고 다른 컴포넌트에는 영향을 미치지 못한다. 단점은 자바스크립트내에서 작성하기 때문에 코드가 보다 복잡해질 수 있다. 1. 홈페이지 접속 npm install --save styled-components 설치 2. 사용할 파일에 가서 임포트 ..

리액트 공식사이트 Getting Started – React A JavaScript library for building user interfaces reactjs.org 리액트 베타사이트 React Docs Beta A JavaScript library for building user interfaces beta.reactjs.org Create React App Getting Started | Create React App Create React App is an officially supported way to create single-page React create-react-app.dev TOOL VS Code Download Visual Studio Code - Mac, Linux, Windo..

#callback 1. 동기와 비동기 자바스크립트는 동기적이다. hoisting이 된 이후 부터 작성한 순서에 맞춰 하나씩 실행된다는 것(한번에 하나의 일만 수행) hoisting? var, function declaration(함수선언) 같은 선언들이 제일 위로 올라가는것 synchronous(동기)는 정해진 순서에 맞게 코드가 실행되는것이고 asynchronous는 비동기적으로 언제코드가 실행될지 예측할 수 없는것 console.log(1); console.log(2); console.log(3); 자바스크립트 엔진은 코드를 제일 위에서 부터 밑으로 실행하기 때문에 순서대로 작동된다. console.log(1); setTimeout(() => console.log(2),1000); console.lo..

- 리액트 할 때 정말 많이 썼던 자바스크립트 문법 - 잘 이해하고 알아두면 리액트 앱 만들 때 고생을 덜 할수있다.(과거 나에게...) 스프레드 문법 (Spread) const arr = [1, 2, 3]; const max = Math.max(arr); // NaN const max = Math.max(...arr); // 3 es6 ... 순회가 가능한(이터러블한) 여러 값들의 집합체를 펼쳐 개별적인 값들의 목록으로 만든다. 값을 생성하는 연산자가 아니기 때문에 변수에 할당할 수 없다. Rest 파라미터와 형태가 동일하지만 전혀 다른 컨셉을 가지고 있다. Rest 파라미터는 전달된 인수들의 목록을 배열로 전달받기 위해 매개변수 앞에 사용하는 것 기존에 사용했던 concat, splice, slice..