미누에요

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를 가지고 있으며, 해..

웹 프론트엔드 개발자로 수많은 프로젝트를 진행하다 보면 컴포넌트의 사이즈를 정할 때 px을 사용하지 말라고 많이 들었을 것이다. px은 정적인 단위로, 데스크톱, 태블릿, 모바일까지 다양한 기기로 웹페이지를 접속하는 현 시점에서 불리하기 때문이다.그와 동시에, rem 혹은 em을 사용하라는 말도 들어봤을거라 생각한다. remrem은 root 폰트 사이즈를 1rem으로 계산하여 사용하는 방식이다. 부모 폰트 사이즈를 기준으로 하는 em과는 다르게, 가장 상위에 존재하는 root의 폰트 사이즈를 기준으로 하기에 보다 일관적인 UI를 나타낼 수 있다. 하지만 나는 개발을 하면서 왜 rem이 반응형인지 의문이 들기 시작했다.root 의 폰트 사이즈를 기준으로 철저히 계산된 정적인 값이 아닌가? 하지만 언제까지나..

최근 프로젝트를 하던 중 다른 팀원의 코드에 interface를 사용하여 props를 받는 부분을 보았다. typescript를 아직 많이 사용해보지 않아 기본적으로 type을 사용하고 있었는데, 이 코드를 보고 interface와 type은 각각 어떨 때 사용하는거지 ? 라는 의문이 들어 찾아보게 되었다. type 을 사용하는 경우단순히 원시 값, 튜플(tuple) 등을 선언할 때!type Name = string; type은 일반적으로 모든 선언에 사용할 수 있다.선언해둔 것을 확장할 수 없다.type Student = { name:string; stdNo:string;};type Student = { age: number;}; // Error 또한 type으로 선언한 것들은 선언적 확장(..