Front-end/Browser13 Bundler 번들러란 ...? create-react-app 생각없이 사용하던 나를 반성하며, Bundler 개념이 나왔을 때 고개 갸우뚱했던 나를 반성하며 ... 공부 !-! 📌 Bundler ? 여러개의 파일을 하나로 묶어주는 역할 ex. Webpack, Parcell, Rollup, Browserify ✔ 번들러는 왜 탄생했는가 ? ✔ 왜 굳이 여러개의 파일을 하나로 묶어줘야 하는가 ? 2022. 4. 5. Babel 과 Babel 이 필요한 이유 📌 Babel 이란 ? Babel is a JavaScript Compiler ...? Babel is a JavaScript Transpiler ...! 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 작업을 진행한다. 📍 Babel 등장 이유 Cross Browsing 을 돕기 위해 등장하였다. 🤔 Cross Browsing (크로스 브라우징) ? 브라우저나 기기의 종류에 관계없이 사이트가 의도대로 보여지고 작동되게 하는 작업. (호환성) 브라우저마다 렌더링 엔진이 다르기 때문에 개발자의 의도대로 작동하지 않는 경우가 발생한다. 그래서 크로스 브라우징 작업이 추가로 필요함. 😂 📎 Babel 이 빌드하는 과정 1. Parsing (파싱) : 코드 → AST 변환 과정 2. Trans.. 2022. 4. 3. 주소창에 URL (www.google.co.kr) 을 입력하면 무슨 일이 벌어지나요 ? 📌 브라우저 주소창에 www.google.co.kr을 입력하면 무슨 일이 벌어질까 ? 1. 브라우저 주소창에 www.google.co.kr을 입력. 2. 브라우저는 총 4개의 cache에서 DNS기록 확인. 3. 요청한 URL이 cache에 없으면 ISP의 DNS server는 재귀적으로 도메인 이름을 찾음. 4. 알맞은 IP주소를 찾으면, 브라우저는 해당 서버와 TCP연결을 시도. 5. TCP연결에 성공하면, 브라우저가 웹 서버에 HTTP요청 보냄. 6. 웹 서버는 처리한 HTTP응답을 브라우저에게 보냄. 7. 브라우저는 응답에 기반, HTML 컨텐츠를 랜더링해서 우리 눈에 보여줌. 📍 브라우저 주소창에 www.google.co.kr 이라는 도메인 이름을 검색한다. 📍 해당 도메인 주소의 IP주소를 찾.. 2022. 3. 4. Cookie 와 Cookie options (Set-Cookie) 📌 Cookie ? 서버에서 클라이언트에 data 를 저장할 수 있는 방법 중 하나로, 작은 크기의 문자열을 말한다. 서버에서 클라이언트에 cookie 를 전송할 수도 있고, 클라이언트에서 서버로 cookie 를 전송할 수도 있다. -> cookie 를 이용해 데이터를 저장하고, 원할 때 불러와 다시 사용할 수 있다. ◾ Cookie 형식 = 쿠키는 name=value 쌍으로 정보를 저장한다. 📌 Cookie Options ? 서버가 클라이언트에 cookie 로 데이터를 저장하는 건 맘대로 할 수 있지만 역으로 클라이언트에서 서버로 다시 불러오는 건, 지정된 조건을 만족할 때만 가능하다. cookie에 데이터를 저장하면서 원하는 조건을 지정해줄 수 있다 ( 조건 설정은 option임 ). ✔ Expire.. 2021. 11. 23. Preflight Request : HTTP Message 를 통한 header 공부 📍 HTTP message 를 살펴보기 전, Method 와 Header 그리고 CORS 정책을 짚고 넘어가면 좋다. 2021.09.10 - [개발 공부/Browser] - Client - Server : SOP와 CORS Client - Server : SOP와 CORS 📌 SOP? (Same Origin Policy) 동일 출처 정책으로, 하나의 Origin에서 로드된 문서나 스크립트가 다른 Origin의 자원과 상호작용하지 못하도록 제한하는 것. 여기서 말하는 Origin은 아래 3가지 요소를 조합 code-designer.tistory.com 📌 Preflight Request ◾ HTTP Request : Preflight ✔ Access-Control-Request-Method : Access.. 2021. 10. 27. 직접 서버를 만들면서 배운 Location Header ✔ Location : Location Response header는 "re-direct" 할 url을 명시한다. 3XX(redirection) 이나 201(created) 상태 코드가 응답되었을 때만 적용할 수 있다. 3XX 상태코드가 반환되었을 때, 기존 url에 Location에 명시된 url을 붙여 완성된 새로운 URL에 request를 보낸다 ! (fetch 요청) 📎 303 See Other 상태 코드 언제나 GET 메서드를 사용해 re-direct fetch 요청을 보낸다. (기존의 original 메서드 무시) PUT 이나 POST 메서드가 요청된 이후에 변경된 상황을 "읽고싶을 때" 주로 사용한다. 📎 307 Temporary Redirect 상태 코드 기존의 original 메서드를 변.. 2021. 10. 26. Simple Request : HTTP Message 를 통한 header 공부 📍 HTTP message 를 살펴보기 전, Method와 Header 그리고 CORS 정책을 짚고 넘어가면 좋다. 2021.09.10 - [개발 공부/Browser] - Client - Server : SOP와 CORS Client - Server : SOP와 CORS 📌 SOP? (Same Origin Policy) 동일 출처 정책으로, 하나의 Origin에서 로드된 문서나 스크립트가 다른 Origin의 자원과 상호작용하지 못하도록 제한하는 것. 여기서 말하는 Origin은 아래 3가지 요소를 조합 code-designer.tistory.com 📌 Simple Request ◾ HTTP Request ✔ Host : : (optional) Host Request header 는 서버의 도메인명과 서버.. 2021. 10. 22. 브라우저와 Node JS : 데이터를 가져올 수 있는 다양한 방법들 (추가중) 📍 클라이언트 단의 API 호출을 도와주는 Node.js 라이브러리 ✔ request ✔ axios ✔ jQuery 📍 클라이언트 단의 API 호출을 도와주는 브라우저 내장 객체 or 함수 ✔ XMLHttpRequest - 객체 ✔ fetch( ) - 함수 📌 XMLHttpRequest 특징 ◾ XML뿐만 아니라 모든 종류의 데이터를 받아올 수 있다. ◾ 오래된 브라우저를 지원하기 위해 아직까지도 쓴다. ◾ fetch가 아직 처리하지 못하는 일들을 위해 쓰인다. ( ex. 업로드 진행 상황 추적하기 ) ◾ 데이터를 동기적으로 불러올 수도 있고, 비동기적으로 불러올 수도 있다. 📌 XMLHttpRequest 사용법 📎 문법 // request를 요청하기 위해서는 3가지 단계가 필요하다. // 01 XMLH.. 2021. 10. 20. Event Loop & Task queue 이벤트 루프와 태스크 큐 비동기 프로그래밍 공부 전에 자바스크립트 코드 동작 원리인 실행 컨텍스트 개념부터 잡고 들어가면 좋겠다. 자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌 실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관 code-designer.tistory.com 📌 브라우저 환경 📍 자바스크립트 엔진 (싱글 스레드) 대부분의 자바스크립트 엔진은 크게 2가지 영역으로 구분할 수 있다. ✔ 콜 스택 call stack (실행 컨텍스트 스택) 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조이다. === 실행 컨텍스트 스택 자바스크립트 엔진은.. 2021. 9. 18. 이전 1 2 다음
