실무
1.Tailwind v4 vs 이전 버전: 코드 짜며 느낀 변경점만 딱 정리
Tailwind 4.0으로 넘어오면서 “공식 문서에 있는 차이점”보다, 실제로 코드를 치면서 바로 체감되는 변화가 있었다. 내 경우엔 크게 두 가지였다. 파일 삽입 방식이 바뀌었다 커스텀 유틸리티를 @utility로 정의하는 흐름이 생겼다 폰트 커스텀 설정 방식이 바뀌
2.개발을 시작하기 전, 내가 먼저 작성했던 4가지 문서
회사를 다니기 전에는 개발이라고 하면 자연스럽게 코드를 먼저 떠올렸다. 하지만 실무에 들어와 보니, 실제 개발은 코드를 작성하기 전 단계에서 이미 절반 이상 결정되고 있었다. 입사 후 한 달 동안 나는 실제 구현에 앞서 다음 4가지 문서를 작성해보았다. - 유스케이
3.CI/CD란?
CI/CD는 코드를 더 자주, 더 안전하게, 더 자동으로 배포하기 위한 개발 문화이자 자동화 파이프라인이다.Continuous Integration, 지속적 통합개발자가 코드를 자주(main 브랜치에) 병합하고, 그때마다 자동으로 빌드·테스트를 실행하는 방식각자 로컬에
4.GitLab CI/CD
GitLab CI/CD는 GitLab에 기본으로 내장된 CI/CD 시스템이다. 별도의 CI 툴(Jenkins, CircleCI 등)을 붙이지 않아도, 저장소 하나만 있으면 바로 파이프라인을 구성할 수 있다. 별도 툴 설치 ❌ GitLab 저장소에 바로 연동 ⭕ > 파이
5.CI/CD 개념 정리
1. 내가 직접 하던 일(CI 없을 때) 2. CI를 쓰면 뭐가 달라질까? CI는 이 코드가 merge 되어도 괜찮은지 자동으로 검사하는 역할 lint / test / build를 자동으로 실행 하나라도 실패하면 merge 불가 사람이 빼먹을 수 없음 merge 가능
6.Axios Interceptor로 Access Token 자동 갱신하기 (Refresh Token + Queue 처리)
request 인터셉터 토큰을 어디에 넣을지 헤더 형식 Request Interceptor: Access Token 자동 첨부 Access Token은 SessionStorage에 저장해두고, 모든 요청에 자동으로 붙인다. response 인터셉터 “언제 재발급할지
7.refresh API는 왜 반드시 별도 axios 인스턴스로 분리해야 할까?
refresh API가 기존 axios 인스턴스를 타면, 자기 자신을 가로채는 interceptor 때문에 무한 루프가 생길 수 있다. 1️⃣ 기본 axios 인스턴스(api)는 “토큰 관리용”이다 보통 우리가 쓰는 api 인스턴스에는 이런 역할이 들어가 있음 req
8.토스 페이먼츠 next.js 연동
이 버전은 비회원도 가능 로그인한 회원만 가능할 때 무조건 성공 또는 실패 후 페이지 이동 필수 백엔드에게 정보 보내기 실패 결제 시간 초과 결제 실패 토스에서 제공하는 에러 코드 PAYPROCESSABORTED 사용자가 결제창을 닫음 "결제가 취소되었습니
9.ExcelJS를 활용한 엑셀 다운로드 기능 구현하기
## 요구사항 - 조회된 데이터를 엑셀로 다운로드 - 선택한 기간을 파일명에 포함 - 선택한 필터 정보를 파일명에 포함 - 헤더 스타일 적용 - 컬럼 너비 지정 - 숫자 데이터 가독성 향상 - 예) 충전금내역_2026-05-01_2026-05-31_충전금_열람.xlsx
10.GitLab CI/CD로 dev와 main 브랜치별 자동 배포 구성하기
dev 브랜치 -> 테스트 서버 배포 main 브랜치 -> 운영 서버 배포 전체 파이프라인 구조 stages: setup : 패키지 설치 test : 코드 검사 build : Next.js 빌드 deploy : 서버 배포 예시 파이프라인 구조 빌드 환경 image
11.deploy.sh를 이용한 Next.js 프로젝트 수동 배포
파이프라인을 거치지 않고 직접 반영해야할 때 수동 배포를 사용함 1. 서버 접속 2. 프로젝트 폴더로 이동 3. 배포 파일 업로드 파일 수정 후 npm run build 꼭 하기!!! 로컬에서 빌드 결과물을 압축 생성된 압축 파일을 서버로 전송 4. deplo
12.VSCode와 gitlab의 ssh를 연동하기
1. gitlab 프로젝트의 ssh 주소 복사 2. 원격 저장소 연결 2-1. 이미 origin이 있다면 아래처럼 변경 origin = 내 프로젝트가 연결된 원격 저장소 이름 git remote -v 이런 게 나오면 이미 GitLab이랑 연결돼 있다 = origi
13.Next.js에서 NICEPAY JS SDK 연동하기
NICEPAY는 별도의 React 라이브러리나 npm 패키지를 제공하지 않는다. 대신 브라우저에서 JS SDK를 로드한뒤 AUTHNICE.requestPay()를 호출하는 방식으로 결제 진행 공식 문서에서도 JS SDK URL(https://pay.nicepay.co.
14.Recharts를 활용한 시력교정술 결과 비교 차트 구현하기
시력교정술 예측 서비스에서는 단순히 하나의 수술 결과를 보여주는 것이 아니라 여러 수술 방식을 한 화면에서 비교할 수 있어야 한다. 사용자는 다음과 같은 수술 방식의 예측 결과를 확인할 수 있다. LASIK LASEK SMILE ICL 또한 각 수술 방식에 대해
15.html2canvas와 jsPDF로 PDF 결과지 생성하기
견적 결과지 화면을 PDF로 생성해 서버에 저장하고, 이후 카카오톡으로 전송하는 기능을 구현했다. 화면에 보이는 UI를 그대로 PDF로 만들어야 했기 때문에 html2canvas-pro로 DOM을 이미지처럼 캡처하고, jsPDF를 이용해 PDF 파일로 변환하는 방식을
16.Recharts 차트 커스터마이징하기
시력(UDVA)은 Line Chart를 사용하고, 구면도수(SPH)와 난시도수(CYL)는 Bar Chart를 사용했지만 대부분의 설정은 공통으로 사용하였다. 실제로 차트 종류만 다를 뿐, ResponsiveContainer CartesianGrid XAxis