개발여행의 블로그

✅ for ... of The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables. It invokes a custom iteration hook with statements to be executed for the value of each distinct property of the object. for of 문은 iterable을 순회하면서 iterable의 요소를 변수에 할당한다. 내부적으로 it..

이 글은 '모던 자바스크립트 Deep Dive'를 공부하고 정리한 내용입니다. 실행 컨텍스트는 JavaScript 동작 원리를 담고 있는 핵심 개념이다. JavaScript가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, task queue와 함께 동작하는 이벤트 핸들러와 비동기 처리 동작 방식을 이해하기 위해 실행 컨텍스트가 중요하기 때문에 정리하고 넘어가려고 한다. ECMAScript는 소스코드를 4가지 타입으로 구분하는데, 이 소스코드는 실행 컨텍스트를 생성한다.(소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문에 구분한다.) 1️⃣전역 코드(global code) > 전역에 존재하는 ..

이번 과제는 생성자 함수 그리고 this, prototype을 사용하여 문제를 해결해나가는 것이 key point였던 것 같다. 그래서 생성자 함수를 왜 사용하는지 그 목적에 대해 정리해보려고 한다. 생성자 함수의 정의와 다양한 객체 생성 방식 중 생성자 함수를 사용하는 방식에 대해 알아보자. 생성자 함수(constructor)란? new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수이다. 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라고 한다. > 참고 | 자바스크립트는 빌트인 생성자 함수를 제공한다. (Object, String, Number, Boolean, Function, Array, Date, RegExp, Promise) 객체 리터럴에 의한 객체 생성 VS 생성자 함수..

과제를 하던 중 함수의 return값을 사용하는 부분이 없는데도 this를 return하는 코드를 발견했다. 확장성을 위해 return을 해둔 것인가? 라는 생각이 들었는데 검색해보아도 명확한 해답을 찾지 못했다. 그래서 질문을 남겨보았다. 질문하자마자 method chaining을 위한 코드라는 답변을 달아주셨다.🙇‍♀️ ✅Method Chaining 연속적인 코드 줄에서 개체의 Method를 반복적으로 호출하는 것을 의미한다. Method가 객체를 반환하면 그 반환 값(객체)이 또 다른 Method를 호출할 수 있다. Method Chaining is a programming strategy that simplifies and embellishes your code. It is a mechanism ..

* 이 글은 바닐라코딩 prep 코스의 강의 내용과 책 '모던 자바스크립트 Deep Dive'의 this 파트를 공부하며 정리한 글입니다. JavaScript에서 this란? - 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 self-referencing variable(자기 참조 변수) - this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드 참조 가능 this의 값 - this 키워드는 함수 내부에서 사용되므로 this를 포함하고 있는 함수가 어떻게 실행되는지에 따라 결정 - 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정 ❗this는 함수 선언 시점에 결정되는 값이 아니라, 함수 실행 시점에 결정되는 값임을 명심! this의 생성 - this는 Ja..

https://leetcode.com/problems/buddy-strings/ Buddy Strings - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com Given two strings s and goal, return true if you can swap two letters in s so the result is equal to goal, otherwise, return false. Swapping letters is defined as taking two..

window에서 notion app을 설치해서 잘 사용하고 있었는데, 갑자기 무한 로딩이 되면서 페이지가 뜨지 않는 현상이 며칠 동안 계속되었다. 노션에 문의를 해서 빠르게 해결방법을 얻었다! https://www.notion.so/notion/Reset-Notion-1b70196f1f6145d7a8695afc425d8699 Reset Notion If you find that your Notion is stuck on a blank screen, sometimes the old adage is true: try restarting it! Read on to learn how to reset your Notion app in your browser, desktop app or mobile device. ..

1번째 과제 코드 리뷰에서는 기본적인 것들에 대해 피드백을 받았다. 완전 기본 중에 기본인데 convention을 제대로 확인하지 않고 과제를 제출하여 많이 반성했다. (너무 기본적인거라 민망했다.😅😅) 개선해야 할 사항 if와 else if의 앞뒤는 한 칸 띄우기 // bad if(){} // good if () {} 주석 주석을 일일이 달 필요는 없다. 변수 네이밍, 함수 네이밍과 로직이 잘 짜여있다면 더욱더 주석을 달 필요가 없다. 만약 주석을 달아야 될 것 같다면 지금 구현한 코드가 가동성있게 작성한 것인지 고민해볼 필요가 있다. 주석은 가능한 최소한으로 줄이는 게 좋다. 객체 선언에 세미콜론 붙이기 (생각치 못한 곳에서 세미콜론을 빼먹었었다...) 코드의 일관성 string 값을 적을 때 '(s..

https://leetcode.com/problems/reverse-integer/ Reverse Integer - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com Given a signed 32-bit integer x, return x with its digits reversed. If reversing x causes the value to go outside the signed 32-bit integer range [-2^31, 2^3..

unnecessary white space 3번째 매개변수 전달 후 불필요한 공백이 있는 것으로 확인. 과제 제출하기 전 확인! // before (choiceItem ,) createChildElement($choiceContainer, 'div', CSS_CLASSNAME.choiceItem , textContent, i); // after (choiceItem,) createChildElement($choiceContainer, 'div', CSS_CLASSNAME.choiceItem, textContent, i); function naming endGame이라는 함수명보다 내부의 로직을 더욱 명확히 설명할 수 있는 네이밍으로 변경하기. // before function endGame(correct..