hani hani

본 글을 자바스크립트의 이벤트 전파에 대해 다룬 내용입니다. 목차 1. 이벤트 전파(Event Propagation)란? 2. 이벤트 전파의 종류 (버블링, 캡처링) 프론트엔드 개발자가 이벤트 전파에 대해 이해하면 사용자와의 상호작용을 관리하고, 효율적으로 이벤트를 처리할 수 있다. 1. 이벤트 전파(Event Propagation)란? 이벤트 전파에 대해 간단하게 정리하면 아래와 같다. HTML 문서 내에서 이벤트가 발생하면, 해당 이벤트가 어떻게 처리되는지를 설명하는 개념 위에 내용만 읽어봤을 때는 무슨 말인지 이해 못할 수도 있다. 아래 과정을 통해 이벤트 전파가 어떻게 일어나는지 알아보자! 이벤트 처리 과정 사용자의 상호작용(예: 클릭, 마우스 오버 등)으로 인해 이벤트 발생 → 이벤트 타깃(Ev..

오늘은 렌더링 방식에 대해 공부하고자 한다. 왜냐하면 프론트엔드 개발자는 각 렌더링 방식의 장단점을 이해하고, 웹 어플리케이션의 특성에 맞는 렌더링 방식을 선택할 줄 알아야 하기 때문이다! 렌더링 종류 렌더링 종류는 아래와 같다. 싱글 페이지 어플리케이션 (Single Page Application) 클라이언트 사이드 렌더링 (Client-Side Rendering) 서버 사이드 렌더링 (Server-Side Rendering) 이제 하나씩 자세히 알아보려고 한다. 싱글 페이지 어플리케이션 (Single Page Application) 모든 페이지가 단일 페이지로 구성되어 있는 방식 최초 한번 페이지 전체를 로딩한 후부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션 예시로는 React, Vue.js..

프론트엔드 개발자는 Restful API를 이해하고 활용하는 능력을 갖춰야 한다. Restful API를 통해 데이터를 조회, 생성, 업데이트, 삭제할 수 있고, 서버와 통신할 수 있기 때문이다. 그래서 오늘은 Restful API에 대해 공부하고자 한다. Restful API 종류 GET: 요청받은 URI의 정보를 검색하여 응답 POST: 요청된 자원을 생성 DELETE: 요청된 자원을 삭제할 것을 요청 PUT: 요청된 자원을 전체 수정 PATCH: 요청된 자원을 일부 수정 HEAD: GET 방식과 동일, 하지만 응답에 BODY가 존재 X, 응답코드와 HEAD만 응답 CONNECT: 동적으로 터널모드를 교환, 프록시 기능을 요청시 사용 터널모드: 헤더와 IP의 내용(payload) 모두 보호하는 모드 ..

프론트엔드 개발자는 언제 어떤 저장소를 사용해야 하는지 판단 할 수 있어야 한다. 이를 위해서는 브라우저 저장소의 종류 및 특징을 정확하게 알고 있어야 해서 오늘은 이를 공부하고자 한다! 저장소 종류 저장소 종류는 아래와 같다. Local Storage Session Storage Cookie 간단하게 먼저 정리하자면 데이터 용량이 작고, 서버 전송이 필요한 경우 쿠키 더 큰 용량이 필요하거나, 서버 전송이 필요 없는 경우 로컬 스토리지 또는 세션 스토리지 이제 하나씩 자세하게 알아보자. 로컬 스토리지 (Local Storage) 저장한 데이터를 지우지 않는 이상 영구적으로 보관 가능 단순하면서도 효과적인 클라이언트 측 데이터 저장 방법 중 하나 최대 크기: 5MB 사용 예시: 사용자 설정과 같은 간단한..

REST API 개념 이해를 통해 효율적인 데이터 관리, 독립적인 개발과 통합, 상태 관리의 분리 등을 알게 되어 웹 어플리케이션을 효과적으로 개발할 수 있게 되어 프론트엔드 개발자로서 필요한 소양을 쌓을 수 있다! 즉, REST API 개념은 프론트엔드 개발자가 기본으로 알고있어야 하는 개념이기 때문에 오늘 하나씩 공부해보고자 한다. REST API 자원을 정의하고 이를 표현하기 위해 HTTP 프로토콜을 이용하는 인터페이스 REST API는 클라이언트와 서버 간의 상호 작용을 용이하게 하고, 분리된 구성 요소 간의 상호 작용을 간소화하기 위해 고안되었다고 한다. 이 인터페이스를 확실하게 이해하기 위해서는 필요한 개념이 2가지가 있다. 바로 REST와 API REST 자원의 이름을 구분하여 해당 자원의 ..

클로저의 동작 원리를 이해하면 코드의 유연성, 안정성, 모듈화 등 여러 측면에서 이점을 얻을 수 있다고 한다. 그래서 오늘은 클로저에 대해 공부하여 프론트엔드 개발자로서 필요한 소양을 쌓아보자! 클로저 (Closure) 먼저 클로저에 대한 정의를 살펴봤다. 함수가 선언된 시점에서의 환경(스코프)를 기억하고 있는 함수 위에 내용은 정말 간단하게 이해할 수 있도록 정리한 것이고, 실제로 찾아봤을 때는 아래와 같은 문구를 확인할 수 있었다. 함수가 속한 렉시컬스코프를 기억하여 함수가 해당 구간 밖에서 실행되어도 그 스코프에 접근할 수 있게 해주는 기능! // one: 렉시컬 환경에는 올라갔지만 초기화되지 않아 사용 불가 // addOne: 렉시컬 환경 O, 사용 가능 let one; // 사용 가능 (하지만 ..

자바스크립트에서 중요한 개념 중 하나가 "호이스팅"이라고 생각한다. 호이스팅을 이해해야지 코드의 동작을 더 정확하게 파악할 수 있고, 예상 외 동작을 방지할 수 있다. 그래서 오늘은 호이스팅에 대해 자세하게 공부해보려고 한다. 호이스팅이란? 변수 및 함수의 선언문이 스코프 내의 최상단으로 끌어올려지는 현상 (대입문이 아닌 선언문이 끌어올려진다는 것을 기억할 것!) 위에 내용을 이해하기 위해서는 자바스크립트 엔진의 실행 과정을 알아야 한다. JS 엔진은 코드 실행 전 실행 가능한 코드를 형상화 및 구분하는 과정(실행 컨텍스트를 위한 과정)을 거치는데, 이 과정에서 모든 선언 (var, let, const, function, class)를 스코프에 등록한다. 이로 인해 이미 코드 실행 전 변수 및 함수 선언..

프론트엔드 개발자는 웹이 어떤 과정을 통해 동작하는지를 기본으로 알고 있어야 한다고 생각한다. 데이터가 어떻게 전달되어 화면에 렌더링 되는지 알아야 올바른 개발을 할 수 있다. 즉, 내가 어떤 환경에서 어떤 개발을 하는지에 대한 이해가 반드시 필요하다! 그래서~! 오늘은 웹 동작 방식에 대한 공부를 하고자 한다. 동작 방식은 아래와 같다. 사용자가 웹 브라우저를 통해 URL을 입력하면 그 중 도메인 네임 부분을 DNS 서버에서 검색 DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달 브라우저는 HTTP 프로토콜을 사용해 요청 메시지를 생성하고 HTTP 요청 메시지는 TCP/IP 프로토콜을 사용해 서버로 전송 서버는 response 메시지를 생성하여 다시..