고양이 두 잔

목차 들어가며프론트엔드 개발을 처음 배우다 보면 CSS 속성에 다양한 단위가 등장하는 것을 보게 된다. 그중에서도 가장 자주 마주치는 단위는 px, em, rem 세 가지이다. 처음에는 모두 단순히 크기를 지정하는 값처럼 보이지만, 실제로는 기준과 동작 방식이 달라서 결과도 달라진다. 이 차이를 이해하지 못하면 의도치 않은 레이아웃이나 글자 크기가 적용되어 당황할 수 있다. 그래서 이 글에서는 px, em, rem의 특징과 차이점을 가능한 풀어 설명하면서, 언제 어떤 단위를 쓰면 좋은지도 함께 정리하려 한다.px: 고정된 절대 단위px이란 무엇인가?px은 화면의 물리적인 픽셀 단위를 기준으로 하는 고정 단위이다. 예를 들어 font-size: 16px이라고 지정하면, 해당 텍스트는 어떤 환경에서도 정확히..

목차 들어가며프론트엔드 개발자와 대화하다 보면 DOM이라는 단어가 자주 등장한다. 문제는 설명을 들었을 땐 알 것 같은데 지나고 생각해 보면 개념이 잘 잡히지 않는다는 것. 해서 오늘은 DOM에 대해서 아주 쉽게 알아보기로 했다. 시작해 보자. 웹페이지는 우리가 보는 화면이 전부가 아니다. 브라우저는 HTML, CSS, 자바스크립트라는 텍스트 파일을 읽어 들여 눈에 보이는 화면으로 바꾼다. 이 과정에서 중요한 역할을 하는 개념이 바로 DOM(Document Object Model)이다. DOM은 웹 개발의 기본이자, 리액트 같은 최신 프론트엔드 기술을 이해하기 위한 출발점이다. 이 글에서는 DOM이 무엇인지, 어떤 구조로 되어 있고, 브라우저에서 어떻게 만들어지는지를 나 같은 초보자도 알 수 있도록 차근..

목차 들어가는 글프론트엔드를 자바스크립트로 시작하면 빠르게 화면을 만들 수 있지만, 규모가 커질수록 사소한 타입 실수가 런타임 버그로 이어진다. 데이터 형태가 바뀌었는데 화면은 조용히 깨지고, 콘솔 에러는 사용자의 클릭 이후에야 터진다. 타입스크립트는 코드에 “데이터의 모양과 계약”을 명시해 빌드 시점에 많은 결함을 막는다. 팀원이 바뀌어도 함수 시그니처와 모델 타입만 보면 의도가 읽히고, 리팩토링 시 에디터가 안전망 역할을 한다. 학습과 빌드 비용은 들지만, 운영과 협업 단계에서 그 비용을 충분히 회수한다. 자바스크립트와 타입스크립트의 관계 자바스크립트란?자바스크립트는 동적 타입 언어로, 변수의 타입이 실행 중에 자유롭게 변한다. 이 특성 덕분에 초기 학습과 프로토타이핑 속도가 매우 빠르다. 하지만..

목차 자바스크립트 문법에 익숙해지기 위해 가장 쉬운 알고리즘 문제를 풀었다가 당황을 했다. 첫 번째는 Node.js로 실행하면 내 입력을 기다리지 않고 프로그램을 종료시켜 버렸기 때문이고, 두 번째는 파이썬과 비교했을 때 코드의 길이가 굉장히 길고 한눈에 들어오지 않았기 때문이다. 첫 번째 문제는 이전 글에서 해결했으니, 이번엔 알고리즘의 풀이를 보면서 한 줄씩 읽으며 무슨 뜻인지 파악해야겠다. const 먼저, 문제의 풀이를 보면 아래와 같다. const rl = require('readline').createInterface({ input: process.stdin, output: process.stdout }); rl.question("", (line) => { const [a, b] = line...

목차 console.log() vs. alert() 두 함수는 모두 정보를 출력하는 데 사용되는 함수이다. 하지만 몇 가지 차이점이 존재하는데, 크게 세 가지로 나누어서 정리하자. Output Location 가장 크고 분명한 사실은 두 함수의 출력 위치가 다르다는 사실이다. console.log() 해당 함수는 메시지를 터미널이나 브라우저의 콘솔에 출력한다. 여기서 콘솔이란 예를 들자면 크롬 개발자도구의 일부이다. alert() 해당 함수는 브라우저에서 모달 대화상자를 띄워 표시한다. 기본적으로 브라우저의 중앙에 위치해 사용자의 주의를 끈다. Purpose 위에서 짐작할 수 있듯이 두 함수는 그 목적이 다르다. console.log() 개발자의 개발 중 디버깅 및 로그 기록을 위해 사용된다. 따라서 실..

목차 자바스크립트 기본 자료형에 대해 짧게 정리! Number 따옴표나 큰 따옴표 등이 붙지 않는 숫자는 자동으로 숫자로 인식한다. console.log(1.3 + 2); 3.3 간단한 사칙연산 (+, -, *, /, %)을 제외하고도 몇 가지 복잡한 연산을 추가로 지원한다. console.log(Math.pow(2, 3)); console.log(Math.round(2.3)); console.log(Math.ceil(2.3)); console.log(Math.floor(2.3)); console.log(Math.sqrt(2)); console.log(Math.random()); 8 2 3 2 1.4142135623730951 0.6315177261112865 String 문자열은 작은따옴표(') 혹은 ..