개발이 하고싶은, 첼시를 좋아하는

Developer/TI

이벤트 버블링/캡쳐링, 이벤트 위임

이벤트 등록 DOM API를 통해 DOM에 접근할 수 있다. 접근한 DOM 요소에 이벤트를 등록할 수 있는데 addEventListener를 활용해 이벤트를 등록할 수 있다. 이벤트 객체 addEventListener로 이벤트가 등록된 후, 이벤트가 발생하면 브라우저는 이벤트 객체를 생성한다. 해당 객체에는 이벤트가 발생한 요소와 대상에 대한 정보가 담겨 있다. Event - Web API | MDN Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다. developer.mozilla.org 이벤트 객체 속성 event.target : 이벤트가 처음 발생한 대상 event.currentTarget : 이벤트의 현재 대상 event.type : 이벤트 타입 etc Event - Web API |..

Developer/TI

자바스크립트 script async/defer 어트리뷰트

async/defer 어트리뷰트 브라우저 렌더링 동작에 대해 공부하다 async/defer 어트리뷰트를 처음 접하게 되었고, 생소한 부분이라 다시 따로 공부한 것을 정리했다. 브라우저 렌더링 과정 정리 브라우저 렌더링 자바스크립트가 가장 많이 사용되는 곳은 웹 페이지/애플리케이션 클라이언트 사이드이다. 웹 페이지/애플리케이션의 클라이언트 사이드 상의 자바스크립트는 브라우저에서 mieumje.tistory.com async/defer 어트리뷰트의 등장 배경 Cats 위와 같은 html이 있다고 가정해보자. 브라우저 렌더링 동작 방식에 의해 위에서부터 아래로 차례로 내려오며 DOM과 CSSOM을 그린다. head tag 내부에서 script tag를 만나면, DOM 생성 과정을 중단하고 자바스크립트 엔진이 ..

Developer/TI

브라우저 렌더링 과정 정리

브라우저 렌더링 자바스크립트가 가장 많이 사용되는 곳은 웹 페이지/애플리케이션 클라이언트 사이드이다. 웹 페이지/애플리케이션의 클라이언트 사이드 상의 자바스크립트는 브라우저에서 실행(HTML, CSS, 자바스크립트)된다. 브라우저가 HTML, CSS, 자바스크립트로 작성된 문서를 어떻게 해석하고 그리는지 파악한다면 클라이언트 사이드 자바스크립트 프로그래밍의 효율을 높일 수 있다. 브라우저 렌더링 과정 웹 브라우저에서 URL을 입력하게 되면 서버 측에서 요청을 응답(웹 페이지, HTML, CSS, 자바스크립트)해준다. 서버로부터 요청받은 응답을 통해 렌더링 과정을 거치게 된다. 1. 입력받은 URL 해석 2. DNS 조회(도메인 ➡️ IP 주소, IP 주소 ➡️ 도메인) 3. IP가 존재하는 서버로 이동 ..

Developer/TI

REST API, RESTful API 정리

REST 용어 Representational State Transfer의 약자로 로이 필딩 논문(2000년)에 처음으로 소개되었다. Wiki 정의를 보면 다음과 같다. REST(Representational State Transfer)는 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형식이다. 이 용어는 로이 필딩(Roy Fielding)의 2000년 박사학위 논문에서 소개되었다. 필딩은 HTTP의 주요 저자 중 한 사람이다. 이 개념은 네트워킹 문화에 널리 퍼졌다. 로이 필딩은 잘 설계되어 있는 HTTP를 제대로 사용하지 못하는 것에 대한 아쉬움이 있어 최대한 활용할 수 있는 REST 아키텍처를 발표했다고 한다. REST API, RESTful API란? REST는 A..

Developer/React

[React] 이미지 업로드 미리보기(FileReader / createObjectURL)

STU-TI 최종 프로젝트 회고 최종 프로젝트를 한마디로 요약해보자면, '최고의 팀원들과 성공적인 마무리!'라고 할 수 있다. 부족한 점도 많았던 내가 성공적으로 프로젝트를 마무리한 것은 좋은 팀원들과 함께해서였다. 물 mieumje.tistory.com 지난 최종 프로젝트에서 이미지 업로드를 다뤄야 했었다. 사용자로부터 이미지를 받고, 이미지 검증 후 미리보기를 보여주고 Form 입력이 완료되면 최종적으로 이미지가 포함된 Form Data를 백엔드 서버로 전송해야 했다. 내가 맡은 스터디 생성/수정 페이지에서는 FileReader를 사용했고, 다른 분이 작업한 커뮤니티 포스트에서는 createObjectURL 방식을 사용했다. 업로드한 이미지를 미리 보여주기 위해 사용한 방법에 차이가 있어 정리를 하게..