Front-End94 24장 클로저 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 클로저를 이해하기 전에, 짧게 영상으로 주요 내용 보고 정리 https://hello-kk.tistory.com/779 클로저 : 함수와 그 함수가 선언된 렉시컬 환경의 조합 실행 컨텍스트 단원을 하고 와서 그런지 대략적으로 이해는 할 수 있지만 위의 '클로저' 정의는 딱 와닿지 않았다. 구체적인 예시도 떠오르지 않은 상태. 렉시컬 환경의 조합? 외부 렉시컬 환경에 대한 참조를 말하는 건가? 위의 문장에서 이해 해야 할 부분은 3가지로 보인다. 1. 함수와 2. 그 함수가 선언된 렉시컬 환경의 3. 조합 "만약 innerFunc 함수가 outerFunc 함수의 내부에서 정의된 중첩 함수가 아니.. 2023. 4. 5. 모던 자바스크립트 Deep Dive(스터디) 디스코드와 노션으로 운영되는 스터디에 참여하고 있습니다. 주 2회 온라인으로 만나고, 궁금한 점, 회고 등에 대해 이야기합니다. 핵심 단원 중, 관심있는 단원을 투표로 선정하고 선정된 단원들 중 관련있는 단원을 모아 학습합니다. 퀴즈를 만들고, 내용을 정리하고, 퀴즈를 풀어옵니다. [2023.03.28] 스터디에 합류 [2023.03.30] 23장 실행 컨텍스트 https://hello-kk.tistory.com/762 [2023.04.03] 13장 스코프 14장 전역 변수의 문제점 15장 let, const 키워드와 블록 레벨 스코프 https://hello-kk.tistory.com/769 [2023.04.06] 24장 클로저 https://hello-kk.tistory.com/781 [2023.04.. 2023. 4. 5. 클로저(Closure) 코딩앙마: 자바스크립트 중급 강좌 #11 클로저(Closure) 5분만에 이해하기 클로저 : 함수와 렉시컬 환경의 조합. 함수가 생성될 당시의 외부 변수를 기억. 생성 이후에도 계속 접근이 가능하다. function makeAdder(x){ return function(y){ return x+y; } } const add3 = makeAdder(3); console.log(add3(2)); const add10 = makeAdder(10); console.log(add10(5)); console.log(add3(1)); add3과 add10은 동일하게 makeAdder()함수를 참조하지만, makeAdder(10)을 호출한 이후에도, add3에는 아무런 변화가 없다. add10과 add3은 서로 다른 환.. 2023. 4. 5. Git 로컬 브랜치명 변경 1. 변경할 브랜치로 이동 git checkout [branch-name] 2. 브랜치명 바꾸기 git branch -m [new-branch-name] 2023. 4. 5. 가장 마지막 commit 수정 git commit --amend 들어간 뒤, i 키를 눌러서 INSERT 모드로 진입 방향키로 수정할 위치까지 커서를 옮긴 뒤, 수정한다. 글자를 수정했다면 esc 키를 누르고 :wq를 입력한다.(저장, 종료 커멘드. 콜론을 반드시 입력하기) 2023. 4. 4. 좋은 git commit 메시지를 위한 영어 사전(링크) https://blog.ull.im/engineering/2019/03/10/logs-on-git.html 2023. 4. 3. 13. 스코프 14. 전역 변수의 문제점 15. let, const 키워드와 블록 레벨 스코프 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive글 목록(스터디) https://hello-kk.tistory.com/780 13. 스코프 핵심이라고 생각되는 개념. 각 의미를 기억하자 스코프, 스코프 체인, 렉시컬 스코프 ( vs 렉시컬 환경) var에 대한 (나의) 오해와 진실 전역 스코프에 선언된 var x= 10; 함수 스코프에 선언된 var x =20; 함수 내부에선 당연히 20이지만, 함수가 종료되면? var x = 10; function outer(){ var x = 20; console.log(x) // (1) } console.log(x) // (2) (처음엔) 20인줄 알았다. 재선언이 가능하고 다시 할당한 것과 같은 것으로 생각해서.. 그래서 전역 스코프의 x가 수정된 것이라 생각했는데, 그게 아니.. 2023. 4. 3. Chakra UI 기본적인 사용 방법 1. 설치 npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion 2. 컴포넌트에서 프로바이더를 꼭 넣어주어야 적용된다. import * as React from 'react' // 1. import `ChakraProvider` component import { ChakraProvider } from '@chakra-ui/react' function App() { // 2. Wrap ChakraProvider at the root of your app return ( ) } 차크라? 나루토? 설마? 했는데 진짜로 문서 예시에 나루토가 나온다 https://chakra-ui.com/docs/components/tabs/.. 2023. 4. 3. 23. 실행컨텍스트 (모던 자바스크립트 Deep Dive) 모던 자바스크립트 Deep Dive 글 목록(스터디) https://hello-kk.tistory.com/780 23. 실행컨텍스트 23/03/30 (1) 실행 컨텍스트 스택이란 무엇이며, 어떤 역할을 하나요? => 실행 컨텍스트를 저장하는 자료구조입니다. 코드를 평가하는 과정 뒤 실행 컨텍스트가 생성되면 실행 컨텍스트 스택의 최 상단에 푸시하고, 해당 컨텍스트의 실행이 완료되면 스택에서 제거합니다. 이 과정을 통해 함수 호출 순서를 관리합니다. (2) 실행 컨텍스트와 렉시컬 환경의 역할과 구조는 각각 무엇인지, 그리고 실행 컨텍스트와 렉시컬 환경의 관계를 설명해주세요 => 실행 컨텍스트는 식별자, 스코프, 실행 순서를 관리합니다. 렉시컬 환경을 통해 식별자와 스코프를 관리하고, 실행 컨텍스트 스택을 통.. 2023. 3. 29. 이전 1 ··· 3 4 5 6 7 8 9 ··· 11 다음
