| 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
| 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
![\"이미지](\"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{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\nuseState의 결과 값이 유지되도록, 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## 클로저를 이용해 상태를 관리하는 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**함수는 자신의 내부슬롯 [[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위 정의를 예제에 대입해보자면 `함수`는 반환된 `중첩함수(innerFunc)`를 의미하고 `그 함수가 선언될 때의 렉시컬 환경(Lexical environment)`란 그 `중첩 함수(innerFunc)가 정의됐을 때의 스코프`를 의미하는 것이다.\r\n\r\n즉, **클로저는 반환된 중첩 함수가 자신이 선언됐을 때의 렉시컬 환경 즉, 스코프를 기억하여 자신이 선언됐을 때의 렉시컬 환경 밖에서 호출되어도 그 렉시컬 환경(스코프)에 접근할 수 있는 함수**를 말한다. \r\n\r\n조금 더 간단히 말하면 **클로저는 자신이 생성될 때의 상위 스코프(렉시컬 환경)을 기억하는 함수이다**\r\n\r\n![](\"그림1.jpg\")
\r\n\r\n\r\n위 그림처럼 inner함수의 [[Environment]] 내부 슬롯에 의해 outer의 렉시컬 환경(outer Lexical Environment)가 참조되어 있다. 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중첩 함수가 외부 함수의 스코프를 참조하여 외부함수가 생명주기가 끝났음에도 그 함수의 변수를 참조할 수 있는 함수를 의미한다."}]},"__N_SSG":true}
\ No newline at end of file
diff --git "a/_next/data/RYnp_NyzrQPZMofDPtHX9/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.json" "b/_next/data/6z_NmOq0sgJymZX5w6fz3/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.json"
similarity index 100%
rename from "_next/data/RYnp_NyzrQPZMofDPtHX9/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.json"
rename to "_next/data/6z_NmOq0sgJymZX5w6fz3/posts/tag/\355\224\204\353\241\234\352\267\270\353\236\230\353\250\270\354\212\244.json"
diff --git a/_next/data/RYnp_NyzrQPZMofDPtHX9/posts/tag/Algorithm.json b/_next/data/RYnp_NyzrQPZMofDPtHX9/posts/tag/Algorithm.json
deleted file mode 100644
index 3f59bb1..0000000
--- a/_next/data/RYnp_NyzrQPZMofDPtHX9/posts/tag/Algorithm.json
+++ /dev/null
@@ -1 +0,0 @@
-{"pageProps":{"tags":["react","JavaScript","deepdive","useState","hook","클로저","생명주기","Virtual DOM","Algorithm","백준","gold","dfs","프로그래머스","lv3","bfs","이분탐색","all"],"currentTag":"Algorithm","posts":[{"slug":"posts/Algorithm/[백준 gold 5] 빌런 호석","title":"[백준 gold 5] 빌런 호석","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs을 활용한 프로그래머스 [level 3] 징검다리 건너기 문제 풀이 입니다.","tags":["Algorithm","백준","gold","dfs"],"content":"# [gold 3] 빌런 호석\r\n\r\n## 문제 설명\r\n\r\n치르보기 빌딩은 11층부터 NN층까지 이용이 가능한 엘리베이터가 있다. 엘리베이터의 층수를 보여주는 디스플레이에는 KK 자리의 수가 보인다. 수는 00으로 시작할 수도 있다. 00부터 99까지의 각 숫자가 디스플레이에 보이는 방식은 아래와 같다. 각 숫자는 7개의 표시등 중의 일부에 불이 들어오면서 표현된다.\r\n\r\n\r\n\r\n예를 들어 K=4K=4인 경우에 16801680층과 501501층은 아래와 같이 보인다.\r\n\r\n\r\n\r\n\r\n\r\n빌런 호석은 치르보기 빌딩의 엘리베이터 디스플레이의 LED 중에서 최소 11개, 최대 PP개를 반전시킬 계획을 세우고 있다. 반전이란 켜진 부분은 끄고, 꺼진 부분은 켜는 것을 의미한다. 예를 들어 숫자 11을 22로 바꾸려면 총 5개의 LED를 반전시켜야 한다. 또한 반전 이후에 디스플레이에 올바른 수가 보여지면서 11 이상 NN 이하가 되도록 바꿔서 사람들을 헷갈리게 할 예정이다. 치르보기를 사랑하는 모임의 회원인 당신은 호석 빌런의 행동을 미리 파악해서 혼쭐을 내주고자 한다. 현재 엘리베이터가 실제로는 XX층에 멈춰있을 때, 호석이가 반전시킬 LED를 고를 수 있는 경우의 수를 계산해보자.\r\n\r\n### 입력\r\n\r\n N,K,P,XN,K,P,X 가 공백으로 구분되어 첫째 줄에 주어진다.\r\n\r\n### 출력\r\n\r\n호석 빌런이 엘리베이터 LED를 올바르게 반전시킬 수 있는 경우의 수를 계산해보자.\r\n\r\n## 접근 방법\r\n\r\n숫자에 따른 LED를 먼저 구현하기 위해, \r\n\r\n그림과 같이, 각 LED의 위치에 번호를 매겨, 배열안에 그 번호가 있으면 불이 켜져있는 것으로, 없다면 불이 꺼져 있는 것으로 표현하였다.\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\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\nuseState의 결과 값이 유지되도록, 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## 클로저를 이용해 상태를 관리하는 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**함수는 자신의 내부슬롯 [[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위 정의를 예제에 대입해보자면 `함수`는 반환된 `중첩함수(innerFunc)`를 의미하고 `그 함수가 선언될 때의 렉시컬 환경(Lexical environment)`란 그 `중첩 함수(innerFunc)가 정의됐을 때의 스코프`를 의미하는 것이다.\r\n\r\n즉, **클로저는 반환된 중첩 함수가 자신이 선언됐을 때의 렉시컬 환경 즉, 스코프를 기억하여 자신이 선언됐을 때의 렉시컬 환경 밖에서 호출되어도 그 렉시컬 환경(스코프)에 접근할 수 있는 함수**를 말한다. \r\n\r\n조금 더 간단히 말하면 **클로저는 자신이 생성될 때의 상위 스코프(렉시컬 환경)을 기억하는 함수이다**\r\n\r\n\r\n\r\n\r\n위 그림처럼 inner함수의 [[Environment]] 내부 슬롯에 의해 outer의 렉시컬 환경(outer Lexical Environment)가 참조되어 있다. 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중첩 함수가 외부 함수의 스코프를 참조하여 외부함수가 생명주기가 끝났음에도 그 함수의 변수를 참조할 수 있는 함수를 의미한다."}]},"__N_SSG":true}
\ No newline at end of file
diff --git a/_next/static/RYnp_NyzrQPZMofDPtHX9/_buildManifest.js b/_next/static/6z_NmOq0sgJymZX5w6fz3/_buildManifest.js
similarity index 92%
rename from _next/static/RYnp_NyzrQPZMofDPtHX9/_buildManifest.js
rename to _next/static/6z_NmOq0sgJymZX5w6fz3/_buildManifest.js
index 9fee45f..6f3840e 100644
--- a/_next/static/RYnp_NyzrQPZMofDPtHX9/_buildManifest.js
+++ b/_next/static/6z_NmOq0sgJymZX5w6fz3/_buildManifest.js
@@ -1 +1 @@
-self.__BUILD_MANIFEST=function(s,c,t,a){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,c,t,a,"static/chunks/pages/index-29ef57cf887c10bb.js"],"/_error":["static/chunks/pages/_error-ee5b5fb91d29d86f.js"],"/posts/search":[s,c,t,a,"static/chunks/pages/posts/search-369a7036ab19d85c.js"],"/posts/tag/[tag]":[s,c,t,a,"static/chunks/pages/posts/tag/[tag]-9c29e7860c712dac.js"],"/posts/[category]":[s,c,t,a,"static/chunks/pages/posts/[category]-731f2768a845326a.js"],"/[...detail]":[s,c,t,"static/chunks/393-7217afb82985f4a5.js",a,"static/chunks/pages/[...detail]-8188b3d88e2a5757.js"],sortedPages:["/","/_app","/_error","/posts/search","/posts/tag/[tag]","/posts/[category]","/[...detail]"]}}("static/css/570acc098c248c2f.css","static/css/0407c34f82b3c3db.css","static/chunks/135-4ea70e0295549ad8.js","static/chunks/979-7390dd4fc9e19803.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
\ No newline at end of file
+self.__BUILD_MANIFEST=function(s,c,t,a){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,c,t,a,"static/chunks/pages/index-29ef57cf887c10bb.js"],"/_error":["static/chunks/pages/_error-ee5b5fb91d29d86f.js"],"/posts/search":[s,c,t,a,"static/chunks/pages/posts/search-369a7036ab19d85c.js"],"/posts/tag/[tag]":[s,c,t,a,"static/chunks/pages/posts/tag/[tag]-9c29e7860c712dac.js"],"/posts/[category]":[s,c,t,a,"static/chunks/pages/posts/[category]-731f2768a845326a.js"],"/[...detail]":[s,c,t,"static/chunks/393-7217afb82985f4a5.js",a,"static/chunks/pages/[...detail]-c311debfc124ca6f.js"],sortedPages:["/","/_app","/_error","/posts/search","/posts/tag/[tag]","/posts/[category]","/[...detail]"]}}("static/css/570acc098c248c2f.css","static/css/0407c34f82b3c3db.css","static/chunks/135-4ea70e0295549ad8.js","static/chunks/979-7390dd4fc9e19803.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
\ No newline at end of file
diff --git a/_next/static/RYnp_NyzrQPZMofDPtHX9/_ssgManifest.js b/_next/static/6z_NmOq0sgJymZX5w6fz3/_ssgManifest.js
similarity index 100%
rename from _next/static/RYnp_NyzrQPZMofDPtHX9/_ssgManifest.js
rename to _next/static/6z_NmOq0sgJymZX5w6fz3/_ssgManifest.js
diff --git a/_next/static/chunks/pages/[...detail]-8188b3d88e2a5757.js b/_next/static/chunks/pages/[...detail]-c311debfc124ca6f.js
similarity index 77%
rename from _next/static/chunks/pages/[...detail]-8188b3d88e2a5757.js
rename to _next/static/chunks/pages/[...detail]-c311debfc124ca6f.js
index 4626e93..4f38bc4 100644
--- a/_next/static/chunks/pages/[...detail]-8188b3d88e2a5757.js
+++ b/_next/static/chunks/pages/[...detail]-c311debfc124ca6f.js
@@ -1 +1 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[492],{6069:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/[...detail]",function(){return r(17)}])},588:function(e,t,r){"use strict";var s=r(5893),a=r(1664),l=r.n(a);t.Z=e=>(0,s.jsx)(l(),{href:"/posts/tag/".concat(e.name),className:"w-fit h-fit px-2 py-1 transition-all bg-gray-100 rounded-lg md:text-sm sm:text-xs dark:bg-dark-secondary dark:hover:text-white hover:bg-tag-hover dark:hover:bg-tag-dark-hover",children:e.name})},17:function(e,t,r){"use strict";r.r(t),r.d(t,{PostDetailPage:function(){return er},__N_SSG:function(){return et},default:function(){return es}});var s,a,l,n,o=r(5893),i=r(8080),c=r(7294),d=()=>{let[e,t]=(0,c.useState)(0),[r,s]=(0,c.useState)(0),a=(0,c.useCallback)(()=>{let e=window.scrollY;s(e);let r=document.documentElement,a=r.scrollTop||document.body.scrollTop,l=r.scrollHeight||document.body.scrollHeight,n=a/(l-r.clientHeight)*100;t(n)},[r]);return(0,c.useEffect)(()=>(window.addEventListener("scroll",a),()=>{window.removeEventListener("scroll",a)}),[a]),(0,o.jsx)("div",{className:"fixed z-50 top-1 transtion-all -mt-1 left-0 h-1 bg-gradient-to-r from-sky-500 to-indigo-500",style:{width:"".concat(e,"%")}})},u=r(1578),h=r(1664),p=r.n(h),g=e=>(0,o.jsx)(p(),{href:"/posts/".concat(e.text),className:"w-auto px-4 border-indigo-600 text-indigo-600 dark:border-indigo-200 dark:text-indigo-200 border-2 border-solid rounded-lg py-1 h-8 flex justify-center items-center cursor-pointer",children:e.text}),m=r(588),x=r(9727);function f(){return(f=Object.assign?Object.assign.bind():function(e){for(var t=1;t