MVVM이라고 들어봤는가 ?아마 디자인 패턴에 대해 공부했던 사람들은 잘 알고 있을텐데, Model, View, ViewModel의 세 가지로 나누어 역할과 관심을 분리하는 방법이다. 이에 따라 당연히 파일 구조 또한 Model, View, ViewModel 세 가지로 나누어져 개발을 하게 되는데, 보통 백엔드에서 많이 사용한다.쉽게 이야기하면 View에서는 화면을 보여주는 역할만 담당하고, ViewModel에서는 View에 보여주기 위한 데이터 가공 및 전처리를 담당하며, Model에서는 데이터를 받아오는 역할을 담당한다고 봐도 무방하다. 따라서 백엔드에서는 서버에서 Model을 통해 구현해둔 데이터 형식에 따라 데이터를 관리하고, Model 안의 Repository는 데이터베이스(DB)와의 통신을 ..

상태 관리. 프론트엔드 개발에서 꽤나 중요한 것들 중 하나이다. 상태 관리는 크게 서버 상태 관리, 클라이언트 상태 관리가 존재한다.(이전 포스팅에서 두 차이점을 설명했을 것이다.) 간단하게 다시 짚고 넘어가자면, 아래와 같다. 서버 상태원격 서버나 데이터베이스에 저장되거나 관리되는 데이터로, 프론트엔드 측에서 비동기 요청을 통해 가져오거나 업데이트 할 수 있는 데이터를 의미한다.댓글, 좋아요 수, 분석 데이터 등클라이언트 상태UI와 직접적으로 관련되어 있으며, 웹 or 앱 내에서만 관리되는 데이터이다.React에서는 주로 useState로 관리한다.Form 데이터, 다크모드/라이트모트, 모달 열림 상태 등 이 중 우리는 Zustand를 사용하여 클라이언트 상태를 관리하게 된다.그럼 Usestate만으..

React로 개발을 하다보면 위 사진처럼 사용자의 입력을 받아야 하는 상황이 등장한다.이럴 때, 우리는 두 가지 방법을 고민해볼 수 있다. 각 입력 요소들을 모두 useState로 관리하여, 각각 input 태그의 속성에 onChange로 값의 변경을 관리하는 방식입력이 모두 끝나고 Submit을 누를 때, input에 있는 값들을 긁어서 가져오는 방식 첫번째 방식은 흔히 제어 컴포넌트 방식(Controlled Component)이라고 하며, 두번째 방식은 비제어 컴포넌트 방식(Uncontrolled Component)이라고 한다. 제어 컴포넌트 방식(Controlled Component) vs 비제어 컴포넌트 방식(UnControlled Component) 제어 컴포넌트 방식은 각 input 요소의..

이번 주는 Zod에 대해서 알아보겠다.한마디로 말하자면, Zod는 Typescript 스키마(scheme)를 사용하여 유효성 검사를 수행하는 라이브러리이다. 유효성 검증(Validation)JavaScript에서는 타입을 명시하여 사용하지 않는다. let 혹은 var, const 같은 스코프만 선언을 하고 변수에 할당될 때 해당 타입을 추론하여 사용하게 된다.이러한 모호한 점을 해결하기 위해 Type을 지정할 수 있도록 커버한 것이 Typescript이며, Typescript는 컴파일 시점에 명시된 타입을 체크한다. 이런 개념이라면 Typescript 만으로도 타입에 대한 안정성이 완벽하게 보장된다고 보아야겠지만, 이는 언제까지나 컴파일 시점에서만 보장된다고 할 수 있다. 타입스크립트는 실제로 런타임에..

프론트엔드 개발을 하다 어느정도 익숙해지면 듣게 될 또하나의 기술이다. 기존에는 React Query라는 이름으로 사용되고 있었지만, 현재는 React 뿐만아니라 Vue, Angular 등등 더 많은 프레임워크까지 지원하고자 Tanstack Query로 이름을 변경했다고 한다. 해당 내용을 공부하다 보면 서버 상태(Server State), QueryClinet등 여러가지 헷갈리는 개념들이 나오는데, 천천히 정리해보자. Tanstack Query 공식 문서에서는 Tanstack Query의 역할을 "웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 아주 쉽게 해준다"고 설명하고 있다. 여기서 "서버 상태"라는 말이 나오는데, 서버 상태(Server State)와 클라..

프로젝트를 진행하며 여러 코드를 참고하게 되는데, 그 중 Record를 보게 되어 정리해 본다. 우리는 흔히 객체를 생성할 때, 리터럴 방식으로 많이 사용한다.(나는 일단 이때까지는 그랬다.) RecordRecord는 키 타입(Keys), 객체 타입(Types)를 가진 객체를 정의할 때 사용하는 Typescript의 유틸리티 타입이다.정확히는, 모든 키는 Keys에 속하며, 모든 값은 Types를 가진다.type CatName = "miffy" | "boris" | "mordred"; interface CatInfo { age: number; breed: string;} const cats: Record = { miffy: { age: 10, breed: "Persian" }, boris: { a..

FE를 공부하다 보면 뭐 CRA(Create React App)이 종료되었다니, Vite를 많이 사용한다느니, 모듈 번들러가 어쩌고, 트랜스파일링이 어쩌고 많은 용어들이 나온다. 이전에 Babel에 대해서 이야기해 보았는데, Babel은 트랜스파일러의 대표적인 예이고, 오늘은 모듈 번들러의 대표적인 예인 Webpack에 대해서 알아보도록 하자. 트랜스파일러 vs 모듈 번들러 트랜스파일러와 모듈 번들러. 아마 프론트엔드 기술면접에서 나올법한 용어라고 생각한다. 트랜스파일러는 코드를 변환하는 데 목적이 있다.주로 최신 문법(ES6+)를 구형 문법(ES5)로 변환하는 데 사용된다. 이를 통해 우리는 최신 코드(ES6+)를 구형 브라우저에서도 정상적으로 동작시킬 수 있게 된다. 트랜스파일러는 대표적으로 ..

흔히들 프론트엔드 개발을 하다보면 JavaScript, React 외에도 여러 개발 용어들을 접하게 된다. 오늘은 그 중 Babel이라는 것에 대해 알아보자.Babel바벨은 정말 쉽게, 한 마디로 설명하면 JavaScript 컴파일러다.즉, JavaScript를 컴파일하는 녀석이라는 거다. 컴파일러는 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정을 수행하는 소프트웨어를 의미한다.(흔히 전공 수업시간에 인터프리터와 비교한다...) 위 사진에서 보면 JavaScript는 사진처럼 많은 버전 변화를 겪어왔다.현재(2025.09) 기준으로는 ECMAScript 2019까지 배포되어 있으며, 보통은 저런 자료에서 ECMAScipt 2015까지만 많이 적혀있는 이유가 ECMAScript 2015(ES6)에서 ..

현재 개인적으로 공부 차 프로젝트를 진행 중인데, 이 프로젝트 중 Button 컴포넌트를 제작하고 있었다. 현재 TypeScript + module.scss를 사용하고 있는데, tsx 파일에서 특정 색상값을 변수 형식으로 넘겨주고, scss 파일에서 해당 값을 사용하고 싶었다.즉, tsx에서 변수를 넘겨받아 scss에서 사용하고 싶었던 것이다. const ImageCircle = styled.div` --size: ${props => props.size}px; width: var(--size); height: var(--size); border-radius: var(--size); background-image: url(${props => props.src}); backg..

개발을 하다보면 REST API라는 용어를 많이 보게 된다.나도 이때까지 무슨 API인지 제대로 모르고 있었는데, 이번 기회에 정리해보고자 한다. REST가 뭔가 ?REST(Representational State Transfer)는 자원을 이름으로 구분하고, 해당 자원을 주고받는 것을 의미한다.여기서 자원은 그림, 이미지, 텍스트 등을 의미하고, 그 자원의 이름으로 해당 자원을 표현하게 된다.웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 개발 아키텍처의 한 형식기본적으로 웹과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대로 활용할 수 있음모든 자원에 고유한 URI 가 등록됨 REST 의 구성 요소자원(Resources) : 각 자원들은 고유한 HTTP URI를 가지고 있으며, 해..