테크

안녕하세요. 동쪽별입니다. 지난 글에 이어 실행 컨텍스트에 대해 마저 다루도록 하겠습니다. 이번 글을 작성하면서 저도 많이 헷갈리고 어려웠습니다.. 차근차근 알아봅시다 👊 목차 1. 실행 컨텍스트의 생성과 식별자 검색 과정 전역 객체 생성 전역 코드 평가 1) 전역 실행 컨텍스트 생성 2) 전역 렉시컬 환경 생성 2) - 1. 전역 환경 레코드 생성 - 객체 환경 레코드 생성 - 선언적 환경 레코드 생성 2) - 2. this 바인딩 2) - 3. 외부 렉시컬 환경에 대한 참조 결정 전역 코드 실행 함수 코드 평가 1) 함수 실행 컨텍스트 생성 2) 함수 렉시컬 환경 생성 2) - 1. 함수 환경 레코드 생성 2) - 2. this 바인딩 2) - 3. 외부 렉시컬 환경에 대한 참조 결정 함수 코드 실행..

안녕하세요. 동쪽별입니다. 이번 글은 자바스크립트의 동작 원리를 담고 있느 핵심 개념인 실행 컨텍스트에 대해 알아보겠습니다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자 바인딩을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스트 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있습니다! 이 정도면.. 자바스크립트의 핵심 개념들을 이해하기 위한 무조건 알아야 할 개념이 되겠죠! 이번 글을 살펴보기 전에 자바스크립트의 스코프에 대해 꼭! 알고 계셔야 합니다. 제 블로그에도 있어요 😆 목차 1. 실행 컨텍스트? 2. 소스코드의 평가와 실행 3. 실행 컨텍스트의 역할 4. 실행 컨텍스트 스택 5. 렉시컬 환경 실행 컨텍스트? 자바스..

안녕하세요. 동쪽별입니다. 이번 글에는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본! 스코프에 대해 알아보겠습니다. 스코프의 이해가 부족하면 다른 개념을 이해하기 어려울 수 있습니다. 사실 이 글은 다음에 다루어 볼 '실행 컨텍스트(Execution Context)'를 위한 빌드업 입니다 😁 목차 1. 스코프(Scope)란? 2. 스코프 체인(Scope Chain) 3. 렉시컬 환경(Lexical Environment) 스코프(Scope)란? 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정됩니다. 변수 뿐만 아니라 모든 식별자가 그러합니다. 다시 말해, 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해..

안녕하세요. 동쪽별입니다. 프로토타입을 다룬 포스트에서 언급했던 것처럼 이번엔 클래스 상속에 대해 살펴보겠습니다. 자바스크립트는 프로토타입 기반 객체지향 언어입니다. 그래서 프로토타입 기반 상속을 하는 건 알겠는데.. 클래스 상속은 또 뭐여? 라고, 제가 그랬었습니다 🤣 목차 1. 클래스 도입 2. 상속에 의한 클래스 확장 3. 상속 클래스의 인스턴스 생성 과정 클래스 도입 Java, C++, C#, Python.. 등 대부분 프로그래밍 언어는 클래스 기반 객체 지향을 지원합니다. 따라서, 대부분의 프로그래머들은 클래스 기반 언어에 익숙하겠죠.. 그러한 프로그래머들에게 프로토타입 기반 언어인 자바스크립트는 혼란을 야기할 수 있으며, 어렵게 느껴지게 하는 하나의 장벽처럼 인식될 수 있었습니다. 그래서! E..

안녕하세요. 동쪽별입니다. 이번 포스트에서는 여러 정렬 알고리즘에 대해 살펴보고, 자바스크립트로 구현해보도록 하겠습니다. 목차 거품 정렬(Bubble Sort) 선택 정렬(Selection Sort) 삽입 정렬(Insertion Sort) 퀵 정렬(Quick Sort) 병합 정렬(Merge Sort) 힙 정렬(Heap Sort) 계수 정렬(Counting Sort) 기수 정렬(Radix sort) 시작하기 전에 먼저, 정렬의 Stable 정렬과 In-place 정렬에 대해 알고 갑시다! Stable 정렬? 정렬을 했을 때 중복된 값들의 순서가 변하지 않는 것을 말합니다. 만약, arr = [1, 7(1), 3, 5, 4, 7(2), 9] 을 정렬한 결과가 arr = [1, 3, 4, 5, 7(1), 7(..

안녕하세요. 동쪽별입니다. 최근 2022 카카오 채용연계형 인턴십에 지원했기에 작년 문제들을 풀어봤어요. 너무 어려웠습니다... 몇 문제들은 도저히 해결하지 못해 다른 사람의 문제 접근 방법을 참고했어요. 그래서 저도 어려웠던 문제들에 대해 자바스크립트로 구현한 코드를 공유해보려 합니다. [81303] 표 편집 코딩테스트 연습 - 표 편집 8 2 ["D 2","C","U 3","C","D 4","C","U 2","Z","Z"] "OOOOXOOO" 8 2 ["D 2","C","U 3","C","D 4","C","U 2","Z","Z","U 1","C"] "OOXOXOOO" programmers.co.kr Linked List 를 이용했습니다. 먼저 0 부터 차례대로 n-1 까지 연결하는 양방향 연결 리스트..

안녕하세요. 동쪽별입니다. 매주 진행하는 프론트엔드 스터디에서 한 친구가 브라우저 렌더링에 대해서 발표를 했는데, 너무 유익했어요. 그래서 이에 대해 다시 한번 학습하고 기록하고 싶었기에 글을 쓰게 되었답니다. 그럼 브라우저가 어떤 방식으로 동작하는지, 그리고 렌더링을 최적화하기 위한 방법들은 어떤 것들이 있는지 차근차근 살펴봅시다! 목차 브라우저의 기본 구조 렌더링 동작 과정 렌더링 최적화 브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램입니다. 크롬, 사파리, 파이어폭스, 인터넷 익스플로러 등이 이에 해당돼요. 브라우저는 유저가 선택한 리소스를 서버로부터 받아와서 유저에게 보여줍니다. 리소스는 페이지, 이미지 비디오 등의 콘텐츠를 말..

안녕하세요. 동쪽별입니다. 최근 프로젝트를 진행하다가 로컬에 저장되어 있는 xlsx 파일을 읽고, 파싱하는 기능을 구현해 보았어요. 보통 서버에서 이를 진행하여 데이터를 보내주지만, 서버 없는 SPA를 구현 중이라 클라이언트 단에서 이를 수행해야 했답니다.. 위 파일 구조의 루트 디렉터리에 있는 xlsx 파일을 ./src/utils/api.js 파일에서 다룰 수 있게 했습니다. xlsx 파일 읽기 xlsx 파일을 가져오기 위해 Fetch API를 사용했어요. Fetch API? Fetch API는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다. Fetch API가 제공하는 전역 fetch 메서드로 네트워크의 리소스를 쉽게 비..

안녕하세요. 동쪽별입니다. 지난 글에서 프로토타입이 대체 뭐하는 녀석인지, 그리고 관련 프로퍼티들과 프로토타입 체인에 대해 알아보았어요. 이번에는 프로토타입 생성 시점, 생성 방식 그리고 기타 관련 내용들에 대해 살펴보면서 정복해보려 해요. 사실 __proto__ 접근자 프로퍼티 사용은 권장되지 않는 것을 알고 계신가요? 좀있다가 알려드릴게요 😛 (궁금한 사람은 맨 밑으로!) 이번 내용을 이해하기 위해선 제 글이 아니더라도, 프로토타입에 대한 기본은 알고 계셔야 합니다..! 그럼 시작해볼까요? 목차 프토토타입 생성 시점 프로토타입 생성 방식 프로토타입 섀도잉 프로토타입의 교체 직접 상속 (feat. __proto__ 를 대신한 모던 메서드) 프로토타입 생성 시점 프로토타입은 생성자 함수가 생성되는 시점에..

안녕하세요. 동쪽별입니다. 개발 관련 첫 포스팅으로 자바스크립트의 프로토타입에 대해 깊~게 살펴보려 해요. 자바스크립트에 대해 잘 모르시는 분들은 이해가 안되는 부분도 있을거에요. 최~대한 쉽게 읽힐 수 있도록 최선을 다해보겠습니다! 프로토타입은 자바스크립트의 상속을 지원하기 위한 방법입니다. 그런데, 왜 다른 언어처럼 클래스가 아니라 프로토타입일까요? 그 이유는 자바스크립트가 접근한 철학적 사고방식 때문입니다. 클래스 기반 객체지향 언어(Java, C# 등)은 "모든 것에는 반드시 본질이 존재한다" 라는 사고 방식이 녹아들어 있어요. 이에 반해, 자바스크립트의 프로토타입은 "모든 것은 분류 되는 것이 아니라, 가장 좋은 보기로부터 범주화된다" 라는 사고방식으로 생성되었어요. 즉, 프로토타입은 가장 좋은..