Written by Jieun

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

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.

React, Next

React로 라이브러리 없이 여러곳에서 재사용할 수 있는 간단한 모달창 만들기! // App.jsx import { FaRegTrashAlt } from "react-icons/fa"; import Modal from "./components/Modal"; function App() { return ( 삭제하기 ); } export default App; 먼저 상위 컴포넌트에 위처럼 버튼을 만들어주고, components 폴더를 생성해서 버튼을 눌렀을 때 나오는 Modal 컴포넌트를 불러오기 다음 Modal 컴포넌트에서 스타일링과 열고 닫는 기능을 작성할건데 // Modal.jsx import { IoClose } from "react-icons/io5"; const Modal = ({ isOpen, o..

2024. 1. 2.

React, Next

엄청 간단한 엑셀 저장 기능을 구현할 수 있는 라이브러리를 발견했다! https://www.npmjs.com/package/xlsx xlsx SheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: 2 years ago. Start using xlsx in your project by running `npm i xlsx`. There are 4230 other projects in the npm registry using xlsx. www.npmjs.com npm install xlsx xlsx 라이브러리를 설치해주기 다른 기능도 많지만, 정말 간단하게 버튼을 클릭하면 데이터를 엑셀로 저장하는 기능을 구현하기 위..

2023. 12. 29.

etc

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

2023. 12. 17.

코딩테스트, 알고리즘

문제 설명 https://school.programmers.co.kr/learn/courses/30/lessons/42747 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 제한 사항 과학자가 발표한 논문의 수는 1편 이상 1,000편 이하입니다. 논문별 인용 횟수는 0회 이상 10,000회 이하입니다. 입출력 예 citations return [3, 0, 6, 1, 5] 3 이 과학자가 발표한 논문의 수는 5편이고, 그중 3편의 논문은 3회 이상 인용되었습니다. 그리고 나머지 2편의 논문은 3회 이하 인용되었기 때문에 이 과학자의 H-Index는 3입니다..

2023. 12. 16.