xu의 성장일지

처음에는 select 태그를 활용해서 만들었는데, hover 될 때 파란 배경이 싫어서 바꾸려니까select 태그는 스타일 적용이 제한적이라고 해서...직접 드롭다운 컴포넌트를 만든 후에이걸로 생년월일 드롭다운을 만들었다.// SelectDropdown Props 타입 정의export type SelectDropdownProps = { options: T[]; selectedValue: T | string | null; placeholder: string; onSelect: (value: T) => void;};우선 드롭다운 컴포넌트의 props 타입을 정해주었다.options에는 배열이 들어가고(연, 월, 일),selectedValue는 현재 선택되는 값이 들어간다.placeholder는 말 그..

cva (Class Variance Authority)Tailwind CSS 클래스의 동적 관리를 하는 라이브러리. 기본 스타일과 다양한 변형을 정의하고 조합하여 효율적으로 관리가 가능하다!→ 재사용성이 높음cva('base-class', { variants: { // 변형에 따라 추가될 클래스 정의 (size) size: { sm: 'w-4 h-4', lg: 'w-8 h-8', }, }, defaultVariants: { // 기본으로 적용되는 값 size: 'sm', },}); clsx조건부로 클래스를 조합하는 라이브러리clsx('base-class', condition && 'conditional-class')condition이 true일 때 conditio..

TypeScript에서 모듈화는 코드를 여러 파일로 나누고 필요한 부분만 불러와 사용하는 방법이다.이는 코드를 더 구조화되고 유지보수하기 쉽게 만들어준다.TypeScript는 JavaScript의 ES6 모듈 시스템을 기반으로 하며,  import 와  export 를 사용해 모듈을 관리한다. 모듈(Module)이란?TypeScript에서 파일 하나가 하나의 모듈!파일 내부의 변수, 함수, 클래스 등을 다른 파일에서 사용할 수 있도록 내보내거나, 다른 파일에서 가져올 수 있다. export 키워드Named Export (이름 내보내기)// math.tsexport const add = (a: number, b: number): number => a + b;export const subtract = (a:..

TypeScript의 비동기 함수는 JavaScript의 비동기 처리를 기반으로 동작하며,async, await 키워드를 사용해 비동기 작업을 더 직관적이고 읽기 쉽게 작성할 수 있게 해준다. 비동기 함수란? Promise 를 반환하는 함수.함수의 실행이 끝난 후에도 처리 결과가 곧바로 반환되지 않고, 작업이 완료된 시점에 값을 반환한다.async function Func(): Promise { // 비동기 작업 수행} async 키워드async 키워드를 함수 앞에 붙이면 해당 함수는 항상 Promise를 반환한다.함수 내부에서 반환하는 값은 자동으로 Promise로 감싸진다.async function sayHello(): Promise { return "Hello, TypeScript!"; // 자..

상수 단언은 값을 리터럴 타입으로 고정하여 변수의 타입을 더욱 엄격하게 제어할 수 있는 기능이다.이를 통해 컴파일러가 해당 값이 변경하지 않는 것을 보장하고, 정확한 타입 추론을 도와준다.변수 값이 고정되어야 하는 상황에서 특히 유용하다! 특징1. 확장할 수 없는 리터럴 타입변수의 타입을 리터럴 값으로 고정하여, 확장할 수 없게 만듦.2. 애플리케이션 전역에서 일관된 값 사용값을 상수로 고정하여 전역에서 올바른 값을 일관되게 사용할 수 있게 한다.3. 컴파일러의 정확한 타입 추론TypeScript 컴파일러가 값의 타입을 정확히 추론할 수 있게 돕는다. let greeting = "Hello, World!";// TypeScript는 greeting의 타입을 string으로 추론const greetingC..

유틸리티 타입은 타입스크립트에서 제공하는 내장 타입으로, 기존 타입을 변환하거나 새로운 타입을 생성하는 데 사용된다.이러한 유틸리티 타입은 코드를 간결하게 작성하고 재사용성을 높이는 데 도움이 된다. Partial기존 타입의 모든 속성을 선택적으로 만드는 데 사용된다.즉, 해당 타입의 모든 속성이 필수가 아니라 선택적이 된다.interface User { name: string; age: number;}// 모든 속성이 선택적인 UserPartial 타입type UserPartial = Partial;// UserPartial 타입 사용const partialUser: UserPartial = {}; Readonly기존 타입의 모든 속성을 읽기 전용으로 만드는 데 사용된다.즉, 해당 타입의 모든 속성..

TypeScript는 기본 타입 외에도 복잡한 타입 관계와 구조를 표현할 수 있는 다양한 고급 타입 기능을 제공한다. 교차 타입 (Intersection Type)여러 타입을 결합하여 단일 타입으로 만드는 방법(저번 블로그에도 작성했지만 한 번 더 씀)- 이는 두 개 이상의 타입을 모두 만족해야 하는 타입을 의미.-  &  연산자를 사용하여 정의.type Person = { name: string; age: number;};type Employee = { employeeId: number;};type EmployeeDetails = Person & Employee;const employee: EmployeeDetails = { // name, age, employeeId 모두 포함 name: "J..

타입스크립트 (TypeScript)마이크로소프트가 개발한 오픈 소스 프로그래밍 언어로, 자바스크립트의 상위 집합.타입스크립트는 자바스크립트를 확장하여 정적 타입 검사와 고급 기능을 제공!■  정적 타입 시스템: 코드를 작성하는 동안 타입을 명시하거나 자동으로 추론하여, 런타임 전에 타입 관련 오류를 잡을 수 있게 함. ■  ES6+ 문법 지원 및 트랜스파일링: 최신 ECMAScript의 문법 사용 가능, 브라우저 호환성을 위해 ES5로 트랜스파일 됨. ■  객체지향 프로그래밍 지원 강화: 클래스, 인터페이스, 모듈 등 객체지향 개념을 자바스크립트에서 더 자연스럽게 사용할 수 있도록 도움 타입스크립트의 등장 배경자바스크립트의 단점을 보완하기 위해 등장!1. 자바스크립트의 동적 타입 문제- 자바스크립트는 런..

Git Branch 전략은 협업할 때 효율적으로 코드를 관리하고 협업을 진행하기 위해 사용되는 방식입니다.주로 사용되는 Git Branch 전략에 대해 소개하겠습니다. 1. Git FlowVincent Driessen이 제안한 전략으로, 안정성과 체계적인 배포 관리를 목표로 합니다.주요 브랜치- Main: 항상 배포 가능한 상태. 릴리스된 코드만 포함- Develop: 개발 진행의 중심. 다음 릴리스를 준비하는 브랜치보조 브랜치- Feature Branch: 새로운 기능 개발을 위해 생성. 완료 후 develop에 병합.- Release Branch: 배포 전 최종 테스트와 수정 작업. 완료 후 main과 develop에 병합.(이름 예시: release/v1.0)- Hotfix Branch: 긴급 버그..

안녕하세요. 오늘 AWS ZAM에 참가하며 경험했던 내용을 블로그로 정리해 보았습니다.이번 해커톤에서는 실제 클라우드 환경에서 직면할 수 있는 문제들을 게임 형식으로 해결하는 과제를 진행했습니다.게임 형식이라 그런지 승부욕 때문에 오랜 시간 집중해서 과제할 수 있었던 것 같습니다.불타는 승부욕에 비해 처참한 Solved 개수..... 풀었던 문제들에 대해 간략히 소개하자면,  RDS에서 데이터베이스 스냅샷 생성 및 암호화RDS 인스턴스의 데이터를 안전하게 백업하기 위해 스냅샷을 생성하고, 이를 암호화된 형태로 복원하는 과제를 수행했습니다. Cloud9에서 CodeWhisperer 사용하기CodeWhisperer를 Cloud9 환경에서 사용하면서, 자동으로 S3 버킷도 생성하고 로그 파일도 업로드 하였습니..