본문 바로가기

분류 전체보기168

this(1) 상황따라 바뀌는 this this 🦎 Javascript에서의 this에 대해 알아보기 전에, 그냥 'this(이것)'라는 말을 언제 사용하는지 먼저 생각해보자. 이거좀 먹어봐! 이거 어때? 이거 뭐야?.. 이런 식으로 '이것(this)' 이라는 말은 음식을 지칭하기도, 물건을 지칭하기도 한다. 다시 말해 상황에 따라 다른 대상을 지칭하며 쓰일 수 있는 말이다. Javascrpt에서도 this는 상황에 따라 지칭하는 대상이 바뀐다. 다만 그 상황이라는 게 '함수가 호출되는 상황'일 뿐이다. Javascript의 this는 일단 기본적으로 함수가 호출될 때 (=실행 컨텍스트 생성시) 결정되며, 보통 자신을 호출한 주체의 정보가 담기게 된다. 함수 실행 방법 그럼 먼저 '함수가 호출되는 상황'에는 어떤 상황들이 있길래 지칭 대상이 .. 2021. 1. 14.
setTimeout함수에서의 this값 변화 setTimeout함수에서의 this값 변화 ❗️ 에러 일단 setTimeout은 시간 지연을 일으켜 함수를 '비동기적'으로 실행시키는 함수이다. 이 함수는 명시적으로 항상 전역 객체(window)를 this 바인딩하는데, 이로 인해 아래와 같은 에러가 발생할 수 있다. class Rectangle { constructor(width, height) { this.width = width; this.height = height; } getArea() { return this.width * this.height; } printArea() { console.log('넓이 : ' + this.getArea()); } printSync() { // 사각형 넓이 즉시 표시 this.printArea(); } pri.. 2021. 1. 13.
210112_TIL (this응용 - call, apply, bind 메서드 사용해보기) 🍎 오늘 한 일 ✔️ call, apply, bind 메서드 사용해보기 this 값을 지정하고 싶을 때 사용하는 메서드들인 call, apply, bind 메서드가 무엇이고 어떻게 사용하는 지 예시를 통해 배웠다. 단지 this를 지정하는 것 뿐만 아니라 Spread Opeator을 대신해서도 쓸 수 있고, 배열이 아닌 데이터타입에 배열메서드를 적용하는 놀라운 일까지 가능했다. 특히 bind를 사용하면 이벤트 핸들러를 생성할 때 이벤트 객체 대신 다른 값도 넘겨줄 수 있다고 해서 전에 만든 트위틀러에 적용해보려 한다. 잘 알아둔다면 굉장히 유용하게 쓰일 것 같아서 또 어디에 쓰일 수 있는지도 더 알아보고, 꼭 내일 블로깅을 해둬야겠다.. ✔️ 예제를 통해 this의 변화 알아보기 this는 실행 컨텍스트.. 2021. 1. 13.
실행 컨텍스트(Execution Context) 실행 컨텍스트는 Javascript 엔진이 코드를 실행하고 평가(표현식 해석, 값 생성 및 참조)하기 위해 필요한 환경을 제공하고 코드 실행 결과를 실제로 관리하는 영역이다. 이런 실행 컨텍스트를 기반으로 식별자, 스코프 등을 관리한다. 실행 컨텍스트(Execution Context) Context(컨텍스트)를 번역하면 '문맥'이라는 뜻이다. 이런 뜻을 바탕으로 생각해보면 Javascript의 실행 컨텍스트는 '코드의 문맥', 즉 코드가 실행되는 환경이라고 이해하면 좀 더 쉬울 것 같다. 실행 컨텍스트는 이러한 환경에서 실행될 코드들에 대한 온갖 정보를 모아둔 객체이다. 이렇게 정보를 모아 저장해둔 덕분에 코드가 여러 번 실행되어도 동일한 환경을 구성할 수 있게 되는 것이다. 일단 실행 컨텍스트의 대표적.. 2021. 1. 13.
210111_TIL (node.js, git에 익숙해지기) 🍎 오늘 한 일 ✔️ node.js, nvm 설치 지금까지는 웹 브라우저 상에서만 Javascript를 동작시켰는데, 이제 새로운 환경인 node.js에서 동작시킬 수 있게 되었다. 보다 쉬운 node.js 버전 관리를 위해 NVM(Node Version Manager)도 설치하고, use 명령어를 통해 설치된 다른 node 버전들을 번갈아 사용하는 방법도 배웠다. ✔️ Git Workflow 익히기 페어분과 같은 레포지토리 파일, 같은 부분에 다른 변경사항을 동시에 push해보며 충돌 상황을 만들어보고, 어떤 오류 메시지가 뜨고 어떻게 해결할 수 있는지 알아가며 연습해봤다. 추가로 fetch 에러와 pull 에러의 메시지가 다르게 뜨는걸 보면서, fetch와 pull의 차이가 뭔지 궁금해져서 ProGi.. 2021. 1. 12.
210109_TIL (undefined 제대로 알기) 🍎 오늘 한 일 ✔️ 복습 & 심화 학습 이머시브코스 시작 이틀전,, 그 동안 배운 내용들을 다시한번 복습하면서 궁금했던 부분이나 이해가 잘 되지 않았었던 부분, 관련해서 더 알아보려고 했던 부분들을 좀 더 자세하게 알아보고 정리하는 시간을 가졌다. 그 중 가장 기억에 남는 두 가지이다. 깊은복사 더 알아보기 얕은 복사와 깊은 복사의 차이점에 대해 정리하다가 몇몇 재밌는(?) 주제들을 발견할 수 있었다. 깊은 복사를 재귀를 사용해서 구현해볼 수 있다는 점, 또 JSON 메서드를 을 활용해서도 깊은 복사를 구현해볼 수 있다는 점이 제일 흥미로워서 이 부분들은 직접 함수로 작성해보기도 했다. 배웠던 개념들을 복습하던 중 undefined에 대한 의문점들이 있어서 그냥 오늘 한 번 제대로 알고 넘어가자는 마음.. 2021. 1. 10.
undefined 제대로 알기 (2) null의 등장 1편 👉🏻 undefined 제대로 알기 (1) undefined? empty? 🧐 1편의 첫 부분에서, Javascript에서 undefined 값이 반환되는 경우는 크게 두 가지가 있다고 언급했었다. 1. 사용자가 '명시적'으로 지정하는 경우 말 그대로 사용자가 '여기에는 값을 넣지 않을거야'하고 undefined를 통해 알리는 경우이다. 2. Javascript 엔진이 반환하는 경우 Javascript 엔진은 사용자가 어떤 값을 지정할 거라고 예상했는데 하지 않은 경우에 undefined를 반환한다. 이 두 가지 경우에서 undefined는 다른 의미로 정의되기도 하고, 동작하는 방식 또한 다르다. 어떻게 다르다는 건지 하나씩 살펴보자. 1편에서 empty와 비교했던 경우처럼, 먼저 1. 사용자가 .. 2021. 1. 10.
undefined 제대로 알기 (1) undefined? empty? 🧐 undefined? null? empty? 모두 '없다'는 뜻인 것 같기는 한데.. 뭐가 다른 건지, 어떤 상황에서 뭘 써야하는지 누군가 물어보면 명쾌하게 대답해주지는 못할 것 같았다. 배웠던 개념들을 복습하던 중에 이런 생각이 들어서 그냥 한 번 제대로 알고 넘어가자! 하고 자료들을 찾아봤다. 찾아보고 정리한 결과, 이 중 undefined가 가장 중요한 개념이라는 생각이 들어서 undefined를 위주로 empty나 null과 어떤 점에서 다른지 이야기해보려고 한다. 이 글은 기본적인 의미에 대한 설명은 생략하기 때문에 읽기 전에 이 문서를 먼저 한 번 보고오는걸 추천한다. undefined Javascript에서 undefined 값이 반환되는 경우는 크게 두 가지가 있다. 1. 사용자가 '명시적'.. 2021. 1. 10.
선형 검색, 이진 검색 (단순 검색 알고리즘) 데이터들을 모아둔 곳에서 원하는 값을 가진 원소를 찾아내는 '검색 알고리즘'을 살펴보려고 한다. 먼저 가장 기본적인 접근 방법인 선형 검색, 이진 검색 두 가지를 알아보자. 선형 검색 (linear search) 선형 검색 알고리즘은 여러 개의 데이터가 들어있는 리스트에서 찾고자 하는 값이 나올 때까지, 처음부터 하나씩 차례대로 검색하는 알고리즘이다. 말 그대로 100개의 데이터 중 찾으려는 데이터가 100번째에 있다면 100개의 데이터를 다 확인해봐야 찾을 수 있는 것이다. 데이터 개수가 늘어날수록 시간도 당연히 오래걸리게 된다는 단점이 있다. 종료 조건 ✔️ Success : 검색할 값을 찾은 경우 if (array[index] === 찾는 값) ✔️ Fail : 검색할 값을 찾지 못하고 배열의 맨 .. 2021. 1. 9.
210108_TIL (꼬리재귀, 알고리즘 기초) 🍎 오늘 한 일 ✔️ 꼬리 재귀 정리하기 재귀도 워낙 추상적이라 처음 배울 때 어려웠는데, 꼬리 재귀도 공부해보니 글을 읽는 것만으로는 잘 이해가 되지 않았다. 그래서 일단 쉬운 팩토리얼 예제를 가지고, 개발자 도구를 이용해 디버깅해보며 Call Stack이 어떻게 변하는 지 살펴보았다. 그렇게 해보니 차이점이 확실히 보여서 내가 이해한 바를 다음에 봐도 바로 이해할 수 있게 사람에 비유해 만화(?)로 그려보기도 하고 블로깅도 해두었다. 좀 오래걸리긴 했지만, 덕분에 꼬리재귀가 어떻게 재귀의 문제를 보완하고 Stack Overflow 문제를 개선할 수 있다는 건지 이해할 수 있었다. 그래도 아직 설명할 부분들이 좀 더 있는 것 같아 내용은 계속해서 수정하고 보충해보려고 한다. ✔️ 알고리즘 기초 정리 알.. 2021. 1. 9.
빅오(Big-O) 표기법 before... 복잡도 (Complexity) 복잡도는 알고리즘의 성능을 나타내는 척도인데, 시간 복잡도와 공간 복잡도로 나눌 수 있다. 시간 복잡도는 속도에 해당하는 알고리즘의 수행시간 분석결과를 말한다. 공간 복잡도는 메모리 사용량에 대한 분석결과를 말한다. 쉽게 설명하면 아래와 같다. ✔️ 시간복잡도 = 얼마나 오래 걸리는가 ✔️ 공간복잡도 = 얼마나 메모리를 차지하는가 빅오(Big-O) 표기법? 빅오 표기법은 알고리즘의 효율성을 평가하기 위한 분석 방법이다. 효율성의 판단 기준은 바로 위에서 설명한 시간 복잡도, 공간 복잡도이다. 보통 실행속도가 메모리 사용량보다 중요하기 때문에 성능을 판단할 때는 시간 복잡도에서 가장 영향력이 큰 부분을 따진다. 빅오 표기법은 기본적으로 '최악의 경우'를 가정.. 2021. 1. 9.
꼬리 재귀 (Tail Recursion) 재귀 자체도 머리 속에 과정을 떠올리려고 하면 굉장히 추상적이라 어렵게 느껴지는데 꼬리 재귀 개념까지 한번에 이해하려고하니 글을 읽는 것만으로는 잘 이해가 되지 않았다. 개발자 도구를 이용해 디버깅해보며 스택이 어떤 식으로 변하는 지도 살펴보고, 내 관점에서 이해한 바를 그림으로도 그려보기도 했다. 덕분에 꼬리재귀가 어떻게 스택오버플로우 문제를 개선할 수 있다는 건지 이해할 수 있었다. 하지만 아직 설명할 부분들이 좀 더 있는 것 같아 내용은 계속해서 수정, 보충할 예정이다. (잘못 알고있거나 보충할 내용이 있다면 알려주시면 감사하겠습니다🙏🏻) 재귀 (Recursion) 꼬리 재귀에 대한 이야기를 하기 전에 '재귀'가 뭔지, 그리고 일반적인 재귀의 위험성에 대해 먼저 간단히만 이야기하고 넘어가려 한다. .. 2021. 1. 8.
반응형

티스토리툴바