프로그래밍 공부하기

웹 브라우저란 인터넷에서 사용자의 요청에 따라 HTML, 그림, 미디어 등의 자원을 서버에 요청하고 화면에 표시해주는 응용 프로그램이다. 대표적으로 크롬, 파이어폭스, 사파리 등이 있다. 특히 크롬을 중심으로 웹 브라우저는 어떻게 구성이 되어있고, 어떤 동작을 하는지 내가 이해한 바를 정리해보고자 한다. 1. 브라우저의 구조 브라우저의 구조는 제품 별로 조금씩 다르지만 위 그림의 요소들을 포함하고 있다. 위 요소이 모두 동급의 프로세스 혹은 스레드라기 보단 이러한 역할을 하는 요소들이 존재한다라는 식으로 이해하면 좋을 것 같다. User Interface : 주소 표시줄, 이전/다음 버튼 등 컨텐츠를 보여주는 부분을 제외한 곳 브라우저 프로세스 : User Interface와 렌더러 프로세스사이의 동작을..

1. 정의 Attribute: HTML 요소의 추가적인 정보. HTML에서 정의된다. ex. Property: DOM Tree 내의 Attribute. DOM에서 정의된다. ex. const $div = document.querySelector(".root"); console.log(div.className); // root 웹페이지 개발을 하다보면 Attribute와 Property라는 단어를 접하게 된다. 두 단어는 어떤 차이가 있을까? 먼저 Attribute는 HTML 요소의 추가적인 정보를 정의하기 위한 것으로 HTML에서 정의된다. 반면 Property는 DOM Tree 내에서의 Attribute를 가리키므로 DOM 내에서 정의된다. *DOM: HTML 페이지를 객체로 구조화한 것. 프로그래밍 ..

1. Lang This paragraph is defined as British English. Ce paragraphe est défini en français. 이 단락은 한국어로 정의됩니다. lang은 모든 HTML 요소에 사용될 수 있는 전역특성(Global Attribute)이다. 위와 같이 HTML요소의 컨텐츠가 어떤 언어로 쓰여졌는지 표시하는 것이다. lang 특성의 값이 빈 문자열이거나 특성자체가 없는 경우 기본값인 '알 수 없음(Unknown)'이 된다. 2. Use lang 태그를 사용해야할까? 한국형 웹 콘텐츠 접근성 지침(관련페이지, 관련문서)에는 웹 서비스는 서비스에서 주로 사용되는 언어를 사용해야한다고 명시되어있다. 이는 소스코드 최상단에 위치하는 html 태그에 lang 속성을..

Observer란 관측자를 뜻한다. 특정 대상을 항상 지켜보고 있는 존재이다. 브라우저에는 Intersection Observer 라는 API가 존재한다. Intersection Observer는 root와 하나 이상의 Element가 교차하는 시점을 관측하고 있다. root는 지정하지 않는다면 뷰포트를 의미한다. 즉, Intersection Observer는 관찰 대상이 뷰포트 내에 들어오는지 비동기적으로 관찰하는 요소로 활용할 수 있다. Intersection Observer는 대표적으로 무한스크롤, 컨텐츠 Lazy Load의 구현에 사용된다. 1. Infinity Scroll 무한 스크롤이란 페이지의 세로 끝에 도달했을 때 새로운 컨텐츠를 불러오는 기능이다. 무한 스크롤을 구현하는 방식 중 하나는 ..

1. Props Drilling React에서 props로 컴포넌트간 데이터를 전달할 때 해당 데이터가 필요없는 컴포넌트에도 어쩔 수 없이 데이터가 전달해주어야 할 때가 있다. 위 그림에서 컴포넌트 A의 데이터를 컴포넌트 C로 전달하기 위해선 사이에 있는 컴포넌트 B를 거쳐야하는 것처럼 말이다. 이것이 Props Drilling(혹은 Threading)이다. Props Drilling은 데이터 전달을 구현하는 가장 단순한 방법이지만 코드를 이해하기 어렵게 만든다. 그림을 다시 보자. 데이터 전달을 위해 컴포넌트 B는 필요하지 않은 데이터를 갖게되다. 또한 컴포넌트 A에서 B로 전달될 때와 B에서 C로 전달될 때 Property 이름이 변경된다면 어떨까? C에서 문제가 생겼을 때 해당 프라퍼티가 어디서 온..

1. 웹팩의 도입배경 1) 모듈 //변수 num이 포함된 a.js //변수 num이 포함된 b.js 웹 개발을 하다보면 CSS, JS 등 다양한 종류의 리소스 파일들을 여러 개 생성하게 된다. 만약 하나의 html 파일에서 2개의 JS파일이 필요하다 생각해보자. 이 경우 script 태그를 2개 사용하면 된다. 그런데 위와 같이 불러온 JS파일 두 개가 모두 같은 이름의 변수를 사용한다 생각해보자. console.log에 찍히는 num은 어떤 JS파일의 num이 될까? script태그는 위와 같이 코드의 예상치 못한 충돌을 발생시킬 수 있다. //a.js const num = 1; export default num; //b.js const num = 2; export default num; 이러한 충돌문..

2020년도 전 세계의 프론트엔드 개발자 4500명을 대상으로한 설문에 의하면 3년 안에 사라질 것 같은 솔루션 1위로 Redux가 뽑혔다. 조사에 의하면 이미 상태 관리를 위해 React Context API 및 Hooks를 사용하는 비율이 Redux를 추월하였다. 앞으로 React의 상태관리는 Context API로 대체되는 것일까? 이러한 상황에서 2020년 5월 FaceBook에서 Recoil이라는 상태관리 솔루션을 발표하였다. Recoil을 한 번 사용해보자. 내가 Recoil로 만들 것은 버튼을 누르면 카운트가 증가하거나 감소 혹은 0으로 리셋되는 간단한 카운터이다. 1. 초기 세팅 import React from 'react'; import { RecoilRoot } from 'recoil'..

웹 로딩 속도는 고객 경험에 매우 중요한 요소이다. KissMetrics 연구에 의하면 47%의 소비자는 웹 페이지가 2초 이내에 로드되기를 기대하며 3초가 되면 40%의 소비자가 웹 페이지를 이탈한다고 한다. 기사에 의하면 웹 로딩 속도 1초가 빨라지면 아마존 판매량이 1%증가 한다고 한다. 개발자가 웹 성능을 높이는 방법은 무엇일까? 우선 웹 성능 결정요소는 크게 로딩 성능과 렌더링 성능으로 나뉜다. 로딩 성능은 필요한 리소스를 불러오는 것이고 렌더링 성능은 불러온 리소스를 화면에 보여주는 것이다. 이 글에선 로딩 성능을 최적화하는 Code Split을 해보려 한다. 1. 페이지 분석 최근 프로젝트인 땅땅마켓의 Search페이지에서 개발자 도구의 퍼포먼스 탭을 이용하여 분석해보았다. 그 결과 지금 당..

데스크탑 뿐만 아니라 모바일, 태블릿 등의 기기가 보편화 되면서 사람들은 웹 사이트를 각 기기에 따라 보기 편한 형태로 제공하는 반응형 웹의 필요성을 느끼게 되었다. 1. 적응형 웹과 반응형 웹 모바일 환경에서 네이버에 접속하면 주소가 m.naver이다. 네이버 홈화면은 적응형 웹이다. 적응형 웹이란 클라이언트의 기기 정보를 미리 받아 조건 별로 다른 리소스를 보여주는 것이다. 즉, 데스크탑, 모바일, 태블릿 기기마다 별도의 템플릿과 리소스를 작성하는 것이다. 다소 번거롭지만 구축 해놓으면 해당 기기에 맞는 콘텐츠만 다운로드 받으므로 반응형 웹에 비해 로드 속도가 빠르다. 반응형 웹은 기기의 조건에 상관없이 같은 리소스를 보여주되 CSS를 이용하여 브라우저 크기에 따라 레이아웃이 달라지는 형태이다. 예를..

React에서 상태관리를 하기 위한 대표적인 라이브러리는 Redux이다. 리덕스는 위와 같이 Store, Dispatch, Reducer, Action으로 되어있어 하나의 상태를 저장하는 리덕스도 4개의 파일이 나오게되며 기존 리덕스에 하나의 액션을 추가하려면 3개의 파일을 수정해야한다. 이 것이 불편하다고 생각했던 사람들은 구조가 아닌 기능을 기준으로 파일을 분리하기로 하였다. 이 것이 Ducks 패턴이다. 1. 규칙 Ducks 패턴은 하나의 상태에 필요한 액션 타입, 액션생성자 함수, 리듀서를 한 파일에 저장한다. 따라서 하나의 액션이 추가되면 하나의 파일이 추가될 뿐이다. 구체적인 규칙은 다음과 같다. 반드시 reducer란 이름의 함수를 export default 한다. 반드시 action 생성자..