해당 글은 node v16.13.0을 기준으로 작성되었습니다. 본인이 사용하는 node 버전에 따라 인터프리터가 생성하는 바이트코드가 달라질 수도 있습니다. 일반적으로는 var는 호이스팅이 되어서 중복 선언이 가능하다고 알려져있고, let, const는 호이스팅이 되지 않아 중복 선언이 되지 않는다고들 알고 있다. 여기서 더 나아가서 let, const가 호이스팅이 되지만 TDZ에 의해서 변수가 초기화되기 전까지는 접근이 불가능하다는걸 알고 있는 사람들도 많을 것이다. 그러면 여기서 더 더 나아가서, v8 엔진이 자바스크립트 코드를 어떻게 해석하길래 호이스팅이나 TDZ가 우리가 생각하는대로 동작하는지 알아보자. 바이트코드를 출력하기 위해서는 --print_bytecode 옵션을 이용하면 된다. ex) n..
최근에 자바스크립트에서 replaceAll을 지원하기 시작했다. 하지만 그건 어디까지나 브라우저에서 제공하는거고.... node는 얄짤없다. replace에 정규식을 쓰도록 하자..... 추가사항 (2022-05-04) Node v15부터 replaceAll을 지원한다!
이벤트 위임 (Event Delegation) 이벤트 위임이란 동적으로 하위 노드를 생성하고 삭제할 때, 상위 노드가 하위 노드들의 이벤트를 직접 탐지하고 관리하는, 디자인 패턴 중 위임 패턴을 뜻한다. 같은 이벤트를 노드 개수만큼 걸어주는 대신, 상위 노드에게 이벤트를 걸어주는 것이다. 이해가 안될 수도 있어 예제를 준비했다. 이벤트 버블링이나 캡처링을 알고 이벤트 위임을 공부하는 것이 맞지만, 일단 실전부터 해보자. 코드 예제 위의 예제처럼 parent라는 div에 child를 1000개 만들었다고 해보자. child 버튼에 이벤트를 걸어주고 싶다면 class 선택자를 이용해서 반복문으로 1000개의 요소에 이벤트를 생성해주면 된다. javascript 실행 이후 button이 1000개가 있다면 이..
호이스팅 : var선언부, 함수선언부를 최상단 스코프로 끌어올린 후 동작하는것을 말하는 가상의 개념 (실제로 일어나지는 않는다.) 변수를 선언부 할당부로 나누어 선언부만 수집. 변수가 함수 내에서 정의되었을 경우 : 선언부만 함수의 최상위로. 변수가 함수 바깥에서 정의되었을 경우 : 전역 컨텍스트의 최상위로. 함수의 경우 선언문일 때 함수 전체가 수집. 선언문 : 코드가 실행되는 런타임시에 이미 함수 객체가 생성되어 있고, 함수 이름과 동일한 식별자에 할당까지 완료된 상태. 표현식 : 함수가 아닌 var 키워드를 사용한 변수의 선언부가 호이스팅되므로 Type Error. 호이스팅 참조 사이트 : [https://velog.io/@kiki/귀여운포미와함께하는JS](https://velog.io/@kiki/..
국비지원 파이널 프로젝트로 결제기능을 구현하게 되었다. 아임포트api를 사용하기로 했고 문서부터 정독했다. (참고) https://github.com/iamport/iamport-react-example/blob/master/manuals/PAYMENT.md 1. 세팅하기 (Payment.js) - 라이브러리 호출 React와 useEffect를 import 해준다. useEffect를 사용하는 이유는 브라우저가 이 파일을 처음 호출했을 때 useEffect의 내부코드가 변하는 것이 없다면 컴포넌트가 호출되는 첫 시점에 한번만 호출된다. 그리고 컴포넌트가 소멸하기 직전에 useEffect의 리턴을 호출한다. react에서 아래와 같이 jquery와 iamport 를 호출할 수 있다. import Reac..
https://programmers.co.kr/learn/courses/30/lessons/12926 코딩테스트 연습 - 시저 암호 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀 programmers.co.kr function solution(s, n) { // 문자열같이 배열이 아닌것들을 map에서 쓸때 .call()을 씀 const answer = Array.prototype.map.call(s, c => { let a = ''; // c가 알파벳일 때 if ((c >= 'a' && c = 'A' && c 'z') { a = 'a'.ch..
https://programmers.co.kr/learn/courses/30/lessons/1845 코딩테스트 연습 - 폰켓몬 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. programmers.co.kr function solution(nums) { // 폰켓몬 수의 반을 골라야하기 때문에 종류가 다 다를 때 최대값은 max까지 가능함 const max = nums.length / 2; // 중복되는걸 제거하고 폰켓몬이 몇 종류가 있는지 알기 위해 set에 담아줌 const setNum = new Set(nums); // set이 전체 폰켓몬의 1/2가 안되면..
