![]()
gpt쌤이 위로도 해준다.. 최고....2년전에 비해 이제는 LLM쌤들이 난무하지만역시 gpt쌤과 정이 많이 들었다 ㅜㅜ 오늘은 CSS 트릭을 하나 배웠습니다.image-rendering 과transform: translateZ(0) 을 함께 쓰는 건데요.쌤의 명쾌한 설명 첨부합니다.절대 바보 아니세요! 그 상황이라면 누구나 착각할 수 있어요 🙂말씀하신 CSS 속성들에 대해 아래처럼 정리해드릴게요:🔍 image-rendering: auto;이 속성은 브라우저가 이미지를 어떻게 보간(interpolation) 할지 결정합니다.기본값 auto는 브라우저가 알아서 최적 품질로 렌더링합니다.다른 옵션들:crisp-edges: 픽셀이 뭉개지지 않게 보이도록 (ex. 픽셀아트)pixelated: 저해상도 이미지..
![]()
😂 문제) 특정 기기 + 인앱에서 navigator안됨안드로이드 옛 기종 등 특정 모바일 기기 중인앱 브라우저에서는 navigator.share 가 안될 때가 있습니다.이럴때 사용자를 인앱브라우저에서 아예 튕겨버리는 방법쓸 수 있다는 것을 알게 되었습니다.☺️ 해결) 해결방법은 간단하나...방법은 그냥 아래 코드를 App.tsx 혹은 Root 클라이언트 컴포넌트에 넣으면 됩니다.// 안드로이드 웹뷰에서 navigator.share가 지원되지 않을 때 대체 공유 방법const handleShareIntent = () => { const currentUrl = window.location.href; // 현재 페이지 URL const hostname = window.location.hostnam..
![]()
🔬 마이크로프론트엔드 개념 정리 및 심화 분석1️⃣ 마이크로프론트엔드 개념 정리📌 정의와 목적:마이크로프론트엔드(Micro Frontend)는 여러 개의 작고 독립적인 프론트엔드 애플리케이션을 모아 하나의 거대한 앱처럼 구성하는 아키텍처 스타일을 말합니다 (마이크로프론트엔드 아키텍쳐). 다시 말해, 마이크로서비스 개념을 프론트엔드에 적용하여 프론트엔드 전체를 분리된 작은 단위로 개발/테스트/배포하는 패턴입니다.각각의 단위 애플리케이션(마이크로 앱)이 독립적으로 제공되고, 이러한 마이크로 앱 “조각(fragment)” 들을 조합하여 최종 사용자에게는 하나의 일관된 웹 앱으로 보이게 만드는 것이 목표입니다 (마이크로프론트엔드 아키텍쳐) (마이크로 프론트엔드로 페이지 및 뷰 작성 - AWS 규범적 지침)...
![]()
post-commit(husky)post-commit 파일은 husky로 pre-commit 하여 linting 을 수행했을 때, linting 되면서 변경되는 파일들이 많아서 해당 파일들도 한번더 커밋 하도록 한 것인데, 파일별로 커밋을 나눠서 하고 싶을 때에도 모든 파일을 커밋해버린다거나 하는 문제가 있어요. 해결할 방법이 있을까요?#!/usr/bin/env sh. "$(dirname -- "$0")/_/husky.sh"# Get the list of staged files before lintingSTAGED_FILES=$(git diff --cached --name-only)# Run lintingpnpm lintpnpm format# Get the list of modified files aft..
![]()
Hasura란?Hasura는 GraphQL 기반의 실시간 API 생성 엔진으로, 데이터베이스에서 자동으로 GraphQL API를 생성해주는 도구입니다. 특히 PostgreSQL과 잘 연동되며, 최소한의 설정만으로 강력한 CRUD API 및 실시간 데이터 쿼리 기능을 제공할 수 있습니다.🔹 주요 특징자동 GraphQL API 생성PostgreSQL, MySQL, SQL Server 등의 데이터베이스에서 자동으로 GraphQL API를 생성함.REST API를 따로 개발할 필요 없이 빠르게 백엔드 구축 가능.실시간 데이터 처리 (Subscriptions)GraphQL의 subscriptions 기능을 기본적으로 지원하여, 데이터 변경 시 자동으로 프론트엔드에 반영됨.WebSocket을 활용하여 실시간 데이..
![]()
n8n이란?n8n은 오픈 소스 기반의 워크플로우 자동화(Workflow Automation) 도구로, 다양한 API 및 서비스 간의 데이터 흐름을 자동화할 수 있도록 도와주는 노코드(No-Code) / 로우코드(Low-Code) 플랫폼입니다.🔹 주요 특징오픈 소스 & 셀프 호스팅 가능n8n은 오픈 소스이므로 무료로 사용할 수 있으며, 직접 서버에 배포하여 사용할 수도 있습니다.SaaS(클라우드) 버전도 제공됨.직관적인 노드 기반 UI플로우 차트처럼 노드를 연결하여 워크플로우를 구성할 수 있음.개발자가 아니더라도 쉽게 자동화할 수 있음.150개 이상의 서비스 통합 지원Slack, GitHub, Notion, Google Sheets, Trello, PostgreSQL, MySQL, Stripe 등 다양한..
![]()
Git에서 Rebase와 Merge는 브랜치를 병합하는 두 가지 방식인데, 각각 장단점이 있어요. 실무에서는 코드 히스토리를 관리하는 전략에 따라 다르게 사용됩니다.1️⃣ Merge (git merge)✅ 기본적인 브랜치 병합 방식✅ 새로운 Merge Commit이 생성됨사용법git checkout maingit merge feature-branch예시A---B---C (main) \ D---E---F (feature-branch) ➡ git merge feature-branch 실행 후:A---B---C---M (main) \ / D---E---F (feature-branch) ✅ M(Merge Commit)이 생성됨.✅ 과거 히스토리를 그대로 유지하며, 브랜치..
![]()
🔹 Number.EPSILON 이란?Number.EPSILON은 JavaScript에서 부동소수점 연산의 오차를 처리하기 위해 사용되는 상수입니다.이 값은 1과 가장 가까운 부동소수점 숫자 사이의 차이를 나타내며, 2^(-52) (약 2.220446049250313e-16)의 값을 가집니다.console.log(Number.EPSILON); // 2.220446049250313e-16🔹 왜 필요한가?JavaScript에서 숫자는 IEEE 754 부동소수점 방식으로 저장됩니다.이 때문에 정확한 실수 연산이 어려워 미세한 오차가 발생할 수 있습니다.❌ 부동소수점 오차 예시console.log(0.1 + 0.2); // 0.30000000000000004console.log(0.3 === (0.1 + 0...
![]()
XSS와 SQL Injection: 왜 실행될까?💡 핵심 질문:"유저 입력에 JavaScript 코드나 SQL 문을 넣는다고 해서, 이게 클라이언트나 서버에서 실행될 수 있는가?"✅ 답변: 실행될 수 있음.XSS는 클라이언트(브라우저)에서 실행되는 문제SQL Injection은 서버(DB)에서 실행되는 문제둘 다 입력값을 제대로 처리하지 않으면 악성 코드가 실행될 수 있음.1️⃣ XSS (Cross-Site Scripting) → 클라이언트에서 실행됨XSS가 발생하는 이유:브라우저는 HTML을 렌더링할 때, 스크립트(이 값이 그대로 데이터베이스에 저장됨이후, 다른 사용자가 이 페이지를 방문할 때 저장된 악성 스크립트가 브라우저에서 실행됨📌 왜 실행될까?서버가 입력값을 필터링 없이 그대로 HTML로 반..
![]()
자바스크립트의 덕 타이핑(Duck Typing) 개념덕 타이핑(Duck Typing)은 객체의 실제 타입이 아니라, "어떤 속성과 메서드를 가지고 있는지"에 따라 타입을 결정하는 개념입니다. 📌 철학:"오리처럼 걷고, 오리처럼 꽥꽥거린다면, 그것은 오리다." 🦆즉, 객체의 타입을 확인할 때 클래스나 명시적인 타입 정보가 아니라, 객체가 특정 속성이나 메서드를 가지고 있는지를 기준으로 판단합니다.자바와 자바스크립트의 차이자바 (명시적 타입 시스템)객체가 특정 클래스에서 상속받거나 인터페이스를 구현해야 해당 타입으로 간주됨클래스 이름이 다르면, 같은 속성을 가지고 있어도 다른 타입으로 인식됨자바스크립트 (덕 타이핑 기반의 동적 타입 시스템)특정 클래스에서 파생되지 않아도 속성과 메서드만 맞으면 해당 타입..
![]()
1. XSS(Cross-Site Scripting) 방어💡 문제:사용자가 입력한 HTML 태그를 그대로 렌더링하는 취약점 발견 (Stored XSS)URL 파라미터에서 자바스크립트 실행이 가능한 이슈 발견 (Reflected XSS)✅ 해결 방법:React에서 기본적으로 dangerouslySetInnerHTML을 사용하지 않도록 하고, DOMPurify를 적용해 안전한 HTML만 허용서버에서 Content-Security-Policy (CSP) 헤더를 추가하여 악성 스크립트 실행 방지escape()를 적용해 HTML 인코딩 처리📌 예제 코드 (DOMPurify 적용)import DOMPurify from "dompurify";const sanitizedHTML = DOMPurify.sanitize(..
![]()
HTTP란 무엇인가?HTTP(HyperText Transfer Protocol)는 클라이언트-서버 간의 요청/응답을 처리하는 프로토콜입니다.HTTP는 클라이언트와 서버 간의 요청-응답을 처리하는 애플리케이션 계층 프로토콜입니다. 기본적으로 stateless하며, 요청 방식(메서드)과 응답 코드, 헤더, 바디 등의 개념을 포함합니다. GET, POST, PUT, DELETE 같은 메서드를 사용해 리소스를 요청하고 조작합니다. 또한, HTTP/1.1, HTTP/2, HTTP/3 등의 버전이 있으며 성능과 보안 측면에서 차이를 보입니다.주요 개념HTTP의 특징Stateless (기본적으로 상태를 유지하지 않음)Request-Response 구조메서드(GET, POST, PUT, DELETE 등)와 역할HTTP..
![]()
추상화(Abstraction)란?추상화는 코드의 복잡성을 줄이기 위해 핵심적인 기능만 노출하고, 불필요한 세부 사항을 숨기는 개념입니다. 예를 들어, 자동차를 운전할 때 내부 엔진 동작을 몰라도 '엑셀을 밟으면 가속된다'는 것만 알면 됩니다. 프로그래밍에서도, 함수나 클래스가 내부 로직을 감추고 인터페이스만 제공하면, 더 쉽게 이해하고 유지보수할 수 있습니다. 복잡성을 줄이고, 사용자가 필요한 정보만 보이도록 설계내부 구현을 숨기고, 인터페이스만 제공하여 유지보수성을 향상**객체지향 프로그래밍(OOP)에서 핵심 원칙 중 하나 ✅ 추상화의 핵심 역할 → "불필요한 세부 사항을 숨기고, 핵심 기능만 제공"✅ 쉽게 이해할 수 있는 비유 → "자동차의 가속 원리를 몰라도 운전 가능"✅ 실제 코드 적용 가능성 →..
![]()
📌 Trunk-Based Development vs GitHub Flow 차이점둘 다 가벼운 브랜치 전략으로, 빠른 배포를 목표로 합니다. 하지만 몇 가지 중요한 차이가 있습니다.🚀 1. Trunk-Based Development (TBD)✅ 핵심 개념:main 브랜치(=Trunk)에서 직접 개발하고,짧은-lived feature 브랜치만 사용하며,하루에도 여러 번 main에 머지하는 방식.✅ 특징:브랜치는 짧게 유지 → 몇 시간 또는 하루 이내 병합Long-lived feature 브랜치 없음 → develop 브랜치 XCI/CD 필수 → main에 병합 시 항상 배포 가능 상태 유지✅ 워크플로우:main에서 직접 개발하거나 짧은-lived 브랜치 생성빠르게 개발 후 main에 머지CI/CD가 ma..
![]()
애자일 방법론(Agile Methodology)이란?애자일(Agile) 방법론은 빠른 개발과 지속적인 개선을 목표로 하는 소프트웨어 개발 방식입니다.고객의 요구 사항 변화에 유연하게 대응하고, 반복적인 개발과 피드백을 통해 품질을 개선하는 것이 핵심입니다.🛠 애자일 방법론의 핵심 개념반복적(Iterative) 개발 → 짧은 주기로 기능을 추가 및 개선고객 중심(Customer Collaboration) → 고객 피드백을 지속적으로 반영자율적인 팀(Self-organizing Team) → 개발팀이 주도적으로 의사결정변화 수용(Embrace Change) → 계획보다 적응을 중요하게 생각작동하는 소프트웨어(Working Software) → 문서보다 실제 동작하는 제품을 우선📜 애자일 선언(Agile ..
![]()
React의 Synthetic Event란?Synthetic Event(합성 이벤트)는 React가 브라우저의 기본 이벤트를 감싸서 제공하는 래퍼(wrapper) 객체입니다.즉, 브라우저 이벤트를 추상화한 React만의 이벤트 시스템입니다. React에서 이벤트 핸들러를 사용할 때 onClick, onChange 같은 속성을 JSX에서 작성하면, 내부적으로 Synthetic Event가 생성되어 브라우저의 native event를 감싸게 됩니다.1. Synthetic Event가 필요한 이유 ✅ 브라우저 간 호환성 유지React는 모든 이벤트를 자체적으로 관리하므로, 브라우저마다 이벤트 동작이 다르게 구현되는 문제를 해결할 수 있습니다.✅ 성능 최적화이벤트 리스너를 개별 DOM 요소에 붙이는 것이 아니라..
![]()
제어 역전(Inversion of Control, IoC)과 의존성 주입(Dependency Injection, DI)의 개념 및 차이점1. 제어 역전(Inversion of Control, IoC)제어 역전(IoC)은 객체의 흐름(제어)을 개발자가 직접 관리하는 것이 아니라 외부에서 제어권을 가져가고, 필요한 시점에 객체를 실행하는 디자인 패턴을 의미합니다.쉽게 말해, 객체의 생성과 실행 흐름을 프레임워크나 컨테이너에 맡기는 방식입니다.예제 1: 제어 역전이 없는 코드 (개발자가 직접 객체를 제어)class Service { run() { console.log("Service is running!"); }}class Application { constructor() { this.serv..
![]()
문제 정의불필요한 조건문과 중복된 로직이 가독성과 유지보수성을 해쳤습니다.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,..
![]()
문제 정의목표: 사용자가 최대 3개의 태그를 입력할 수 있는 UI 구현해야 했습니다.처음엔 인풋 하나만 보이고, 사용자가 Tab 또는 Enter로 다음 인풋을 추가하는 방식입니다.문제: 한글 입력 중(IME 조합 상태) Tab 또는 Enter를 누르면,새 인풋이 빈 값이 아니라 마지막에 조합되던 한글이 남은 채로 생성되었습니다.의문: 영문 입력에서는 멀쩡한데 왜 한글에서만 이런 문제가 발생하는 것인지 의문이었습니다.해결 과정useFieldArray 오류 의심처음에는 React Hook Form의 useFieldArray 사용 방식이 잘못됐다고 생각해, append 시 ID 중복 문제, setValue 강제 초기화 등 여러 시도를 했으나 실패하였습니다.한글 입력 시 IME(입력기) 조합중 이벤트문제를 검색..
![]()
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..
![]()
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 커밋 자동화위까지 설정해도 린팅 및 포맷팅이 잘 되..
![]()
Qvercel 등 serverless 서비스에 대해 질문이 있어요. nextjs 는 간단한 서버 기능도 있어서 풀스택 프레임워크에 가깝잖아요. 그리고 이를 vercel에 배포시 자동적으로 이러한 서버 기능이 작동하고요. 그런데 fs 같은 파일 동작은 처리하지 못하는 걸로 알고 있는데, 이게 serverless 이기 때문인 건가요? severless 이므로 저장할 server 가 없어서 파일을 다루지 못하는 걸까요?A맞습니다. Serverless 환경에서는 서버 기능을 제공하지만, 파일 시스템과 같은 지속적인 상태 관리는 제한적입니다. 이 제약은 Serverless의 특성과 동작 방식 때문입니다. 아래에서 이에 대한 자세한 이유를 설명드리겠습니다.1. Serverless란?Serverless는 실제로 서버..
![]()
pnpm은 node_modules를 효율적으로 관리하여 디스크 용량을 절약합니다.이는 pnpm의 핵심 아키텍처인 "symlinked node_modules" 덕분입니다. pnpm의 동작 방식글로벌 스토리지 사용 (pnpm store)pnpm은 모든 패키지를 한 번 다운로드한 뒤, 전역 스토리지(예: ~/.pnpm-store)에 저장합니다.이 스토리지는 압축된 캐시 파일 형태로 유지되며, 여러 프로젝트가 동일한 의존성을 공유하도록 설계되었습니다.node_modules는 심볼릭 링크로 구성프로젝트의 node_modules에는 실제 파일이 아니라, pnpm store의 실제 패키지 파일을 가리키는 심볼릭 링크(Symlink)가 생성됩니다.이 방식 덕분에 실제 파일의 복사본이 아니라 참조만 포함되므로, 디스크 ..
![]()
Q1props 로 특정한 정수 값을 받고 그 값이 변경될 때 화면에 숫자가 올라가거나 내려가면서 표시되는 애니메이션을 구현하고 싶어요. A1AnimatedNumberFramerMotion 컴포넌트를 수정해서, props로 전달된 value가 변경될 때 화면에 숫자가 올라가거나 내려가면서 표시되도록 만들 수 있습니다.방법:motionValue와 useEffect를 사용하여 value의 변화를 감지.useSpring으로 부드러운 애니메이션 적용.motion.span에 숫자가 연속적으로 보이도록 useTransform 사용. 코드:'use client';import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';import {..
![]()
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..
![]()
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-..
![]()
무료 세팅법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 > ..
![]()
1. Apollo Client 설정 (App Router 버전)Apollo Client 설정 (lib/apolloClient.ts)클라이언트 환경에서 Apollo Client를 생성하는 설정입니다.// lib/apolloClient.tsimport { ApolloClient, InMemoryCache } from "@apollo/client";import { createUploadLink } from "apollo-upload-client";const apolloClient = new ApolloClient({ link: createUploadLink({ uri: process.env.NEXT_PUBLIC_API_BASE_URL, credentials: "include", // 쿠키 포함 ..
![]()
as const는 TypeScript에서 리터럴 타입 추론을 위해 사용하는 구문입니다. 이를 통해 객체, 배열, 문자열 등의 값을 "읽기 전용"으로 설정하고, 그 값을 리터럴 타입으로 좁힐 수 있습니다.1. as const의 역할as const는 TypeScript에서 다음과 같은 역할을 합니다:리터럴 타입 추론:기본적으로 TypeScript는 값을 더 일반적인 타입으로 추론합니다.as const를 사용하면 값을 리터럴 타입으로 추론하도록 강제합니다.읽기 전용(readonly)로 설정:as const를 사용하면 객체나 배열의 모든 속성을 읽기 전용(readonly)으로 설정합니다.2. 예제a) 기본 값 추론과의 차이const value = "hello"; // TypeScript는 value를 strin..
![]()
abstractabstract 키워드를 사용한 클래스는 추상 클래스라고 하며, 다음과 같은 특징과 목적을 가지고 있습니다.1. 인스턴스화가 불가능추상 클래스는 직접 인스턴스화할 수 없습니다. 즉, new 키워드로 객체를 생성할 수 없습니다. 오직 다른 클래스가 이를 상속하고 구체적인 구현을 제공할 때만 인스턴스를 만들 수 있습니다. abstract class Animal { abstract makeSound(): void; // 추상 메서드 move(): void { console.log("Moving..."); } } const animal = new Animal(); // 오류 발생: 추상 클래스는 인스턴스화할 수 없습니다.2. 추상 메서드 포함 가능추상 클..
