본문 바로가기

전체 글73

git 명령어 모음 Git 설정 - 로컬 리포지토리와 연결할 유저 정보를 설정한다. # 버전 히스토리를 식별할 때 사용할 이름을 설정합니다. $ git config --global user.name "[firstname lastname]" # 각 기록과 연결할 이메일 주소를 설정합니다. $ git config --global user.email “[valid-email]” 도움말 보기 - help 명령어를 이용하여 각 명령어 및 옵션의 기능에 대해 살펴볼 수 있다. # Git에서 제공하는 모든 명령어를 볼 수 있습니다. $ git help -all # 특정 command에서 사용할 수 있는 모든 옵션을 볼 수 있습니다. $ git [command] -help 세팅 및 초기화 - 리포지토리를 초기화 하거나 존재하는 리포지토리.. 2023. 6. 12.
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.
TypeScript - 타입, 함수, 연산자 활용 타입 TypeSciprt? TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합 언어이다. JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 밟전하면서 생긴 단점을 보완하기 위해 등장하게 되었다. TypeScript는 정적타입 검사 기능을 제공하며, 코드의 가독성과 유지 보수성을 높여준다. 이를 통해 개발자는 런타임 에러를 최소화하고, 코드 작성 시간을 단축하며, 협업 시 코드의 가독성을 높일 수 있다. TypeScript의 타입 Boolean let isShow: boolean = true; let isDone: boolean = false; Number let number1: number = 5; le.. 2023. 5. 30.
TypeScript 프로젝트 환경 구성하기 TypeScript 프로젝트 환경 구성하기 1. 프로젝트 폴더를 만든 후 `npm init -y`로 npm을 사용할 준비를 한다. 2. `npm install typescript --save-dev`로 TypeScript를 설치한다. 3. 프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성한 후 밑의 내용을 붙여 넣는다. //tsconfig.json //compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있습니다. { "compilerOptions": { "target": "es6", "module": "commonjs", "sourceMap": true, "outDir": "./dist" }, "include": [ "src/**/*" ] } TypeScript ESLint와 P.. 2023. 5. 30.
React - useCallback useCallback이란? useCallback 또한 useMemo와 마찬가지로 메모이제이션 기법을 활용한 Hook이다. useMemo는 값의 재사용을 위해 사용하는 Hook이라면, useCallback은 함수의 재사용을 위해 사용하는 Hook이다. function Calculator({x, y}){ const add = () => x + y; return {add()} ; } 해당 컴포넌트가 리렌더링 되더라도 그 함수가 의존하고 있는 값인 x와 y가 바뀌지 않는다고 가정해보자. 그렇다면 함수 또한 메모리 어딘가에 저장해 뒀다가 다시 꺼내서 쓸 수 있다. /* useCallback를 사용하기 전에는 꼭 import해서 불러와야 합니다. */ import React, { useCallback } from .. 2023. 5. 23.
React - useMemo Hook이란? Hook은 React 16.8에 새로 추가된 기능이다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. Hook을 사용할 때는 두 가지 규칙을 준수해야만 한다. 1. 리액트 함수의 최상위에서만 호출하여야 한다. 2. 오직 리액트 함수 내에서만 사용되어야 한다. useMemo useMemo는 특정 값(value)을 재사용하고자 할 때 사용하는 Hook이다. function Calculator({value}){ const result = calculate(value); return {result} ; } 위의 컴포넌트는 props로 넘어온 value 값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, 엘리먼트로 출.. 2023. 5. 22.
React - Diffing Algorithm 1. 각기 서로 다른 두 요소는 다른 트리를 구축한다. 2. 개발자가 제공하는 key 프로퍼티를 가지고, 여러 번 렌더링을 거쳐도 변경되지 말아야 하는 자식 요소가 무엇인지 알아낼 수 있다. React는 위의 두 가정을 가지고 새로운 휴리스틱 알고리즘(Heuristic Algorithm)을 구현해내었다. 실제 이 두 가정은 거의 모든 실제 사용 사례에 들어맞게 됩니다. 여기서 React는 비교 알고리즘(Diffing Algorithm)을 사용한다. *휴리스틱(Heuristic)이란 불충분한 시간이나 정보로 인하여 합리적인 판단을 할 수 없거나, 체계적이면서 합리적인 판단이 굳이 필요하지 않은 상황에서 사람들이 빠르게 사용할 수 있게 보다 용이하게 구성된 간편한 추론의 방법을 뜻한다. Diffing Alg.. 2023. 5. 22.

티스토리툴바