전체 글

[ JavaScript ] 호이스팅

호이스팅이란 ? 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다. console.log(str); // undefined var str = "Hello"; 해당 코드에서 str이라는 변수가 콘솔 아래에 선언되어 있지만, 오류가 생기지 않고, undefined를 출력합니다. 이는 호이스팅의 영향으로 코드가 실행되기 전에 선언문이 undefined 상태로 메모리에 할당되기 때문입니다. 호이스팅은 어떻게 이뤄질까 ? JS엔진이 코드를 스캔할 때 실행 컨텍스트 > 렉시컬 환경 > 환경 레코드에 유효 스코프 내의 식별자의 정보를 수집합니다. 그렇기 때문에 해당 스코프 내 어느 위치에서든 해당 식별자를 참조할 수..

스코프체인

스코프란 ? 식별자는 자신이 선언된 위치에 따라서 참조할 수 있는 유효한 범위를 가지게 되며, 이를 스코프라고 합니다. 1. 전역(Global) 스코프 어느 곳에서든지 해당 변수 또는 함수에 접근할 수 있습니다. let globalStr = "Hello"; console.log(globalStr) // Hello function func() { console.log(globalStr); } func(); // Hello → 같은 위치에서든, 함수 안이든 위치 상관없이 접근할 수 있습니다. 2. 지역(Local) 스코프 유효한 범위 내에서만 해당 변수 또는 함수에 접근할 수 있습니다. 1 ) 함수(Function) 스코프 // 함수 스코프 function func() { let localStr = "Hel..

[ 면접 준비 ] 호이스팅(hoisting)이란 ?

자바스크립트 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정을 말합니다. - MDN Web Docs - '선언문을 해당 범위의 맨 위로 이동시키는 과정' 이 문장이 이번 포스트의 핵심입니다. 하지만, 자바스크립트 파일을 한 번이라도 생성해 보고 코드를 작성해 봤다면 코드가 움직이진 않는다는 사실을 알 거예요. 맞습니다. 코드는 움직이지 않아요. 단지 맨 위로 이동시키는 것처럼 보이게 동작합니다. Lexical Environment 호이스팅을 본격적으로 설명하기 전에, Lexical Environment라는 것을 먼저 알아두면 좋아요. Lexical Environment는 변수와 함수의 scope와 identifi..

[ 면접 준비 ] 브라우저의 렌더링 원리

브라우저의 주요 역할은 두 가지입니다. 1. 사용자가 보고자 하는 자원을 서버에 요청하는 역할 2. 서버로부터 받은 응답을 화면에 출력해 사용자에게 보여주는 역할 그렇다면 어떻게 이 역할을 수행하는지 알아보는 게 이번 질문의 핵심일 것입니다. 1. HTML 파싱 그리고 DOM 생성 사용자가 어떠한 웹 주소를 검색창에 입력하고 엔터를 누르면, 브라우저는 해당 요청을 서버에 전달합니다. 그리고 서버는 가장 먼저 HTML 문서를 전달해 줄 거예요. 하지만 브라우저는 HTML 문서만으로는 어떤 내용인지 이해하지 못합니다. 그래서 해석하는 과정이 필요하게 되는데, 이때 그 과정을 파싱이라고 부르게 됩니다. 그리고 파싱이 끝나면 브라우저가 이해할 수 있는 어떠한 형태가 나올텐데, 그 어떠한 형태를 DOM( Docu..

[ JavaScript ] 함수 표현식과 함수 선언식

1. 함수 선언식 평소에 많이 볼 수 있는 기본적인 함수의 형태를 "함수 선언식"이라고 부릅니다. 아래의 코드를 보면 더 와닿을 거예요 ! function testFunc() { return '함수 선언식입니다'; } testFunc() // 함수 선언식입니다 2. 함수 표현식 "함수 표현식"은 함수가 변수에 저장되는 형태를 가지고 있어요. const testFunc = function() { return '함수 표현식입니다'; } testFunc() // 함수 표현식입니다 그렇다면, 선언식과 표현식이 따로 있는 이유가 무엇일까요 ? 3. 함수 선언식 vs 함수 표현식 1) 호이스팅 함수 선언식과 함수 표현식의 가장 큰 차이는 호이스팅 영향의 유무입니다. 함수 선언식은 제대로 콘솔이 찍히는 반면, 함수 ..

[FrontEnd] FCM을 이용해 웹 푸시 알림 적용하기

[FrontEnd] FCM을 이용해 웹 푸시 알림 적용하기 안녕하세요 : ) 텔링미의 프론트엔드 개발자 밍(Ming)입니다 ! medium.com 안녕하세요 : ) 텔링미의 프론트엔드 개발자 밍(Ming)입니다 !! 저번 카카오 로그인 게시글 이후로 약 두 달 만인데, 잘 지내셨을까요 ~? 오늘은 웹 푸시 알림에 대해 설명해 드리려고 합니다. 그전에..! 텔링미에서 정식 출시되는 서비스에는 슬프게도 웹 푸시 알림은 제외하기로 결정하게 되었어요 ..🥲 그래도 지금까지 제일 어렵고 제일 헤맸던 기능인 푸시 알림에 대한 것들을 기록하고 설명해 드리고 싶어서 가져오게 되었습니다. 지금부터 저의 아픈 손가락,, 푸시 알림에 대해 알아보도록 할까요 ?! 설치 + 기본 세팅 푸시 알림을 구현하면서 제일 먼저 든 생각..

[FrontEnd] 카카오 로그인 구현하기. 카카오 로그인을 구현해보자 | by telling me

[FrontEnd] 카카오 로그인 구현하기. 카카오 로그인을 구현해보자 | by telling me 안녕하세요 : ) 저는 텔링미의 프론트엔드 개발을 맡고 있는 Ming이라고 합니다 반가워요 😊 medium.com 안녕하세요 :) 저는 텔링미의 프론트엔드 개발을 맡고 있는 Ming이라고 합니다 반가워요 😊 텔링미는 애플 로그인과 카카오 로그인, 총 두 가지의 로그인 방식을 가지고 있습니다 ! 저는 둘 중에 카카오 로그인을 맡아 구현했는데요. 이때 알게 되었던 카카오 로그인 구조와 텔링미의 카카오 로그인 코드를 설명해 드리도록 하겠습니다 :) ⭐ 카카오 로그인 과정 1. 인가 코드 받아오기 우선 인가 코드가 뭘 의미하는지에 대해 설명해 드릴게요. 인가는 영어로 Authorization 입니다. 보통 "허가..

[ TypeScript ] type-challenges-00018-easy-tuple-length

00018-easy-tuple-length [ 문제 설명 ] For given a tuple, you need create a generic `Length`, pick the length of the tuple [ 문제 ] type Length = any​ [ 예시 ] type tesla = ['tesla', 'model 3', 'model X', 'model Y'] type spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT'] type teslaLength = Length // expected 4 type spaceXLength = Length // expected 5 튜플(readonly 배열) 타입의 길이를 ..