본문 바로가기
728x90

프로그래밍/프로그래밍_공부9

폴리필, 바벨, 웹팩 정의와 차이 폴리필, 바벨, 웹팩 정의와 차이 바벨(babel) 트랜스파일러(transpiler). 브라우저가 ES6 문법을 이해하지 못하기 때문에 하위 브라우저가 지원하는 ES5이하 문법(syntax, feature)으로 변경 - ex) const -> var로 변경, arrow function -> function expression으로 변경 - core-js: babel 내부의 library. ES6 이후 문법들을 폴리필 처리한다. - 바벨 프리셋: 함께 사용되어야 하는 babel 플러그인을 모아둔 것. @babel/preset-env 폴리필(polyfill) 오래된 브라우저에서 지원하지 않는 APIs(missing APIs)를 지원해주는 역할 - fetch APIs, Promises, Map and Set, .. 2023. 2. 12.
[자료구조] Hash, Hashing, Hash Table(해시, 해싱, 해시 테이블) [자료구조] Hash, Hashing, Hash Table(해시, 해싱, 해시 테이블) 해시 사전적 의미 : 잘게 썲 임의의 크기를 가진 데이터 key를 고정된 크기의 데이터 value로 변화시켜 저장하는 것이다. 키에 대한 해시값을 사용하여 값을 저장하고 key-value 쌍의 개수에 따라 동적으로 크기가 증가하는 연관배열이다. key에 대한 해시값을 구하는 과정을 hashing(해싱)이라고 하며, 이때 사용하는 함수(알고리즘)를 해시함수라 한다. 해시값 자체를 index로 사용하기 때문에 평균 시간복잡도가 O(1)로 매우 빠르다. 직접 주소 테이블(Direct Address Table) 입력받은 value가 곧 key가 되는 데이터 매핑 방식이다. 이렇게 직접 주소 테이블은 값에 접근하기는 편하지만,.. 2022. 1. 23.
[CSS] position [CSS] position CSS position은 5 종류의 값을 가질 수 있다 static relative fixed absolute sticky 이렇게 position이 set 되면 top, bottom, left, right property를 사용하여 element를 옮길 수 있다. 하지만 이러한 property들은 position 설정이 되지 않으면 작동하지 않는다. position : static HTML elements는 기본적으로 static을 default 값으로 갖는다. static은 top, bottom, left, right properties에 영향 받지 않는다. 특별한 방식으로 positioning되지 않고, normal flow of the pages에 따라 positionin.. 2022. 1. 14.
프론트엔드 기술면접 인터뷰 질문 모음 프론트엔드 기술면접 인터뷰 질문 모음 중요도 설명 ⭐️⭐️⭐️⭐️⭐️ 프론트 엔지니어를 꿈꾼다면 정확히 알고 있어야 하는 것들. 하나라도 모르면 떨어진다고 봐도 무방. 꼭 알고가쟈~ ⭐️⭐️⭐️⭐️ 90% 이상을 알아야하며 많이 대답한다고 좋은게 아니라 정확하게 대답해야 함. 본인이 프론트엔드 엔지니어라고 말하고 싶다면 필수적으로 알아야 함 ⭐️⭐️⭐️ Javascript 프레임워크, 플러그인, 그 외 사용법 등 중요한 질문 ⭐️⭐️ 가볍고 기본적인 질문 ⭐️ 알면 가산점이나 모른다고 크게 등락에 영향은 없음. 그리고 그 외적인 것 ⭐️⭐️⭐️⭐️⭐️ 1. 브라우저 렌더링 원리 1-1. 홈페이지가 사용자에게 보이는 순서에 대해 설명해주세요 -> https://d2.naver.com/helloworld/5.. 2022. 1. 13.
[네트워크] 인터넷 프로토콜 IP, TCP, HTTP [네트워크] 인터넷 프로토콜 IP, TCP, HTTP TCP : IP 상위 프로토콜. 네트워크 상에서 packet을 전달 받았을 때, 재조립 및 재요청 담당 HTTP : TCP 상위 프로토콜. 메세지를 해석하는 역할. 계층(Layer)? 컴퓨터 통신을 위해 모듈이 세분화되어있다. 기능별로 나누어 관리되며 문제 부분의 모듈만 수정하면 되어 유지/보수가 편하다. OSI 7 계층 (Open Systems Interconnection Reference Model) OSI는 컴퓨터 네트워크 프로토콜 디자인과 통신을 계층으로 나누어 설명한 것이다. OSI가 설계 원칙이라면, 인터넷 프로토콜 구조는 실제로 구현된 설계도이다. 1. 물리 계층(Physical Layer) - Bit (PDU: Protocol Data .. 2022. 1. 9.
브라우저 렌더링 과정 및 Reflow Repaint 브라우저 렌더링 과정 및 Reflow Repaint 웹 브라우저 동작 순서 1. 웹브라우저에서 DNS를 통해 사이트 IP주소를 얻음 2. 웹사이트 접속하여 서버와 3번의 handshake (random숫자 +1)를 함 3. 서버에 데이터 요청(HTTP Request)해서 받음(HTTP Response) 4. 데이터 해석 (웹 표준화 기구인 W3C의 명세에 따라 해석) 브라우저의 렌더링 엔진이 HTML parsing(해석)하여 DOM Tree 생성 style 태그 만나면 CSS parsing(해석)하여 CCSOM Tree 생성(HTML parsing 멈추고) CSS parsing 마치면 HTML parsing 중단지점부터 다시 parsing 시작 script 태그 만나면 JS 엔진에 제어 권한을 넘겨 pa.. 2022. 1. 7.
728x90