본문 바로가기
프론트엔드에서의 CI/CD ci/cd 이야기를 들어본 적이 있다.근데 이건 큰 프로젝트들에서 쓰이기에, 따로 개인적으로 써본 적은 없다. 그래도 하는 방법이랑 개념 정도는 글로 남기는 것이 좋아 보여서 이렇게 글을 남겨본다. (루비온레일즈에서는 약간 찍먹 정도 해봄)CI/CD란?심플하게 말하자면, 배포까지의 과정을 효율적으로 만들어주는 과정이다.CI/CD는 코드 병합부터 테스트, 배포까지의 라이플사이클 전체에 걸쳐 자동화를 이루는 것이다.CI는 빌드 및 테스트를 자동화하는 것이며, CD는 배포를 자동화하는 것이다. (당연히 이 두 개는 묶음 세트이다.)관련 글https://comprogramming.tistory.com/82#%F0%9F%93%8C%20CI%20%3A%20%EB%B9%8C%EB%93%9C%20%EB%B0%8F%20.. 2025. 9. 18.
토스에서 즐겨쓰는 yarn 시작하기 전에, 공식 사이트는 다음 링크를 참고하자.https://yarnpkg.com/ Home page | YarnYarn, the modern JavaScript package manageryarnpkg.comYarn 이란?Yarn은 Javascript 패키지 매니저이다. 프로젝트 패키지 의존성을 관리하는 툴이며, 다른 개발자들과 패키지를 공유할 수 있도록 도와준다. (*third-party 모듈을 패키지라고 부른다.)Yarn은 npm과 마찬가지로 패키지의 저장소를 제공하며, 시스템에서 의존 패키지를 설치, 업데이트할 수 있도록 도와준다. package.json 파일을 통해 해당 프로젝트가 의존하고 있는 모든 패키지를 구분하고, package.json에 있는 dependencies 필드를 기반으로 .. 2025. 9. 17.
pnpm이 뭐지? pnpm은 "Performant npm"의 약자로, Node.js 환경에서 패키지를 빠르고 효율적으로 설치하고 관리하기 위한 고성능 패키지 매니저저이다. 저장 공간을 절약하고 설치 속도를 높이며, 기존 npm의 비효율적인 의존성 관리 문제를 개선한 것이 특징.pnpmhttps://pnpm.io/ko/installation 설치하기 | pnpm필수 구성 요소pnpm.io설치하는 방법은 여러 가지이다. OS 마다 설치하는 방법도 다르게 할 수 있다. 자세한 것은 위 공식 사이트를 참고하자. 명령어뿐 아니라 여러 좋은 정보들을 얻어갈 수 있다.설치 같은 경우에 잘 모르겠다면, AI에게 물어봐도 잘 알려준다!주요 특징 및 장점빠른 설치 속도: 패키지를 효율적으로 설치하여 전체적인 빌드 및 개발 속도를 향상시킵니.. 2025. 9. 17.
프론트에서 서버에 데이터 요청하는 방법 https://youtu.be/d6suykcsNeY?si=MonlhGzomiU_uCXv(반복 기록용) 2025. 8. 10.
커서 ai로 코딩하기. 바야흐로 대 "AI" 시대. 코딩에 특화된 AI도 정말 많이 나왔다. 그중에서 유명한 "커서"가 있다. 뭐 물론 커서 말고도 다른 AI들이 많다. 챗GPT나 클로드... 코파일럿 등등.. 그러나 이 글에서는 커서 AI에 대해서만 이야기하겠다.공식 홈페이지https://www.cursor.com/ Cursor - The AI Code EditorBuilt to make you extraordinarily productive, Cursor is the best way to code with AI.www.cursor.com공식 홈페이지 링크는 다음과 같다. 참고하길 바란다.https://velog.io/@eunbinn/cursor-ai-tips-react-nextjs?utm_source=substack&utm.. 2025. 6. 12.
TypeScript와 TypeScript+SWC의 차이 우리가 리액트를 vite로 프로젝트 빌드를 할 때에 조건을 선택하게 되는데, 이 중 그냥 타입스크립트랑 타입스크립트 + SWC인 부분이 있다. (자바스크립트도 똑같이 나옴)그 차이가 무엇인지에 대한 좋은 글이 있어서 공유해 본다.https://velog.io/@castillou/TypeScript%EC%99%80-TypeScriptSWC%EC%9D%98-%EC%B0%A8%EC%9D%B4 TypeScript와 TypeScript+SWC의 차이Vite를 사용해 React 프로젝트를 설정할 때마다 보이는 두 가지 선택지가 있다. 바로 TypeScript와 TypeScript+SWC. 이 두 옵션은 어떤 차이가 있기에 나뉘어 있을까? 단순히 옵션을 선택하는 것보다 그 차velog.io 2025. 5. 22.
리액트 훅에 취하다. 리액트에서 빠지면 섭한 "리액트 hook"이에 대한 설명을 모아둔 유튜브 재생목록이 있어서 내가 복습할 겸... 여기 티스토리에 공유하겠다.https://www.youtube.com/playlist?list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO React Hooks에 취한다 - 리액트 훅스 쉽게 마스터하기 www.youtube.com(개인적으로 깔끔하게 잘 알려주셨음.) 2025. 5. 12.
타입스크립트에서 타입은 집합이다. 타입스크립트에서 타입은 여러 개의 값을 포함하는 집합이다.집합은 동일한 속성을 갖는 여러 개의 요소들을 하나의 그룹으로 묶은 단위를 뜻한다.예를 들어..위 값을 모아둔 집합을 타입스크립트에서는 number타입이라고 부르는 것이다.이에 반해 리터널 타입은 "아주 작은 집합"이라고 볼 수 있다.즉, 숫자형 리터널 타입은 "숫자 타입" 안으로 들어간다.위 숫자 타입이 슈퍼타입(부모타입)으로 부를 수 있고, 밑의 리터널 타입이 서브타입(자식타입)으로 부를 수 있다.타입 호환성 2025. 4. 28.
타입스크립트의 void와 never 타입 let a: void;a = undefined;이번에는 타입스크립트의 void와 never 타입을 다룰 것이다. 이번까지의 글로 기초적인 타입은 끝난다. (야호!)void 타입void이란 "공허" 즉, 아무것도 없다는 뜻이다. void는 아무것도 없음을 뜻한다. 예시 코드 >function func2(): void { console.log("hello");}물론 다음과 같이 변수의 타입으로도 void 타입을 지정할 수 있다. 그러나 void 타입의 변수에는 undefiend 이외의 다른 타입의 값은 담을 수 없다.let a: void;a = undefined;이때 tsconfig.json에 엄격한 null 검사 옵션을 해제하면 특별하게 void에도 null을 담을 수 있다.// "strictNullCh.. 2025. 4. 25.
Next.js에서 'use client'를 사용하는 경우 최신 버전인 Next.js 15 기준으로 이야기하겠다.시작하기 전에..기본적으로 Next.js 는 "서버 사이드 렌더링" 으로 렌더링이 된다.리액트에서는 클라이언트 사이드 렌더링을 하는데, 이 부분에서 가장 큰 차이가 난다.SSR / CSR 이 개념은 다음 글을 참고하자.https://codingworld2002.tistory.com/216 SSR 과 CSR (서버 사이드 렌더링/클라이언트 사이드 렌더링)Next.js나 리액트를 배울 때, 서버 사이드 렌더링이랑 클라이언트 사이드 렌더링 이야기가 나온다. 간단하게 말하면 렌더링에서 차이가 나는 것인데,서버 사이드 렌더링은 "서버"에서 미리 렌더링codingworld2002.tistory.com근데, 이때 "여러 가지" 경우로 인해 클라이언트 사이드 렌더링.. 2025. 4. 24.
Next.js에서 shadcn 사용하기 공식 문서 링크는 다음과 같다. 디테일한 건 공식 문서를 참고하자.https://ui.shadcn.com/docs/installation/next Next.jsInstall and configure shadcn/ui for Next.js.ui.shadcn.comshadcn이란리액트 ui 컴포넌트 라이브러리인 React MUI를 알 것이다. next.js에도 비슷한 게 있다. 그게 shadcn이다https://ui.shadcn.com/ Build your component library - shadcn/uiA set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite f.. 2025. 4. 22.
타입스크립트의 Any타입 / Unknown타입 이번에는 "any타입"과 "unknown타입"에 대한 이야기를 해보겠다.any 타입단어에 힌트가 있다. 말 그대로 "모든 타입"을 자유롭게 사용할 수 있게 만드는 만능 타입이다.코드를 살펴보자.let anyVar: any = 10;anyVar = "hello";anyVar = true;anyVar = {};anyVar.toUpperCase();anyVar.toFixed();anyVar.a;만일 타입을 any로 선언하지 않고 number로 선언했다면 오류가 떴을 것이다. any로 선언하기에 문제가 생기지 않는다.any는 최대한 쓰지 말자.위 코드를 ts-node로 실행하면 런타임 오류가 발생한다.any 타입은 타입 검사를 받지 않는 타입이다. 문법과 규칙에서 자유롭지만 그만큼 위험하다.애초에 이런 식으로 .. 2025. 4. 19.
Next.js를 이용한 포트원 결제 구현(테스트) Next.js와 포트원을 이용한 결제 시스템을 구축하고자 한다. 이 부분에서 진행되는 흐름을 글로 작성하고자 한다. 이 글이 다른 사람들에게도 도움이 되면 좋을 것 같다. 참고로 테스트 용도이다. 실제 결제 시스템은 이것보다는 조금 더 복잡하긴 하다...시작하기 전에..시간이 흐름에 따라 나의 글은 "옛날 말"이 될 가능성이 있다. 버전의 차이. 혹은 Next.js의 업데이트 등등이 있을 것 같다. 이 점을 참고해 주길 바란다. 또한. 이 글은 조금씩 추가 및 수정 가능성이 포함되어 있다.시작.코드 샘플이 있어서 쉽다. 코드 샘플은 밑 링크를 참고하라.https://github.com/portone-io/portone-sample/tree/main/nextjs portone-sample/nextjs at.. 2025. 4. 18.
타입스크립트의 enum 타입 타입스크립트에서 enum타입은 "열거형 타입"이라고 불리는 타입이다.이 타입은 자바스크립트에서는 지원하지 않고, 타입스크립트에서만 지원한다.일단 코드 예시부터 보자.enum Role { ADMIN, USER, GUEST,}열거형은 위와 같이 여러 개의 값을 나열하는 용도로 사용한다.사용하고 싶다면 enum를 선언해 주면 된다.// enum 타입// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입enum Role { ADMIN = 0, USER = 1, GUEST = 2,}const user1 = { name: "이정환", role: Role.ADMIN, //관리자};const user2 = { name: "홍길동", role: Role.USER, // 회원};const us.. 2025. 4. 17.
타입스크립트의 타입 별칭과 인덱스 시그니처 이번에는 타입 별칭과 인덱스 시그니처에 대한 이야기를 해볼 것이다. 천천히 따라오자!타입 별칭타입 별칭이란, 여러 변수의 타입을 하나의 "타입"으로 모아서 선언한 이후 마치 변수처럼 쓸 수 있게 만드는 것이다. 예시코드를 살펴보자.// 타입 별칭type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string;};let user: User = { id: 1, name: '이정환', nickname: 'winterlood', birth: '1997.01.07', bio: '안녕하세요', location: '부천시',};User라는 타입을 따로 선언해 주고 이걸 user.. 2025. 4. 15.
타입스크립트의 객체를 다루는 방식 이번에는 타입스크립트에서 객체를 다루는 방식을 이야기해 보겠다.일단 코드는 다음과 같으니 참고하길 바란다.예시 코드 >let user: { id?: number; name: string;} = { id: 1, name: '이정환',};let config: { readonly apiKey: string;} = { apiKey: 'MY API KEY',};// config.apiKey = "hacked";먼저, 객체를 선언한다. 여기까지는 자바스크립트와 동일하다.이때, 내가 객체에 할당하고 싶은 변수에 대한 타입을 작성해 두면 된다.객체 리터럴 타입let user: { id: number; name: string;} = { id: 1, name: '이정환',};객체 리터럴 타입이란, 중괄호.. 2025. 4. 10.
타입스크립트의 배열과 튜플 이번에 배운 것은 "배열과 튜플"이다. 타입스크립트 뿐 아니라, 언어를 배우면 꼭 알아가는 것이 배열이다.일단 코드는 다음과 같다. 참고하자.// 배열let numArr: number[] = [1, 2, 3];let strArr: string[] = ["hello", "im", "winterlood"];let boolArr: Array = [true, false, true];// 배열에 들어가는 요소들의 타입이 다양할 경우let multiArr: (number | string)[] = [1, "hello"];// 다차원 배열의 타입을 정의하는 방법let doubleArr: number[][] = [ [1, 2, 3], [4, 5],];// 튜플// 길이와 타입이 고정된 배열let tup1: [numb.. 2025. 4. 9.
타입스크립트의 기본 타입 타입스크립트에는 기본으로 제공되는 타입이 존재하고, 그 안에 원시타입과 리터럴타입이 존재한다.일단 코드는 다음과 같다.// numberlet num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -0.123;let num5: number = Infinity;let num6: number = -Infinity;let num7: number = NaN;// stringlet str1: string = "hello";let str2: string = "hello";let str3: string = `hello`;let str4: string = `hello ${num1}`;// booleanlet bool1:.. 2025. 4. 8.
Next.js의 Dynamic API 처리 Next.js 에서 다이나믹 API를 처리할 때, params를 비동기로 처리해야 한다. 이 부분에서 나는 정말 많은 빌드를 실패했다. 이 부분에서 많은 사람들이 빌드에 실패할 수 있을 것 같다. 공식문서링크는 밑의 링크를 참고하라.https://nextjs.org/docs/messages/sync-dynamic-apis Dynamic APIs are AsynchronousLearn more about why accessing certain APIs synchronously now warns.nextjs.org내 코드import { Suspense } from 'react';import MovieInfo, { getMovie } from '../../../../../components/movie-info.. 2025. 4. 6.
타입스크립트의 동작원리 여기까지는 이론. 다음부터는 실제의 코드를 이야기할 것이다.대다수의 프로그래밍 언어는 어떻게 동작하는가?"컴파일" 을 들어봤을 것이다.컴퓨터는 이진수만 이해할 수 있다. 인간은 이진수를 이해하기 "매우" 힘들고 우리만의 언어를 사용하기 때문에, 중간 과정을 해석해 주는 컴파일이 반드시 필요하다.그리고 컴파일을 해주는 도구가 컴파일러이다.자바스크립트의 컴파일를 거치면 바이트 코드가 된다.물론 그냥 바로 바뀌는 것은 아니고 AST(추상 문법 트리)를 통해서 변환 후에 AST를 바이트 코드로 바꾸게 된다.그렇다면 타입스크립트는 어떻게 실행이 될까?쉽게 말하면. 타입스크립트는 대다수의 프로그래밍 언어처럼 컴파일하는 것과 비슷하게 작동하지만, 중간에 타입을 검사하는 과정이 추가된다.(이때에는 바이트코드가 아니고 .. 2025. 4. 3.