고양이 두 잔

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

목차 들어가는 글리액트(React)는 현대 프론트엔드 개발에서 가장 널리 사용되는 라이브러리 중 하나다. 그 중심에는 컴포넌트(Component) 라는 개념이 있다. 컴포넌트는 UI를 작은 조각으로 나누어 독립적이고 재사용 가능한 코드로 관리할 수 있도록 해준다. 이 글에서는 컴포넌트가 무엇인지, 어떤 종류가 있으며, 어떻게 설계해야 하는지를 나 같은 초보자도 쉽게 이해할 수 있도록 차근차근 살펴본다. 리액트에서 컴포넌트란 무엇인가? 컴포넌트의 정의리액트의 컴포넌트는 UI를 구성하는 최소 단위이자, 독립적으로 동작하는 코드 블록이다.예를 들어 “버튼”, “헤더”, “게시글 카드” 같은 UI 요소를 각각 하나의 컴포넌트로 정의할 수 있다. 컴포넌트는 단일 책임 원칙(Single Responsibility..

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

목차 들어가는 글 왜 프론트엔드 개발자들이 리액트를 배우는가프론트엔드 세계에는 수많은 기술이 있지만, 리액트는 가장 널리 쓰이는 도구 중 하나이다. 구글 트렌드와 채용 공고를 보면, 리액트를 요구하는 비중이 매우 높다. 이유는 간단하다. 큰 규모의 웹 애플리케이션을 효율적으로 만들고 유지할 수 있게 해 주기 때문이다. 단순한 HTML과 자바스크립트로도 화면을 만들 수 있지만, 프로젝트가 커지면 코드가 뒤엉키고 유지보수가 어려워진다. 리액트는 이런 문제를 해결할 수 있는 구조를 제공한다. 자바스크립트만으로 가능한데도 리액트가 인기 있는 이유자바스크립트만으로도 충분히 웹페이지를 만들 수 있다. 그러나 버튼 클릭에 따라 화면 일부만 바뀌는 동적인 UI를 효율적으로 구현하기는 어렵다. 예를 들어, 장바구니에 ..

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

지난 글에서는 NestJS와 Fastify에 대한 소개와 기본적인 설정을 마쳤다. 이번 글에서는 postgreSQL을 이용한 데이터베이스 연동 파트를 역시 간단하게 살펴볼 예정이다. postgreSQL에 대한 소개는 아래 글에서 확인할 수 있으며, [Database]postgreSQL [Database]postgreSQL목차 FastAPI와 SQLAlchemy, 그리고 Pydantic을 이용한 토이 프로젝트를 진행하던 중 PostgreSQL을 사용해야 할 일이 생겼다. 그냥 MySQL을 사용했어도 되지만, SQLAlchemy와 궁합이 좋은 디비가 PostgreSQL이라길gnidinger.tistory.com 이 글에서는 postgres 도커 이미지는 이미 받아 가지고 있다 가정하고 진행하겠다. 추가로 이..

목차 지난 글에선 NestJS와 그 특징, 장/단점에 대해 알아보았다. 이번 글에선 Express.js와 Fastify를 간단히 비교한 뒤, 기본적인 설치까지 진행해 보겠다. Express.js Express.js는 Node.js의 웹 애플리케이션 개발을 위한 가장 인기 있는 프레임워크다. 2010년에 처음 출시된 이후, Express는 그 간결함과 유연성으로 많은 개발자들에게 선택되어 왔다. Express.js의 주요 특징을 정리하면 다음과 같다. 간결하고 유연한 라우팅Express는 REST API를 쉽게 구축할 수 있게 해 주며, URL 경로와 HTTP 메서드를 기반으로 하는 강력한 라우팅 시스템을 제공한다.다양한 미들웨어 지원Express의 강력한 미들웨어 생태계는 로깅, 요청 본문 파싱, 쿠키 ..

목차 며칠 전에 동기들과 이야기를 하다, NestJS라는 것이 굉장히 편하다는 소식을 전해 들었다. 기존의 Express.js에 비해 많은 기능을 제공한다는 것 외에는 정보가 없어서 계속 궁금해만 하다 주말이 된 김에 정리하고 넘어가기로 했다. 이 글에선 먼저 NestJS의 역사를 먼저 알아보고, 특징과 장단점을 알아본 뒤 글을 마치도록 하겠다. NestJS NestJS는 2017년 폴란드의 개발자 Kamil Myśliwiec에 의해 소개된 오픈소스 프레임워크이다. 좀 더 구체적으로는 Node.js 런타임 위에서 동작하는 타입스크립트용 오픈소스 백엔드 프레임워크이며, 지속적인 성장세를 보이며 현재는 Express.js 다음으로 널리 사용되고 있다고 한다. NestJS는 모듈을 기반으로 한 아키텍처를 사용..

목차 [Node.js]기본 패키지 구조 모듈 파헤치기(1) [Node.js]기본 패키지 구조 모듈 파헤치기(2) [Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(1) - 기본 설정 [Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(2) - 기본 구조 [Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(3) - JWT, 회원 가입과 로그인 [Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(4) - 컨트롤러에 검증로직 추가 [Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(5) - 1:N, N:M 관계 [Node.js]TS, Express, MongoDB, MVC로 ..

목차 [Node.js]기본 패키지 구조 모듈 파헤치기(1) [Node.js]기본 패키지 구조 모듈 파헤치기(2) [Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(1) - 기본 설정 [Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(2) - 기본 구조 [Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(3) - JWT, 회원 가입과 로그인 [Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(4) - 컨트롤러에 검증로직 추가 [Node.js]TS, Express, MongoDB, MVC로 게시판 만들기(5) - 1:N, N:M 관계 [Node.js]TS, Express, MongoDB, MVC로 ..