개인 프로젝트 기록
1.💪도전! 프리티어로 AWS ECS 사용하기: ECS 클러스터에 EC2 인스턴스 연결 + 간단 배포
이제는 더 이상 미룰 수 없다. AWS ECS 첫 사용기
2.[Trouble Shooting] ECS Task 실행 오류: Essential container in task exited
간단한 nginx 이미지를 ECS로 배포하다가 오류가 발생했다.
3.Next.js 기본 세팅 (tailwind, prettier, eslint, jest)
Next.js 기본 세팅 과정~! prettier & eslint 플러그인 적용하기 + jest 환경 설정
4.Github Actions를 사용해 간단 CI 작성하기 (feat. Next.js 프로젝트)
새로 시작하는 개인 프로젝트 세팅을 하고 있다.요번에는 이것 저것 새로운 것들을 하려고 하는데, 그 중 하나가 github actions를 활용해 자동화를 이것저것 달아보는 것이다.오늘은 github actions로 CI/CD 중에 일단 CI를 먼저 작성해보자~!오늘
5.간단하게 husky 사용하기 (feat. cannot execute binary file 오류 트러블 슈팅)
이전에 github actions을 사용해서 간단하게 CI를 작성해봤다.이번에는 husky로 로컬에서 commit 할 때 검사할만한 것들을 적용해보려고 한다.적용할 것들은 다음과 같다.eslint 검사prettier 포맷팅 검사audit를 활용해 패키지 보안 취약성 검
6.💪도전! 프리티어로 AWS ECS 사용하기: Next.js 배포 자동화 구현하기 (feat. github actions)
전에 💪도전! 프리티어로 AWS ECS 사용하기: ECS 클러스터에 EC2 인스턴스 연결 + 간단 배포에서 AWS 콘솔에서 간단히 ECS 실습을 했었다.이제 github actions을 활용해서 진짜 최종 목표인 배포 자동화를 달아보자!바로 시작!!먼저 나는 프리티어
7.슬기롭게 폴더 구조 설계하기: FSD 간단히 살펴보기 (feat. Next.js App routing 방식)
FSD(Feature-Sliced Design)는 기능 중심의 모듈화된 구조로, 애플리케이션을 유지보수성과 확장성이 높은 방식으로 조직화하는 설계 방법론이다.공식 문서도 있고, 튜토리얼도 있다: https://feature-sliced.design/공식 문서로
8.Storybook + Chromatic 세팅하기 (feat. Next.js)
Storybook for Next.js (공식 문서)tsconfig-paths-webpack-plugin 사용해서 tscofing.json 가져다 적용되게 하기!똑같은 설정을 그대로 옮기는 것보다, 나중에 수정하더라도 tsconfig.json 만 수정하면 되게 하자.혹
9.🌈 VSCode에서 클릭 한 번으로 컴포넌트 파일, stories.tsx, test.tsx 자동 생성하기
VSCode에서 Next.js + Typescript로 개인 프로젝트를 진행하고 있다.생산성을 끌어올리기 위해서 클릭 한 번으로 정해진 템블릿으로 아래 3가지 파일을 생성하기를 구현해봤다.Component.tsxComponent.stories.tsxComponent.t
10.[@testing-library/react 오류] Property 'toBeInTheDocument' does not exist on type 'Matchers<void, HTMLElement> …
이렇게 사용했을 때 다음과 같은 오류가 발생했다.jest.setup.ts 작성jest.config.js 수정\+) 관련 다운로드한 패키지jest@testing-library/dom@testing-library/jest-dom@testing-library/react@ty
11.깔끔하게 조건부 스타일링하기 (feat. classnames)
Next.js 프로젝트에서 tailwindcss를 사용해 스타일링하고 있다.tailwindcss는 조건부 스타일링을 적용하다보면 클래스가 지저분해지는데, classnames 라이브러리를 사용해서 좀 더 간편하게 사용해보자.classnames 쓰기 전classnames
12.react-hook-form 으로 폼 관리&검증하기
react-form-hook을 사용해서 폼을 관리하고 검증 로직까지 구현해보자!React에서 폼을 쉽게 관리하고 유효성 검사를 효율적으로 처리할 수 있도록 도와주는 라이브러리폼 상태를 최소화하고, 불필요한 리렌더링을 방지하여 성능을 최적화사용하기 쉬운 API, useF
13.[react-hook-form 오류] 커스텀 Input 컴포넌트 사용 시 값이 undefined로 인식되는 문제 (feat. forwardRef)
React에서 폼을 쉽게 관리하고 유효성 검사를 효율적으로 처리할 수 있도록 도와주는 라이브러리폼 상태를 최소화하고, 불필요한 리렌더링을 방지하여 성능을 최적화사용하기 쉬운 API, useForm 훅을 사용하여 폼을 초기화하고, register를 통해 각 폼 필드를 간
14.Firebase로 초간단 인증 구현하기
Firebase는 Google이 제공하는 애플리케이션 개발 플랫폼이다.개발자가 고품질의 애플리케이션을 빠르고 쉽게 구축할 수 있도록 돕는 다양한 도구와 서비스를 제공한다.Firebase는 백엔드 서비스, 데이터베이스, 인증, 호스팅 등을 포함해서 애플리케이션의 전반적인
15.zustand를 활용한 커스텀 Alert 로직 구현하기
전역 상태 라이브러리인 zustand를 활용해서 커스텀 Alert을 클라이언트 사이드 어디서든 띄울 수 있도록 구현했다.store에 alert 정보를 queue에 담아서 관리하도록 했다. (한번에 여러 alert이 뜨게 될 수도 있으니깐!)그리고 추가하고(push),
16.Next.js API 에러 처리 깔끔하게 하기 (feat. 커스텀 ApiError 클래스, 커스텀 미들웨어)
Next.js 풀스택 개인 프로젝트를 하면서, API를 개발하고 있다.안정적인 서버를 만들기 위해서 에러 처리에 신경을 쓰고 있다.이런 저런 고민을 하면서 2가지 정도 도입을 해봤다.커스텀 ApiError 클래스 작성과 활용미들웨어 로직을 직접 구현해서, API 별로
17.도메인 연결과 SSL 인증서 적용 (feat. 한글 도메인 사용하기)
살짝 미뤄뒀던 도메인 적용과 SSL 인증서 발급을 진행했다.로드밸런서는 안쓰고(EC2 하나밖에 안쓰는데 로드밸런서가 굳이 필요할까..?), Let's Encrypt를 이용해 EC2 내부에서 SSL 인증서를 발급받아 적용하는 형식으로 진행했다.가비아에서 도메인을 구입하자