웹프론트엔드

웹프론트엔드

    Reflow와 Repaint에 대하여

    내가 자주 헷갈리는 개념인 reflow와 repaint에 대해서 공부한 내용을 정리해 보려고 한다. 브라우저 렌더링 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 여기서 자원은 일반적으로 HTML 문서이지만, 다른 형태의 파일(e. g. 이미지, PDF 등)일 수도 있다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석하여 표시하는데 이 명세는 웹 표준화 기구인 W3C에서 정한다. 브라우저의 주요 구성 요소는 다음과 같다. 사용자 인터페이스 : 요청한 페이지를 보여주는 창 제외한 나머지 모든 부분 (e.g. 북마크, 주소 표시줄 등) 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어 렌더링 엔진 : 요청한 콘텐츠 표시. 예를 들..

    [웹 프론트엔드 인터뷰] #1. 자바스크립트 엔진은 어떻게 동작하나요?

    웹 프론트엔드 개발자라면 어떤 회사에서, 어떤 프로젝트를 맡아서 개발을 하든지 누구나 궁금해 할 수 있고 누구나 물어볼 만 한 질문들을 골라서 이에 대한 나의 나름대로 최선의 대답을 정리해 보는 포스팅을 연재해 보려고 한다.(반응이 좋으면 계속 연재해 볼 생각) 현업에 계신 많은 웹 프론트엔드 개발자들 그리고 새로운 꿈을 찾아 취업을 준비하는 학생 및 예비 개발자 분들에게 조금이나마 도움이 되기를 바라는 마음으로 글을 작성해 본다. 아직 2년차 웹 프론트엔드 개발자라 잘못된 지식을 알고 있거나, 깊이가 부족할 수 있는데 이러한 부분에 대해서는 날카로운 피드백을 해 주시면 정말 감사할 것 같다. JavaScript 엔진은 어떻게 동작하나요? 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인..

    Adios 2020

    올 한해 2020년도 이제 얼마 남지 않았다. 이번에도 한 해를 돌아보며 나의 2020년을 회고하는 글을 써 보려고 한다. 나의 3번째 회고록이며 소프트웨어 개발자로서 1년차의 회고록이다. 2018년 회고록 2019년 회고록 분기별 Highlight Q1 (1월 ~ 3월) 토스에서 Scraping Developer로 일을 열심히 했다. 진짜... 열심히 했다. 내가 했었던 일은 은행 및 카드사로부터 계좌나 거래내역과 같은 금융 정보들을 불러오는 과정(Scraping)을 하기 위한 회원가입/로그인 자동화 기능 개발 및 유지보수 였다. 쉽게 설명하면 고객들이 직접 일일이 해야 하는 작업들을 Puppeteer라는 Headless Chrome Browser 오픈소스 도구를 이용하여 자동화를 시켜주는 것이다. 신..

    [RxJS] Ch04. RxJS에서의 시간 - 상

    이번 포스팅에서는 RxJS에서 시간에 대한 개념을 정리해 보고자 한다. 왜 우리가 시간을 신경써야 하는지, RxJS에서는 시간을 어떻게 처리하는지 등에 대해서 알아보고자 한다. 앞서 우리가 살펴본 바에 따르면 옵저버블은 시간 경과에 따른 이벤트의 무한 시퀀스이다. 동기적인 코드라면 실행 시간을 정확하게 측정하여 예측할 수가 있지만 비동기는 명령들이 선형적으로 실행이 되지 않기 때문에 실행 시간을 정확하게 알 수 없고 예측은 더더욱 할 수가 없다. 따라서 특정 작업이 언제 완료될지를 추측하는 것이 아닌, 작업에 반응한다는 방식으로 접근해야 한다. 왜 시간을 신경써야 할까 시간을 신경써야 하는 이유는 단순하다. 시간이 오래 걸리면 사용자는 초조함을 느끼고 결국에는 떠난다. 따라서 우리는 시간을 최대한 단축할..

    [TS] 우아한 타입스크립트 세미나 - 2부

    지난 포스팅에 이어서 이웅재님의 우아한 타입스크립트 세미나 2편을 정리해 보려고 한다. 이번 포스팅에서는 실전 타입스크립트 코드를 작성하는 측면에서 적용해볼 수 있는 부분들에 대해 알아본다. 1. Conditional Type 활용하기 Conditional Type이란 타입이 조건부로 적용되는 것을 의미한다. 타입 T를 제네릭 형태로 받는다. 예를 들면 아래의 예제 코드처럼 T가 string인 경우는 StringContainer로, T가 number이면 NumberContainer로 받을 수 있다. 이번에는 infer라는 키워드를 살펴보도록 하자. 조건부 타입에서 infer는 타입변수를 참조하기 위해서 사용이 된다. 프로미스의 제네릭은 보통 리턴타입을 의미한다. 아래의 예제는 Promise의 배열인 경우..

    Next.js에 대해서 알아보자 #2. Data Fetching

    지난 포스팅에 이어서 Next.js 튜토리얼 글을 이어서 작성해 보고자 한다. 시작하기에 앞서 이제부터 타입스크립트를 사용할 계획이라 TS 설치를 먼저 진행한다. $ npm i typescript @types/react @types/node --save-dev // node_modules 폴더를 지우고 $ npm i $ npm run build & npm run dev 그러면 프로젝트 root 디렉토리 위치에 다음 파일들이 자동으로 생성이 될 것이다. next-env.d.ts tsconfig.json 그리고 기존의 어플리케이션도 jsx 파일을 tsx로 바꾸어 주면 정상적으로 실행이 된다. 오늘 해볼 작업들은 다음과 같다. Link를 통해 페이지를 이동 getStaticProps()를 통한 동적 데이터 추..

    [RxJS] Ch03. 핵심 연산자

    이전 RxJS 포스팅에서는 다음과 같은 주제들에 대해 다루어 보았다. Ch01. 반응형으로 생각하기 Ch02. RxJS로 배우는 반응형 프로그래밍 이번 포스팅에서는 위에서 살펴본 개념들을 바탕으로 옵저버블을 만들어 보고, 모든 데이터 소스에 대한 시간에 따른 데이터 입출력을 옵저버블 컨텍스트로 관리하는 법을 배우려고 한다. 이런 상황을 가정해 보자 사용자가 서버에 장기 실행 ajax 요청을 보내고, 호출 후 다른 버튼을 눌러 다른 페이지로 이동하였다. 특정 데이터를 사용할 수 있게 데이터를 풀링했는데 예외가 발생하여 이제 데이터를 사용할 수 없게 되었다. 우리가 사용자에게 무한히 시스템 리소스를 사용할 수 있게 하지는 못하고 따라서 이러한 경우 문제가 발생할 수 있다. 이를 해결하기 위해 RxJS를 사용..

    [TS] 우아한 타입스크립트 세미나 - 1부

    지난 8월 들었었던 이웅재님의 우아한 타입스크립트 내용을 정리해서 블로그 포스팅 해 보려고 한다. 1/2부로 나누어서 세미나를 진행하였고, 포스팅도 2번에 나누어서 할 생각이다. 많은 사람들이 타입스크립트를 쓰면 버그도 사라지고, 테스트 코드를 작성하지 않아도 된다고 착각하는 경우가 있다. 이는 분명히 잘못된 생각이며, 타입스크립트를 가지고 타이핑을 잘 하면 우리가 가질 수 있는 이점은 런타임 전에 오류를 미리 파악할 수 있다는 점이다. 작성자와 사용자 타입스크립트의 타입 시스템은 다음과 같은 특징을 가지고 있다. 타입을 명시적으로 지정할 수 있음 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론 우리는 함수를 가운데에 매개로 해서 구현자와 사용자를 연결한다. 때로은 이 둘..