모던 자바스크립트 Deep Dive 를 읽고 작성한 학습용 게시글입니다. 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 269개의 그림과 원리를 파헤치는 설명으로 ‘자바스크립트의 기본 개념과 동작 원리’를 이해하자! 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로 태어난 자바스크립트는 과도 wikibook.co.kr 클로저 클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(하스켈, 리스프, 얼랭, 스칼라 등)에서 사용되는 중요한 특성이다. MDN에서는 클로저에 대해 다음과 같이 정의하고 있다. A closure is the combination of a function and the lexical enviornment..

프로젝트를 진행하면서 문제 해결을 하기 위해 찾아보다가 stopPropagation() 개념을 처음 접했다. e.preventDefault() 는 몇번 써봤는데 비슷한 결(?)인 것 같고, 차이점을 확실히 알고 싶어서 모던 JS 책에서 찾아보게 되었다. 해당 개념을 찾아보게 된 상황 부모 컴포넌트는 기록된 식단 아이템 컴포넌트로서, 클릭하면 해당 식단 아이템의 상세페이지로 이동하는 onClick 이벤트 핸들러 함수가 지정되어 있음 자식 컴포넌트는 휴지통 그림 버튼이고, 해당 버튼을 눌렀을 때 팝업을 띄우는 컴포넌트임 문제는 휴지통을 클릭했을 때 팝업창이 뜨지 않고 상세페이지로 이동해버리는 것 현재 상황에서는 휴지통 버튼 역시 컨테이너에 속하므로 클릭했을 때 상세페이지로 이동하게 되는 것이다. 해결방법 ⇒..

햄버거 만들기 #133502 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이번 문제는 풀지 못하고 힌트를 참고해서 해결하였다 🥲 다른 사람의 풀이를 본 결과 크게 1. 스택으로 해결 2. 스택 없이 해결 로 나누어지는 것 같았다. 스택으로 해결 (temp가 스택) function solution(ingredient) { let answer = 0; let temp = []; for (item of ingredient) { temp.push(item); if (temp.slice(-4).join("") === "1231") { answer++; temp...

2019 카카오 개발자 겨울 인턴십 | 크레인 인형뽑기 게임 #64061 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 더보기 문제 설명 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형..

모던 자바스크립트 Deep Dive 를 읽고 작성한 학습용 게시글입니다. 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 269개의 그림과 원리를 파헤치는 설명으로 ‘자바스크립트의 기본 개념과 동작 원리’를 이해하자! 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로 태어난 자바스크립트는 과도 wikibook.co.kr var 키워드로 선언한 변수의 문제점 ES5까지 변수를 선언하는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 다음과 같은 특징이 있다. 이는 다른 언어와는 구별되는 독특한 특징으로서, 주의를 기울이지 않으면 문제를 일으킬 수 있다. 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. // 예제..

React에서 페이지네이션과 sorting(최신순 / 별점높은순) 을 구현하고자 한다. 현재 리뷰리스트를 뿌려주는 페이지를 구현 중이다. 백엔드에서 sortType과 pageNum에 따라 데이터를 뿌려주며, 전체 데이터 수도 전달받는 다는 가정 하에 진행한다. URL 주소의 파라미터 http://localhost:3000/review?sort=latest&page=1 위와 같은 방식으로 sort 방식과 page를 파라미터로부터 받아와서 맞는 데이터를 뿌려줄 것이다. // src/pages/ReviewListPage/ReviewListPage.jsx /* 리뷰페이지 url로부터 params 값 가져오기 */ const location = useLocation(); const sort = new URLSea..

모던 자바스크립트 Deep Dive 를 읽고 작성한 학습용 게시글입니다. 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 269개의 그림과 원리를 파헤치는 설명으로 ‘자바스크립트의 기본 개념과 동작 원리’를 이해하자! 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로 태어난 자바스크립트는 과도 wikibook.co.kr 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 소스코드의 ..

모던 자바스크립트 Deep Dive 를 읽고 작성한 학습용 게시글입니다. 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 269개의 그림과 원리를 파헤치는 설명으로 ‘자바스크립트의 기본 개념과 동작 원리’를 이해하자! 웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로 태어난 자바스크립트는 과도 wikibook.co.kr 변수의 생명 주기 지역 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 갖고, 언젠가 소멸한다. 즉, 변수에는 생명 주기가 있다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. 변수는 자신이 선언된 위치에서 생성되고 소명한다. 전역 변수의 생명 주기는 애플리케이션의 생명..

이번에 스터디에서 바닐라 자바스크립트로 프로젝트를 하고 있는데, 매번 리엑트를 사용하다보니 JS로만 프로젝트를 하는 것은 은근히 까다롭고, JS 공부에 도움이 많이 되고 있다. (얼마나 외부 라이브러리에 의존적이었는지 느끼고 있다.) 리엑트에서 API KEY같은 정보를 외부로부터 숨길 때에 DOTENV를 사용했었는데, 바닐라 자바스크립트에서는 외부 라이브러리를 사용하지 않으므로 사용할 수 없다. 그래서 config.js 파일에 API_KEY 값을 저장하고 export한 후 사용하려는 곳 (api.js)에서 import한 후 gitignore에 추가하는 방식으로 진행했다. 이 방법이 완전히 옳은 방법인지는 잘 모르겠다. 나중에 배포를 하게 된다면 오류가 나게 될 수도 있을 것 같은데, 배포 단계에서 포스팅..

디바운싱(debouncing)이란? -> 변화하는 도중에는 효과가 발생 안 하다가, 멈출 시 효과가 발생하는 것 디바운싱 구현 with setTimeout / clearTimeout 전역 변수로 timer 변수를 정의한다. setTimeout을 실행하는 타이머를 이 timer에 저장한다. 특정 이벤트(여기에서는 input)리스너를 등록한다. 만약 timer 값이 있다면, 아직 타이머에 설정한 시간이 지나지 않았으므로, 다시 타이머를 초기화해준다. (clearTimeout) timer에 setTimeout를 저장하며, 실행될 코드를 안에 작성한다. let timer; $(window).resize(function() { clearTimeout(timer); timer = setTimeout(function..