내일은 내가 개발왕

호이스팅의 개념호이스팅(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(''): 문자열을 한 글자씩 ..

백준 같은 온라인 저지에서 JavaScript로 문제를 풀 때 가장 먼저 막히는 게 입력 처리입니다. 브라우저용 언어인 JavaScript는 원래 prompt()로 입력을 받는데, 백준 서버에서는 이게 안됩니다. 입력 받는 코드const input = require('fs').readFileSync('/dev/stdin').toString().trim()require('fs'): Node.js에서 파일을 읽는 모듈.readFileSync('/dev/stdin'): 표준 입력(stdin)에서 데이터를 동기적으로 읽음.toString(): 읽은 바이너리 데이터를 문자열로 변환.trim(): 앞뒤 공백/줄바꿈 제거입력이 여러 줄이면 .split('\n')으로 나누면 됩니다.const input = requir..

React로 열심히 만든 웹사이트, 구글에 검색하면 안 나오던 경험 있으신가요? 분명 배포도 잘 됐고, 링크 타고 들어가면 잘 보이는데 구글에 사이트 이름을 쳐도 내 사이트가 안 나옵니다. "혹시 검색엔진이 고장난 건가?" 싶어서 찾아보니, React로 만든 사이트는 검색엔진 최적화(SEO)가 어렵다는 얘기가 나옵니다. 그리고 어김없이 등장하는 해결책: "Next.js 쓰세요." 물론 Next.js가 SEO에 유리한 건 맞습니다. 하지만 지금 당장 프로젝트를 다 갈아엎을 수는 없잖아요? 다행히도 React 만으로도 SEO 최적화를 충분히 할 수 있습니다! 이 글에서는 React 프로젝트에서 검색엔진 최적화를 하는 (거의) 모든 방법을 알려드리겠습니다. SEO란?SEO는 Search Engine Opt..

디자인 토큰이란 무엇인가?디자인 토큰은 디자인 결정을 저장하는 작은 데이터 조각입니다. 색상, 간격, 글꼴 크기 같은 디자인 요소를 `primary-color: #3B82F6` 같은 이름-값 쌍으로 정의해 두는 것이죠.비유하자면, 레고 설명서 같은 겁니다. "빨간 블록 2개, 파란 블록 4개"라고 적혀있으면 어떤 나라에서든 똑같은 결과물을 만들 수 있겠죠? 디자인 토큰도 마찬가지입니다. 한 번 정의해 두면 웹, 앱, 심지어 마케팅 자료까지 모든 플랫폼에서 동일한 디자인을 구현할 수 있습니다. 왜 디자인 토큰이 필요한가?문제 1: 개발자마다 다른 파란색디자이너가 Figma에서 만든 버튼은 `#3B82F6`인데, 개발자 A씨는 `#3B82F6`을 쓰고, 개발자 B씨는 "비슷해 보이는" `#4A90E2`를..

웹사이트를 만들 때, 디자인을 어떻게 입힐지 고민해 본 적 있나요?HTML에 직접 색상 넣고, 크기 조절하는 건 너무 지저분하고요. 그렇다고 CSS 파일 따로 만들자니 파일도 많아지고 관리가 어렵습니다. "분명 더 좋은 방법이 있을텐데..." 하고 구글링을 시작하면, 온갖 생소한 단어들이 쏟아집니다. 결국 선택지는 크게 두 가지입니다. 하나는 JavaScript 파일 안에서 CSS를 같이 작성하는 방법(ex: styled-components, emotion)이고, 다른 하나는 미리 만들어진 디자인 조각들을 조립하는 방법(ex: Tailwind CSS)입니다.이 글에서는 각 방법이 어떻게 다른지, 어떤 상황에 어떤 걸 쓰면 좋은지 최대한 쉽게 설명해드리겠습니다. JavaScript 안에 CSS 쓰기: ..