![\"이미지](\"3.png\")
\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0| rectangle | \r\ncharacterX | \r\ncharacterY | \r\nitemX | \r\nitemY | \r\nresult | \r\n
|---|---|---|---|---|---|
| [[1,1,7,4],[3,2,5,5],[4,3,6,9],[2,6,8,8]] | \r\n1 | \r\n3 | \r\n7 | \r\n8 | \r\n17 | \r\n
| [[1,1,8,4],[2,2,4,9],[3,6,9,8],[6,3,7,7]] | \r\n9 | \r\n7 | \r\n6 | \r\n1 | \r\n11 | \r\n
| [[1,1,5,7]] | \r\n1 | \r\n1 | \r\n4 | \r\n7 | \r\n9 | \r\n
| [[2,1,7,5],[6,4,10,10]] | \r\n3 | \r\n1 | \r\n7 | \r\n10 | \r\n15 | \r\n
| [[2,2,5,5],[1,3,6,4],[3,1,4,6]] | \r\n1 | \r\n4 | \r\n6 | \r\n3 | \r\n10 | \r\n
{state}
\r\n \r\n \r\n )\r\n}\r\n```\r\nuseState 반환값의 두 번째 원소를 실행해 리액트에 렌더링이 일어나게끔 변경했다. \r\n그럼에도 여전히 버튼 클릭시 state의 변경된 값이 렌더링되고 있지 않다. \r\n\r\n그 이유는 리액트의 렌더링은 **함수 컴포넌트에서 반환한 결과물인 return의 값을 비교해 실행되기 때문이다.** \r\n\r\n즉, 매번 렌더링이 발생할 때마다 함수는 새롭게 실행이 되고, 실행한 함수에서 state는 매번 hello로 초기화 되므로 아무리 state를 변경해도 hello로 초기화 되는 것이다. \r\n\r\n근데 렌더링이 될 때마다 초기화되는 변수(값)와는 달리, useState의 결과값은 어떻게 그 값을 유지할까?\r\n\r\n\r\n\r\n그럼 우리가 알고있는 useState는 대체 어떻게 구현이 되있는 것일지 한번 최대한 비슷하게 구현한 코드를 살펴보자.\r\n\r\n**먼저 useState의 결과 값이 유지되도록, state를 함수로 하여 state 값을 호출할 때마다 현재 state를 반환하게 해보자.**\r\n```js\r\nfunction useState(initialValue) {\r\n\tlet initialState = initialValue;\r\n\t\r\n\tfunction state() {\r\n\t\treturn initialState\r\n\t}\r\n\tfunction setState(newValue) {\r\n\t\tinitialState = newValue\r\n\t}\r\n\treturn [state, setState];\r\n}\r\nconst [value, setState] = useState(0);\r\nsetValue(1);\r\nconsole.log(value()); // 1\r\n```\r\n위의 코드도 나쁘진 않지만, 우리에게 익숙한 useState훅은 state를 함수가 아닌 상수처럼 사용하고 있다.\r\n어떻게 그게 가능한 걸까?\r\n\r\n## 클로저를 이용해 상태를 관리하는 useState\r\n이를 위해서 리액트는 **클로저**를 이용한 것이다. \r\nuseState는 클로저를 통해 useState 내부의 선언된 함수(setState)가 함수의 실행이 종료된 이후(useState가 호출된 이후)에도 지역변수인 state를 계속 참조할 수 있다.\r\n\r\nuseState 작동 방식을 대략적으로 흉내 낸 코드는 다음과 같다.\r\n\r\n```js\r\nconst MyReact = (function() {\r\n\tconst global = {}\r\n let index = 0\r\n \r\n function useState(initialState){\r\n \tif(!global.states) {\r\n \t// 애플리케이션 전체의 states 배열 초기화, 최초 접근이면 빈 배열로\r\n \tglobal.states = []\r\n }\r\n // states 정보를 조회해서, 현재 상태값이 있는지 확인\r\n // 없다면 초깃값으로 설정\r\n const currentState = global.states[index] || initialState\r\n // 위에서 조회한 값으로 states의 값 업데이트\r\n global.states[index] = currentState\r\n \r\n // 즉시실행함수로 setter 만듬\r\n const setState = (function() {\r\n \t// 클로저로 index를 가둬두어서 동일한 index에 접근이 가능\r\n \tlet currentIndex = index\r\n return function(value){\r\n \tglobal.states[currentIndex] = value\r\n //컴포넌트 렌더링이 들어가는 부분이다.(실제 코드는 생략)\r\n }\r\n })()\r\n // useState를 쓸 때마다 index를 하나씩 추가하는데, 이는 하나의 state마다\r\n // index가 할당되어있어, 그 index가 배열의 값(global.states)를 가리키고,\r\n // 필요할 때마다 그 값을 가져오게 하는 것이다.\r\n index = index + 1\r\n \r\n return [currentState,setState]\r\n}\r\n\r\nfunction Component() {\r\n\tconst [value, setValue] = useState(0);\r\n}\r\n})();\r\n```\r\n\r\n실제 리액트 코드에서는 useReducer를 이용해 구현되어 있어 약간의 차이가 있다.\r\n\r\n아무튼 여기서 함수의 실행이 끝났음에도 함수가 선언된 환경을 기억할 수 있는 방법이 바로 클로저인 것이다. 만약 클로저가 없다면, `setState`는 항상 `index`의 현재 값에 의존하게 된다. 즉, 컴포넌트가 여러 상태를 갖고 있을 때 마지막 `index`만 참조하므로, `setState`가 올바른 위치를 참조하지 않게 되는 것이다.\r\n\r\n매번 실행되는 함수 컴포넌트 환경에서 state의 값을 유지하고 사용하기 위해 리액트는 클로저를 활용하고 있다.\r\n\r\n`\r\n훅에 대한 구현체를 github에서 타고 올라가다보면 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 라는 문구를 만나게된다(무섭다 ㅋㅋ)\r\n위의 코드는 Preact의 구현을 기준으로 하고 있다. Preact는 react의 경량화 버전으로,\r\n대부분의 리액트 API를 지원하고 있다. \r\n`\r\n## 결론\r\nReact의 `useState`는 클로저를 통해 상태값을 안정적으로 유지하며, 함수 컴포넌트가 여러 번 호출되더라도 **각 상태값이 고유한 위치에 저장**될 수 있게 한다. `useState`가 반환하는 `setState` 함수는 생성 당시의 상태 위치(`index`)를 클로저로 캡처하여, 해당 상태값만 정확히 업데이트하도록 구현되어 있다.\r\n\r\n정리하자면, 클로저는 `setState`가 함수가 선언된 당시의 환경을 유지하게 해주기 때문에 **컴포넌트가 매번 재실행될 때마다 상태가 초기화되는 것을 방지**하고, 상태가 올바르게 유지될 수 있게 해준다.\r\n\r\n**참고**\r\n\r\n[서적] 모던 리액트 Deep Dive\r\n"},{"slug":"posts/Javascript/클로저에 대하여","title":"클로저에 대하여","date":"2024-10-25T20:00:24.000Z","image":"index.png","summary":"자바스크립트의 어렵지만 중요한 클로저의 개념과 활용 이해해보자","tags":["JavaScript","deepdive","클로저","생명주기"],"content":"# 클로저에 대하여\r\n\r\n면접 질문 중 단골이고, 자바스크립트에 관심이 있다면 한번쯤 들어봤을 개념인 **클로저**.\r\n\r\n사실 많이 난해한 개념이기도 하고, 필자 역시 전에 한번 공부를 해보았지만 아직 확실히 와닿지는 않는 개념이다. \r\n\r\n그래서 이번 기회에 제대로 정리하고 넘어가고자 한다. 함께 이 개념이 대체 뭔지 살펴보자.\r\n\r\n## 클로저의 정의\r\n> 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.\r\n\r\n'이게 뭔소리지?' 싶은가? 나도 그러하다. 위의 정의에서 이해하여야 할 핵심 키워드는 **함수가 선언된 렉시컬 환경**이다.\r\n\r\n ```js\r\n const x = 1;\r\n function outerFunc( ) {\r\n\t const x = 10;\r\n\t function innerFunc( ) {\r\n\t\t console.log(x); // 10\r\n\t}\r\n\tinnerFunc( );\r\n}\r\nouterFunc( );\r\n```\r\n`outerFunc` 내부에서 중첩 함수 `innerFunc`가 정의되고 호출되었다. \r\n\r\n따라서 중첩 함수 `innerFunc` 내부에서 자신을 포함하고 있는 `outerFunc`의 x 변수에 접근할 수 있다. **만약 innerFunc 함수가 outerFunc의 내부에서 정의되지 않았다면, 즉 외부에서 별도로 정의 되었다면** innerFunc를 outerFunc 내부에서 호출해도 outerFunc 함수의 변수에 접근이 불가능하다.\r\n\r\n ```js\r\n const x = 1;\r\n function outerFunc( ) {\r\n\t const x = 10;\r\n\t// 안에서 호출되었지만 접근 불가능\r\n\t innerFunc( );\r\n}\r\nfunction innerFunc( ) {\r\n\t// 상위 스코프인 전역에서 선언된 1\r\n\tconsole.log(x); // 1\r\n}\r\nouterFunc( );\r\n```\r\n\r\n위와 같은 현상은 자바스크립트가 **렉시컬 스코프**를 따르기에 발생한다.\r\n\r\n## 렉시컬 스코프\r\n자바스크립트 엔진은 함수를 **어디서 호출했느냐**가 아니라 함수를 **어디서 정의했는지**에 따라 **상위 스코프를 결정** 한다. \r\n\r\n이를 **렉시컬 스코프**라고 한다.\r\n\r\n위의 예제코드를 다시한번 본다면, outerFunc와 innerFunc는 모두 전역에서 정의 되었고, 함수의 상위 스코프는 함수를 어디서 정의했는지에 따라 결정되므로 **두 함수의 상위 스코프는 모두 전역이다.**\r\n\r\n함수의 상위 스코프는 결국, **함수의 정의된 위치에 따라 정적으로 결정**되고, 함수의 호출된 위치는 어떠한 영향도 주지 못한다.\r\n\r\n>렉시컬환경: **변수를 저장하고 외부 스코프와 연결을 유지하는 객체**라고 생각하면된다. 자바스크립트에서는 함수가 생성될 때마다 렉시컬 환경이 만들어지며, 함수 내부의 변수뿐 아니라 함수가 선언된 위치에 있는 외부 변수도 기억하게된다.\r\n>\r\n> 코드가 위치한 곳에 따라 **변수와 함수를 어디서 찾아볼지 알려주는 일종의 \"지도\"**라고 생각할 수도 있다\r\n\r\n\r\n렉시컬 환경은 자신의 **외부 렉시컬 환경에 대한 참조**를 통해 상위 렉시컬 환경과 연결이된다.\r\n\r\n따라서 함수의 상위 스코프를 결정한다는 것은, 현재 함수의 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값을 결정한다는 것을 의미한다.\r\n\r\n렉시컬 스코프를 다시한번 정의해보자면, 렉시컬 환경의 \"외부 렉시컬 환경에 대한 참조\"에 저장한 참조값, 즉 상위 스코프에 대한 참조는 **함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)**에 의해 결정되는 것이라고 할 수 있다. \r\n\r\n\r\n\r\n**함수는 자신의 내부슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다.** \r\n이곳을 참조해서 자신이 호출되었을 때 생성될 함수 렉시컬환경의 \"외부 렉시컬 환경에 대한 참조\"에 저장될 참조값을 보고, 자신이 존재하는 한, 이 [[Environment]] 슬롯에 저장한 렉시컬 환경의 참조, 즉 **상위 스코프**를 기억한다.\r\n\r\n## 클로저와 렉시컬환경\r\n그렇다면 다음의 코드를 살펴보자\r\n```js\r\nconst x = 1 ;\r\nfunction outer() {\r\n\tconst x = 10;\r\n\tconst inner = function ( ) {console.log(x)}\r\n\t//inner함수 반환\r\n\treturn inner;\r\n}\r\n// outer함수를 호출하면 중첩 함수 inner를 반환한다.\r\n// 그리고 outer 함수의 실행 컨텍스트는 제거된다.\r\nconst innerFunc = outer( );\r\ninnerFunc( )// 10\r\n```\r\nouter함수를 호출하면 outer함수는 중첩함수 inner를 반환하고 생명주기를 마감한다. \r\n\r\n즉 outer함수의 실행이 종료되었으므로, 실행컨텍스트가 제거된다. (실행컨텍스트 스택에서 pop된다.)\r\n\r\n이때 outer 함수의 지역변수x 역시 생명주기를 마감했으므로, 실행 컨텍스트가 제거되어 유효하지 않아 보인다.\r\n\r\n그러나 위의 실행 결과는 outer 지역 변수x 의 값인 10을 반환한다. 이미 생명 주기가 종료되어 outer 함수의 지역변수 x가 실행 컨텍스트 스택에서 제거되었는데도 다시 부활이라도 한 것 마냥 말이다. \r\n\r\n이처럼 **외부 함수보다 중첩함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부함수의 변수를 참조**할 수 있다. \r\n\r\n이러한 **중첩 함수를 클로저**라고 부른다.\r\n\r\n다시 정의로 돌아가보자.\r\n> 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.\r\n\r\n위 정의를 예제에 대입해보자면 `함수`는 반환된 `중첩함수(inner)`를 의미하고 `그 함수가 선언될 때의 렉시컬 환경(Lexical environment)`란 그 `중첩 함수(inner)가 정의됐을 때의 스코프`를 의미하는 것이다.\r\n\r\n즉, **클로저는 반환된 중첩 함수가 자신이 선언됐을 때의 렉시컬 환경 즉, 스코프를 기억하여 자신이 선언됐을 때의 렉시컬 환경 밖에서 호출되어도 그 렉시컬 환경(스코프)에 접근할 수 있는 함수**를 말한다. \r\n\r\n조금 더 간단히 말하면 **클로저는 자신이 생성될 때의 상위 스코프(렉시컬 환경)을 기억하는 함수이다**\r\n\r\n![](\"그림1.jpg\")
\r\n\r\n\r\ninner 함수의 [[Environment]] 슬롯이 outer 함수의 렉시컬 환경을 참조하고, inner가 전역 변수 innerFunc에 저장되어 계속 사용되고 있으므로, 이와 연결된 모든 요소는 가비지 컬렉터에 의해 제거되지 않습니다.\r\n\r\n\r\n> **가비지 컬렉터(Garbage Collector)는 프로그램이 더 이상 사용하지 않는 메모리를 자동으로 해제해 주는 자바스크립트 엔진의 기능**이다.\r\n> \r\n> 가비지 컬렉터는 특정 메모리 공간이 더 이상 참조되지 않을 때 그 공간을 \"가비지\"로 판단하여 메모리를 해제한다. 반대로, **누군가가 참조하고 있는 메모리 공간은 함부로 해제하지 않는다**.\r\n\r\n클로저는 자바스크립트의 강력한 기능으로, 필요하다면 적극 활용해야 한다. 클로저가 유용하게 사용되는 상황을 살펴보자.\r\n\r\n## 클로저의 활용\r\n\r\n### 상태를 안전하게 변경하고 유지할 때\r\n\r\n클로저는 **상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고, 특정 함수에게만 상태 변경을 허용하여, 상태를 안전하게 변경하고 유지할 수 있도록 사용한다.**\r\n```js\r\nconst counter = (function ( ) {\r\n// 은닉된 상태 (외부에서 접근 불가)\r\nlet num = 0;\r\n// 클로저인 메서드를 갖는 객체를 반환한다.\r\n// 객체 리터럴은 스코프를 만들지 않는다.\r\n// 따라서 아래 메서드들의 상위 스코프는 즉시 실행 함수의 렉시컬 환경이다.\r\nreturn {\r\n\tincrease() {\r\n\t\treturn ++num;\r\n\t}\r\n\tdecrease() {\r\n\t\treturn num>0? --num: 0;\r\n\t}\r\n}());\r\n\r\nconsole.log(counter.increase()); // 1\r\nconsole.log(counter.decrease()); // 2\r\n\r\nconsole.log(counter.decrease()); // 1\r\nconsole.log(counter.decrease()); // 0\r\n```\r\n즉시 실행 함수는 호출된 이후 소멸되지만, 즉시 실행 함수가 반환한 클로저(increase, decrease)는 **자신의 상위 스코프인 즉시 실행함수의 렉시컬 환경을 기억하고 있다**. \r\n\r\n이 코드에서 \r\n- 카운터 상태(num 변수의 값)은 increase, decrease 함수가 호출되기 전까지 변경되지않고 유지되며 **외부에서 접근할 수 없다**.\r\n- 카운터 상태는 오직 **increase, decrease로 정의된 함수로만 변경이 가능**하다.\r\n\r\n\r\n\r\n이처럼 클로저는 **상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고 특정함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용**된다.\r\n\r\n### 전역변수의 사용을 억제할 때\r\n\r\n클로저는 전역 변수 사용을 억제하고 대신 **함수 내부의 변수로 상태를 관리**할 수 있도록 도와준다. 이렇게 하면 전역 변수를 사용하지 않고도 데이터가 안전하게 유지되며, 다른 코드와 충돌하지 않는 이점을 얻을 수 있다.\r\n\r\n```js\r\nlet counter = 0; // 전역 변수\r\n\r\nfunction incrementCounter() {\r\n counter += 1;\r\n return counter;\r\n}\r\n\r\nconsole.log(incrementCounter()); // 1\r\nconsole.log(incrementCounter()); // 2\r\nconsole.log(counter); // 전역 변수에 접근 가능 (위험)\r\n```\r\n위 코드에서는 `counter`가 전역에 선언되어 있기 때문에 어디서든 접근 가능하여, 이러면 다른 코드에서 `counter`를 실수로 변경할 위험이 있다.\r\n```js\r\nfunction createCounter() {\r\n let counter = 0; // 함수 내부 변수로 관리\r\n\r\n return function() {\r\n counter += 1;\r\n return counter;\r\n };\r\n}\r\n\r\nconst incrementCounter = createCounter();\r\n\r\nconsole.log(incrementCounter()); // 1\r\nconsole.log(incrementCounter()); // 2\r\nconsole.log(typeof counter); // 'undefined' - 전역에서 접근 불가\r\n```\r\n\r\n이 코드에서는 `counter` 변수가 **`createCounter` 함수 내부에만 존재**하므로 외부에서 직접 접근하거나 수정할 수 없다. \r\n\r\n대신, `incrementCounter` 함수는 **클로저를 통해 `counter`를 기억**하고 있으므로 호출할 때마다 `counter`를 안전하게 증가시킬 수 있다.\r\n\r\n이처럼, 클로저를 사용하면 함수 내 지역 변수를 통해 상태를 관리하게 되어 **전역 변수를 사용하지 않아도 안전하게 데이터 상태를 유지**할 수 있다.\r\n\r\n### React의 useState\r\n\r\n이런 이점을 활용하여 react의 useState에도 클로저가 활용된다.\r\n\r\n`useState`를 사용하면 컴포넌트 내에서 **상태를 관리**하게 되는데, 이 상태가 **컴포넌트가 렌더링될 때마다 유지**되도록, 또한 `setState` 함수로만 상태가 변경되도록 하는 데에 클로저가 활용되는 것이다.\r\n\r\n이와 관련하여서는 다음 포스팅에서 자세하게 다룰 예정이다.\r\n\r\n\r\n## 결론\r\n\r\n지금까지 자바스크립트의 어렵지만 주요한 개념인 클로저에 대해 살펴보았다.\r\n\r\n**클로저**는 **함수와 그 함수가 선언된 렉시컬 환경의 조합으로, 자바스크립트에서 함수는 자신이 정의된 위치에 따라 상위 스코프를 결정하는 렉시컬 스코프**를 따르므로, \r\n중첩 함수가 외부 함수의 스코프를 참조하여 외부함수가 생명주기가 끝났음에도 그 함수의 변수를 참조할 수 있는 함수를 의미한다."},{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-09-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0{state}
\r\n \r\n \r\n )\r\n}\r\n```\r\nuseState 반환값의 두 번째 원소를 실행해 리액트에 렌더링이 일어나게끔 변경했다. \r\n그럼에도 여전히 버튼 클릭시 state의 변경된 값이 렌더링되고 있지 않다. \r\n\r\n그 이유는 리액트의 렌더링은 **함수 컴포넌트에서 반환한 결과물인 return의 값을 비교해 실행되기 때문이다.** \r\n\r\n즉, 매번 렌더링이 발생할 때마다 함수는 새롭게 실행이 되고, 실행한 함수에서 state는 매번 hello로 초기화 되므로 아무리 state를 변경해도 hello로 초기화 되는 것이다. \r\n\r\n근데 렌더링이 될 때마다 초기화되는 변수(값)와는 달리, useState의 결과값은 어떻게 그 값을 유지할까?\r\n\r\n\r\n\r\n그럼 우리가 알고있는 useState는 대체 어떻게 구현이 되있는 것일지 한번 최대한 비슷하게 구현한 코드를 살펴보자.\r\n\r\n**먼저 useState의 결과 값이 유지되도록, state를 함수로 하여 state 값을 호출할 때마다 현재 state를 반환하게 해보자.**\r\n```js\r\nfunction useState(initialValue) {\r\n\tlet initialState = initialValue;\r\n\t\r\n\tfunction state() {\r\n\t\treturn initialState\r\n\t}\r\n\tfunction setState(newValue) {\r\n\t\tinitialState = newValue\r\n\t}\r\n\treturn [state, setState];\r\n}\r\nconst [value, setState] = useState(0);\r\nsetValue(1);\r\nconsole.log(value()); // 1\r\n```\r\n위의 코드도 나쁘진 않지만, 우리에게 익숙한 useState훅은 state를 함수가 아닌 상수처럼 사용하고 있다.\r\n어떻게 그게 가능한 걸까?\r\n\r\n## 클로저를 이용해 상태를 관리하는 useState\r\n이를 위해서 리액트는 **클로저**를 이용한 것이다. \r\nuseState는 클로저를 통해 useState 내부의 선언된 함수(setState)가 함수의 실행이 종료된 이후(useState가 호출된 이후)에도 지역변수인 state를 계속 참조할 수 있다.\r\n\r\nuseState 작동 방식을 대략적으로 흉내 낸 코드는 다음과 같다.\r\n\r\n```js\r\nconst MyReact = (function() {\r\n\tconst global = {}\r\n let index = 0\r\n \r\n function useState(initialState){\r\n \tif(!global.states) {\r\n \t// 애플리케이션 전체의 states 배열 초기화, 최초 접근이면 빈 배열로\r\n \tglobal.states = []\r\n }\r\n // states 정보를 조회해서, 현재 상태값이 있는지 확인\r\n // 없다면 초깃값으로 설정\r\n const currentState = global.states[index] || initialState\r\n // 위에서 조회한 값으로 states의 값 업데이트\r\n global.states[index] = currentState\r\n \r\n // 즉시실행함수로 setter 만듬\r\n const setState = (function() {\r\n \t// 클로저로 index를 가둬두어서 동일한 index에 접근이 가능\r\n \tlet currentIndex = index\r\n return function(value){\r\n \tglobal.states[currentIndex] = value\r\n //컴포넌트 렌더링이 들어가는 부분이다.(실제 코드는 생략)\r\n }\r\n })()\r\n // useState를 쓸 때마다 index를 하나씩 추가하는데, 이는 하나의 state마다\r\n // index가 할당되어있어, 그 index가 배열의 값(global.states)를 가리키고,\r\n // 필요할 때마다 그 값을 가져오게 하는 것이다.\r\n index = index + 1\r\n \r\n return [currentState,setState]\r\n}\r\n\r\nfunction Component() {\r\n\tconst [value, setValue] = useState(0);\r\n}\r\n})();\r\n```\r\n\r\n실제 리액트 코드에서는 useReducer를 이용해 구현되어 있어 약간의 차이가 있다.\r\n\r\n아무튼 여기서 함수의 실행이 끝났음에도 함수가 선언된 환경을 기억할 수 있는 방법이 바로 클로저인 것이다. 만약 클로저가 없다면, `setState`는 항상 `index`의 현재 값에 의존하게 된다. 즉, 컴포넌트가 여러 상태를 갖고 있을 때 마지막 `index`만 참조하므로, `setState`가 올바른 위치를 참조하지 않게 되는 것이다.\r\n\r\n매번 실행되는 함수 컴포넌트 환경에서 state의 값을 유지하고 사용하기 위해 리액트는 클로저를 활용하고 있다.\r\n\r\n`\r\n훅에 대한 구현체를 github에서 타고 올라가다보면 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 라는 문구를 만나게된다(무섭다 ㅋㅋ)\r\n위의 코드는 Preact의 구현을 기준으로 하고 있다. Preact는 react의 경량화 버전으로,\r\n대부분의 리액트 API를 지원하고 있다. \r\n`\r\n## 결론\r\nReact의 `useState`는 클로저를 통해 상태값을 안정적으로 유지하며, 함수 컴포넌트가 여러 번 호출되더라도 **각 상태값이 고유한 위치에 저장**될 수 있게 한다. `useState`가 반환하는 `setState` 함수는 생성 당시의 상태 위치(`index`)를 클로저로 캡처하여, 해당 상태값만 정확히 업데이트하도록 구현되어 있다.\r\n\r\n정리하자면, 클로저는 `setState`가 함수가 선언된 당시의 환경을 유지하게 해주기 때문에 **컴포넌트가 매번 재실행될 때마다 상태가 초기화되는 것을 방지**하고, 상태가 올바르게 유지될 수 있게 해준다.\r\n\r\n**참고**\r\n\r\n[서적] 모던 리액트 Deep Dive\r\n"}]},"__N_SSG":true} \ No newline at end of file diff --git "a/_next/data/kbtYb12H_OTxS29UAs1xe/posts/tag/\354\235\264\353\266\204\355\203\220\354\203\211.json" "b/_next/data/kbtYb12H_OTxS29UAs1xe/posts/tag/\354\235\264\353\266\204\355\203\220\354\203\211.json" deleted file mode 100644 index 8b4f1fd..0000000 --- "a/_next/data/kbtYb12H_OTxS29UAs1xe/posts/tag/\354\235\264\353\266\204\355\203\220\354\203\211.json" +++ /dev/null @@ -1 +0,0 @@ -{"pageProps":{"tags":["Algorithm","프로그래머스","PCCP","lv2","이분탐색","react","JavaScript","deepdive","useState","hook","클로저","생명주기","Virtual DOM","백준","gold","dfs","lv3","bfs","all"],"currentTag":"이분탐색","posts":[{"slug":"posts/Algorithm/[PCCP 기출문제]퍼즐게임 챌린지","title":"[PCCP 기출문제] 퍼즐게임 챌린지","date":"2024-10-31T12:05:24.000Z","image":"index.jpg","summary":"프로그래머스 [PCCP 기출문제] level 2 퍼즐게임 챌린지 문제 풀이 입니다.","tags":["Algorithm","프로그래머스","PCCP","lv2","이분탐색"],"content":"# [PCCP 기출문제] 퍼즐게임 챌린지\r\n\r\n## 문제 요약\r\nhttps://school.programmers.co.kr/learn/courses/30/lessons/340212\r\n\r\n숙련도에 따라 퍼즐을 풀 때, \r\n- 각 퍼즐에서 난이도가 숙련도 보다 높다면 **난이도 - 숙련도 만큼 퍼즐이 틀리고, 틀린횟수 * (이전시간 + 현재시간)만큼의 시간이 걸린다.**\r\n- 각 퍼즐에서 난이도가 숙련도 보다 낮거나 같다면 **현재시간만** 투자하면 된다.\r\n\r\n이렇게 모든 퍼즐을 푼 시간의 합이 주어진 limit를 넘지 않도록 하는 숙련도(level)의 최솟값을 구하여야한다. \r\n\r\n(자세한 문제의 내용은 링크를 참고바랍니다.)\r\n\r\n## 문제 접근\r\n레벨의 최솟값을 구하여야 하기에, 처음에는 diffs 난이도 배열에서 최댓값부터 시작하여 1씩 줄어들도록 푸는 브루트포스를 생각했다.\r\n\r\n하지만, 제한사항이 1<=diffs[i]<=100000로 범위가 상당히 크고, diffs의 길이도 1 ≤ diffs의 길이 = times의 길이 = n ≤ 300,000로 제한사항이 주어졌기에\r\n\r\n브루트포스 기법은 무조건 시간초과가 날 것이므로 아닌 다른 방식을 생각해내야한다. \r\n\r\n결국 level의 값을 효율적이고 시간이 적게 들 수 있게 탐색해내야 하므로, O(nlogn)의 시간 복잡도를 가지는 **이분탐색으로 level의 최솟값을 구하면 된다.**\r\n\r\n## 풀이\r\n최대 난이도 이상의 값을 탐색하는 것은 의미가 없으므로, \r\n난이도의 최댓값을 구하여, max_diff로 놓은다음 이를 초기에 r로 설정한다.\r\nl은 난이도의 최솟값인 1로 두고,\r\n\r\n1~max_diff 범위 안에서 레벨의 이분탐색을 진행한다.\r\n\r\n현재 레벨을 변수 `level`로 둘 때,\r\n\r\n각 `level`에서 나올 수 있는 경우는 퍼즐을 푸는 시간의 합이 `limit`보다 **높을 때**와 **낮거나 같을 때**로 나눌 수 있다.\r\n- 시간의 합이 `limit`보다 높을 때: 현재 레벨이 낮기에 그런 것 이므로, 더 높은 레벨을 탐색하기 위해 \r\n`l = level+1` 로 둔다.\r\n\r\n- 시간의 합이 `limit` 보다 낮거나 같을 때: 현재 레벨이 충분히 높기에, 우리는 레벨의 최솟값을 찾아내야 하므로, \r\n`r = level-1`로 두고, 현재 레벨이 답이 될 수도 있기에 `answer = level` 도 추가해야 한다.\r\n\r\n이를 전체 코드로 구현하면 다음과 같다.\r\n\r\n## 전체 코드\r\n```js\r\n def solution(diffs, times, limit):\r\n max_diff = max(diffs)\r\n l = 1\r\n r = max_diff;\r\n answer = max_diff;\r\n while l| stones | \r\nk | \r\nresult | \r\n
|---|---|---|
| [2, 4, 5, 3, 2, 1, 4, 2, 5, 1] | \r\n3 | \r\n3 | \r\n
\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0| rectangle | \r\ncharacterX | \r\ncharacterY | \r\nitemX | \r\nitemY | \r\nresult | \r\n
|---|---|---|---|---|---|
| [[1,1,7,4],[3,2,5,5],[4,3,6,9],[2,6,8,8]] | \r\n1 | \r\n3 | \r\n7 | \r\n8 | \r\n17 | \r\n
| [[1,1,8,4],[2,2,4,9],[3,6,9,8],[6,3,7,7]] | \r\n9 | \r\n7 | \r\n6 | \r\n1 | \r\n11 | \r\n
| [[1,1,5,7]] | \r\n1 | \r\n1 | \r\n4 | \r\n7 | \r\n9 | \r\n
| [[2,1,7,5],[6,4,10,10]] | \r\n3 | \r\n1 | \r\n7 | \r\n10 | \r\n15 | \r\n
| [[2,2,5,5],[1,3,6,4],[3,1,4,6]] | \r\n1 | \r\n4 | \r\n6 | \r\n3 | \r\n10 | \r\n
{state}
\r\n \r\n \r\n )\r\n}\r\n```\r\nuseState 반환값의 두 번째 원소를 실행해 리액트에 렌더링이 일어나게끔 변경했다. \r\n그럼에도 여전히 버튼 클릭시 state의 변경된 값이 렌더링되고 있지 않다. \r\n\r\n그 이유는 리액트의 렌더링은 **함수 컴포넌트에서 반환한 결과물인 return의 값을 비교해 실행되기 때문이다.** \r\n\r\n즉, 매번 렌더링이 발생할 때마다 함수는 새롭게 실행이 되고, 실행한 함수에서 state는 매번 hello로 초기화 되므로 아무리 state를 변경해도 hello로 초기화 되는 것이다. \r\n\r\n근데 렌더링이 될 때마다 초기화되는 변수(값)와는 달리, useState의 결과값은 어떻게 그 값을 유지할까?\r\n\r\n\r\n\r\n그럼 우리가 알고있는 useState는 대체 어떻게 구현이 되있는 것일지 한번 최대한 비슷하게 구현한 코드를 살펴보자.\r\n\r\n**먼저 useState의 결과 값이 유지되도록, state를 함수로 하여 state 값을 호출할 때마다 현재 state를 반환하게 해보자.**\r\n```js\r\nfunction useState(initialValue) {\r\n\tlet initialState = initialValue;\r\n\t\r\n\tfunction state() {\r\n\t\treturn initialState\r\n\t}\r\n\tfunction setState(newValue) {\r\n\t\tinitialState = newValue\r\n\t}\r\n\treturn [state, setState];\r\n}\r\nconst [value, setState] = useState(0);\r\nsetValue(1);\r\nconsole.log(value()); // 1\r\n```\r\n위의 코드도 나쁘진 않지만, 우리에게 익숙한 useState훅은 state를 함수가 아닌 상수처럼 사용하고 있다.\r\n어떻게 그게 가능한 걸까?\r\n\r\n## 클로저를 이용해 상태를 관리하는 useState\r\n이를 위해서 리액트는 **클로저**를 이용한 것이다. \r\nuseState는 클로저를 통해 useState 내부의 선언된 함수(setState)가 함수의 실행이 종료된 이후(useState가 호출된 이후)에도 지역변수인 state를 계속 참조할 수 있다.\r\n\r\nuseState 작동 방식을 대략적으로 흉내 낸 코드는 다음과 같다.\r\n\r\n```js\r\nconst MyReact = (function() {\r\n\tconst global = {}\r\n let index = 0\r\n \r\n function useState(initialState){\r\n \tif(!global.states) {\r\n \t// 애플리케이션 전체의 states 배열 초기화, 최초 접근이면 빈 배열로\r\n \tglobal.states = []\r\n }\r\n // states 정보를 조회해서, 현재 상태값이 있는지 확인\r\n // 없다면 초깃값으로 설정\r\n const currentState = global.states[index] || initialState\r\n // 위에서 조회한 값으로 states의 값 업데이트\r\n global.states[index] = currentState\r\n \r\n // 즉시실행함수로 setter 만듬\r\n const setState = (function() {\r\n \t// 클로저로 index를 가둬두어서 동일한 index에 접근이 가능\r\n \tlet currentIndex = index\r\n return function(value){\r\n \tglobal.states[currentIndex] = value\r\n //컴포넌트 렌더링이 들어가는 부분이다.(실제 코드는 생략)\r\n }\r\n })()\r\n // useState를 쓸 때마다 index를 하나씩 추가하는데, 이는 하나의 state마다\r\n // index가 할당되어있어, 그 index가 배열의 값(global.states)를 가리키고,\r\n // 필요할 때마다 그 값을 가져오게 하는 것이다.\r\n index = index + 1\r\n \r\n return [currentState,setState]\r\n}\r\n\r\nfunction Component() {\r\n\tconst [value, setValue] = useState(0);\r\n}\r\n})();\r\n```\r\n\r\n실제 리액트 코드에서는 useReducer를 이용해 구현되어 있어 약간의 차이가 있다.\r\n\r\n아무튼 여기서 함수의 실행이 끝났음에도 함수가 선언된 환경을 기억할 수 있는 방법이 바로 클로저인 것이다. 만약 클로저가 없다면, `setState`는 항상 `index`의 현재 값에 의존하게 된다. 즉, 컴포넌트가 여러 상태를 갖고 있을 때 마지막 `index`만 참조하므로, `setState`가 올바른 위치를 참조하지 않게 되는 것이다.\r\n\r\n매번 실행되는 함수 컴포넌트 환경에서 state의 값을 유지하고 사용하기 위해 리액트는 클로저를 활용하고 있다.\r\n\r\n`\r\n훅에 대한 구현체를 github에서 타고 올라가다보면 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 라는 문구를 만나게된다(무섭다 ㅋㅋ)\r\n위의 코드는 Preact의 구현을 기준으로 하고 있다. Preact는 react의 경량화 버전으로,\r\n대부분의 리액트 API를 지원하고 있다. \r\n`\r\n## 결론\r\nReact의 `useState`는 클로저를 통해 상태값을 안정적으로 유지하며, 함수 컴포넌트가 여러 번 호출되더라도 **각 상태값이 고유한 위치에 저장**될 수 있게 한다. `useState`가 반환하는 `setState` 함수는 생성 당시의 상태 위치(`index`)를 클로저로 캡처하여, 해당 상태값만 정확히 업데이트하도록 구현되어 있다.\r\n\r\n정리하자면, 클로저는 `setState`가 함수가 선언된 당시의 환경을 유지하게 해주기 때문에 **컴포넌트가 매번 재실행될 때마다 상태가 초기화되는 것을 방지**하고, 상태가 올바르게 유지될 수 있게 해준다.\r\n\r\n**참고**\r\n\r\n[서적] 모던 리액트 Deep Dive\r\n"},{"slug":"posts/Javascript/클로저에 대하여","title":"클로저에 대하여","date":"2024-10-25T20:00:24.000Z","image":"index.png","summary":"자바스크립트의 어렵지만 중요한 클로저의 개념과 활용 이해해보자","tags":["JavaScript","deepdive","클로저","생명주기"],"content":"# 클로저에 대하여\r\n\r\n면접 질문 중 단골이고, 자바스크립트에 관심이 있다면 한번쯤 들어봤을 개념인 **클로저**.\r\n\r\n사실 많이 난해한 개념이기도 하고, 필자 역시 전에 한번 공부를 해보았지만 아직 확실히 와닿지는 않는 개념이다. \r\n\r\n그래서 이번 기회에 제대로 정리하고 넘어가고자 한다. 함께 이 개념이 대체 뭔지 살펴보자.\r\n\r\n## 클로저의 정의\r\n> 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.\r\n\r\n'이게 뭔소리지?' 싶은가? 나도 그러하다. 위의 정의에서 이해하여야 할 핵심 키워드는 **함수가 선언된 렉시컬 환경**이다.\r\n\r\n ```js\r\n const x = 1;\r\n function outerFunc( ) {\r\n\t const x = 10;\r\n\t function innerFunc( ) {\r\n\t\t console.log(x); // 10\r\n\t}\r\n\tinnerFunc( );\r\n}\r\nouterFunc( );\r\n```\r\n`outerFunc` 내부에서 중첩 함수 `innerFunc`가 정의되고 호출되었다. \r\n\r\n따라서 중첩 함수 `innerFunc` 내부에서 자신을 포함하고 있는 `outerFunc`의 x 변수에 접근할 수 있다. **만약 innerFunc 함수가 outerFunc의 내부에서 정의되지 않았다면, 즉 외부에서 별도로 정의 되었다면** innerFunc를 outerFunc 내부에서 호출해도 outerFunc 함수의 변수에 접근이 불가능하다.\r\n\r\n ```js\r\n const x = 1;\r\n function outerFunc( ) {\r\n\t const x = 10;\r\n\t// 안에서 호출되었지만 접근 불가능\r\n\t innerFunc( );\r\n}\r\nfunction innerFunc( ) {\r\n\t// 상위 스코프인 전역에서 선언된 1\r\n\tconsole.log(x); // 1\r\n}\r\nouterFunc( );\r\n```\r\n\r\n위와 같은 현상은 자바스크립트가 **렉시컬 스코프**를 따르기에 발생한다.\r\n\r\n## 렉시컬 스코프\r\n자바스크립트 엔진은 함수를 **어디서 호출했느냐**가 아니라 함수를 **어디서 정의했는지**에 따라 **상위 스코프를 결정** 한다. \r\n\r\n이를 **렉시컬 스코프**라고 한다.\r\n\r\n위의 예제코드를 다시한번 본다면, outerFunc와 innerFunc는 모두 전역에서 정의 되었고, 함수의 상위 스코프는 함수를 어디서 정의했는지에 따라 결정되므로 **두 함수의 상위 스코프는 모두 전역이다.**\r\n\r\n함수의 상위 스코프는 결국, **함수의 정의된 위치에 따라 정적으로 결정**되고, 함수의 호출된 위치는 어떠한 영향도 주지 못한다.\r\n\r\n>렉시컬환경: **변수를 저장하고 외부 스코프와 연결을 유지하는 객체**라고 생각하면된다. 자바스크립트에서는 함수가 생성될 때마다 렉시컬 환경이 만들어지며, 함수 내부의 변수뿐 아니라 함수가 선언된 위치에 있는 외부 변수도 기억하게된다.\r\n>\r\n> 코드가 위치한 곳에 따라 **변수와 함수를 어디서 찾아볼지 알려주는 일종의 \"지도\"**라고 생각할 수도 있다\r\n\r\n\r\n렉시컬 환경은 자신의 **외부 렉시컬 환경에 대한 참조**를 통해 상위 렉시컬 환경과 연결이된다.\r\n\r\n따라서 함수의 상위 스코프를 결정한다는 것은, 현재 함수의 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참조값을 결정한다는 것을 의미한다.\r\n\r\n렉시컬 스코프를 다시한번 정의해보자면, 렉시컬 환경의 \"외부 렉시컬 환경에 대한 참조\"에 저장한 참조값, 즉 상위 스코프에 대한 참조는 **함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)**에 의해 결정되는 것이라고 할 수 있다. \r\n\r\n\r\n\r\n**함수는 자신의 내부슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다.** \r\n이곳을 참조해서 자신이 호출되었을 때 생성될 함수 렉시컬환경의 \"외부 렉시컬 환경에 대한 참조\"에 저장될 참조값을 보고, 자신이 존재하는 한, 이 [[Environment]] 슬롯에 저장한 렉시컬 환경의 참조, 즉 **상위 스코프**를 기억한다.\r\n\r\n## 클로저와 렉시컬환경\r\n그렇다면 다음의 코드를 살펴보자\r\n```js\r\nconst x = 1 ;\r\nfunction outer() {\r\n\tconst x = 10;\r\n\tconst inner = function ( ) {console.log(x)}\r\n\t//inner함수 반환\r\n\treturn inner;\r\n}\r\n// outer함수를 호출하면 중첩 함수 inner를 반환한다.\r\n// 그리고 outer 함수의 실행 컨텍스트는 제거된다.\r\nconst innerFunc = outer( );\r\ninnerFunc( )// 10\r\n```\r\nouter함수를 호출하면 outer함수는 중첩함수 inner를 반환하고 생명주기를 마감한다. \r\n\r\n즉 outer함수의 실행이 종료되었으므로, 실행컨텍스트가 제거된다. (실행컨텍스트 스택에서 pop된다.)\r\n\r\n이때 outer 함수의 지역변수x 역시 생명주기를 마감했으므로, 실행 컨텍스트가 제거되어 유효하지 않아 보인다.\r\n\r\n그러나 위의 실행 결과는 outer 지역 변수x 의 값인 10을 반환한다. 이미 생명 주기가 종료되어 outer 함수의 지역변수 x가 실행 컨텍스트 스택에서 제거되었는데도 다시 부활이라도 한 것 마냥 말이다. \r\n\r\n이처럼 **외부 함수보다 중첩함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부함수의 변수를 참조**할 수 있다. \r\n\r\n이러한 **중첩 함수를 클로저**라고 부른다.\r\n\r\n다시 정의로 돌아가보자.\r\n> 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.\r\n\r\n위 정의를 예제에 대입해보자면 `함수`는 반환된 `중첩함수(inner)`를 의미하고 `그 함수가 선언될 때의 렉시컬 환경(Lexical environment)`란 그 `중첩 함수(inner)가 정의됐을 때의 스코프`를 의미하는 것이다.\r\n\r\n즉, **클로저는 반환된 중첩 함수가 자신이 선언됐을 때의 렉시컬 환경 즉, 스코프를 기억하여 자신이 선언됐을 때의 렉시컬 환경 밖에서 호출되어도 그 렉시컬 환경(스코프)에 접근할 수 있는 함수**를 말한다. \r\n\r\n조금 더 간단히 말하면 **클로저는 자신이 생성될 때의 상위 스코프(렉시컬 환경)을 기억하는 함수이다**\r\n\r\n\r\n\r\n\r\ninner 함수의 [[Environment]] 슬롯이 outer 함수의 렉시컬 환경을 참조하고, inner가 전역 변수 innerFunc에 저장되어 계속 사용되고 있으므로, 이와 연결된 모든 요소는 가비지 컬렉터에 의해 제거되지 않습니다.\r\n\r\n\r\n> **가비지 컬렉터(Garbage Collector)는 프로그램이 더 이상 사용하지 않는 메모리를 자동으로 해제해 주는 자바스크립트 엔진의 기능**이다.\r\n> \r\n> 가비지 컬렉터는 특정 메모리 공간이 더 이상 참조되지 않을 때 그 공간을 \"가비지\"로 판단하여 메모리를 해제한다. 반대로, **누군가가 참조하고 있는 메모리 공간은 함부로 해제하지 않는다**.\r\n\r\n클로저는 자바스크립트의 강력한 기능으로, 필요하다면 적극 활용해야 한다. 클로저가 유용하게 사용되는 상황을 살펴보자.\r\n\r\n## 클로저의 활용\r\n\r\n### 상태를 안전하게 변경하고 유지할 때\r\n\r\n클로저는 **상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고, 특정 함수에게만 상태 변경을 허용하여, 상태를 안전하게 변경하고 유지할 수 있도록 사용한다.**\r\n```js\r\nconst counter = (function ( ) {\r\n// 은닉된 상태 (외부에서 접근 불가)\r\nlet num = 0;\r\n// 클로저인 메서드를 갖는 객체를 반환한다.\r\n// 객체 리터럴은 스코프를 만들지 않는다.\r\n// 따라서 아래 메서드들의 상위 스코프는 즉시 실행 함수의 렉시컬 환경이다.\r\nreturn {\r\n\tincrease() {\r\n\t\treturn ++num;\r\n\t}\r\n\tdecrease() {\r\n\t\treturn num>0? --num: 0;\r\n\t}\r\n}());\r\n\r\nconsole.log(counter.increase()); // 1\r\nconsole.log(counter.decrease()); // 2\r\n\r\nconsole.log(counter.decrease()); // 1\r\nconsole.log(counter.decrease()); // 0\r\n```\r\n즉시 실행 함수는 호출된 이후 소멸되지만, 즉시 실행 함수가 반환한 클로저(increase, decrease)는 **자신의 상위 스코프인 즉시 실행함수의 렉시컬 환경을 기억하고 있다**. \r\n\r\n이 코드에서 \r\n- 카운터 상태(num 변수의 값)은 increase, decrease 함수가 호출되기 전까지 변경되지않고 유지되며 **외부에서 접근할 수 없다**.\r\n- 카운터 상태는 오직 **increase, decrease로 정의된 함수로만 변경이 가능**하다.\r\n\r\n\r\n\r\n이처럼 클로저는 **상태가 의도치 않게 변경되지 않도록 안전하게 은닉하고 특정함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용**된다.\r\n\r\n### 전역변수의 사용을 억제할 때\r\n\r\n클로저는 전역 변수 사용을 억제하고 대신 **함수 내부의 변수로 상태를 관리**할 수 있도록 도와준다. 이렇게 하면 전역 변수를 사용하지 않고도 데이터가 안전하게 유지되며, 다른 코드와 충돌하지 않는 이점을 얻을 수 있다.\r\n\r\n```js\r\nlet counter = 0; // 전역 변수\r\n\r\nfunction incrementCounter() {\r\n counter += 1;\r\n return counter;\r\n}\r\n\r\nconsole.log(incrementCounter()); // 1\r\nconsole.log(incrementCounter()); // 2\r\nconsole.log(counter); // 전역 변수에 접근 가능 (위험)\r\n```\r\n위 코드에서는 `counter`가 전역에 선언되어 있기 때문에 어디서든 접근 가능하여, 이러면 다른 코드에서 `counter`를 실수로 변경할 위험이 있다.\r\n```js\r\nfunction createCounter() {\r\n let counter = 0; // 함수 내부 변수로 관리\r\n\r\n return function() {\r\n counter += 1;\r\n return counter;\r\n };\r\n}\r\n\r\nconst incrementCounter = createCounter();\r\n\r\nconsole.log(incrementCounter()); // 1\r\nconsole.log(incrementCounter()); // 2\r\nconsole.log(typeof counter); // 'undefined' - 전역에서 접근 불가\r\n```\r\n\r\n이 코드에서는 `counter` 변수가 **`createCounter` 함수 내부에만 존재**하므로 외부에서 직접 접근하거나 수정할 수 없다. \r\n\r\n대신, `incrementCounter` 함수는 **클로저를 통해 `counter`를 기억**하고 있으므로 호출할 때마다 `counter`를 안전하게 증가시킬 수 있다.\r\n\r\n이처럼, 클로저를 사용하면 함수 내 지역 변수를 통해 상태를 관리하게 되어 **전역 변수를 사용하지 않아도 안전하게 데이터 상태를 유지**할 수 있다.\r\n\r\n### React의 useState\r\n\r\n이런 이점을 활용하여 react의 useState에도 클로저가 활용된다.\r\n\r\n`useState`를 사용하면 컴포넌트 내에서 **상태를 관리**하게 되는데, 이 상태가 **컴포넌트가 렌더링될 때마다 유지**되도록, 또한 `setState` 함수로만 상태가 변경되도록 하는 데에 클로저가 활용되는 것이다.\r\n\r\n이와 관련하여서는 다음 포스팅에서 자세하게 다룰 예정이다.\r\n\r\n\r\n## 결론\r\n\r\n지금까지 자바스크립트의 어렵지만 주요한 개념인 클로저에 대해 살펴보았다.\r\n\r\n**클로저**는 **함수와 그 함수가 선언된 렉시컬 환경의 조합으로, 자바스크립트에서 함수는 자신이 정의된 위치에 따라 상위 스코프를 결정하는 렉시컬 스코프**를 따르므로, \r\n중첩 함수가 외부 함수의 스코프를 참조하여 외부함수가 생명주기가 끝났음에도 그 함수의 변수를 참조할 수 있는 함수를 의미한다."},{"slug":"posts/React/[React DeepDive] React의 가상 DOM","title":"[React DeepDive] React의 가상 DOM","date":"2024-09-25T12:00:24.000Z","image":"React.svg","summary":"리액트 딥다이브 책 내용 중 '가상 DOM과 파이버'의 정리 내용입니다.","tags":["react","deepdive","Virtual DOM"],"content":"# [React DeepDive] React의 가상 DOM\r\n\r\n\r\n리액트의 특징 중 하나는 실제 DOM이 아닌 가상 DOM을 운영한다는 것이다. 이번 글에서는 React DeepDive에서 다루는 **가상 DOM이 무엇인지**, **그리고 실제 DOM에 대해 어떤 이점이 있는지 살펴보고**, 가상 DOM을 다룰 때 **주의할 점**에 대해서도 다루려고 한다.\r\n\r\n## DOM과 브라우저 렌더링 과정\r\n> **DOM**: 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다.\r\n\r\n브라우저가 웹사이트 접근 요청을 받고 화면을 그리는 과정은 다음과 같다.\r\n\r\n\r\n\r\n\r\n그림처럼 0을 표현하면 3번자리를 제외한 모든 번호가 켜져있으므로, `[0,1,2,4,5,6]`으로 표현 할 수 있다.\r\n\r\n각 번호를 이와 같이 바꾸어 numbers 배열에 저장하면, 이와 같다.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n이후 만일 현재 번호와 비교할 번호의 LED를 비교하기 위해 서로의 차집합을 더해서 두 번호가 서로를 비교했을 때, 가지고 있는 혹은 없는 번호의 개수를 구한다.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n이와 같은 방식으로 반전시킬 LED의 개수를 구하고, dfs를 활용하여 x의 모든 자릿수를 순회하여 p보다 작거나 같게 LED를 반전하면서, n보다 번호가 작거나 같다면 result를 1 증가 시킨다.\r\n\r\n전체코드는 다음과 같다.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k 보다 자릿수 x가 자릿수가 작다면 작은 만큼 앞에 0을 채워주어야 한다.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0{state}
\r\n \r\n \r\n )\r\n}\r\n```\r\nuseState 반환값의 두 번째 원소를 실행해 리액트에 렌더링이 일어나게끔 변경했다. \r\n그럼에도 여전히 버튼 클릭시 state의 변경된 값이 렌더링되고 있지 않다. \r\n\r\n그 이유는 리액트의 렌더링은 **함수 컴포넌트에서 반환한 결과물인 return의 값을 비교해 실행되기 때문이다.** \r\n\r\n즉, 매번 렌더링이 발생할 때마다 함수는 새롭게 실행이 되고, 실행한 함수에서 state는 매번 hello로 초기화 되므로 아무리 state를 변경해도 hello로 초기화 되는 것이다. \r\n\r\n근데 렌더링이 될 때마다 초기화되는 변수(값)와는 달리, useState의 결과값은 어떻게 그 값을 유지할까?\r\n\r\n\r\n\r\n그럼 우리가 알고있는 useState는 대체 어떻게 구현이 되있는 것일지 한번 최대한 비슷하게 구현한 코드를 살펴보자.\r\n\r\n**먼저 useState의 결과 값이 유지되도록, state를 함수로 하여 state 값을 호출할 때마다 현재 state를 반환하게 해보자.**\r\n```js\r\nfunction useState(initialValue) {\r\n\tlet initialState = initialValue;\r\n\t\r\n\tfunction state() {\r\n\t\treturn initialState\r\n\t}\r\n\tfunction setState(newValue) {\r\n\t\tinitialState = newValue\r\n\t}\r\n\treturn [state, setState];\r\n}\r\nconst [value, setState] = useState(0);\r\nsetValue(1);\r\nconsole.log(value()); // 1\r\n```\r\n위의 코드도 나쁘진 않지만, 우리에게 익숙한 useState훅은 state를 함수가 아닌 상수처럼 사용하고 있다.\r\n어떻게 그게 가능한 걸까?\r\n\r\n## 클로저를 이용해 상태를 관리하는 useState\r\n이를 위해서 리액트는 **클로저**를 이용한 것이다. \r\nuseState는 클로저를 통해 useState 내부의 선언된 함수(setState)가 함수의 실행이 종료된 이후(useState가 호출된 이후)에도 지역변수인 state를 계속 참조할 수 있다.\r\n\r\nuseState 작동 방식을 대략적으로 흉내 낸 코드는 다음과 같다.\r\n\r\n```js\r\nconst MyReact = (function() {\r\n\tconst global = {}\r\n let index = 0\r\n \r\n function useState(initialState){\r\n \tif(!global.states) {\r\n \t// 애플리케이션 전체의 states 배열 초기화, 최초 접근이면 빈 배열로\r\n \tglobal.states = []\r\n }\r\n // states 정보를 조회해서, 현재 상태값이 있는지 확인\r\n // 없다면 초깃값으로 설정\r\n const currentState = global.states[index] || initialState\r\n // 위에서 조회한 값으로 states의 값 업데이트\r\n global.states[index] = currentState\r\n \r\n // 즉시실행함수로 setter 만듬\r\n const setState = (function() {\r\n \t// 클로저로 index를 가둬두어서 동일한 index에 접근이 가능\r\n \tlet currentIndex = index\r\n return function(value){\r\n \tglobal.states[currentIndex] = value\r\n //컴포넌트 렌더링이 들어가는 부분이다.(실제 코드는 생략)\r\n }\r\n })()\r\n // useState를 쓸 때마다 index를 하나씩 추가하는데, 이는 하나의 state마다\r\n // index가 할당되어있어, 그 index가 배열의 값(global.states)를 가리키고,\r\n // 필요할 때마다 그 값을 가져오게 하는 것이다.\r\n index = index + 1\r\n \r\n return [currentState,setState]\r\n}\r\n\r\nfunction Component() {\r\n\tconst [value, setValue] = useState(0);\r\n}\r\n})();\r\n```\r\n\r\n실제 리액트 코드에서는 useReducer를 이용해 구현되어 있어 약간의 차이가 있다.\r\n\r\n아무튼 여기서 함수의 실행이 끝났음에도 함수가 선언된 환경을 기억할 수 있는 방법이 바로 클로저인 것이다. 만약 클로저가 없다면, `setState`는 항상 `index`의 현재 값에 의존하게 된다. 즉, 컴포넌트가 여러 상태를 갖고 있을 때 마지막 `index`만 참조하므로, `setState`가 올바른 위치를 참조하지 않게 되는 것이다.\r\n\r\n매번 실행되는 함수 컴포넌트 환경에서 state의 값을 유지하고 사용하기 위해 리액트는 클로저를 활용하고 있다.\r\n\r\n`\r\n훅에 대한 구현체를 github에서 타고 올라가다보면 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 라는 문구를 만나게된다(무섭다 ㅋㅋ)\r\n위의 코드는 Preact의 구현을 기준으로 하고 있다. Preact는 react의 경량화 버전으로,\r\n대부분의 리액트 API를 지원하고 있다. \r\n`\r\n## 결론\r\nReact의 `useState`는 클로저를 통해 상태값을 안정적으로 유지하며, 함수 컴포넌트가 여러 번 호출되더라도 **각 상태값이 고유한 위치에 저장**될 수 있게 한다. `useState`가 반환하는 `setState` 함수는 생성 당시의 상태 위치(`index`)를 클로저로 캡처하여, 해당 상태값만 정확히 업데이트하도록 구현되어 있다.\r\n\r\n정리하자면, 클로저는 `setState`가 함수가 선언된 당시의 환경을 유지하게 해주기 때문에 **컴포넌트가 매번 재실행될 때마다 상태가 초기화되는 것을 방지**하고, 상태가 올바르게 유지될 수 있게 해준다.\r\n\r\n**참고**\r\n\r\n[서적] 모던 리액트 Deep Dive\r\n"}]},"__N_SSG":true} \ No newline at end of file diff --git "a/_next/data/kbtYb12H_OTxS29UAs1xe/posts/tag/\353\260\261\354\244\200.json" "b/_next/data/pwbOjWHyyP97zls4vVRix/posts/tag/\353\260\261\354\244\200.json" similarity index 100% rename from "_next/data/kbtYb12H_OTxS29UAs1xe/posts/tag/\353\260\261\354\244\200.json" rename to "_next/data/pwbOjWHyyP97zls4vVRix/posts/tag/\353\260\261\354\244\200.json" diff --git "a/_next/data/kbtYb12H_OTxS29UAs1xe/posts/tag/\354\203\235\353\252\205\354\243\274\352\270\260.json" "b/_next/data/pwbOjWHyyP97zls4vVRix/posts/tag/\354\203\235\353\252\205\354\243\274\352\270\260.json" similarity index 100% rename from "_next/data/kbtYb12H_OTxS29UAs1xe/posts/tag/\354\203\235\353\252\205\354\243\274\352\270\260.json" rename to "_next/data/pwbOjWHyyP97zls4vVRix/posts/tag/\354\203\235\353\252\205\354\243\274\352\270\260.json" diff --git "a/_next/data/pwbOjWHyyP97zls4vVRix/posts/tag/\354\235\264\353\266\204\355\203\220\354\203\211.json" "b/_next/data/pwbOjWHyyP97zls4vVRix/posts/tag/\354\235\264\353\266\204\355\203\220\354\203\211.json" new file mode 100644 index 0000000..31f641a --- /dev/null +++ "b/_next/data/pwbOjWHyyP97zls4vVRix/posts/tag/\354\235\264\353\266\204\355\203\220\354\203\211.json" @@ -0,0 +1 @@ +{"pageProps":{"tags":["Algorithm","프로그래머스","PCCP","lv2","이분탐색","react","JavaScript","deepdive","useState","hook","클로저","생명주기","Virtual DOM","백준","gold","dfs","lv3","bfs"],"currentTag":"이분탐색","posts":[{"slug":"posts/Algorithm/[PCCP 기출문제]퍼즐게임 챌린지","title":"[PCCP 기출문제] 퍼즐게임 챌린지","date":"2024-10-31T12:05:24.000Z","image":"index.jpg","summary":"프로그래머스 [PCCP 기출문제] level 2 퍼즐게임 챌린지 문제 풀이 입니다.","tags":["Algorithm","프로그래머스","PCCP","lv2","이분탐색"],"content":"# [PCCP 기출문제] 퍼즐게임 챌린지\r\n\r\n## 문제 요약\r\nhttps://school.programmers.co.kr/learn/courses/30/lessons/340212\r\n\r\n숙련도에 따라 퍼즐을 풀 때, \r\n- 각 퍼즐에서 난이도가 숙련도 보다 높다면 **난이도 - 숙련도 만큼 퍼즐이 틀리고, 틀린횟수 * (이전시간 + 현재시간)만큼의 시간이 걸린다.**\r\n- 각 퍼즐에서 난이도가 숙련도 보다 낮거나 같다면 **현재시간만** 투자하면 된다.\r\n\r\n이렇게 모든 퍼즐을 푼 시간의 합이 주어진 limit를 넘지 않도록 하는 숙련도(level)의 최솟값을 구하여야한다. \r\n\r\n(자세한 문제의 내용은 링크를 참고바랍니다.)\r\n\r\n## 문제 접근\r\n레벨의 최솟값을 구하여야 하기에, 처음에는 diffs 난이도 배열에서 최댓값부터 시작하여 1씩 줄어들도록 푸는 브루트포스를 생각했다.\r\n\r\n하지만, 제한사항이 1<=diffs[i]<=100000로 범위가 상당히 크고, diffs의 길이도 1 ≤ diffs의 길이 = times의 길이 = n ≤ 300,000로 제한사항이 주어졌기에\r\n\r\n브루트포스 기법은 무조건 시간초과가 날 것이므로 아닌 다른 방식을 생각해내야한다. \r\n\r\n결국 level의 값을 효율적이고 시간이 적게 들 수 있게 탐색해내야 하므로, O(nlogn)의 시간 복잡도를 가지는 **이분탐색으로 level의 최솟값을 구하면 된다.**\r\n\r\n## 풀이\r\n최대 난이도 이상의 값을 탐색하는 것은 의미가 없으므로, \r\n난이도의 최댓값을 구하여, max_diff로 놓은다음 이를 초기에 r로 설정한다.\r\nl은 난이도의 최솟값인 1로 두고,\r\n\r\n1~max_diff 범위 안에서 레벨의 이분탐색을 진행한다.\r\n\r\n현재 레벨을 변수 `level`로 둘 때,\r\n\r\n각 `level`에서 나올 수 있는 경우는 퍼즐을 푸는 시간의 합이 `limit`보다 **높을 때**와 **낮거나 같을 때**로 나눌 수 있다.\r\n- 시간의 합이 `limit`보다 높을 때: 현재 레벨이 낮기에 그런 것 이므로, 더 높은 레벨을 탐색하기 위해 \r\n`l = level+1` 로 둔다.\r\n\r\n- 시간의 합이 `limit` 보다 낮거나 같을 때: 현재 레벨이 충분히 높기에, 우리는 레벨의 최솟값을 찾아내야 하므로, \r\n`r = level-1`로 두고, 현재 레벨이 답이 될 수도 있기에 `answer = level` 도 추가해야 한다.\r\n\r\n이를 전체 코드로 구현하면 다음과 같다.\r\n\r\n## 전체 코드\r\n```js\r\n def solution(diffs, times, limit):\r\n max_diff = max(diffs)\r\n l = 1\r\n r = max_diff;\r\n answer = max_diff;\r\n while l| stones | \r\nk | \r\nresult | \r\n
|---|---|---|
| [2, 4, 5, 3, 2, 1, 4, 2, 5, 1] | \r\n3 | \r\n3 | \r\n