전체 글
-
브라우저 렌더링 과정FE/HTML 2025. 8. 19. 22:46
🌐 브라우저 렌더링 과정렌더링이란 브라우저가 HTML, CSS, Javascript를 해석해 우리가 보는 화면이 실제로 나타나는 과정입니다. 🏃 렌더링 과정브라우저가 HTML, CSS, Javascript를 화면에 나타내는 과정은 다음과 같습니다. 1️⃣ HTML 파싱 및 DOM 트리 생성먼저, 브라우저는 HTML 파일을 읽고 해석하여 DOM (Document Object Model) 트리를 구성합니다.📖 HTML 파싱웹 브라우저가 서버에서 받은 HTML 문서를 문자열로 받아 이를 파싱하여 이해 가능한 구조로 변환하는 과정브라우저는 HTML 문서를 위에서 아래로 읽어 태그와 내용을 파악하고 각 요소의 의미와 관계를 이해🌴 DOM TreeHTML 문서의 계층적 구조를 표현한 객체 모델브라우저가 HT..
-
Express.jsNode.js 2025. 8. 18. 22:22
🧑🏻💻 Node.js🚀 Node.js 란Node.js는 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경입니다.Node.js는 웹 브라우저 밖에서 자바스크립트를 실행할 수 있게 해주는 역할을 합니다.비동기 I/O 처리에 강점이 있어 실시간 통신이 필요한 웹 서버나 네트워크 애플리케이션을 구축하는 데 주로 사용됩니다. 📖 Package.json 파일 구조package.json은 프로젝트의 메타데이터와 의존성(dependencies)을 관리하는 파일입니다.프로젝트에서 어떤 패키지들을 사용하는지 프로젝트 이름과 버전은 무엇인지 등을 정의{ "name": "my-test-app", "version": "1.0.0", "description": "A simple application."..
-
HTML 기본 정리FE/HTML 2025. 8. 18. 22:11
📌 HTMLHTML (Hypertext Markup Language)- 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드 HTML은 콘텐츠의 구조를 정의하는 마크업 업어 마크업 언어문서의 구조와 서식을 표현하기 위해 사용되는 언어입니다.태그등을 통해 문서나 데이터의 의미, 구조를 명시하는 언어.HTML, XML, Markdown 📖 HTML 기본 구조 이 문서가 HTML 문서임을 선언모든 HTML 문서에서 가장 먼저 나와야 합니다.전체 HTML 문서의 시작과 끝을 나타내는 루트 요소페이지 전체의 콘텐츠를 감쌉니다.웹 페이지의 제목, 스타일(CSS), 스크립트(JavaScript) 등 페이지에 보이지 않는 메타 정보웹 페이지에 실제로 보이는 모든 콘텐츠 (본문 - 텍스트, 이미지, 링크..
-
네이버 부스트캠프 웹・모바일 10기 챌린지 후기네이버 부스트캠프 웹・모바일 10기 2025. 8. 13. 16:08
🚀 챌린지에 들어가며.. 처음 부스트캠프 챌린지에 합류했을 때 저는 단순히 ‘더 잘하는 개발자’가 되는 것보다 ‘어떻게 배우고 성장할 것인가’에 대한 고민을 안고 있었습니다. 대학교에서 컴퓨터 관련 전공을 이수하고 여러 프로젝트 경험이 있었지만 어느 순간부터 학습이 ‘겉핥기’에 그치고 있다는 생각이 들었고 ‘보여주기 위한 개발’을 하고 있다는 느낌이 계속 들었습니다. 그래서 저는 부스트캠프 과정을 통해 함께 성장하는 경험을 되찾고 싶었습니다. 혼자서는 놓치기 쉬운 문제의 본질을 동료와 함께 고민하고 단순히 코드를 작성하는 것을 넘어 '왜' 이 코드가 필요한지를 고민하는 개발자로 성장하고 싶다는 간절한 바람을 안고 챌린지를 시작했습니다. 🌱 챌린지 챌린지(Challenge): 안전한 학습에서 벗어나 진..
-
네이버 부스트캠프 웹・모바일 10기 챌린지 3주차 / 4주차 회고네이버 부스트캠프 웹・모바일 10기 2025. 8. 13. 13:25
🚀 3 - 4주차에 들어가며 마음가짐1, 2주차 회고하면서 ‘이제 방향을 좀 잡아가야지!’ 했던 게 바로 어제 같은데 막상 돌아보니… 3, 4주차가 끝나고 회고를 작성하고 있네요..! 뭔가 정신없이 지나간 것 같기도 하네요. 😵 먼저! 2주차 회고에서 세웠던 작은 목표들을 마음속에 새기고 3주차를 시작했습니다.특히 "내가 고민하는 내용, 상황을 공유해보기", “AI를 러닝 파트너로 활용하기" 라는 두 가지 키워드를 더 의식하며 남은 3,4 주차를 진행하고자 했습니다! 3, 4주차는 이제 과정의 절반을 넘어선 시점이라 단순히 미션을 수행하는 것에 그치지 않고 '내가 이 과정을 통해 무엇을 얻고 있는지'를 한 번 더 점검해야 하는 시기라고 생각했습니다. 단순히 미션을 구현하는 것이 아닌 문제 해결 과정 ..
-
HTTP Request / Response 구조💻 computer science/🌐 network 2025. 8. 6. 18:02
🚀 HTTP HTTP는 클라이언트와 서버 사이에 데이터를 주고받는 데 사용되는 통신 규약입니다.웹에서 가장 널리 사용되며 사람이 읽을 수 있는 텍스트 기반의 형식을 사용합니다. HTTP 통신은 요청(Request) 과 응답(Response) 으로 이루어집니다.📬 HTTP RequestGET / HTTP/1.1\\r\\nHost: developer.mozilla.org\\r\\nAccept-Language: fr\\r\\n사람이 읽을 수 있는 형태\r\n줄바꿈을 표현하는 내용이 포함되어 있다. 1️⃣ Start lineHTTP Method클라이언트가 수행하려는 작업 (GET, POST 등)Path요청한 리소스의 경로(URL) - 전체 URL에서 프로토콜, 도메인, 포트를 제외한 부분Protocol ..
-
소켓 프로그래밍💻 computer science/🌐 network 2025. 8. 6. 17:55
🔍 소켓이란?소켓(Socket) 컴퓨터 네트워크에서 데이터를 주고받기 위한 통신 종단점(endpoint)입니다. 서버와 클라이언트가 특정 포트를 통해 양방향 통신을 가능하게 하며 소켓이 각 애플리케이션에 통신 인터페이스를 제공합니다.엔드포인트: IP 주소 + 포트 번호의 조합이 소켓의 고유 식별자일반적으로 TCP/IP, UDP/IP 등 표준 네트워크 프로토콜을 사용 ✅ 소켓이 하는일역할설명양방향 데이터 송수신소켓을 통해 서버와 클라이언트가 데이터를 주고받습니다.네트워크 통신 추상화소켓은 복잡한 네트워크 계층(IP, TCP/UDP 등)을 추상화하여 비교적 간단하게 통신 기능을 구현할 수 있도록 도와줍니다.IP 주소 및 포트 식별소켓은 어떤 IP 주소의 어떤 포트로 통신할 것인지를 지정하고 이를 통해 여러..
-
네트워크 통신 방식 - 유니캐스트, 브로드캐스트, 멀티캐스트💻 computer science/🌐 network 2025. 8. 6. 17:42
네트워크 통신 방식은 데이터를 주고받는 목적지의 수와 방법에 따라 유니캐스트, 브로드캐스트, 멀티캐스트, 애니캐스트로 나뉩니다.📌 유니캐스트 (Unicast)1:1 통신 방식으로 고유한 주소로 식별되는 특정 단일 네트워크 목적지에만 데이터를 전송하는 방식 🏃 유니캐스트 데이터 전송 방식송신자는 먼저 데이터 패킷에 목적지의 고유 주소(MAC 주소 또는 IP 주소)를 포함패킷은 네트워크 스위치나 라우터를 거쳐 목적지로 전달됩니다. 스위치나 라우터는 패킷의 목적지 주소를 확인하여 해당 주소를 가진 네트워크 장치로 패킷을 전달합니다목적지에 도달한 패킷은 해당 장치의 네트워크 인터페이스 카드(NIC)에서 목적지 주소를 확인합니다. 만약 목적지 주소가 자신의 주소와 일치하면 패킷을 받아 처리하고 그렇지 않으면 ..