Web Frontend10 [ JavaScript ] 클로저: 캡슐화 예시를 통해 클로저 개념 쉽게 이해해보기 클로저 개념은 자바스크립트 공부에서 어려움을 느끼게 했던 주제 중 하나인데, 개인적으로 이해하기 쉬웠던 방법을 정리 해 보고자 한다. 클로저 개념을 쉽게 이해하기 위해서는 먼저, 스코프 개념을 이해하는 것이 중요하며 다음으로, 클로저가 되기 위한 조건을 파악하는 것이 필요하다. 클로저란? 클로저란 자신이 생성될 때의 스코프에서 알 수 있었던 변수 중 언젠가 자신이 실행될 때 사용할 변수들만 기억하여 유지시키는 함수이다. - 출처: 함수형 자바스크립트 프로그래밍 - 위에서 말했듯이, 클로저를 이해하기 위해서는 클로저가 되기 위한 조건을 파악하면 명확하게 이해가 가능해 진다. 다음은 클로저가 되기 위한 조건이다. 1. 내부 함수가 외부 함수 내에서 정의되어야 한다. (함수 내부에 정의된 함수) 2. 내부 함.. 2023. 5. 24. [ JavaScript ] 호이스팅: 변수와 함수의 동작 방식 및 결과의 차이점 비교 호이스팅이란? 변수나 함수가 어디서 선언되든지 해당 스코프 최상단에 위치하게 되어 동일 스코프 어디서든 참조할 수 있는 것을 말한다. 호이스팅은 변수와 함수의 동작 방식에 따라 출력 결과가 다르게 나타나는데, 이러한 차이점에 흥미를 느껴 각각의 경우를 자세히 정리하고자 한다. 먼저, 호이스팅에 따른 출력값이 각각 다르게 나타나는 것을 이해하기 위해서는 선언 과 참조, 초기화 개념을 알아야 한다. 선언이란, 변수나 함수를 정의하고 해당 이름을 사용할 수 있도록 식별자(변수 이름)을 지정하는 것이다. 변수선언은 var, let, const를 사용할 수 있고, 함수선언은 function을 사용할 수 있다. 참조란, 선언된 변수나 함수에 접근하여 값을 읽거나 변경하거나 함수를 호출하는 것을 의미한다. 변수나 함.. 2023. 5. 22. [ JavaScript ] var와 let의 유효범위 및 스코프 동작의 차이 "var를 사용하지말고 let•cosnt를 사용해라."는 말은 코딩공부를 시작하면서 많이 들었던 조언 중 하나였다. 그러나 var를 사용하지 말아야 하는 이유에 대해 깊게 이해하지 않고 그냥 사용하지 않았던거 같다. 그런데 '자바스크립트의 코딩의기술' 책을 읽으면서 var와 let의 유효범위로 인한 차이점에 대한 설명을 보게 되었다. 읽다보니 스코프와 관련해서 아주 중요한 개념이 담겨있다는 생각이 들었다. 그 예시를 이해하기 쉽게 정리 해 두고자 한다. 위 두 로직을 보면 for문 내 변수 i를 var로 할당했는지 let으로 할당했는지에 따라 결과값이 다르는게 나오는것을 확인 할 수 있다. 왜 이런 결과가 나오는 것일까? 결론적으로 var와 let의 유효범위가 다르기 때문이다. var는 함수스코프를 따르.. 2023. 5. 21. [ JavaScript ] 자바스크립트의 핵심: 스코프와 렉시컬 스코프 완벽 이해하기 클로저나 호이스팅 개념을 공부하려고하니 스코프 개념이 빠지지 않고 나왔다. 렉시컬스코프, 스코프, 전역스코프, 지역스코프, 함수스코프, 블록스코프 ... 여러 스코프 개념이 복합적으로 등장했고 그에 대한 이해가 기본이 된 상태여야 다른 개념을 이해할 수 있겠다는 생각이들어 이참에 확실하게 스코프 개념을 정리 해 두고자 글을 쓴다. 개념이해를 확실히 하기전에 포함관계를 한눈에 확인 가능하면 이해가 쉬워지겠다는 생각이 들어 위 이미지와 같이 도식화 해 두었다. 1. 스코프와 렉시컬스코프 이해하기 스코프란 무엇일까? 스코프는 참조대상 식별자, 쉽게 말해서 변수명•함수명을 찾아내기 위한 규칙이다. 일반적으로 스코프는 중첩된 구조를 형성하는데 동작방식을 설명하자면, 내부 스코프는 외부 스코프에 접근할 수 있지만,.. 2023. 5. 19. [ WebFrontend ] styled-components의 동작방식을 통한 호이스팅의 원리 이해 호이스팅이란? 변수나 함수가 어디서 선언되든지 해당 스코프 최상단에 위치하게 되어 동일 스코프 어디서든 참조할 수 있는 것을 말한다. -함수형 자바스크립트 프로그래밍- 호이스팅의 개념은 여러번 듣고서 알고는 있었지만 실제로 호이스팅을 사용한 적이 없다는 생각에 어렵게만 다가왔던 개념이었다. 그런데 문득, 사실을 나도 모르게 호이스팅을 이용해서 코드를 지금까지 짜 왔다는것을 깨달았다. 스타일 작업을 할 때 주로 styled-components를 이용해서 작업을 해 왔었는데, 함수컴포넌트의 아래에 스타일을 정의 하는 방법으로 나도 모르게 이미 호이스팅을 사용하고 있었다는 생각이 문득 들었다. 위 코드와 같이 StyledButton이 선언 된 곳은 버튼컴포넌트의 아래인데 에러를 발생시키지 않고 코드를 실행 할.. 2023. 4. 20. 리덕스 툴킷(Redux Toolkit) 설정 기본 가이드: 설치부터 사용까지 단계별 정리 리덕스 툴킷 세팅 후, 다음 세팅시 참고하기 위해 순서를 정리 해 보았다. 1. 먼저, 터미널에서 yarn add @reduxjs/toolkit react-redux 을 해주어 리덕스 툴킷을 설치 해 준다. 2. root 경로에 store 폴더를 생성, 위 와 같이 configureStore 함수를 만들어 준다. 초기상태에서 reducer는 빈오브젝트 상태로 남겨주면 된다. 3. store를 Provider를 통해 앱에 공급 해 준다. 4. Store폴더 안에서 CounterSlice 함수를 생성 해 준다. 5. 이후, 2번에서와 같이 아까 만들어 둔 store/index.ts에 reducer를 추가 해 주면, 리덕스 툴 킷 세팅이 끝난다. 6. useAppDisatch와 useAppSelector를 사.. 2023. 1. 5. NPM과 Yarn의 옵션 차이점 분석: -D, --dev, -P 옵션 활용하기 쇼핑몰 프로젝트 세팅을 하다가 -D (npm에서의 --save-dev) option에 대해서 궁금증이 생겨 찾아 보던 중 yarn 과 npm에서의 사용법 차이가 있다는 것을 발견 하였다. 먼저, -D option 이란 모듈을 설치할 때 package.json 내의 devDependencies 항목에 설치한 모듈과 버전을 넣는 것을 뜻한다. npm의 경우, -D, --save-dev 명령어를 통해 설치 할 수 있는 반면 yarn의 경우, --dev, -D 명령어를 통해 설치 할 수 있다. 이외에, npm 에서는 -P 명령어를 통해 dependencies 항목에 설치한 모듈과 버전을 넣을 수 있는 반면 yarn 에서는 -P 명령어를 사용할 경우 peerDependencies 항목에 설치한 모듈과 버전을 넣을.. 2023. 1. 4. [ JavaScript ] 프로그래머스 치킨쿠폰 문제 설명 프로그래머스 치킨은 치킨을 시켜먹으면 한 마리당 쿠폰을 한 장 발급합니다. 쿠폰을 열 장 모으면 치킨을 한 마리 서비스로 받을 수 있고, 서비스 치킨에도 쿠폰이 발급됩니다. 시켜먹은 치킨의 수 chicken이 매개변수로 주어질 때 받을 수 있는 최대 서비스 치킨의 수를 return하도록 solution 함수를 완성해주세요. 문제 해설 몫과 나머지를 이용한 문제이다. 1. coupon / 10 => 몫1 + 나머지1 2. (몫1 + 나머지1) / 10 => 몫2 + 나머지2 3. if ( 몫 + 나머지 2023. 1. 4. Tailwindcss / Customizing-colors Tailwindcss customizing-colors 기능에 대한 정리 Tailwindcss customizing-colors 기능 이란? 사용한 이유 사용 방법 좋은점 Tailwindcss customizing-colors 기능 이란? tailwind에서 색상이름을 원하는 대로 지정해서 사용 할 수 있게 해 주는 기능이다. 사용한 이유 portfolio 프로젝트를 하며 atomic 패턴을 적용하여 폴더구조를 짜고 button, input ... 과 같은 atoms의 경우 여러 프로젝트에서 가져다 쓸수 있도록 만들어 두었다. 그 경우 다른 Style부분에서는 문제가 될 것이 없었지만 색상과 같은 경우에는 프로젝트마다 다 다르게 될 것인데 각 컴포넌트에서 색상을 다 찾아내서 일일이 바꾼다는것이 너무 불편.. 2022. 12. 3. 이전 1 2 다음
