전체 글21 [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. [백준] 9663번: N-Queen https://www.acmicpc.net/problem/9663 9663번: N-Queen N-Queen 문제는 크기가 N × N인 체스판 위에 퀸 N개를 서로 공격할 수 없게 놓는 문제이다. N이 주어졌을 때, 퀸을 놓는 방법의 수를 구하는 프로그램을 작성하시오. www.acmicpc.net 백트래킹 문제이다. 어렵지 않아 보이지만 제한 시간을 맞추기가 너무나 힘들었다. n = int(input()) grid = [[0]*n for _ in range(n)] def attackable(r, c): for i in range(r): for j in range(n): if grid[i][j] == 1: if i == r or j == c or (r+c) == (i+j) or (r-c) == (i-j): .. 2022. 6. 30. [React] forwardRef: 자식 컴포넌트에 ref를 전달하는 방법 React의 ref 리액트에서는 DOM 노드에 접근하기 위해 컴포넌트의 ref라는 속성을 이용한다. 리액트에서 권장되지 않는 방법이지만, ref를 사용해 노드의 속성을 직접 변경하는 것도 가능하다. import React, { useRef } from "react"; const ColorBlock = () => { const ref = useRef(); const handleClick = () => { ref.current.style.background = 'red'; } return ( CLick Me ); }; 가끔은 자식 컴포넌트의 노드에 접근하기 위해 자식에게 ref를 전달해야하는 경우가 있다. 그러나 React에서 ref는 이미 예약된 이름이기 때문에 자식에게 prop으로 전달되지 않는다. co.. 2022. 5. 23. [Javascript] requestAnimationFrame(애니메이션 최적화하기) 애니메이션을 그리기 위해서는 함수를 반복 호출하며 화면을 다시 그려야 한다. 이를 위해 쉽게 생각해볼 수 있는 방법은 setTimeout 또는 setInterval과 같은 스케줄링 함수를 사용하는 것이다. setTimeout과 setInterval의 한계 그러나 이 함수들은 완벽한 애니메이션을 그리기엔 한계가 있다. 일반적인 모니터의 가변 주사율이 60프레임을 고려해, 1초에 60번의 호출이 발생하도록 delay를 1000/60ms로 준다고 가정하자. 보통의 경우는 이 delay가 잘 지켜져 의도한 대로 60 프레임의 애니메이션이 그려질 것이다. 그런데 만약 연산에 delay 이상의 시간이 필요한 경우는 어떨까? 싱글 스레드인 자바스크립트의 특성상, 주어진 delay 시간을 지키지 못하고 일부 애니메이션.. 2022. 4. 25. 이전 1 2 3 4 다음
