This is CS50W. 현업에서 수년간 실무 위주로 개발을 하다 보면, 편리한 모던 프레임워크와 라이브러리 뒤에 숨어 '웹이 본질적으로 어떻게 동작하는지'를 간과하기 쉽습니다.당장의 비즈니스 로직을 구현하는 데 집중하다 보니, "브라우저와 서버는 내부적으로 어떻게 상태를 유지하고 렌더링을 최적화하는가?"와 같은 근원적인 질문에 갈증을 느끼곤 했습니다. 기왕이면 '그냥 돌아가는 코드'를 짜는 것을 넘어 변하지 않는 아키텍처의 원리를 다지고 싶어 하버드의 CS50W 과정을 수강했습니다. 과정 내내 단순히 툴 사용법을 따라 치는 것이 아니라, 요구사항에 맞춰 바닥부터 직접 구현하며 아키텍처를 증명해 내야 했습니다. Project 0 & 1: Search, Wiki 모던 UI 라이브러리 없이 순수 HTML..

- AsyncIterator 사용 방법이벤트 기반 스트림을 사용할 때, 비동기 핸들러로 데이터를 처리하면 순서가 꼬일 수 있다.이 글에서는 'AsyncIterator'를 활용하여 스트림 데이터를 순차적으로 처리하는 방법을 소개한다.1. 비동기 핸들러 사용 시 병렬 처리 const fs = require('fs');const { writeFile } = require('fs/promises');// 잠시 기다리는 비동기 함수const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));const readStream = fs.createReadStream(__filename, { encoding: 'utf8', highWaterMark: 64 }..

- Node.js로 HTTP 서버 기동하기const http = require('http');// http 서버 생성http .createServer((req, res) => { // 클라이언트에 반환할 내용을 쓴다. res.write('hello world\n'); // 클라이언트에 내용을 송신 res.end(); }) .listen(3000); // 포트번호 3000

- Object와 JSON의 차이자바스크립트의 Object는 JSON과 표기법이 비슷하지만 두 타입의 포맷이 다르다. 자바스크립트의 객체는 일반적으로 메모리 내 구조이다. 그러나 JSON은 데이터 교환 포맷이다. 데이터를 직렬화(serialize)해서 저장하거나 전송하는 것이 목적이지, 코드를 포함하는 것이 아니다. → 그래서 JSON은 함수를 담지 못한다.- JSON.stringify() 자바스크립트의 객체를 네트워크 전송이나 파일 저장 등에 사용하려면 문자열로 바꿔야 한다.데이터를 저장하거나 전송하려면 → JSON.stringify()문자열을 다시 객체로 복원하려면 → JSON.parse()const obj = { name: 'Kim', greet: function () { return 'H..

- 바닐라 자바스크립트란 무엇인가?아무 라이브러리나 프레임워크 없이 순수한기본 JavaScript만 사용한 코드 바닐라는 아이스크림에서 가장 기본 맛 → 아무것도 섞지 않은 기본 중의 기본이란 뜻→ jQuery, React, Vue, Lodash 등 추가 도구 없이 = 순수한 브라우저 내장 JavaScript만 사용하는 코드// Vanilla JS로 DOM 조작document.getElementById('myBtn').addEventListener('click', function () { alert('Clicked!');});Vanilla JavaScript라는 용어는 개발자 커뮤니티에서 생긴 비공식 용어이다. 비공식 용어지만 전 세계적으로 통용되는 용어이기에 알아두면 나쁘지 않을 듯 하다. Vanil..