on your mark

클로저 클로저란? 클로저는 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.... ? 이해가 되지 않는다. 흔히 함수 내에서 함수를 정의하고 사용하면 클로저라고 한다. 간단하게 정리하면 함수밖에서 선언된 변수를 함수 내부에서 사용할 때 클로저가 생성된다. 클로저를 이해하기 위해서는 lexical scoping규칙을 알고 있어야 한다. lexical scoping은 함수가 정의된 시점의 스코프 체인을 사용하여 함수가 실행된다는 뜻이다.(호출된 시점이 아님) var name = "kim"; function outer(){ var name = "olive"; function inner(){ return name; } return inner; } var innerFunc = outer(); var myNa..

호이스팅(Hoisting) 호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 의미한다. 호이스팅이란 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수 값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수 선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효범위: 함수 블록 {} 안에서 유효 함수 내에서 아래 쪽에 존재하는 내용 중에서 필요한 값들을 자바스크립트 Parser 내부적으로 끌어올리는 것 자바스크립트 변수 생성과 초기화(선언과 할당)가 분리되어 진행되기 때문에 호이스팅이 발생한다. 호이스팅의 대상 var 변수 선언과 함수..

styled-components 컴포넌트가 많은 경우 css 스타일링 하기 어려운 점이 있다. 컴포넌트 제작 시 스타일을 바로 입혀서 컴포넌트를 만들 수 있는데, (styled-components)를 이용하면 된다. import React, { useState } from 'react'; import styled from 'styled-components'; //padding이 20px인 div를 만들자 let Box = styled.div` padding : 20px; `; function Detail(){ return ( ) } props로 스타일링도 가능하다. let title = styled.h4` font-size: 25px; color: ${props => props.colors} `; .....

리액트 기초1 react bootstrap에서 react전용 bootstrap 사용가능하다. 그 외 다른 css프레임워크도 많으니 필요하면 찾아보는 걸 추천한다. Import & export export default 문법 (data.js) var name = 'Kim'; var name2 = 'Park'; export default name; //여러개의 변수를 내보내고 싶다면 //export {name, name2}; App.js와 별개로 data.js 파일을 생성한다. 이 파일에서 중요한 변수를 export하고 싶을 땐 export default 변수명 으로 사용 가능하다. 변수명, 함수명, 자료형 전부 배출 가능하다. 파일마다 export default 라는 키워드는 하나만 사용가능하다. expo..