본문 바로가기

프론트엔드42

Github action으로 CI/CD 구축하기 Github actions는 Github가 공식적으로 제공하는 빌드, 테스트 및 배포 파이프라인을 자동화 할 수 있는 CI/CD 플랫폼이다. 레포지토리에서 Pull Request 나 push 같은 이벤트를 트리거로 Github 작업 워크플로우를 구성할 수 있다. 워크플로우는 하나 이상의 작업이 실행되는 자동화 프로세스로, 각 작업은 자체 가상 먼신 또는 컨테이너 내부에서 실행된다. 워크플로우는 .yml(혹은 .yaml) 파일에 의해 구성되며 테스트, 배포 등 기능에 따라 여러 개의 워크플로우로도 만들 수 있다. 생성된 워크플로우는 .github/workflows 디렉토리 이하에 위치하게 된다. Github action으로 CI/CD 구축하기 1. 나의 깃허브 계정에 새로운 레포지토리를 만든다. (publ.. 2023. 6. 5.
YAML YAML Yet Another Markup Language의 약자로 사람이 읽을 수 있는 데이터 직렬화 언어를 의미한다. 파일로 작성 시 확장자는 .yaml 혹은 .yml 확장자를 가진다. YAML은 사람이 읽을 수 있고 이해하기 쉬워 프로그래밍 언어 중에서도 인기가 높다. 또한 다른 프로그래밍 언어와 함께 사용할 수도 있다. YAML은 그 유연성과 접근성으로 인해 자동화 프로세스를 생성하는 데에도 사용된다. JSON vs YAML JSON { "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "secretBase": "Super tower", "active": true, "members": [ { "name": "Mol.. 2023. 6. 4.
CI / CD CI / CD CI는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration)을 의미한다. CI를 성공적으로 구현할 경우 애플리케이션에 대한 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충동할 수 있는 문제를 해결할 수 있다. CD는 지속적인 서비스 제공(Continuous Delivery) 혹은 지속적인 배포(Continuous Deployment)를 의미하며 이 두 용어는 상호 교환적으로 사용된다. 두 가지 의미 모두 파이프라인의 추가 단계에 대한 자동화를 뜻하지만 때로는 얼마나 많은 자동화가 이루어지고 있는지를 설명하기 위해 별도로 사용되기도 한다... 2023. 6. 3.
TypeScript - Generic 타입스크립트의 제네릭(Generic)은 코드 재사용성을 높이고 타입 안정성을 보장하는 기능이다. 제네릭을 사용하면 함수나 클래스를 작성할 때, 사용될 데이터의 타입을 미리 지정하지 않고, 이후에 함수나 클래스를 호출할 때 인자로 전달된 데이터의 타입에 따라 자동으로 타입을 추론하게 된다. 제네릭 function printLog(text: T): T { return text; } printLog 함수에 T라는 타입 변수를 추가했다. T는 유저가 준 파라미터의 타입을 캡쳐하고, 이 정보를 나중에 사용할 수 있게 한다. 여기에서는 T를 반환 타입으로 다시 사용하였다. 즉, 파라미터와 반환 타입이 같은 타입을 사용하고 있음을 알 수 있다. printLog 함수는 타입을 불문하고 동작하므로 제네릭이라 할 수 있다.. 2023. 6. 1.
TypeScript - Type Aliases, Type Inference, Class Type Aliases(타입 별칭) Type Aliases는 타입의 새로운 이름을 만드는 것이다. 타입을 정의할 수 있는 모든 곳에는 타입 별칭을 쓸 수 있다. 복잡한 타입을 간략하게 표현하고, 타입 정의를 재사용하는 등 가독성을 높일 수 있다. type Person = { id: number; name: string; email: string; } //Commentary 인터페이스에서 Person 타입을 참조하고 있습니다. interface Commentary { id: number; content: string; user: Person; } //객체에서 Commentary 인터페이스를 참조하고 있습니다. let comment1: Commentary = { id: 1, content: "뭐예요?", u.. 2023. 5. 31.
TypeScript - Enum, Interface Enum(열거형) JavaScript에서는 기본적으로 열거형을 지원하지 않지만, TypeScript에서는 문자형 열거형과 숫자형 열거형을 지원한다. 열거형은 숫자형과 문자열형, 혹은 이 둘의 조합으로 정의될 수 있다. 디폴트 값으로는 숫자형을 사용하며 각 값은 자동으로 0부터 시작하여 1씩 증가한다. 다음과 같이 수동으로 값을 지정할 수도 있다. enum Color { Red = 1, Green = 2, Blue = 4, } let c: Color = Color.Green; let greenValue: number = Color.Green; let blueValue: number = Color.Blue; console.log(c); // 출력: 2 console.log(greenValue); // 출력:.. 2023. 5. 31.