전체 글 (174) 썸네일형 리스트형 [ React ] 재조정(Reconciliation)과 Key 사용 이유 배경 리액트는 가상돔을 저장하고 있다가 DOM에 변화가 생기면 변경된 부분만 동기화시키는 방식으로 렌더링을 진행한다. 공식문서에는 가상돔에 대해 아래와 같이 기술하고 있다. Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 '재조정(Reconciliation)' 이라고 합니다. 위와 같이 리액트는 뷰(HTML)에 변화가 있을 때, 구 가상돔과 새 가상돔을 비교하여 변경된 내용만 DOM에 적용한다. 그리고 이러한 비교 과정을 ‘재조정(Reconciliation)'이라고 한다. DOM은 트리 자료구조를 가지므로 재조정은 두 트리간의 차이를 비교하는 과정으로 볼 .. [ Web ] 브라우저의 렌더링 과정 '모던 자바스크립트 Deep Dive' 책의 일부분을 정리한 글입니다. 대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행되지만 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 개발자라면, 특히 프런트엔드 개발자라면 더더욱 브라우저 환경을 이해할 필요가 있다. 이 글에서는 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 알아볼 것이다. 먼제 전체적인 과정은 아래와 같다. 브라우저는 HTML, CSS 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트.. [ Javascript ] Intersection Observer 가지고 놀기 공부하면서 Intersection Observer API의 활용 가능성이 참 많다는 것을 느꼈다. 그래서 이것저것 따라 만들어본 것을 기록하고자 이 글을 쓰게 됐다. 토스 홈페이지를 일부 참고했다. 구현을 완료하고나서 적는건데 내 생각대로 잘 안됐다. 스크롤 이벤트를 완전히 대체할 수 있겠다 싶었는데 한계가 있는 부분이 존재한다. 이에 대해서는 두 번째 섹션에서 언급하겠다. 컨텐츠 따로 띄우기 우선 초간단 예시를 먼저 구현해보자. 제목을 뭐라고 적어야할지 고민하다가 마땅한게 생각나지 않아서 아무렇게나 적었다. 컨텐츠를 포함하는 컨테이너 박스가 뷰포트에 노출되면 위처럼 효과가 작동한다. 따라서 단순히 observer에 컨테이너를 등록해주고, 각 요소에 transition을 정의한 클래스를 추가해주기만 하면.. [ Javascript ] Intersection Observer API (무한스크롤, lazy-loading 구현) 사용 배경 Intersection Observer API는 대상 요소가 상위 요소 또는 최상위 문서의 뷰포트와 교차하는 부분의 변화를 비동기적으로 관찰할 수 있는 방법을 제공합니다. 위 문장은 MDN 웹문서에서 그대로 가져와서 번역한 것이다. 여기서 핵심은 ‘비동기'다. Intersection observer가 있기 전에는 교차 탐지를 구현하기 위해 getBoundingClientRect(), 스크롤 이벤트 등을 사용했었는데, 이러한 메소드들은 메인 쓰레드에서 실행되기 때문에 성능 문제를 야기할 수 있다. Intersection Observer API는 콜백 함수를 등록해서 교차 탐지 대상(target)이 다른 요소(root)에 들어가거나 나갈때, 또는 두 요소가 교차할 때 실행되도록 한다. 즉, 동기적.. [ HTML + CSS ] 심심해서 만들어본 커스텀 input 한 번 만들어봐야지 생각만 하고 있다가 갑자기 삘이 와서 만들어봤다. 우선 결과물은 아래와 같다. 참고로 태그명으로 직접 접근해서 나중에 쓸때는 클래스명을 주던가 해야한다. 약간 생각해야 했던 부분은 transition 상태 유지였다. input 태그에 글자가 있으면 효과가 유지돼야 하는데 이를 어떻게 구현할 수 있을까? valid 가상클래스를 활용하면 된다. 나도 이번에 처음 알게된건데 valid는 input 태그가 유효한지 판별해주는 가상클래스다. 가령 email인 경우 input 타입이 'email'이면 HTML이 스스로 유효성 검사를 해준다. 내가 구현하고자 했던 것은 글자가 하나라도 있으면 스타일을 유지하는 것이기 때문에 단순히 input 태그에 'required' 속성을 넣어주고, input .. 엘리스 sw 엔지니어 2기 후기 저번주 금요일에 데모데이 발표와 함께 수료를 했다. 후기 글은 나중에 쓸 생각이었는데 엘리스 sw 엔지니어 3기 모집글을 보고 빨리 써야겠다는 생각을 했다. 엘리스 sw 엔지니어 3기 지원을 고민하는 사람들에게 이 글이 약간이나마 도움 되었으면 좋겠다. 우선 결론부터 말하면 입문자면 추천한다. 근데 다른 좋은 부트캠프도 있으니 먼저 지원해보기를 바란다. (ex. 네이버, 프로그래머스 등) 참고로 전공자면 얻는게 많이 없을 수도 있다. 누가 하면 좋을까요? 엘리스 sw 엔지니어는 프런트엔트 엔지니어를 양성하는 교육과정이다. 백엔드도 잠깐 다루기는 하지만 프런트가 최소한 알아야 하는 정도만 배운다. 간단한 웹 어플리케이션 정도는 만들 수 있는 정도? 나는 원래 백엔드를 희망했는데 엘리스에서 공부하다보니 프런.. [ WEB ] 인터넷과 웹의 차이점 CORS를 정리하려고 MDN 웹문서에서 링크를 계속 타다가 여기까지 와버렸다. 이 글은 MDN 웹문서를 보고 정리한 글이며, 저의 주관이 약간 들어가 있기 때문에 잘못된 내용이 있을 수 있습니다. 혹시나 틀린 부분이 있다면 댓글로 알려주세요! 인터넷은 컴퓨터끼리 연결된 거대한 인프라고, 웹은 이러한 인프라 위에 구축된 하나의 서비스다. 인터넷 컴퓨터가 서로 통신을 하기 위해서는 물리적으로든, 무선으로든 서로 연결되어 있어야 한다. 컴퓨터끼리 연결된 하나의 집합체를 '네트워크'라고 부른다. 네트워크를 구성하는 가장 단순한 방법은 아래 왼쪽 그림과 같이 직접 연결하는 것이다. 그러나 이런 방식은 컴퓨터가 10대만 되어도 45개의 케이블이 필요하며, 컴퓨터 한대당 9개의 플러그가 필요하다. 이러한 문제점을 해.. [ WEB ] XML이란 XML에 대해 많이 들어봤지만 정작 어떤 개념인지는 몰라서 간단하게 정리하려고 이 글을 쓰게 되었다. 모든 내용은 w3schools 자료를 참고하였다. 💡 XML은 데이터를 저장하고 전송하기 위한 소프트웨어 및 하드웨어 독립적인 도구다. XML이란? XML은 확장 가능한 마크업 언어다. XML은 데이터를 저장하고 전송하도록 설계되었다. XML은 사람이 읽을 수도 있고 기계가 읽을 수도 있도록 설계되었다. XML은 자가 기술할 수 있도록 설계되었다. 자가 기술(self-descriptive)이란? 작성자가 온전히 설계할 수 있음을 의미한다. XML은 HTML과 비슷하게 태그(tag)들로 이루어져 있는데 모든 태그는 작성자가 직접 생성할 수 있다. 따라서 XML 자체는 아무 것도 하지 않으며, XML은 태그.. 이전 1 2 3 4 ··· 22 다음
