패스트캠퍼스 환급챌린지 27일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

 

패스트캠퍼스 환급챌린지란?

(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스

https://fastcampus.info/4n8ztzq

 

더운 일요일에도 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

 

27일차 공부 시작!

 

오늘 공부 시작 시간 (07.27 17:27)

 

오늘의 강의 주제는 '회원 가입 폼-밸리데이션 구조 설계'이다.

 

 

학습 인증샷 - 1

(오늘도 마찬가지로 모자이크 처리..)

 

오늘의 학습 내용

- 회원 가입 폼-밸리데이션 구조 설계 -

 

* 우편번호 API와 데이터 최소화

많은 우편번호 API는 다양한 정보를 제공하지만, 실제 서비스에서는 필요한 데이터만 선별해 사용하는 게 효율적이다. 필요 이상의 정보를 받아오면 클라이언트와 서버 모두 불필요한 리소스를 소모할 수 있다. 따라서, API 호출 시 실제로 필요한 필드만 추출해서 저장하거나 표시하게끔 데이터 구조를 설계하는 것이 중요하다. 예를 들어, 주소, 시군구, 우편번호 정도만 활용하고, 그 외 정보는 배제하여 처리한다.

* 디렉터리 구조와 클래스 중개

프로젝트에서 특정 디렉터리 하위에 index.ts 파일을 두고, 개별 클래스나 함수들을 export해서 외부에 중개하도록 구조를 설계하면 코드의 유지 보수성과 가독성이 높아진다. 사용하는 곳에서는 굳이 하위 구조를 일일이 알 필요 없이 index.ts만 import한 뒤 필요한 컴포넌트나 유틸리티를 선택적으로 사용할 수 있다. 이런 구조는 규모가 커질수록 유용하며 각 기능별로 명확하게 코드를 분리하고, 의존성을 관리하기가 쉬워진다.

 

* 코드

import { ValidateRule } from "./types";

export const RequireRule: ValidateRule = {
	rule: /.+/,
	match: true,
	message: '필수 입력 항목입니다.',
};

export const CantContainWhitespace: ValidateRule = {
	rule: /\s/,
	match: false,
	message: '공백을 포함할 수 없습니다.',
};

export const CantStartNumber: ValidateRule = {
	rule: /^\d/,
	match: false,
	message: '숫자로 시작하는 아이디는 사용할 수 없습니다.',
}

export const MinimumLengthLimit = (limit: number): ValidateRule => ({
	rule: new RegExp(`(.){${limit}}`),
	match: true,
	message: `최소한 ${limit}글자 이상 이어야 합니다.`,
});

* 정규 표현식(Regular Expression)의 역할과 활용

폼 밸리데이션에서 가장 핵심적으로 활용되는 도구 중 하나가 바로 정규 표현식이다. 정규식은 문자열에서 특정 패턴을 빠르게 찾거나, 유효성 검증 등 다양한 목적에 사용할 수 있다. 자바스크립트에서 정규식 객체는 자체적으로 제공되어 문자열 검사에 매우 효율적으로 사용할 수 있다.

정규 표현식은 일종의 미니 프로그래밍 언어라고 볼 수 있다. 패턴 매칭에 특화되어 있으며, 일반적인 프로그래밍 코드만으로는 구현하기 까다로운 복잡한 문자열 규칙을 간단하게 표현할 수 있다. 예를 들면, 대문자 또는 소문자 구분, 숫자 포함 여부, 이메일 형식, 특수문자 사용 여부 등 어려운 조건도 짧게 기술할 수 있다.

특히 회원 가입과 같은 입력 검증 시에는 필수 입력 여부, 공백 금지, 숫자로 시작하는지 여부, 최소 길이 제한 등 다양한 규칙을 적용해야 한다. 이를 위해 여러 정규식을 활용하고, 각 조건별로 규격화된 메시지와 rule 객체를 설계할 수 있다. 이런 방식은 코드 재사용성과 확장성을 높이는 데도 도움이 된다.

정규식을 잘 활용할 수 있으면 복잡한 사용자 입력도 훨씬 쉽게 처리할 수 있다. 그러나 처음 배우는 사람들에게는 정규식 문법이 난해할 수 있으므로 공식 문서나 참고 자료 등을 꾸준히 보며 연습하는 것이 좋다.

* 밸리데이터 구현의 기술적 의의와 효과

밸리데이션 규칙을 함수형으로 설계하면 다양한 입력 조건에 따라 동적으로 규칙을 생성할 수 있다. 예를 들어, 최소 길이 제한과 같이 가변적인 조건도 쉽게 처리할 수 있다. 그리고 규칙마다 메시지를 객체로 관리하면서, 각 상황에 맞게 사용자에게 안내할 수 있다.

클린 코드와 유지 보수를 위해 규칙별로 분리된 객체를 만들고, 이들을 단일 index.ts 파일에서 모아 export한다면 프로젝트 전반의 일관성을 높일 수 있다. 또한 테스트 코드 작성과 코드 리뷰 시에도 각 규칙별로 집중하여 검증할 수 있어 생산성이 증가한다.

현업에서도 이처럼 정규식 기반의 밸리데이션 모듈화를 자주 활용한다. 신입이나 주니어 개발자라면 정규식 패턴 작성법부터 다양한 입력 케이스에 대한 테스트 방법까지 꾸준히 연습하면서 자기 것으로 만들어 두는 것이 좋다.

 

29강 수강 완료

 

오늘 공부 종료 시간 (07.27 18:01)

 

29강 강의 내용 정리 필기

 

 

학습 인증샷 - 2

마치며

 

오늘도 환급 챌린지 29강 공부 완료!!

 

이번 강의는 회원가입 폼-밸리데이션 구조 설계에 대한 내용을 들었다. 회원가입 요소에 대한 밸리데이션을 직접 정규식을 이용하여 설계하는 것인데, joi나 zod 등 밸리데이션 라이브러리를 쓰지 않고 직접 다양한 입력폼에 대한 밸리데이션을 구현하는 것은 좋은 것 같다.