js
TIL #1 - 자바스크립트 이터러블/이터레이터 프로토콜
TIL #1 - 자바스크립트 이터러블/이터레이터 프로토콜 목표❗ 📌 이터러블/이터레이터 프로토콜에 대해 설명할 수 있다. 📌 for...of 문의 순회 과정을 설명할 수 있다. ES6 이전에는 위와 같이 인덱스로 접근하여 배열을 순회하였었다. 하지만 ES6부터는 이렇게 for...of 문을 통하여서 순회가 가능해졌다. 이게 어떻게 가능해지게 된 것일까? 이것을 알기위해선 이터러블/이터레이터 프로토콜에 대한 이해가 필요하다. 이터러블이란❓ 이터러블 프로토콜을 준수한 객체 Symbol.iterator 가 구현된 객체 for...of 을 사용할 수 있는 객체 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용 가능한 객체 위와 같이 설명할 수 있다. 즉, Symbol.iterator 가 구현되어 있다면 순..
자바스크립트 - 실행컨텍스트란?
자바스크립트의 중요한 개념 중 하나인 실행컨텍스트. 실행 컨텍스트란? 실행 코드에 제공할 환경 정보들을 모아놓은 객체. 각 실행 컨텍스트들은 자바스크립트 엔진의 스택에 쌓게 되며 이런 실행 컨텍스트들이 쌓이고 삭제되는 매커니즘에 대해 알고 있으면 자바스크립트 코드 실행 순서를 파악할 수 있게 됩니다. 실행컨텍스트는 언제 생성? 1) 전역 실행 컨텍스트 2) 함수 실행 컨텍스트 3) eval() (사용을 지향) 참고로 전역 실행 컨텍스트는 단 하나만 존재할 수 있고, 함수 실행 컨텍스트는 여러개 존재할 수 있습니다. 실행컨텍스트의 과정 LIFO (1) 실행컨텍스트 = [ 전역 컨텍스트 ] (2) 실행컨텍스트 = [ 전역 컨텍스트, outer 함수 컨텍스트 ] (3) 실행컨텍스트 = [ 전역 컨텍스트, ou..
DOM을 깨우치다 - 코디 린들리 저
DOM을 깨우치다 - 코디 린들리 저 모던 자바스크립트 Deep Dive 의 DOM 파트를 읽어보면서 DOM에 대한 궁금증이 더 커져 여러 정보들을 찾던 중 알게 된 책이다. 요즘은 DOM에 대한 이해의 필요가 전보다 덜해졌다고 말한다. DOM을 직접 다루는 것보다 비교적 라이브러리나 프레임워크를 통해 손쉽게 다룰 수 있게 되어 라이브러리나 프레임워크를 더 집중적으로 공부들을 한다고 한다. 이런 공부들도 물론 중요하지만, DOM에 대한 이해가 전무한 채, 그것들을 우선적으로 배우는건 모래위에 성 쌓기라는 생각이 든다. 왜 라이브러리나 프레임워크들이 DOM을 제어하는 것보다 더 편한 일인지와 왜 이것들이 나오게 되었는지에 대한 근본적인 이유를 제대로 알기 위해선 직접 DOM에 대해 공부를 해보면 더 절실히..
모던 자바스크립트 Deep Dive
모던 자바스크립트 Deep Dive 프론트엔드 개발자를 준비하고 있다면 누구나 알고 있고 반드시 읽어야 한다 생각하느 '그 책' 책이 굉장히 두꺼워서 (860페이지 이상) 사전 처럼 사용하곤 했는데, 스터디를 통해서 두달동안 집중적으로 읽어 저번달에 완독을 끝낸 책이다. 스터디 진행을 통해 읽다보니 강제성도 생겼고, 또 제대로 공부도 해야한다는 생각에 한 주도 밀리지 않고 쭉 읽기에 성공했다. 당연히 1회독으로는 전부를 안다고 말할 수 없다. 이제 전체적인 맥락을 확인했으니, 지금 개인적으로 하고 있는 2회독에서는 1회독때 헷갈렸던 부분들 위주로 좀 더 자세히 읽어보면서 진행하고 있다. 확실히 1회독을 하기전이랑 후랑 차이가 나는게 어렴풋이 알던 개념들이 좀 정리되는 기분이 든다. 개인적으로 자바스크립트..
프론트엔드 코테 언어 JS로 돌린 후 2주
프론트엔드 코테 언어 JS로 돌린 후 2주 https://bmy1320.tistory.com/entry/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%BD%94%ED%85%8C-%EC%96%B8%EC%96%B4-%EB%B3%80%EA%B2%BD-%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8?category=511551 프론트엔드 코테 언어 고민 ( 파이썬 or 자바스크립트) 예전부터 해오던 생각인데, 이제 취준도 다가왔고 빨리 결정해야 될 것같아서 고민이 많았다. 우선 내가 원하는 직무는 웹 프론트엔드 이다. 그러므로 당연히 JS 를 잘해야하고 잘다룰줄 알아야 ..
백준/ Bronze 2 문제 , 백준 자바스크립트 10988 , 팰린드롬인지 확인하기
백준/ Bronze 2 문제 , 백준 자바스크립트 10988 , 팰린드롬인지 확인하기 문제 출처 https://www.acmicpc.net/problem/10988 10988번: 팰린드롬인지 확인하기 첫째 줄에 단어가 주어진다. 단어의 길이는 1보다 크거나 같고, 100보다 작거나 같으며, 알파벳 소문자로만 이루어져 있다. www.acmicpc.net 정답 const input = require("fs").readFileSync("/dev/stdin").toString().trim(); const reverseCheck = (str) => { let tmp = str.split("").reverse().join(""); if (str === tmp) { return true; } return false;..
백준/ Bronze 3 문제 , 백준 자바스크립트 4690 , 완전 세제곱
백준/ Bronze 3 문제 , 백준 자바스크립트 4690 , 완전 세제곱 Check Point ! ( 해당사항 ✓체크 ) 1. 막힘 없이 수월하게 풀린 문제인가? 2. 1시간이내로 풀렸던 문제인가? 3. 1시간 이상 or 며칠을 두고 풀어봤더니 풀린 문제인가? 4. 시간을 써도 도무지 풀 수 없는 문제인가? 5. 솔루션을 찾아봤는가? ------------------------------------------------------------------------------------------- 난이도 체감 1. 최상 2. 상 3. 중 4. 하 1. 완벽히 이해 2. 다소 헷갈리는 부분들이 있음 3. 이해 못함 입력이 없는 문제. 그냥 연산 잘해서 출력시키면 된다. 문제 출처 https://www.ac..
백준/ Bronze 3 문제 , 백준 자바스크립트 6378 , 디지털 루트
백준/ Bronze 3 문제 , 백준 자바스크립트 6378 , 디지털 루트 Check Point ! ( 해당사항 ✓체크 ) 1. 막힘 없이 수월하게 풀린 문제인가? 2. 1시간이내로 풀렸던 문제인가? 3. 1시간 이상 or 며칠을 두고 풀어봤더니 풀린 문제인가? 4. 시간을 써도 도무지 풀 수 없는 문제인가? 5. 솔루션을 찾아봤는가? ------------------------------------------------------------------------------------------- 난이도 체감 1. 최상 2. 상 3. 중 4. 하 1. 완벽히 이해 2. 다소 헷갈리는 부분들이 있음 3. 이해 못함 문제 출처 https://www.acmicpc.net/problem/6378 6378번: 디..