전체 글
-
🧑🏻💻 구글 엔지니어는 이렇게 일한다 (1) - 소프트웨어 엔지니어링📕 book/🧑🏻💻 구글 엔지니어는 이렇게 일한다 2025. 8. 31. 11:51
🚀 1. 소프트웨어 엔지니어링소프트웨어 엔지니어링은 흐르는 시간 위에서 순간순간의 프로그래밍을 모두 합산한 것이다.-구글- 소프트웨어 엔지니어링에서 프로그래밍이 큰 비중을 차지하는 건 틀림없지만 프로그래밍은 결국 새로운 소프트웨어를 제작하는 수단입니다.이 차이를 받아들인다면 자연스럽게 프로그래밍 작업(개발, development)과소프트웨어 엔지니어링 작업(개발 / development + 수정 / modification + 유지보수 / maintenance)의 차이도 궁금할 것입니다. 시간이라는 요소가 더해지면서 프로그래밍에는 중요한 차원이 하나 늘어서 더 입체적으로 바뀝니다.시간이 프로그램에 미치는 영향을 알아보려면 “이 코드의 예상 수명은?” 이라는 질문을 던져보면 좋습니다.짧게 생을 마감하는 코..
-
워커 스레드를 통한 멀티 쓰레딩Node.js 2025. 8. 30. 16:12
이전 글을 통해서 NodeJS는 이벤트 루프를 가진 싱글 스레드 모델을 사용해 파일 읽기, 네트워크 요청, 데이터베이스 쿼리와 같은 IO 작업을 메인 스레드를 차단하지 않고 효율적으로 처리하는 것을 학습했습니다.논 블로킹 I/O와 멀티 플렉싱을 활용함으로 작업 실행을 차단하지 않고 성능을 보장⚠️ 하지만 이런 싱글 스레드 모델에서의 문제점도 확인할 수 있습니다.Node.js는 I/O 작업은 논블로킹으로 잘 처리하지만 CPU 집약적인 작업은 메인 이벤트 루프를 차단합니다.전체 애플리케이션이 응답하지 않게 만들 수 있습니다.따라서 병목 현상이 되는 CPU 집약적 작업에는 적합하지 않습니다. 👀 Node.js 에서 I/O 작업 ✅ 다시 한번 Node.js 는 싱글 스레드환경에서 어떻게 I/O 작업을 처리하는..
-
fetch APINode.js 2025. 8. 27. 22:45
🔍 비동기 데이터 통신비동기 요청을 통해서 서버에서 데이터를 가져오는 것은 동적이고 상호작용적인 웹 애플리케이션에서 필수가 되었습니다.이렇게 비동기 데이터 통신을 하는 방식으로는 XMLHTTPRequest 객체를 활용하는 것으로 수년 동안 사용한 방법입니다.이후 Fetch API가 도입되어 비동기 요청 처리를 위한 더 간단한 접근 방식을 사용하게 되었습니다. 🌐 크롬 네트워크 탭크롬의 네트워크 탭을 확인하면xhr, fetch type을 볼 수 있습니다.🧩 XMLHttpRequestXMLHttpRequest(XHR)은 AJAX 요청을 생성하는 JavaScript API입니다.XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있습니다. // XMLHttpRequest 객체 생성var xh..
-
비동기 프로그래밍 - Promise 와 async / awaitNode.js 2025. 8. 27. 22:36
⚠️ 콜백 지옥자바스크립트는 싱글 스레드로 한 번에 하나의 작업만을 처리할 수 있습니다.이런 문제를 해결하기 위해서 비동기 프로그래밍으로 처리를 해서 해결합니다. 비동기는 특정 코드 작업이 끝날때까지 기다리지 않고 다음 코드를 수행하는 방식으로 비동기 작업 결과에 따라 다른 작업을 수행해야할 경우 콜백 함수를 이용합니다. 📖 콜백 함수매개변수로 함수 객체를 전달해 호출된 함수 내에서 매개변수 함수를 실행하는 것 function fun(text, callback) { callback(text);} 👿 콜백 지옥function fetchData(callback) { setTimeout(() => { const data = 'user data'; callback(data); }, 1000)..
-
브라우저 이벤트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;..