Javascript6 [Javascript] 변수 선언과 호이스팅(feat. TDZ) 변수 선언 변수를 사용하기 위해서는 가장 먼저 변수를 선언해야 한다. 변수의 선언은 어떤 값의 주소를 담기 위한 메모리 공간을 확보하고 이름을 붙이는 것이다. 자바스크립트에서는 var, let, const 키워드를 사용해 아래와 같이 변수를 선언할 수 있다. var name; 명심해야할 점은 변수에 값 자체를 담는 것이 아닌, 해당 값이 담겨있는 주소를 담는 다는 점이다. C언어의 포인터를 생각하면 이해가 쉽다. 변수에 매번 새로운 값을 할당 하면, 그때마다 변수는 그 새로운 값의 메모리를 가르킨다. 초기화 변수를 선언했으면 이제 값을 할당해야 할테지만, 자바스크립트에서는 값을 할당하지 않은 변수(단, const로 선언한 변수는 제외)를 사용해도 에러가 발생하지 않는다. 값을 할당하지 않은 위의 변수 n.. 2022. 12. 27. [Javascript] 리덕스 만들어보기 - (1) 리덕스는 시시각각 변하는 복잡한 상태를 효과적으로 다루기 위해, 세 가지 기초 원칙에 따라 상태의 변화 시점에 제약을 두어 상태 변화를 예측 가능하게 한다. 리덕스의 세 가지 원칙은 다음과 같다. 모든 상태는 하나의 저장소에 저장된다. 애플리케이션의 모든 상태는 단 하나의 store에 객체 트리 구조로 저장된다. 상태는 읽기 전용이다. 상태를 변화하기 위해서는 반드시 dispatch 함수에 액션 객체를 전달해야 한다. 변화는 순수 함수로 작성되어야 한다. 리듀서는 이전 상태를 직접 변경하지 않고 항상 새로운 객체 상태를 생성해서 반환해야 한다. 먼저 모든 상태들의 저장소인 store를 만드는 createStore() 함수를 작성해보자. export const createStore = (reducer) =.. 2022. 7. 24. [Javascript] this: 이름 값 못하는 자바스크립트의 this 자바스크립트에서 this는 다른 언어에서와는 다르게 동작한다. Java와 같은 언어의 경우, 인스턴스가 생성되면 this는 항상 해당 객체를 가르키지만, 자바스크립트의 this는 주로 함수의 호출 시점에 결정되기 때문에, "이것" 이라는 이름 값을 하지 못하고 그 대상이 자꾸만 바뀐다. 전역 스코프에서의 this 먼저 전역 스코프에서 this는 전역 객체(globalThis)을 가르킨다. 브라우저는 Window, 노드에서는 Global 객체가 될 것이다. // 브라우저 console.log(this) // Window 함수에서의 this 단순 함수 호출 단순 호출에서도 마찬가지로 this는 전역 객체를 가르킨다. function nonStrict() { console.log(this); } nonStri.. 2022. 7. 3. [Javascript] requestAnimationFrame(애니메이션 최적화하기) 애니메이션을 그리기 위해서는 함수를 반복 호출하며 화면을 다시 그려야 한다. 이를 위해 쉽게 생각해볼 수 있는 방법은 setTimeout 또는 setInterval과 같은 스케줄링 함수를 사용하는 것이다. setTimeout과 setInterval의 한계 그러나 이 함수들은 완벽한 애니메이션을 그리기엔 한계가 있다. 일반적인 모니터의 가변 주사율이 60프레임을 고려해, 1초에 60번의 호출이 발생하도록 delay를 1000/60ms로 준다고 가정하자. 보통의 경우는 이 delay가 잘 지켜져 의도한 대로 60 프레임의 애니메이션이 그려질 것이다. 그런데 만약 연산에 delay 이상의 시간이 필요한 경우는 어떨까? 싱글 스레드인 자바스크립트의 특성상, 주어진 delay 시간을 지키지 못하고 일부 애니메이션.. 2022. 4. 25. [Javascript] Closure 클로저란? MDN에 따르면, 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합이라고 한다. 이것만 들으면 무슨 말인지 더 모르겠다😅. 이를 쉽게 이해하기 위해선 먼저 변수의 렉시컬 스코핑이 어떻게 이루어지는지 알아야 한다. 렉시컬 스코핑 자바스크립트에서 함수가 호출되면 먼저 필요한 변수를 자신의 렉시컬 환경에서 찾는다. 만약 자신의 내부 렉시컬 환경에 필요한 변수가 없으면, 참조하고 있는 외부 렉시컬 환경으로 검색 범위를 넓히고, 그래도 변수를 찾을 수 없으면 전역 환경까지 계속해서 검색 범위를 넓힌다. 중간에 필요한 변수를 찾았으면, 해당 변수를 사용한다. 이렇게 내부 함수가 외부 환경의 변수를 사용할 때, 외부 함수에서 내부 함수를 반환하면 클로져를 형성하게 된다. 외부 함수가 종료되었지만, 내부 함.. 2022. 4. 14. [Javascript] Tagged Templates (styled-components의 이상한 문법) styled-components의 이상한 문법 styled-components 또는 Emotion을 사용하는 사람들은 다음과 같은 코드가 매우 익숙할 것이다. const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; ` 예시 코드에 적혀 있어서, 강의에서 이렇게 하라고 해서 지금껏 사용해오긴 했는데... 이게 대체 무슨 문법일까? styled-components에서만 사용되는 구문이라고 생각할 수 있겠지만, 이건 Tagged Temp.. 2022. 2. 25. 이전 1 다음