본문 바로가기

전체 글268

[학습정리] Webpack,Babel babel https://babeljs.io/docs/en/ 정의 공식문서에서는 babel을 다음과 같이 표현한다. Babel is a Javascript compiler. Use next generation JavaScript 바벨은 최신 버전의 자바스크립트 문법(ES6+)을 이전 버전의 자바스크립트 문법으로 변환시켜주는 트랜스 컴파일러다. babel을 사용한다고 해서 모든 자바스크립트 최신 문법을 사용할 수 있는건 아니다. 기존에 문법에 없던 문법은 pollyfill 을 추가하여 지원하게 한다. pollyfill 자바스크립트의 최신기술을 구버전 브라우저에서 사용하기 위해서는 변화와 함께 폴리필도 사용해야 한다. 폴리필은 런타임 기능 주입을 말한다. 런타임 주입 기능은 브라우저에서 코드가 실행될 때 기.. 2023. 2. 17.
[TIL] 2023.2.16 그동안 계속 토스 공부와 코딩테스트를 보면서 정신없이 지냈다. 어제저녁에 토스시험을 보고 와서 우선적으로 잠시 여유가 생기나... 했는데 좋은 기업에 면접기회가 생겼다. 해당 기업에 대한 후기는 전형이 다 끝난 후 진행할 예정! 개인적으로 많은 매력을 느끼고 있는 회사라서 잘 준비해보려고 한다. 개발자로서의 첫 면접이라서 떨리지만 파이팅!! 우선 회사에 대해서 먼저 자료를 찾아보면서 공부하고, 기술면접을 준비하기 시작했다. 그동안 FE, JS, 네트워크에 대해서는 꾸준히 공부하고 있었기 때문에 내용을 정리하면서 공부를 시작했다. 네트워크는 이전에 정리한 자료가 있어 복습하면서 공부 중이고, 프론트엔드 기술면접은 다시 정리하면서 공부하고 있다. 면접 전에 그동안 공부한 내용을 잘 정리해 봐야겠다!! [면접.. 2023. 2. 16.
[면접] 프론트엔드 기술면접 프론트엔드 기술면접을 위해 여러 자료를 공부하고 정리하면서 업데이트 중입니다. 중요도 ★★★★★ 브라우저 렌더링 과정 HTML 파싱 후, DOM(Document Object Model) 트리 구축 CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축 Javascript 실행 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다. DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout/Reflow 단계) 계산한 위치/크기를 기반으로 화면에 그림 (Paint 단.. 2023. 2. 16.
[TIL] 2023.2.13 오늘과 내일은 계속 토스 공부하느라 별도의 기록없이 진행될 것 같다. 알고리즘 문제를 간간히 풀면서 토스공부 중! 지난주에 응시한 프로그래머스 코테는 합격을 받았고, 내일 오전에 코테를 추가로 응시할 예정이다. 내용은 수요일 시험이 끝나고 별도로 정리할 예정! [프로그래머스] 테이블 해시 함수 (Javascript) https://school.programmers.co.kr/learn/courses/30/lessons/147354?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 mocha-blog.tistory.com [프로그래머스] 마법의 엘리베이터 (Javascript) https://sc.. 2023. 2. 13.