Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

etc

1. 도커(Docker)란?컨테이너 기반의 오픈소스 가상화(실제 X) 플랫폼으로, 소프트웨어를 개발, 배포, 실행하기 위한 도구 여기서 컨테이너는 소프트웨어를 실행할 때 필요한 모든 것을 포함하는 격리된 환경을 제공한다.이 컨테이너는 라이브러리, 종속성, 설정 등을 포함하여 실행에 필요한 모든 것을 패키징하며패키징된 도커 컨테이너는 다른 환경에서도 쉽게 실행할 수 있어서, 개발환경과 실제 운영 환경을 일관성있게 유지하면서애플리케이션을 실행할 수 있다.또한, 호스트 운영체제(Window, MacOS, Linux)와 독립적으로 작동하기 때문에 호스트 환경에 영향을 주지 않고 실행할 수 있다. 쉽게 말해 소프트웨어를 한 덩어리로 모아서 실행할 수 있는 환경을 제공해주고, 모아진 소프트웨어는 실행을 위해 필요한..

2024. 4. 27.

etc

브라우저 렌더링 과정은 여기서 설명했는데 렌더링 하기 전 맨 처음 브라우저 주소창에 URL을 입력했을 때 웹 페이지를 로드하는 과정은 어떻게 될까? 예를 들어 사용자가 www.naver.com 네이버를 주소창에 입력 후 엔터 빵 쳤을 때! 1. 위에 입력한 URL은 사람이 이해하기 쉽게 만들어진 도메인이라는 것, 하지만 컴퓨터는 IP 주소로 통신을 하기 때문에 사용자가 입력한 주소에 도메인 네임(www.naver.com -> 'naver.com')을 추출해서 IP 주소로 변환하기 위해 DNS(Domain Name System)에 요청을한다. 2. DNS는 naver.com에 해당하는 IP 주소를 반환하고 브라우저는 그 IP 주소를 사용해서 서버 연결을 시도한다. 3. 연결 성공 시 브라우저는 서버에 HT..

2024. 1. 4.

etc

기술면접 준비하다보면 질문을 받게 되는 브라우저 렌더링 과정 쉽게 이해해보기! 🔎 근데 브라우저가 뭘까? 브라우저 브라우저는 다양한 웹사이트를 방문하고 웹 페이지를 표시하는 역할을 하는데 사용자가 주소를 입력하거나 링크를 클릭하면 브라우저는 해당 웹페이지의 내용을 가져와서 화면에 표시한다. 브라우저 렌더링 과정 브라우저 렌더링 과정이란, 쉽게 말해 웹페이지를 사용자가 볼 수 있는 형태로 변환하는 과정을 말한다. 먼저, 사용자가 주소를 입력하거나 링크를 클릭하면 브라우저는 해당 웹페이지 주소(URL)를 서버에 요청하면서 웹 페이지를 표시하기 위해 여러 단계의 렌더링 과정을 거치게 된다. 1. 파싱: 브라우저는 서버로부터 받은 HTML 문서를 파싱해서 DOM(Document Object Model)트리를 생..

2024. 1. 3.

etc

위 저장소들을 알아보기 전에 HTTP 프로토콜에 대해서 알면 좋은데 HTTP 프로토콜은 기본적으로 무상태(Stateless) 프로토콜이라는 특성을 가지고 있다. 각각의 요청은 이전 요청과 독립적으로 처리되어 서버가 클라이언트 상태를 유지하지 않는다. 이로 인해 일부 상황에서는 사용자의 상태를 유지하고 정보를 전달하는데 한계가 발생한다. 그래서 HTTP 프로토콜의 한계를 보완하기 위해 쿠키나 세션, 웹스토리지 같은 메커니즘이 사용된다. 1 .쿠키(Cookie) 쿠키는 name(key)-value 형태의 구조를 갖는 작은 텍스트 파일 주로 로그인 상태, 사용자 환경설정, 장바구니 정보 등을 저장하는 데 활용되며 만료일을 설정할 수 있어 만료일이 지나면 삭제된다. 쿠키는 보통 4KB로 용량이 제한적이고, 클라..

2023. 12. 17.

etc

TDD(Test-Driven Development)란? TDD는 코드 작성 전에 테스트를 작성하고 테스트에 통과하도록 코드를 작성하는 것으로 Red-Green테스트라고 한다. 1. Red: 코드 작성 전에 실패하는 테스트 케이스를 작성해서 코드가 제대로 작동하지 않는 '빨간색' 상태로 만든다. 2. Green: 코드 작성 후 테스트를 통과할 수 있는 코드를 작성해서 '초록색' 상태로 만든다. 3. Refector: 마지막으로, 코드를 리팩토링하여 중복을 제거하고 가독성 높이는 작업을 수행한다. TDD를 사용하는 이유 테스트 코드는 코딩 프로세스의 일부라고 생각하면, 원하는 대로 작동하는지 확인할 수 있고, 코드를 변경해도 자동으로 테스트를 실행해서 기존의 기능들이 올바르게 작동하는지 확인할 수 있디 때문..

2023. 11. 8.

etc

Cross-Origin Resource Sharing 프론트엔드 웹 개발을 하다보면 한 번쯤 볼 수 있는 CORS 에러! CORS가 뭘까? 1. Origin 헤더 브라우저는 모든 HTTP 요청 시 'Origin' 헤더를 포함한다. 이 헤더는 현재 페이지가 로드된 출처(도메인, 프로토콜 및 포트)를 나타낸다. 🔎 Origin 웹페이지 URL은 여러가지 정보를 포함하고 있다. https:// -> 프로토콜, www.google.com -> 도메인을 뜻하고 끝에 생략이 가능한 포트번호(HTTP: 80, HTTPS: 443)까지 합친 걸 Origin이라고 한다. 2. 서버 측 CORS 정책 서버는 클라이언트가 보낸 Origin 헤더를 보고 해당 요청이 허용된 출처에서 시작된 것인지 판단한다. 그래서 서버는 CO..

2023. 10. 28.