내일은 내가 개발왕

JavaScript는 싱글스레드입니다. JavaScript를 사용하는 사람들이라면 분명히 들어본 말입니다. 그런데 이상하지 않나요? fetch('https://api.example.com/data') // 서버에서 데이터 가져오는 중console.log('로딩중...') // 이건 바로 실행됨updateAnimation() // 애니메이션도 돌아감 분명 API 호출하고, 로그 찍고, 애니메이션 돌리고... 동시에 여러 일이 일어나는데요? 스레드가 하나면 한 번에 한 가지만 할 수 있는 거 아닌가요? "비동기 처리를 하니까 가능하다"는 건 알겠는데, 그게 대체 어떻게 가능한 건지 이해가 잘 안 됩니다. 비동기는 말 그대로 동시에 여러 작업을 하는 거잖아요. 싱글스레드가 어떻게 동시에 여러 일을 하죠?..

// 런타임 코드let a = 3let b = ab.toUpperCase() // TypeError!​let a: number | string = 3let b = a as string이 코드를 tsx practice.ts로 실행하면? 잘 돌아갑니다. tsc practice.ts로 컴파일하면? 타입을 변환할 수 없다는 에러가 나옵니다. 어? a의 타입이 number | string 인데, string도 포함되어 있잖아? 왜 안돼? 이 의문을 풀려면 표면적인 문법이 아니라, TypeScript가 내부적으로 어떻게 동작하는지를 이해해야 합니다. 오늘은 코드 뒤에 숨은 원리를 파헤쳐보겠습니다. TypeScript의 가장 중요한 진실: 타입은 컴파일 타임에만 존재한다컴파일 타임 vs 런타임프로그램이 실행되는..

문제 URL: https://www.acmicpc.net/problem/2583 직사각형들로 덮인 공간을 제외하고, 빈 영역이 몇 개나 되는지, 각 영역의 넓이는 얼마인지 구하는 문제입니다. 핵심 개념 정리좌표 변환이 까다롭습니다. 문제에서 주는 수학 좌표계(왼쪽 아래가 원점)인데, 우리가 쓸 배열은 컴퓨터 좌표계(왼쪽 위가 원점)라서 y축을 뒤집어야 합니다. 이와 동시에 점으로 표현된 좌표들을 박스를 기준으로 변환하는 과정도 필요합니다. BFS로 영역을 탐색합니다. 0인 칸들이 상하좌우로 연결된 덩어리를 찾아내면 됩니다. JavaScript 특유의 함정들이 있습니다. 다른 언어 쓰다 온 사람들이 자주 헷갈리는 부분(저 포함ㅋ)들이 몇 가지 있어서, 이 글에서는 그런 부분들을 집중적으로 다뤄보겠습니다. ..

문제 URL: https://www.acmicpc.net/problem/7568 순위를 매기는 문제입니다. 모든 사람을 다른 모든 사람과 비교해야 하는 전형적인 "완전탐색" 문제입니다. 문제 이해하기"덩치"는 키와 몸무게 둘 다 커야 인정됩니다. 키만 크거나 몸무게만 많이 나가면 안됩니다.A: 키 180, 몸무게 80B: 키 175, 몸무게 90A가 B보다 키는 크지만 몸무게는 적습니다. 그래서 둘은 비교 불가능합니다. 이런 경우 둘 다 1등이 될 수 있습니다. 입력 처리 - map과 타입 변환 주의const input = require('fs').readFileSync('/dev/stdin').toString()const lines = input.split('\n')const n = Number(li..

문제 URL: https://www.acmicpc.net/problem/1676 N!에서 뒤에서부터 처음 0이 아닌 숫자가 나올 때까지 0의 개수를 구하는 문제입니다. 직관적이지만 node.js 에서는 불가능한 방법const input = require('fs').readFileSync('/dev/stdin').toString().trim()const n = parseInt(input)const revertToFac = function(n) { let fac = n for (let i = 1; i = 0; i--) { if (fac[i] === '0') { answer += 1 } else { break }}console.log(answer)이 코..

호이스팅의 개념호이스팅(Hoisting)은 영어로 "끌어올리다"라는 뜻입니다. 쉽게 비유하자면, 선생님이 출석을 부를 때를 생각해보면 됩니다. 선생님은 수업 시작하기 전에 이미 출석부에 학생 이름이 다 적혀있어야 합니다. 수업 중간에 "어? 이 학생 이름이 없네?"라고 하면 안됩니다. JavaScript도 마찬가지입니다. 코드를 실행하기 전에 JavaScript 엔진이 코드를 쭉 훑어보면서 "어떤 변수들과 함수들이 있는지"를 미리 파악합니다. 이때 변수와 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 게 호이스팅입니다. 정확한 정의: 변수 및 함수 선언이 스코프(유효범위)의 최상단으로 끌어올려지는 JavaScript 동작 방식 호이스팅의 의의왜 이런게 있을까요? 호이스팅은 JavaScrip..

12월 23일부트캠프에서 같이 공부하는 사람들에게 자주 하는 말이 있다. "이번 주말에 대구 간다. 하루 보러 가야지." 평소에 하루 사진을 보내주면서 귀엽다고 자랑하던 내게, 경산으로 쉬러 가는 것은 힐링 그 자체였다.현관문을 열자 하루는 어쩔 줄 모르며 나를 반긴다. 서 있는 내 무릎에 발을 올리다가도 빨리 집에 들어가자고 난리다. 너무 귀엽다. 평소였다면 내 방에 짐을 풀고 하루를 쓰다듬어주러 갔겠지만, 이번엔 바로 거실로 가서 녀석을 예뻐해줬다. 너무 예뻤다.평소의 하루는 잠깐 내게 붙었다가 다시 엄마에게 가곤 했다. 엄마의 껌딱지니까. 그런데 이번엔 계속 내 곁에만 머문다. 계속 애교를 부린다. 내 무릎 위에서 배를 뒤집고 애교를 부리는 모습이 너무 사랑스럽다. 엄마에게 말했다. "하루가 평소에..

문제 URL: https://www.acmicpc.net/problem/11720 숫자들을 한 자리씩 쪼개서 다 더하는 문제입니다. 입력 처리const input = require('fs').readFileSync('/dev/stdin').toString()const lines = input.split('\n')const nums = lines[1].split('')lines[0]에는 숫자 개수 n이 있지만, 사실 안 써도 됩니다.lines[1]이 실제 숫자 문자열 (ex: "12345")split('')으로 한 글자씩 쪼개면 ['1', '2', '3', '4', '5'] 이런 배열이 됩니다. 숫자 더하기 - 두 가지 방법방법 1: forEachlet sum = 0nums.forEach(char => {..

크롬 브라우저를 쓴다고 해서 모두가 같은 브라우저를 쓰는 건 아닙니다. 맥북에서 크롬을 쓰는 당신과, 아이폰에서 크롬을 쓰는 당신은 사실 완전히 다른 브라우저를 쓰고 있다고 할 수 있겠습니다. 심지어 유럽에 사는 친구와 한국에 사는 당신도 같은 "크롬"이라는 이름 아래 다른 경험을 하고 있을 수 있죠. 무슨 소리냐구요? 천천히 풀어보겠습니다. 브라우저 엔진이란?브라우저는 두 부분으로 나뉩니다. 우리 눈에 보이는 껍데기(UI)와, 실제로 웹페이지를 그려내는 엔진입니다. 자동차에 비유하면 이해가 쉽습니다. 같은 현대차 외관이라도 안에 현대 엔진이 들어갈 수도 있고, 도요타 엔진이 들어갈 수도 있죠. 겉보기엔 같아 보여도 가속력도 다르고 연비도 다릅니다. 크롬은 크로미움 프로젝트 기반의 Blink 엔진을 ..

문제 URL: https://www.acmicpc.net/problem/11945 행렬을 좌우 반전시키는 문제입니다. 입력 처리const input = require('fs').readFileSync('/dev/stdin').toString()const lines = input.split('\n')const [n, m] = lines[0].split(' ').map(Number)여러 줄 입력은 split('\n')으로 배열로 만들기첫 줄에서 n(행), m(열) 추출map(Number)로 문자열 배열을 숫자 배열로 변환 문자열 뒤집기const row = lines[i].trim()const reversed = row.split('').reverse().join('')split(''): 문자열을 한 글자씩 ..