코딩 일기장

🍪 HTTP 프로토콜의 특징 비연결 지향(Connectionless): 클라이언트가 서버에게 Request를 보내고, 서버가 클라이언트에게 Response를 보내면 TCP/IP 연결을 끊는 특성 무상태(Stateless): 통신이 끝나면 상태 정보를 유지하지 않는다. 이러한 HTTP 프로토콜의 특징으로, 클라이언트의 로그인 정보나 브라우저에서 입력한 값 등이 페이지를 이동할 때마다 초기화되는 것! 이러한 문제점을 해결하기 위해 데이터 저장에 사용하는 것이 쿠키, 세션, 웹 스토리지 개념입니다! 🍪 쿠키 클라이언트(브라우저)에 저장되는 키와 같이 들어있는 작은 파일이다. 클라이언트에 300개까지 쿠키 저장 가능, 하나의 도메인당 20개의 값만 가질 수 있으며, 하나의 쿠키 값은 4KB까지 저장이 가능하다...

🔅 Webpack이란? 모듈 번들링이라고 하는데, html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링이라고 합니다. 필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어 주는 것을 의미합니다. 왜 Webpack을 사용할까? SPA를 사용하면서 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함됩니다. 종속된 여러 자바스크립트 파일들을 하나로 묶음으로서 관리하기 편하다. 파일을 컴파일 할 때 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸리기 때문에, 이를 해결하기 위해 여러 자바스크립트 파일을 하나의 파일로 번들링한다. 하나의 자바스크립트 파일로 만들기 때문에 웹페이지 성능 최적화를 해준다. 🔅Babel 이란? ES6+ 버전의 ..

동기와 비동기는 호출되는 함수의 작업 완료 여부를 신경쓰냐에 대한 개념이고, 블록킹과 논블록킹은 코드를 실행할 수 있는 권리인 제어권이 누구에게 있느냐에 대한 개념이다. 👉 동기와 비동기 호출되는 함수의 작업 완료 여부를 신경쓰냐가 최대 관심 여부! 함수 실행과 리턴이 순차적인 흐름을 따르느냐, 따르지 않느냐 동기 (Synchronous) 함수 A가 함수 B를 호출하고, B의 작업 완료 후 리턴을 기다리거나 B의 작업 완료 여부를 스스로 계속 확인하며 신경쓰면 Synchronous 비동기 (Asynchronous) 함수 A는 함수 B를 호출한 후로 B의 작업 완료 여부에는 신경쓰지 않는다. 함수 A가 함수 B를 호출할 때 콜백 함수를 함께 전달해서, 함수 B는 작업이 완료되면 콜백 함수를 실행한다. 👉 ..

태스크 큐는 콜백 함수들이 대기하는 큐(FIFO) 형태의 배열이라 할 수 있고, 이벤트 루프는 호출 스택이 비워질 때마다 태스크 큐에서 콜백 함수를 꺼내와서 실행하는 역할을 한다. 자바스크립트 싱글스레드 기반의 언어로 한 번에 하나의 작업만을 처리할 수 있다. 비동기로 동작하기 때문에 싱글스레드임에도 동시에 많은 작업을 처리할 수 있다. 하지만 비동기로 동작하는 핵심 요소는 자바스크립트가 아닌 브라우저가 가지고 있다. 자바스크립트 엔진이 단일 호출 스택을 사용하기는 하지만, 자바스크립트가 구동되는 환경(브라우저, Node.js등)에서는 주로 여러 개의 스레드가 사용되며, 이러한 구동 환경이 단일 호출 스택을 사용하는 자바스크립트 엔진과 상호 연동하기위해 사용하는 장치가 바로 이벤트 루프이다. 메모리 힙 ..

대기열, 캐싱, DNS, 라우팅, ARP, 초기연결을 거쳐 컨텐츠를 다운받게 되고 이 후 브라우저 렌더링 과정을 거쳐 네이버라는 화면이 나타나게 됩니다. 대기열 브라우저는 주소창 입력에 대한 요청을 대기열에 넣습니다. 캐싱 요청된 값의 결과값을 저장하고, 그 값을 다시 요청하면 저장해 둔 값을 다시 제공하는 기술. 다시 불러오지 않아도 되므로 속도 개선 효과가 있음. 공유 프록시 캐싱 요청한 서버에서 프록시서버가 캐싱을 하는 것을 의미한다. ex) Node.js 서버의 경우 앞단의 프록시 서버로 nginx 서버를 둬서 이 서버를 캐싱 서버로 사용하는 경우 브라우저 캐시 쿠키, 로컬스토리지 등을 포함한 캐시이다. 브라우저 자체가 HTTP를 통해 다운로드하는 모든 문서를 보유하는 것을 말한다. DNS 조회 ..

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/1845 코딩테스트 연습 - 폰켓몬 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. programmers.co.kr input으로 숫자 배열이 주어진다. 배열의 숫자는 폰켓몬의 종류를 의미하고, 우리는 nums/2 만큼의 폰켓몬을 고른다. 고른 폰켓몬 중에 최대로 많은 종을 뽑는 경우의 숫자를 리턴하는 문제이다. 문제 결과 입출력 예 #2 6마리의 폰켓몬이 있으므로, 3마리의 폰켓몬을 골라야 합니다. 가장 많은 종류의 폰켓몬을 고르기 위해서는 3번 폰켓몬 한 마리..