xu의 성장일지

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: 긴급 버그..

Github Actions로 CI/CD를 구축하여, github에 push 했을 때 S3와 CloudFront에 자동으로 업데이트가 되도록 해보겠습니다.S3, CloudFront에서 수동으로 업데이트 하는 방법은 밑의 글을 참고해 주세요!↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ [AWS] S3, CloudFront를 활용해서 React 프로젝트 배포하기오늘은 S3와 Cloudfront를 활용해서 React 프로젝트를 한 번 배포해 보겠습니다. 먼저 CloudFront에 대해 알아보겠습니다.CloudFrontAWS CloudFront는 콘텐츠 전송 네트워크(CDN) 서비스입니다.CDN은 사용자와 가xuwon.tistory.com Github Actions소스 코드 저장소와 밀접하게 통합된 CI/CD 도구코드 변경 ..

배포한 React 프로젝트에 도메인을 연결해 보겠습니다.S3, CloudFront를 활용하여 배포하였는데,자세한 내용은 아래의 글을 참고 부탁드립니다. [AWS] S3, CloudFront를 활용해서 React 프로젝트 배포하기오늘은 S3와 Cloudfront를 활용해서 React 프로젝트를 한 번 배포해 보겠습니다. 먼저 CloudFront에 대해 알아보겠습니다.CloudFrontAWS CloudFront는 콘텐츠 전송 네트워크(CDN) 서비스입니다.CDN은 사용자와 가xuwon.tistory.com 사용자 정의 도메인을 연결하려면, 일단 도메인이 있어야겠죠??저는 내도메인.한국 사이트에서 도메인을 무료로 얻었습니다. 내도메인.한국 - 한글 무료 도메인 등록센터한글 무료 도메인 내도메인.한국, 웹포워딩..

오늘은 S3와 Cloudfront를 활용해서 React 프로젝트를 한 번 배포해 보겠습니다. 먼저 CloudFront에 대해 알아보겠습니다.CloudFrontAWS CloudFront는 콘텐츠 전송 네트워크(CDN) 서비스입니다.CDN은 사용자와 가까운 서버에서 데이터를 제공하여 웹사이트, 애플리케이션, 또는 미디어 파일을 빠르고 안전하게 전송하도록 돕습니다. CloudFront는 전 세계 엣지 로케이션(Edge Location)을 활용해 속도와 안정성을 보장합니다. CloudFront의 주요 기능1. 빠른 콘텐츠 제공: 전 세계에 위치한 엣지 로케이션을 통해 사용자가 가까운 서버에서  콘텐츠를 전달 받음.2. 보안 강화: HTTPS를 지원하고, AWS Shield와 통합하여 DDoS 공격을 방어함.3...