전체 글
-
브라우저 이벤트FE/HTML 2025. 8. 26. 13:51
🔍 브라우저 이벤트란?브라우저에는 많은 이벤트가 발생합니다.사용자가 버튼을 클릭화면의 크기 조절화면 스크롤등등이처럼 사용자의 인터렉션(이벤트)가 발생하면 그에 해당하는 일을 등록해 처리할 수 있습니다.이벤트는 함수에 연결되어 이벤트가 발생하지 전에는 함수가 실행되지 않다가 이벤트가 발생되면 실행됩니다.이벤트 핸들러 🤖 이벤트 객체이벤트가 발생했을 때 브라우저가 자동으로 생성하여 이벤트 핸들러 함수에 전달하는 정보를 담은 객체입니다.여러 이벤트들의 공통적인 속성과 이벤트 종류에 따른 특정 속성, 메서드를 포함합니다.이벤트 객체는 이벤트가 발생한 요소, 이벤트 타입, 마우스 좌표, 키보드 입력 등 이벤트와 관련된 정보를 제공합니다.📌 주요 속성속성설명예시event.type이벤트의 종류‘click’, ‘..
-
CSS 알아보기FE/HTML 2025. 8. 25. 23:33
🎨 CSS 란?CSS - Cascading Style Sheets웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어입니다.HTML이 웹 콘텐츠의 뼈대를 만든다면 CSS는 그 뼈대에 색상, 글꼴, 위치 등 시각적인 요소를 입히는 역할을 합니다. 📌 HTML과 CSSHTML과 CSS는 각자의 문법을 가지는 별개의 언어.HTML은 CSS를 포함할 수 있지만 HTML없이 존재하는 CSS는 의미가 없습니다. 🏃 동작 원리HTML과 브라우저의 동작 과정에서 CSS가 어떻게 적용되는지 간단하게 흐름 설명렌더링 파이프라인의 개념(HTML 파싱 → CSS 파싱 → 적용 → 최종 렌더링) 요약 📖 기본 문법(사용법) CSS는 Selector(선택자) 와 Declaratives(선언부) 로 구성됩니다.선택자 ..
-
Node.js - 싱글 스레드, 이벤트 루프 그리고 libuvNode.js 2025. 8. 23. 17:21
🧩 Node.js 의 특징Node.js에 대해서 학습을 해보면 아래 내용을 학습하게 됩니다.싱글 스레드이벤트 루프논 블로킹 I/O🤔 어떻게 Node js는 싱글 스레드로 여러 비동기 작업들을 블로킹 없이 수행하는 것일까?🔍 싱글 스레드멀티 스레드 시스템에서는 여러 스레드가 동시에 작업을 처리할 수 있어 작업이 병렬적으로 실행됩니다.하지만 싱글 스레드 시스템에서는 한 번에 하나의 스레드만 코드를 실행하게 됩니다.또한, 싱글 스레드 환경에서 프로그램은 다음 작업으로 넘어가기 위해서는 한 가지 작업을 완료해야 합니다. 👨🍳 셰프가 1명뿐인 주방셰프가 재료 손질을 하는 동안 동시에 스테이크를 굽거나 디저트를 만드는 일은 불가능 ⚠️ 문제스레드가 하나 뿐으로 JavaScript는 Call Stack을 ..
-
Express 을 이용해 웹페이지를 표현하는 방법 - 템플릿 엔진Node.js 2025. 8. 20. 17:38
🔍 Express - 웹 페이지를 표현하는 방법express를 이용해 웹페이지를 표현하는 방법으로는 두가지 방법이 있습니다.정적인 파일을 전달동적인 파일을 전달 📕 정적인 파일을 이용해 웹페이지 표현하기project/├── app.js # Express 서버 메인 파일├── package.json├── package-lock.json├── public/│ ├── static.html # 메인 페이지 static.html Hello World! app.jsconst express = require("express");const path = require("path");const app = express();const port = 3000;..
-
브라우저 렌더링 방식 (SSR, CSR)FE/HTML 2025. 8. 20. 16:19
🔍 브라우저 렌더링브라우저가 서버로부터 요청해 받은 내용을 브라우저의 화면에 표시하는 작업 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 표시이전에 브라우저 렌더링과정을 학습을 했었는데 이제 브라우저 렌더링의 방식에 대해서 알아보고자 합니다. 브라우저 렌더링 방식은 크게 서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)로 구분됩니다. ↩️ 이전 히스토리 (MPA와 SPA)📌 1990s1990년 중반까지는 모두 static sites 였습니다.서버에는 만들어진 HTML 문서들이 존재했고 사용자가 브라우저에 접속하면 서버에 있는 HTML 문서를 가져와 보여주는 형식 📖 MPA (Multi Page Application)이동할 때마..
-
브라우저 렌더링 과정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) 등 페이지에 보이지 않는 메타 정보웹 페이지에 실제로 보이는 모든 콘텐츠 (본문 - 텍스트, 이미지, 링크..