전체 글

아무튼개발자되고싶어요...
· TIL
문제 정의불필요한 조건문과 중복된 로직이 가독성과 유지보수성을 해쳤습니다.if(pageQery !== null) { const page = Number(pageQuery); const start = page === 1 || page === 0 ? 0 : (page - 1) * MOIMS_ITEMS_PER_PAGE; // ...}급하게 구현하느라 생각이 가는 대로(?) 작성했던 코드.하지만 지나고 보니 너무나도 이상해 보였습니다.단순한 조건문 개선 상황이지만, 이런 실수를 계속 반복하면 안 된다고 생각했습니다.나는 앞으로도 이런 짓을 할 것인가? 하는 성찰의 순간이 찾아왔습니다.해결 과정🔍 왜 이해가 안되고 무슨 문제가 있었을까?page === 1 || page === 0 → 불필요한 조건문NaN,..
· TIL
문제 정의목표: 사용자가 최대 3개의 태그를 입력할 수 있는 UI 구현해야 했습니다.처음엔 인풋 하나만 보이고, 사용자가 Tab 또는 Enter로 다음 인풋을 추가하는 방식입니다.문제: 한글 입력 중(IME 조합 상태) Tab 또는 Enter를 누르면,새 인풋이 빈 값이 아니라 마지막에 조합되던 한글이 남은 채로 생성되었습니다.의문: 영문 입력에서는 멀쩡한데 왜 한글에서만 이런 문제가 발생하는 것인지 의문이었습니다.해결 과정useFieldArray 오류 의심처음에는 React Hook Form의 useFieldArray 사용 방식이 잘못됐다고 생각해, append 시 ID 중복 문제, setValue 강제 초기화 등 여러 시도를 했으나 실패하였습니다.한글 입력 시 IME(입력기) 조합중 이벤트문제를 검색..
· TIL
1. 설치pnpm add -D @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest jest jest-environment-jsdom mswpnpm create jest@latest2. jest.config 설정import type { Config } from 'jest';import nextJest from 'next/jest.js';const createJestConfig = nextJest({ dir: './',});const config: Config = { // Automatically clear mock calls, instances, context..
· TIL
1. husky 추가pnpm add husky2. husky initpnpm exec husky init3. package.json 수정lint 와 format 만 수정{ "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint --cache .", "prepare": "husky", "format": "prettier --cache --write ." }}4. pre-commit, pre-push 파일 작성pre-commitpnpm lint pre-pushpnpm format 추가. build 및 chore 커밋 자동화위까지 설정해도 린팅 및 포맷팅이 잘 되..
· TIL
Qvercel 등 serverless 서비스에 대해 질문이 있어요. nextjs 는 간단한 서버 기능도 있어서 풀스택 프레임워크에 가깝잖아요. 그리고 이를 vercel에 배포시 자동적으로 이러한 서버 기능이 작동하고요. 그런데 fs 같은 파일 동작은 처리하지 못하는 걸로 알고 있는데, 이게 serverless 이기 때문인 건가요? severless 이므로 저장할 server 가 없어서 파일을 다루지 못하는 걸까요?A맞습니다. Serverless 환경에서는 서버 기능을 제공하지만, 파일 시스템과 같은 지속적인 상태 관리는 제한적입니다. 이 제약은 Serverless의 특성과 동작 방식 때문입니다. 아래에서 이에 대한 자세한 이유를 설명드리겠습니다.1. Serverless란?Serverless는 실제로 서버..
· TIL
pnpm은 node_modules를 효율적으로 관리하여 디스크 용량을 절약합니다.이는 pnpm의 핵심 아키텍처인 "symlinked node_modules" 덕분입니다. pnpm의 동작 방식글로벌 스토리지 사용 (pnpm store)pnpm은 모든 패키지를 한 번 다운로드한 뒤, 전역 스토리지(예: ~/.pnpm-store)에 저장합니다.이 스토리지는 압축된 캐시 파일 형태로 유지되며, 여러 프로젝트가 동일한 의존성을 공유하도록 설계되었습니다.node_modules는 심볼릭 링크로 구성프로젝트의 node_modules에는 실제 파일이 아니라, pnpm store의 실제 패키지 파일을 가리키는 심볼릭 링크(Symlink)가 생성됩니다.이 방식 덕분에 실제 파일의 복사본이 아니라 참조만 포함되므로, 디스크 ..
· TIL
Q1props 로 특정한 정수 값을 받고 그 값이 변경될 때 화면에 숫자가 올라가거나 내려가면서 표시되는 애니메이션을 구현하고 싶어요. A1AnimatedNumberFramerMotion 컴포넌트를 수정해서, props로 전달된 value가 변경될 때 화면에 숫자가 올라가거나 내려가면서 표시되도록 만들 수 있습니다.방법:motionValue와 useEffect를 사용하여 value의 변화를 감지.useSpring으로 부드러운 애니메이션 적용.motion.span에 숫자가 연속적으로 보이도록 useTransform 사용. 코드:'use client';import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';import {..
· TIL
5. cli 설치# cli 설치brew install awsebclibrew install awscli# aws configureaws configure# accessKeyID 및 secretAccessKey는 IAM 생성시 받은 것# 리전은 ap-northeast-2 # Default output format: json 입력# eb cli 초기화eb init# 리전은 ap-northeast-2 (10)# accessKeyID 및 secretAccessKey는 IAM 생성시 받은 것# CodeCommit no 선택# eb ssh 연결 셋업eb ssh --setup# keypair: new keypair 선택 # 이름 정하고 새로 생성 과정 진행# 이제 eb ssh 로 접속 가능eb ssh 6. https..
· TIL
4. CD 구축(github actions)깃헙 레포 settings > Secrets and variables > actions 에 환경변수 등록 해야함# .github/workflows/deploy.ymlname: Deploy to AWS Elastic Beanstalkon: push: branches: - mainjobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v3 - name: Set up NodeJS uses: actions/setup-node@v3 with: node-..
· TIL
무료 세팅법1. IAM 세팅 - rolescreate role > AWS service > permission policies 검색multicontainer 검색 > AWSElasticBeanstalkMulticontainerDocker 선택elasticbeanstalkworker 검색 > AWSElasticBeanstalkWorkerTier 선택elasticbeanstalkwebtier 검색 > AWSElasticBeanstalkWebTier 선택amazonec2fullaccess 검색 > AmazonEC2FullAccess 선택4개 선택하고 next > Role name: "aws-elasticbeanstalk-ec2-role" 입력2. RDS 세팅 - databasecreate database > ..
adminisme
elseif