테크/자바스크립트

'세 줄 독후감' 웹사이트를 운영하며, 최근 사용자들에게 한 오류를 제보 받았습니다. 아래 독후감 평점 입력 기능이 동작하지 않는다는 것이었습니다. 근본적인 원인을 찾아보자 먼저 데스크톱 환경에서 평점 기능을 사용해보자 별 이상 없이 동작했습니다. "왜 안된다는 거지..?" 당황했지만.. 무려 2명의 사용자가 동일한 오류를 제보해주셨기에, 틀림없이 문제가 존재한다고 판단했습니다. 하지만 계속해서 여러 방식으로 평점 기능을 요리조리 사용해보아도 별 문제가 없었습니다..😨 그러다! 모바일 환경에서 테스트를 해보자 곧바로 오류를 발견할 수 있었습니다. 오류의 한 예시는 다음과 같습니다. 1. 3으로 초기화된 평점 5을 터치 2. 별점 다섯 칸 활성화 3. 평점 제외 다른 영역 터치 4. 별점 세 칸 활성화 원..

안녕하세요 동쪽별입니다. 최근에 바닐라 자바스크립트로 SPA(Single Page Application)를 개발해보았습니다. 이와 관련하여 SPA 개발을 위한 컴포넌트를 구현한 경험에 대해 공유해보려 합니다. 컴포넌트? 컴포넌트는 리액트로 만들어진 앱을 이루는 가장 최소한의 단위로, 리액트(React)에서 가장 중요한 구성요소입니다. 그래서 컴포넌트가 정확히 무엇일까요? 실제 리액트 공식 문서의 Components and Props 부문을 보면 아래 문장이 명시되어 있습니다. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements d..

안녕하세요. 동쪽별입니다. 이번 글에서는 바닐라 자바스크립트로 모달을 직접 구현해본 경험을 공유하고자 합니다. 위 이미지와 같이 날짜 입력 아이템을 클릭시 캘린더 모달이 렌더링 되도록 구현했습니다. 모달은 position: absolute 스타일을 적용하여 쉽게 퍼블리싱할 수 있습니다. 그런다음 클릭 이벤트 발생시 모달 Element를 DOM에 추가하거나, display: none 이었던 모달 Element 스타일을 display: flex 로 변경하는 등의 방식으로 렌더링할 수 있겠죠. 문제는 모달 외 영역 클릭시 해당 모달을 제거하는 동작을 구현하는 것이었습니다. 또한, 모달 제거와 동시에 날짜 입력 아이템의 포커싱 또한 비활성화해야 했습니다. 첫번째 방법 : 상위 Element 에서 이벤트 전파 해..

안녕하세요 동쪽별입니다. 오랜만에 자바스크립트 관련 글을 쓰네요 😁 이번 글에서는 자바스크립트의 가비지 컬렉션에 대해 완전 정복해보도록 하겠습니다! 메모리 누수 자바스크립트 메모리는 단순 변수에 사용되는 스택 메모리와 복잡한 객체에 사용되는 힙 메모리로 구분됩니다. 단순 변수(= 원시 타입) : String, Number, Boolean, Null, Undefined, Symbol, BigInt 등 힙 메모리에 저장된 객체의 주소값 또한 스택 메모리에 저장됩니다. 복잡한 객체(= 참조 데이터 타입) : Object, Array, Function 등 아래 그림의 왼쪽은 스택 영역으로 실행 컨텍스트와 원시 타입의 데이터를 저장하는데 사용되고, 오른쪽은 힙 영역으로 객체를 저장하는데 사용되는 것을 볼 수 있습..

안녕하세요. 동쪽별입니다. 지난 글에서 실행 컨텍스트에 대해 다루었으니, 이제 클로저를 살펴보아야겠죠? 이 글은 실행 컨텍스트에 대한 사전 지식이 있다는 가정하에 작성되었습니다. 그러니 실행 컨텍스트를 먼저 알아보고 오시면 좋겠습니다 😅 제 블로그에도 있어요! 목차 렉시컬 스코프 클로저와 렉시컬 환경 클로저의 활용 자주 발생하는 실수 클로저(closure)는 자바스크립트 고유 개념이 아닙니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성입니다. 따라서 클로저의 정의가 ECMAScript 사양에 등장하지 않습니다. MDN에서는 아래와 같이 정의하고 있습니다. "클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다." 음.. 아직 무슨 의미인지 잘 와 닿지는 않네요. 차..

안녕하세요. 동쪽별입니다. 지난 글에 이어 실행 컨텍스트에 대해 마저 다루도록 하겠습니다. 이번 글을 작성하면서 저도 많이 헷갈리고 어려웠습니다.. 차근차근 알아봅시다 👊 목차 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..

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