ALL

안녕하세요. 동쪽별입니다. 이번 글에는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본! 스코프에 대해 알아보겠습니다. 스코프의 이해가 부족하면 다른 개념을 이해하기 어려울 수 있습니다. 사실 이 글은 다음에 다루어 볼 '실행 컨텍스트(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 까지 연결하는 양방향 연결 리스트..

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

안녕하세요. 동쪽별입니다. 책을 읽고 첫 리뷰를 작성하네요. 처음인 만큼, 먼저 제가 꾸준한 독서를 지향하게 된 이유를 먼저 말씀드리려고 해요. 개발 공부는 정말로 재밌어요. 제가 좋아하는 분야를 꾸준히 공부하고 직업으로 삼는 것은 큰 행복입니다. 하지만 아주 가끔은 지칠 때도 있어요. '번아웃(burn out)'이라 하죠. 그럴 때 독서는 '자극' 이 돼요. 즉, 저의 꾸준한 독서의 이유는 '끊이지 않는 자극을 위해서' 라 할 수 있어요. 특히, 주로 즐겨 읽는 책은 자기계발 도서에요. 어떤 주제던 간에 자기계발 도서를 읽으면 항상 좋은 자극을 받았던 것 같아요. 그걸 알기에, 그리고 친구의 '하루 15분 책 읽기' 추천에 영향을 받아 꾸준한 독서를 시작하게 되었답니다. 누구나 지치는 순간이 와요. 그..

안녕하세요. 동쪽별입니다. 최근 프로젝트를 진행하다가 로컬에 저장되어 있는 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# 등)은 "모든 것에는 반드시 본질이 존재한다" 라는 사고 방식이 녹아들어 있어요. 이에 반해, 자바스크립트의 프로토타입은 "모든 것은 분류 되는 것이 아니라, 가장 좋은 보기로부터 범주화된다" 라는 사고방식으로 생성되었어요. 즉, 프로토타입은 가장 좋은..

블로그 개설 후 첫 글을 쓴다. 사실 나는 직접 개발한 개인 블로그를 운영 중이다. 2020년 8월 말부터 시작하여 현재는 155개의 글을 작성했고, 근래에는 거의 1일 1포스팅 중이다. 그런데 왜 새 블로그를 개설했냐고? "허접한 글을 자주 쓸 바에는 차라리 하나의 글을 높은 퀄리티로 쓰자" '나는 주니어 개발자다 (김설화, 문영기, 정종윤, 지찬규, 최재웅)' 책에서 인용한 문장이다. (다 읽은 후 리뷰하겠다) 물론 내가 여태껏 쓴 글들이 허접하다고 생각하지는 않는다. 하지만 최근 들어 제가 쓴 글들이 남의 것처럼 느껴졌다. 자바스크립트를 학습하며 이를 기록하는데, 이미 잘 정리되어 있는 다른 글을 거의 그대로 베끼는 것 같았다. 아니 그랬다. 이 것이 잘못되었다고 생각하지는 않는다. 나만의 언어로 ..