본문 바로가기

프론트엔드

 (11)
프론트엔드 성능 최적화 가이드 1장 스터디 프론트엔드 성능 최적화 가이드의 1장을 기반으로 진행한 스터디 입니다. 프론트엔드 성능 최적화 가이드 웹이 가벼워지면 사용자의 만족도는 올라간다 웹사이트를 방문했는데 페이지가 늦게 로드되면 금세 ‘뒤로 가기’ 버튼에 손이 갑니다. 구글의 연구에 따르면 페이지 표시 시간이 1초에서 3초 blog.insightbook.co.kr 성능 최적화 개요 성능 최적화가 중요한 이유 구글 : 성능이 곧 매출 성능이 저하되면 사용자가 떠나고 매출이 감소한다 즉, 성능을 최적화하면 더 나은 UX, 높은 가입율과 전환율, 낮은 이탈율을 확보하여 더 많은 수익을 창출할 수 있음 성능 최적화는 어떻게 이루어질까 웹 성능 결정 요소는 로딩 성능과 렌더링 성능으로 나눌 수 있음 로딩 성능 웹 페이지와 웹 페이지 표시에 필요한 기타..
[프론트엔드 인터뷰 퀴즈] 정적 클래스 멤버(프로퍼티 / 메서드)를 사용하는 이유는 뭘까요? 출처 : https://www.frontendinterviewhandbook.com/javascript-questions#why-you-might-want-to-create-static-class-members JavaScript trivia questions in front end interviews | Front End Interview Handbook Answers to Front-end Job Interview Questions - JS Questions. Pull requests for suggestions and corrections are welcome! www.frontendinterviewhandbook.com 정적 클래스 멤버(프로퍼티 / 메서드)는 클래스의 특정 인스턴스에 묶여되지 않..
세션 복습 - 비동기를 우아하게 처리하기 위한 Observable [Track 2-2] 나석주 - 비동기를 우아하게 처리하기 위한 Observable - YouTube 토스 개발자 나석주님의 Promise의한계, Observable 소개, RxJs 비동기 프로그래밍, Advanced RxJS를 주제로 한 세션이다. 공개 ppt가 없어 복습 차원에서 세션 내용을 정리함 웹에서 처리하는 비동기들 Dom Events Ajax Animation 시간 (쓰로틀링, 디바운스) 웹소켓, 워커 프로미스의 한계 취소 불가 성공 또는 실패 불변 상태로만 값을 보장 단일값(중요) 왜 취소가 필요할까요 자동완성(이전 요청에 대한 취소 필요) 라우트 변경 임프레션 사용자가 원할 때 단일값 다 여러개의 값을 다룸 Dom Events Ajax Animation 시간 (쓰로틀링, 디바운스) 웹소켓..
2021 한화생명 경력공채 프론트엔드 면접 후기 면접은 zoom 화상채팅으로 진행하였다. 인사팀 직원 한 분과 현직자 3분과 진행되는 구조였다. 분위기는 약간 빡빡한 느낌이었고, 처음부터 면접관들의 표정도 별로였고, 대꾸도 심드렁했다. 최악의 면접중 하나. 무성의. 기술질문 내용은 기억나는건... CSS 박스모델, CSS 플렉스모델, 브라우저 성능최적화, 브라우저 렌더링, 버추얼돔, 주소창에 URL 입력시 브라우저 동작. 결과는 탈락 ㅠ 여튼 내용은 어렵지 않았는데 최근 정신이 없어서 면접대비를 하나도 못했던게 패인인것 같다. (사실 실무 개발에서 손 뗀지 3개월 째니 말 다했지...) 이로서 올해 이직 도전한 (중간에 드롭한 곳도 있음) 서류 합격 + 코딩테스트 합격한 기업들... 야놀자, 토스, 카카오, 현대카드, 인프런, 한화생명, CJ올리브영의..
[모던 브라우저 공부]브라우저 하이레벨 아키텍처 https://cabulous.medium.com/how-browser-works-part-i-process-and-thread-f63a9111bae9 How browser works (part I) — process and thread To me, a browser was a black box. It eats my HTML, CSS, and JavaScript files, and displays a page. Somehow, it works. cabulous.medium.com 지금 버전 브라우저의 동작과 다를 수 있음. 개념적으로 이해하자. 1. 브라우저의 하이 레벨 아키텍처 브라우저는 기능 별로 다양한 프로세스를 사용함 프로세스와 스레드 스레드는 프로세스 안에 존재한다 프로세스는 데이터, 코드, 파..
[프론프엔드 면접 대비] 코어 자바스크립트 : 데이터 타입 야놀자, 카카오, NHN(전화면접), 한화생명의 프론트엔드 면접을 진행하면서 경험했던 자바스크립트 질문을 모아둔 페이지이다. 여러 면접을 탈락하며 느낀점은, 지식보단 프로젝트 경험을 통한 내공이 중요한것 같다. 사내 개발 위주 팀으로 전배하기로 하여, 면접 여정은 한동안 중단될 것 같지만 즐거운 경험이었다. (사실 장기간 현업에서 개발한 경험이 없었기에 당연히 면접도 못보는게 맞긴 하다... 쩝) 좀 더 절실히, 내공을 쌓고 정말 원하는 회사의 원하는 포지션에 지원해봐야겠다. 면접을 잘보려면 지식을 아는것도 중요하지만, 말할 준비가 되어있어야 한다. 따라서 해당 페이지의 컨텐츠는 서술형으로 작성하였다. 용어 정리 변수는 변경 가능한 데이터가 담길 수 있는 공간 식별자는 그 변수의 이름 실제로 변수의 식별..
[프론트엔드 면접 대비] 브라우저의 렌더링 과정 알아보기 모던 자바스크립트 Deep Dive - YES24 모던 자바스크립트 Deep Dive - YES24 『모던 자바스크립트 Deep Dive』에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤친다. 따라서 여러분이 작성한 코드 www.yes24.com 모던자바스크립트 Deep Dive 책의 38장을 정리한 내용임 브라우저의 렌더링 과정 개요 파싱 parse tree/ syntax tree를 생성하는 일련의 과정 파싱이 완료되면 파스 트리 기반으로 바이트 코드를 생성함 바이트 코드는 특정 하드웨어가 아니라 가상 머신에서 실행하도록 만든 바이너리 코드 렌더링 html, css, js 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 CSSOM +..
[코딩테스트 후기] 2021 CJ올리브영 'No.1 TECH 인재' 경력 채용 챌린지 후기 결국 2번은 못풀었다... 전에 풀었던 문제랑 비슷한것 같은데... js로 bfs 구현이 익숙하지가 않아서리... 1번은 해당 문제와 유사했다. 1002번: 터렛 (acmicpc.net) 1002번: 터렛 각 테스트 케이스마다 류재명이 있을 수 있는 위치의 수를 출력한다. 만약 류재명이 있을 수 있는 위치의 개수가 무한대일 경우에는 -1을 출력한다. www.acmicpc.net 2번은 해당 문제와 유사했다. 2021번: 최소 환승 경로 (acmicpc.net) 2021번: 최소 환승 경로 첫째 줄에 역의 개수 N(1≤N≤100,000), 노선의 개수 L(1≤L≤100,000)이 주어진다. 다음 L개의 줄에는 각 노선이 지나는 역이 순서대로 주어지며 각 줄의 마지막에는 -1이 주어진다. 마지막 줄에는 출발..

티스토리툴바