기술과 마케팅, 나눠서 모았다.

gstack + Superpowers + Compound Engineering식 피드백 루프로 Claude Code 워크플로우 만들기

Claude Code를 처음 쓸 때는 대부분 이렇게 시작했다.이것만으로도 충분히 편했다.파일을 읽고, 코드를 고치고, 테스트까지 돌려주는 경험은 확실히 기존 개발 방식과 달랐다.그런데 프로젝트가 조금만 커지면 다른 문제가 생겼다.코드는 빨리 나오는데,정작 “이걸 지금

프롬프트를 고치지 말고, 하네스를 고쳐라: AI 코딩을 시스템으로 개선하는 법

같은 AI를 써도, 어떤 팀은 초안에서 멈추고 어떤 팀은 배포 가능한 산출물을 만든다. 차이는 모델 자체보다 모델을 둘러싼 작업 방식에서 나온다. 요즘 AI 코딩 도구를 쓰다 보면 이런 생각이 든다. “분명 같은 모델을 쓰는데 왜 결과물 차이가 이렇게 크지?” 이

에이전틱 엔지니어링

실밸개발자님 영상을 많이 참고했다."99%의 시간 동안 당신은 직접 코드를 작성하지 않는다. 에이전트를 오케스트레이션하고 감독하는 것이다. 거기에는 예술과 과학, 전문성이 있다."— Andrej Karpathy에이전트가 Context를 바탕으로 Plan을 세우고,Too

Claude Code 창시자 Boris Cherny의 53가지 팁 총정리

철학은 결국 이 세 가지로 귀결됨:병렬화 — worktrees + 멀티 세션으로 직렬 작업을 병렬로 전환계획 우선 — 계획에 에너지 쏟으면 실행은

10 Essential Claude Code Best Practices You Need to Know

Trending 2만 스타 레포 claude code best pract

50가지 Claude Code 팁 & 베스트 프랙티스 - Builder.io

블로그, Vishwas Gopinath, 2026년 3월 20일1\. cc 별칭 등록 /.zshrc에 추가:권한 확인 프롬프트를 모두

GraphQL + urql 사용하기

Part 1 — REST 의 한계와 GraphQL 의 등장 REST API 로 사용자 프로필 페이지 한 화면을 그릴 때 자주 마주치는 패턴이 있다. 위에는 사용자 정보, 가운데는 그 사람이 쓴 글 목록, 아래는 팔로워 미리보기 다섯 명. 백엔드에는 엔드포인트가 셋

Everything Claude Code

Affaan Mustafa @affaanmustafa 의 Shorthand Guide + Longform Guide를 한국어로 취합 정리한 글이다.10개월 이상 매일 Claude Code를 사용하며 Anthropic 해커톤에서 우승한 개발자의 실전 노하우를 담았다.ev

Claude Code 실전 워크플로우 총정리

Claude Code를 실전에서 극한까지 활용하는 개발자들의 노하우를 한곳에 모음 목차 핵심 인물 소개 환경 구성 & 병렬 실행 CLAUDE.md — 팀 단위 지식 축적 시스템 Plan 모드 → 실행 워크플로우 슬래시 커맨드 & 반복 작업 자동화 서브에이전트 활용법 H...

AGI 시대, 개발자는 어떻게 살아남는가

코드만 짜는 시대는 끝나간다. 그렇다고 코딩이 필요 없어지는 것도 아니다. 그럼 대체 뭘 해야 하는 걸까?AI 석학 8명의 최신 견해 2024–2025 를 공부하고, Product Engineer라는 새로운 역할을 파고들고, 실제 채용 공고를 뒤지면서 내가 내린 결론은

AWS 핵심 인프라 개념 정리

AWS를 사용하고 있지만, VPC나 서브넷 같은 네트워크 개념이 정확히 와닿지 않을 때가 있었다. 마침 『스타트업 서비스 설계는 처음인데요』를 읽게 되어, 이 기회에 AWS 핵심 인프라 개념을 쿠팡의 가상 아키텍처 예시와 함께 정리해보았다. 클라우드 vs 온프레미스

개발자를 위한 Googling

개발자가 필수적으로 알아야 하는 구글링 방법을 정리했다.특정 키워드 및 문장이 포함된 검색 결과를 얻고 싶다면 따옴표 " 사용따옴표를 사용하면 Google은 해당 키워드와 가장 적합한 정보를 제공예를 들어, how to split string in javascript

Backend For Frontend

BFF는 MSA 마이크로서비스 아키텍처 의 여러 패턴 중의 하나로, 하나의 인터페이스로 구성되어있던 Monolithic에서 MSA로 전환되면서 여러 UI기반 시스템이 여러 서비스의 API를 호출하고 통신하는 형태로 발전했다.전통의 아키텍처를 지칭한다. 소프트웨어의 모든

프론트엔드와 SOLID 원칙

카카오 프론트엔드와 SOLID 원칙을 읽고 내가 이해한대로 정리했다. 좋은 컴포넌트 설계는 정답이 없고, 팀·프로덕트·시점에 따라 답이 계속 바뀐다. 그래서 원칙이 필요하다. SOLID를 조직의 커뮤니케이션 흐름과 변경 요청을 다루는 설계 원칙으로 해석하고, 리액트/

Urql

1. URQL이란? GraphQL 클라이언트? GraphQL 서버에 요청을 보내고, 응답을 받아서, React 상태로 관리해주는 도구 왜 필요해? fetch vs URQL fetch로 직접 보내면? 문제점: 로딩/에러 상태 직접 관리해야 함 캐싱 없음 같은 요청 또 보...

Next.js SSR에서 Set-Cookie가 작동하지 않는 이유 — BFF 쿠키 프록시로 해결한 기록

두 프로젝트에서 반복 적용한 HttpOnly JWT 인증 패턴 1. 들어가며 — 두 프로젝트, 같은 문제 이 글은 두 프로젝트에서 반복한 경험을 바탕으로 한다. 첫 번째 프로젝트는 Next.js 14 App Router + Spring Boot 조합의 이커머스 서비스였...

MCP (Model Context Protocol)

MCP 한줄정리 MCP가 뭘까 MCP는 Model Context Protocol의 약자로, AI 모델이 외부 서비스나 데이터에 접근할 수 있도록 연결해주는 개방형 표준 프로토콜이다. 2024년 11월 Anthropic이 발표했고, 현재는 OpenAI, Google, M...

MSW로 백엔드 API 개발 전 프론트엔드 먼저 개발하기

프론트엔드와 백엔드가 동시에 개발될 때, 백엔드 API가 준비되지 않은 상태에서도 UI, 데이터 흐름, 상태 관리 등을 미리 개발하고 테스트하고 싶었다. 이때 Mock Service Worker MSW 를 사용해 백엔드 없이도 프론트엔드 개발을 가능하게 했다.백엔드 스

FSD 아키텍처 (with Next.js)

Atomic Design 1 U jFHRJxePDHHBWtd19M8g.png Atomic Design Pattern은 디자인 시스템 관점에서 출발한 UI 설계 방법론이다. UI를 가장 작은 단위인 Atom에서 시작하여 Molecule, Organism, Page처럼

[알고리즘] 해시 테이블

Hash, Hashing, Hash Function...? Hash란? Hash 해시 는 데이터를 Key → Value 구조로 저장하여 빠르게 검색할 수 있도록 만든 자료구조적 개념 핵심: key는 유일하며, 이를 통해 value를 즉시 찾을 수 있음 평균 검색/

CORS 개념 & 해결법

SOP Same Origin Policy 정책은 단어 그대로 동일한 출처 origin 에 대한 정책을 말한다. 그리고 이 SOP 정책은 '동일한 출처간에만 리소스를 공유할 수 있다.'라는 법칙을 갖는다.여기서 출처는 프로토콜 + 호스트명 + 포트가 같다는 것을 의미한

[AWS] S3, CloudFront를 통한 React 배포(+EC2)

요약🐱 예전에는 백엔드 EC2가 프론트 빌드 파일까지 직접 서빙했고, 지금은 프론트는 S3+CloudFront, 백엔드는 EC2로 분리했다. 배포는 Jenkins 파이프라인이 빌드·배포를 책임지고, 도메인은 www/api 서브도메인으로 나눴다. 리팩토링 내용🐱

브라우저에 토큰을 어디에 저장할까? BFF 패턴으로 정리한 인증 구조

개념 클라이언트별로 별도의 백엔드 서버 를 제공하는 아키텍쳐 패턴을 의미한다. 프론트엔드는 단일 API 서버에 요청하지만, BFF 패턴에서는 각 클라이언트 Web, Mobile, Desktop 등 마다 최적화된 백엔드를 따로 둔다. 프론트엔드와 백엔드 사이의 중개자

[Git] 깃 커밋 컨벤션

구현에만 급급하느라 프로젝트에 커밋 메시지 같은건 신경 못썼다. 이런 Commit Message가 많이 누적될수록 가독성은 매우 떨어지고 특히 여러 사람과 개발을 같이 할 때는 더욱 심각해진다. 제대로 된 커밋 컨벤션을 공부하고 적용해본다. 아래글들을 참고하여 정리했다

[Testing] MSW로 백엔드 API 모킹하기

백엔드 API 없이 개발할 때 좋다 참고했다. MSW Mock Service Worker Mock Service Worker MSW 는 웹 애플리케이션 개발 시 API 요청을 모의 mock 하여 프론트엔드 개발과 테스트를 용이하게 하는 도구이다. 실제 백엔드 서버가 준...

개발코드 문서화

사이드 프로젝트에 문서화를 도입한 방법 기록 GitHub Issues/Projects + ADR + 템플릿 만든 협업 플로우 문서화의 필요성 사이드 프로젝트라도 팀으로 진행하면, “기능을 누가 왜 이렇게 만들었는지”가 기록으로 남지 않으면 금방 잊혀진다. 특히

[개념] 코딩 컨벤션

코딩 컨벤션 코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다. 특히 자바스크립트는 다른 언어에 비해 유연한 문법구조 동적 타입, this 바인딩, 네이티브 객체 조작 가능 를 가지기 때문에 개발자 간 통일된 규약이 없다면 코드의 의

[Algorithm] 완전탐색

가능한 모든 경우의 수를 다 탐색하면서 조건에 맞는 답을 찾는 기법이다.장점: 100% 확실하게 정답을 찾을 수 있음.단점: 경우의 수가 많을 경우 시간이 오래 걸리며, 비효율적일 수 있음.“Brute”는 ‘무식한’, “Force”는 ‘힘’을 뜻하며, 말 그대로 ‘무식

[AWS] AWS Access Key 유출 원인 분석과 보안 강화 과정

사건 개요🙈 As part of our standard monitoring of AWS systems, we observed anomalous activity in your AWS account that indicated your AWS access key s ,

[ReactQuery] why-you-want-react-query

정리한 내용이다나는 React 애플리케이션에서 비동기 상태를 다루는 방식을 단순화시켜 준다는 점에서 React Query를 정말 좋아한다. 많은 개발자들이 같은 생각일 거라고

Jenkins + EC2를 활용한 React + Node.js 풀스택 자동 배포

해당 방법보다 CloudFront + S3 로 프론트를 정적 배포하는 것이 더 좋다. 리팩토링한 내용은 AWS S3, CloudFront를 통한 React 배포 +EC2 에 적었다. 추가 회고 🤔 처음에는 Jenkins Freestyle Job 방식으로 EC

[React] 리스트 정렬 문제

리액트로 리스트 정렬 문제를 풀다가 놓친 부분이 있었다."같은 기준으로 정렬하면 sort 어떤 데이터를 정렬하든 결과는 항상 같다"고 생각했는데, 자바스크립트의 Array.prototype.sort 는 정렬 기준이 동등한 경우, 기존 순서를 보장하지 않음모든 요소의

[React-query] staleTime, gcTime(cacheTime)

staleTime은 데이터의 신선도를, cacheTime gcTime 은 데이터의 캐시 유지 시간을 결정 staleTime: 데이터의 신선도 Data Freshness staleTime은 "이 데이터가 얼마나 오랫동안 최신 상태로 간주될 것인가?"를 정의합니다. 역할:...

[CSS] display 속성 (feat. Flex & Grid)

display 속성은 요소를 어떻게 보여줄지를 결정한다. 주로 4가지 값이 쓰이는데 none, block, inline, inline block이 쓰인다.한 줄 전체를 차지함항상 줄바꿈이 일어남너비/높이 조절 가능글자처럼 옆으로 나열됨줄바꿈 안 됨width, heigh

[JS] 컬렉션 객체

Map은 키 값 쌍을 저장하는 자료형일반 객체와 달리 모든 값을 키로 사용할 수 있으며, 키 순서를 보장함flatMap 은 배열의 각 요소에 대해 함수를 적용하고, 그 결과를 평탄화 flatten 하는 메서드이다. 즉, 배열을 변환한 후 중첩된 배열을 하나의 배열로

[JS] 실행 컨텍스트(Excecution Context)

아래 글을 참고하여 작성했다. 실행 컨텍스트 제로초님 실행 컨텍스트 미리 읽어보기 Scope 정리 실행 컨텍스트 코드를 실행하기 위해 필요한 환경 환경 정보들을 모아놓은 객체 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 js 핵심개념, js 코드의 실행 순서과 방...

[JS] 이벤트 루프

js event 자료 를 읽고 정리함이벤트는 어떤 사건을 의미함. DOM 요소와 관련있음브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시에는 통지해 준다. 이 과정을 통해 사용자와 웹페이지는 상호작용 Interaction 이 가능하게 된다.이벤트 핸들러는 이벤트에

[Next.js] CI/CD 배포 트러블슈팅 기록 (feat. Docker, GitHub Actions)

Frontend: Next.js 14 App Router Backend: Spring Boot JAR 실행 CI/CD: GitHub Actions + Docker Hub + EC2운영 방식: Docker Compose로 3개 컨테이너 frontend, backen

[JS] 클로저(closure) -v2

🐐 출처: poiemaweb의 클로저 문서, 코어 자바스크립트 문서 위 문서를 정리한 내용입니다. 요약 클로저 Closure 란 내부 함수가 외부 함수의 변수를 “계속” 기억하는 함수 자바스크립트는 렉시컬 스코프 선언된 위치 기준 를 따름 그래서 함수가 정의된 위

시멘틱 태그

시맨틱 태그 시맨틱 Semantic 은 ‘의미의, 의미론적인’이라는 뜻을 가진 단어로, 웹 개발에서는 태그에 의미를 부여해 사람과 기계가 콘텐츠의 역할과 구조를 쉽게 이해할 수 있도록 하는 것을 의미한다. 시맨틱 태그 Semantic Tag 는 HTML에서 콘텐츠의

[Next.js] Refactoring 기록🙊

Next.js × Spring Boot: SSR JWT 인증 트러블슈팅과 BFF 설계 기록 JWT 글 리팩토링 이전 문제😡 1 CSR 전용 인증을 서버/클라이언트 공통 유틸로 사용 다음은 내가 처음 적용했던 잘못된 공통 fetch 유틸리티 코드이다. 이

[Next.js] 동적 사이트맵(Sitemap) 만들기

공식문서 Sitemap이란? sitemap.ts는 말 그대로 "우리 사이트에 어떤 페이지가 존재하는지 검색엔진 Google 등 에게 알려주는

[TS] TypeScript 타입: any, unknown, never

any 어떤 타입이든 허용 타입 검사 완전히 무시됨 자바스크립트처럼 자유롭게 사용 가능 단점: 타입 안전성 낮아짐 → 되도록 사용 지양 unknown any처럼 모든 타입 허용하지만 타입 안전성 보장 사용 전에 타입 검사 필요 타입 좁히기 narrowi

[Springboot] 트리구조 DB 설계 방법 - 클로저 테이블(Closure Table)

왜 Closure Table이 필요할까? 트리 구조 데이터 예: 카테고리, 조직도 를 DB에 저장할 때 보통은 다음과 같은 부모 참조 방식을 사용 하지만 위 방식은 “전자제품의 모든 하위 카테고리를 가져오고 싶다!” 라는 요청을 처리할 때 재귀 쿼리 또는 반복적인

[TS] TypeScript에서의 type, interface, enum 차이

TypeScript에서는 코드의 타입 안정성을 높이기 위해 다양한 타입 정의 문법을 제공함. 그중 대표적인 것이 type, interface, enum 세 가지 각각의 특징과 용도를 명확히 이해하면 코드의 가독성과 유지보수성이 좋아짐 type – 복잡한 타입

[React] 리액트 상태 관리, 왜 이렇게 많을까?

Redux, MobX, Zustand, Recoil, Jotai… 대체 왜 이렇게 많은 상태 관리 라이브러리가 있는 걸까?2024년 기준으로도 여전히 많이 쓰이고 있고, 각자 철학이 다름.그 전에 먼저, 리액트에서 왜 상태 관리를 해야 하는지부터 짚고 넘어가야 함.리액

[React] React 이벤트 핸들러 작성 규칙 정리

1. 이벤트 객체만 필요할 경우 함수 정의에서 e만 받을 경우, 그대로 함수 이름만 넘기면 됨 onChange= 처럼 사용함 이 경우 = handleChange e 로 감싸면 렌더링마다 새 함수가 생성되어 성능상 좋지 않음 2

[JS] 프론트엔드 번들링과 컴파일(Webpack / Babel / Vite / CRA)

1. 자바스크립트는 어떻게 실행될까? Browser 브라우저의 렌더링 원리 브라우저가 자바스크립트 파일을 실행하는 과정은 다음과 같음 HTML을 파싱하다가 를 만나면, 해당 JS 파일을 다운로드하고, JS 코드를 한 줄씩 해석하고 실행함 인터프리터 방식

[JS] 자바스크립트 메모리 구조

자바스크립트는 동적인 언어이면서도 메모리 관리가 자동으로 이루어진다. 그 내부 구조를 이해하고 있으면 더 안정적이고 효율적인 코드를 작성할 수 있음😀🍎콜스택/메모리힙 구조, 데이터 저장/참조 원리🍎 블로그 기반 정리글자바스크립트 엔진은 메모리를 다음 두 가지 영역

[GTM vs GA] GTM(구글 태그 매니저)와 GA(구글 애널리틱스) 적용하기

GA4 사용자 데이터 분석 사용자 행동을 추적하고 분석하는 최신 버전의 Google Analytics 누가, 언제, 어디서 들어왔는지 알려줌 어떤 페이지를 봤고 얼마나 머물렀는지 보여줌 GTM 태그 스크립트 삽입 도구 다양한 태그 예: Google Analyti

[ReactQuery] Next.js + React Query SSR에서 데이터 유지하기 (Hydration)

React Query는 기본적으로 클라이언트 중심의 라이브러리그래서 Next.js나 Remix처럼 서버 렌더링을 사용하는 프레임워크에서 사용할 경우,dehydrate + hydrate 사용해서서버에서 받아온 데이터를 클라이언트에서 다시 요청할 수 있음 😀 서버

[React] 에러 핸들링

React에서는 JavaScript의 일반적인 try/catch 이외에도 렌더링 중 에러를 잡기 위한 특별한 방법을 제공함. 이 문서는 공식 문서와 실무에서 자주 인용되는 블로그 민트민, mmmdo21 를 기반으로 React에서의 에러 핸들링 방법을 상황별로

[Next.js] 에러 바운더리 (with. React Query)

Next.js 14 + React Query에서 에러 핸들링 제대로 이해하기 Next.js 14 환경에서 React Query를 함께 사용할 때, app/error.tsx와 클라이언트 컴포넌트의 ErrorBoundary가 각각 어떤 역할을 하고 어떻게 써야 하는

[Storybook] Storybook 적용

Storybook은 UI 컴포넌트를 개발하고 문서화하는 툴임. 전체 앱을 실행하지 않아도, 개별 컴포넌트를 독립적으로 렌더링해서 시각적으로 확인하고 테스트할 수 있음. 디자이너, 기획자와 함께 UI를 빠르게 공유하거나, 컴포넌트 카탈로그를 만들 때 유용함.React 프

[React]🚦Lighthouse로 웹 성능 측정 및 개선

웹사이트의 성능 최적화는 사용자 경험과 SEO에 직접적인 영향을 미침. Google의 Lighthouse는 이러한 성능을 측정하고 개선할 수 있는 대표적인 도구이며, 주요 지표로는 LCP, TBT, CLS가 있음. Lighthouse 주요 성능 지표 1. FCP

[Next.js] Debounce & Throttle로 성능 최적화(이벤트 호출 횟수 줄이기)

React 개발을 하다 보면 입력 이벤트나 스크롤 이벤트 등 너무 자주 실행되는 로직이 성능 문제를 일으킬 수 있다.이럴 때 꼭 알아야 하는 것이 Debounce와 Throttle 기법마지막 이벤트 발생 이후 일정 시간이 지나야 실행되는 방식즉, 입력이 계속 들어오는

[React] forwardRef

React에서 컴포넌트를 만들다 보면, 부모 컴포넌트에서 자식 컴포넌트의 DOM 요소에 직접 접근하고 싶을 때가 있음.하지만 함수형 컴포넌트는 인스턴스가 없기 때문에 일반적인 방법으로는 ref를 전달할 수 없음.이럴 때 forwardRef를 사용하면 부모 컴포넌트에서

[React] 리렌더링 최적화

⚡️ React & Next.js 14 리렌더링 최적화 기법 리액트로 개발하다 보면 종종 "왜 이 컴포넌트가 자꾸 리렌더링되지?" 같은 고민을 하게 됨. Next.js 14에서도 마찬가지로, 퍼포먼스를 신경 써야 할 경우 꼭 알아야 하는 개념이 리렌더링 최적화임.

[React] Controlled vs Uncontrolled 컴포넌트

React가 입력값을 직접 관리하는 컨포넌트를 말함.직접 input에 입력된 값이 React의 state로 연결되어 있음.value 속성으로 state를 연결함.입력값이 바뀌을 때마다 onChange 이벤트로 state를 업데이트함.상태가 React에서 관리되기 때문에

[JS] 얕은 복사와 깊은 복사

객체나 배열을 다룰 때 "복사"를 잘못하면 예상치 못한 사이드 이펙트가 생김 얕은 복사 shallow copy 와 깊은 복사 deep copy 개념을 정확히 알고 써야 함 ✅ 얕은 복사 Shallow Copy 란? '주소 값'을 복사 주소 값을 복사하기 때

[JS] 이벤트 버블링과 캡처링

DOM 요소에서 이벤트가 발생했을 때 어떤 순서로 이벤트가 전달되는지에 대한 개념으로,크게 3단계로 구성됨:캡처링 Capturing 단계타겟 Target 단계버블링 Bubbling 단계이벤트 발생: 사용자 상호작용 클릭, 입력 등 이벤트 리스너 등록: addEve

[JS] this

this는 함수가 호출될 때 결정되며, 실행 컨텍스트에 따라 동적으로 바인딩됨함수가 실행될 때 결정되는 객체 참조값임JS는 정의 시점이 아닌 실행 시점에 this가 바인딩됨호출 방식에 따라 this가 달라짐주의: 메서드를 변수에 할당하면 바인딩이 깨짐→ new 키워드를

[JS] 호이스팅

호이스팅 Hoisting 이란? 변수와 함수 선언이 코드 실행 전에 끌어올려지는 현상 호이스팅 Hoisting 은 선언한 변수 및 함수가 선언 범위의 최상단으로 올라가 작동하는 '자바스크립트 JS 의 행동'이다. 이는 변수나 함수가 실제 코드에서 작성된 위치와

[Browser] LocalStorage vs SessionStorage vs Cookie

프론트엔드에서 클라이언트 측 데이터를 저장할 수 있는 대표적인 방법은LocalStorage, SessionStorage, 그리고 Cookie임✅ LocalStorage✔️ 비로그인 사용자에게 적용할 UI 설정값 등 장기 보관 데이터❌ 민감한 정보 저장 절대 금지✅ Se

[Browser] 브라우저의 렌더링 원리

🔄 브라우저 렌더링 전체 흐름 📌 1. HTML 파싱 → DOM 트리 생성 브라우저가 HTML 문서를 파싱해 DOM Document Object Model 트리를 생성합니다. 태그를 만나면, 파싱을 중단하고 JS 실행 후 다시 파싱합니다. → 이 때문에

[JS] 스코프, 렉시컬 스코프

스코프란 스코프는 변수나 함수가 유효한 범위를 의미 답은 function scope, global 이렇게 출력된다. 자바스크립트는 렉시컬 스코프 Lexical Scope 렉시컬 스코프는 함수가 "어디서 정의되었는지"로 스코프가 결정되는 규칙을 말함 "어디서 호출되었는지...

관계형 DB vs 비관계형 DB

관계형 vs 비관계형, 뭐가 다른가? 항목 관계형 데이터베이스 RDB 비관계형 데이터베이스 NoSQL 구조 테이블 표 기반 구조 문서 JSON , 키 값, 그래프 등 스키마 고정 스키마...

[JS] 클로저(closure) -v1

클로저란? 클로저 v2 클로저 Closure 란 내부 함수가 외부 함수의 변수를 “계속” 기억하는 함수 즉, 함수가 선언될 당시의 외부 변수 환경을 기억해서, 나중에 그 함수가 실행될 때도 그 값을 참조할 수 있게 하는 기능 대표 예제 outer 가 실행된 이후 콜스택...

[JS] Promise

🔮Promise란? promise 비동기 작업의 결과를 담고있는 객체 작업이 끝나면 성공이면 resolve, 실패면 reject로 값을 채운다. 그리고 then/await으로 그 값을 나중에 받을 수 있다. 프로미스는 자바스크립트 비동기 처리에 사용되는 객체

[Next.js] Intersection Observer

😀 Intersection Observer Intersection Observer는 특정 DOM 요소가 브라우저 뷰포트 화면 영역 에 들어왔는지를 비동기적으로 관찰할 수 있는 Web API 💡Ex. 스크롤을 내리다가 이미지가 화면에 들어왔을 때 로딩 특정 컴포넌트가

[JS] map/foreach에서 async/await 사용할 때 주의할 점

프로젝트에서 아래와 같이 다중 이미지 업로드를 하는 코드를 작성했다. 하지만 axios.post 가 실행되긴 하지만, 응답 결과가 기다려지지 않고, 다음 로직이 먼저 실행돼서 오류가 발생했다.비동기함수를 처리함에 있어 async/await을 Array.map이나 fo

[Springboot] GA4 데이터 가져오는데 속도 너무 느림 문제🥺

처음엔 ga4 정보를 가져오는데 다 합쳐서 12초 정도 걸렸다..🙄 1. 처음 코드 GA Data API사용 2. 2차 코드 CompletableFuture사용 4 6초 정도 걸렸다. 를 활용해서 비동기적으로 여러 GA API 요청을 병렬 실행하는 방식으로

[Git] git-secrets을 이용한 민감 정보 commit 방지

AWS accessKey, secretKey 등등 커밋하지 않기 위해서... 🧩 git secrets란? git secrets는 AWS에서 만든 Git 플러그인으로, 정규 표현식을 이용해 민감한 문자열이 포함된 커밋이나 푸시를 차단할 수 있도록 도와줌 📌 설치

[Testing] Cypress로 E2E 테스트 구현

E2E? E2E End to End 테스트는 개발물을 사용자 관점에서 테스트 하는 방법 Cypress란? Cypress는 JavaScript 기반의 프론트엔드 E2E 테스트 도구 브라우저에서 직접 테스트 실행 빠른 피드백과 디버깅 환경 제공 React, Vue, A

[알고리즘] 동적 계획법(Dynamic Programming)

동적 계획법 DP ✔ 특징: 이전 결과를 저장하며 최적의 해를 찾는 문제 ✔ 자주 나오는 유형: 피보나치, 계단 오르기, 배낭 문제, 연속합 저장하며 풀기 큰 문제를 작은 문제로 쪼개서 그 답을 저장해두고 재활용 왜 사용 출처

[알고리즘] 이진탐색

이진 탐색 Binary Search 은 에서 효율적으로 특정 값을 찾는 알고리즘 이진 탐색을 활용하면 탐색 속도를 O log N 으로 줄일 수 있어 매우 빠르다.🧐 📌 이진 탐색 Binary Search 이란? 이진 탐색은 다음과 같은 방식으로 동작한다. 1

[Javascript] while, for, forEach, map, reduce, filter, some, every...

✅ 기본적인 반복문 for, while for 👉 반복 횟수가 명확할 때 사용 index 기반 접근 가능 배열의 인덱스 값을 조작해야 할 때 적합 예: 특정 인덱스 건너뛰기 성능이 중요할 때 유리 다른 메서드보다 빠름 while 👉 조건을 만족하는

[알고리즘] 그래프탐색 - DFS/BFS

DFS 깊이 우선: 한 방향으로 가능한 깊게 탐색한 후, 더 이상 갈 곳이 없으면 이전 노드로 돌아와 다른 경로를 탐색한다. 구현 방법: 재귀 호출이나 스택 stack 을 사용 용도: 경로 찾기, 사이클 탐지, 연결 요소 찾기, 미로찾기 등에 유용 재귀를 이용한 D

[JS] Array

📌배열 합치기 1️⃣ concat 사용 기본적인 방법 가장 기본적인 방법 새로운 배열을 반환하기 때문에 원본 배열이 변경되지 않는다. ✔ 시간 복잡도: O N + M ✔ 특징: 원본 배열을 변경하지 않음. 2️⃣ 전개 연산자 ... 사용 가장 많이

[JS] reduce

Reduce 언제사용? reduce는 배열을 하나의 값 숫자, 문자열, 객체, 배열 등 으로 줄일 때 강력한 도구! 🔹 reduce를 쓰면 좋은 경우 🔹 배열의 모든 요소를 하나의 값으로 합쳐야 할 때 합계, 평균, 최대값, 최소값 구할 때 배열을 객체로 변환할

[JS] flatMap()

Map Map은 키 값 쌍을 저장하는 자료형 일반 객체와 달리 모든 값을 키로 사용할 수 있으며, 키 순서를 보장함 ✅ Map 생성과 기본 사용법 🔍 주요 메서드 정리 메서드 설명

[React] 리액트 렌더링과 Virtual DOM

React가 왜 빠르고 효율적인가? 그 핵심엔 렌더링 최적화와 Virtual DOM이 있음 🐷 기본 지식 DOM ✅ DOM Document Object Model 이란? 웹 페이지의 HTML 문서를 브라우저가 객체로 표현한 구조임. 즉, HTML 태그들을

[React] 리렌더링이 일어나는 조건

1 컴포넌트의 state가 변경되었을 때2 컴포넌트가 상속받은 props가 변경되었을 때3 useContext로 구독 중인 컨텍스트의 값이 변경되었을 때3 부모 컴포넌트가 리렌더링이 된 경우 자식 컴포넌트는 모두 리렌더링리액트에서 렌더링이 일어나면 UI를 다시

[MobX] React에서 Mobx 사용하기

React 리액트 상태 관리, 왜 이렇게 많을까? MobX란? React 애플리케이션에서 상태 state 를 더 쉽고 직관적으로 관리할 수 있게 도와주는 상태관리 라이브러리 핵심 개념은 자동 상태 추적 과 객체지향적인 설계 방식 MobX는 기본적으로 데이터의 흐름과 전...

[React] React 기초

돔 Virtual DOM : 실제로 브라우저의 DOM에 새로운 걸 넣는 것이아니라, 자바스크립트로 이뤄진 가상DOM 에 한번

[Java] 제네릭

제네릭 🙂 제네릭이란? 자바에서 제네릭이란 데이터 타입을 일반화한다. 데이터 타입을 컴파일 시에 미리 지정해놓는 것 클래스나 메소드 내부에서 사용되는 객체의 타입 안정성을

[Java] 자료형

리스트와 배열의 가장 큰 차이는 크기가 정해져 있지 않고 동적으로 변한다는 점이다.배열은 크기가 정해져 있다.하지만 리스트는 크기가 정해져 있지 않아 원하는 만큼의 값을 담을 수 있다.인터페이스이다,add get

[Java] 예외처리

기본구조 오류타입체크 오류0 나누기 오류Null 참조 오류메모리 부족 오류실행시 발생하는 예외발생 할수도 안할수도 있는 경우에 작성 Unchecked Ex

[Java] 람다 (Lambda) & 스트림

자바8 버전이상부터 함수형 프로그래밍 지원을 위해 람다와 스트림이 도입됨→ 코드 양이 줄어들고 가독성 좋음= 익명함수 괄호 사이의 int a, int b는 Calculator 인터페이스의 sum 함수의 입력항목에 해당하고 뒤의 a+b 가 리턴값에 해당한다.이렇게

[Java] 자바 실행 과정

소스코드를 바이너리 파일로 변환하는 과정이다.그리고 이것을 자동으로 수행해주는 소프트웨어를 컴파일러라고 한다.컴퓨터는 0과 1로 모든 명령을 이해하고 실행하기 때문임, 즉 컴퓨터가 해석할 수 있도록프로그램이 기동되면, 그게 바로 런타임임컴파일과정 끝 → 프로그램 실행됨

[Spring] Spring 기초

= 제어권의 역전..??= 내가 사용할 의존성을 누군가\ 스프링 컨테이너 알아서 주겠지의존성을 주입함 일종의 IoC , 누군가가 의존성을 만들어줘서 ApplicationContext < IoC 컨테이너= BeanFactory : 부모 빈을 만들고 빈들 사

[Spring] 스프링 개념

Maven, Gradle라이브러리 땡겨오고, 빌드까지 관리해줌의존관계가 있는 라이브러리를 함께 다운로드한다.스프링부트 라이브러리spring boot starter webspring boot starter tomcat:톰캣 웹서버 spring webmvc: 스프링 웹 M

[Spring] 스프링 MVC - 기본 기능

WAR : 톰캣 같은 WAS 서버를 별도로 설치하고, 거기에 빌드 된 파일을 넣을 때 or JSP 사용할 때JAR: 별도의X, 내장 서버에 최적화되어있음. webapp 경로도 사용X . SLF4J 인터페이스Logback 그 구현체 RequestMappingHan

[Spring] 스프링 MVC - 구조 이해

스프링 MVCFrontController ➡️ DispatcherServlethandlerMappingMap ➡️ HandlerMappingMyHandlerAdapter ➡️ HandlerAdapterModelView ➡️ ModelAndViewviewResolver

[Spring] MVC 프레임워크 만들기

프론트 컨트롤러로 직접 MVC 프레임워크를 만듦 → 궁극적으로는 springMVC와 유사한 구조가 됨프론트 컨트롤러 서블릿 하나로 클라이언트의 요청을 받음프론트 컨트롤러가 요청에 맞는 컨트롤러를 찾아서 호출입구를 하나로! 수문장 역할공통 처리 가능프론트 컨트롤러를

[Spring] 서블릿, JSP, MVC 패턴

서블릿으로 JSP으로 MVC로 서블릿 덕분에 동적으로 원하는 HTML을 마음껏 만들 수 있다. 정적인 HTML 문서라면 화면이 계속 달라지는 회원의 저장 결과라던가, 회원 목록같은 동적인 HTML을 만드는 일은 불가능 할 것이다.그런데, 코드에서 보듯이 이것은 매우 복

[Spring] 서블릿

서블릿은 톰캣같은 WAS를 직접 설치하고, 그 위에 서블릿 코드를 클래스 파일로 빌드해서 올린 후, 톰캣 서버를 실행하면 됨 → 너무 번거로워→ 스프링 부트는 톰캣 서버를 내장하고 있어서 톰캣 서버 설치 없이 서블릿 코드 실행 가능!START LINEHTTP 메소드UR

[React] 훅(Hook)🦊

자주 사용하는 훅에 대해서 정리했다. mount란 리액트에서 마운트 Mount 는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미한다. 말 그대로 브라우저에 '나타나는' 것이기 때문에 유저가 직관적으로 확인할 수 있는 부분이기도 하다. 리액트는 크게 컴포넌트가

[Next.js] Next.js에서 Cookie 사용하기

cookies cookies는 비동기 함수로, 서버 컴포넌트 Server Component 에서는 HTTP로 들어오는 요청의 쿠키를 읽을 수 있고, 서버 액션 Server Actions 이나 라우트 핸들러 Route Handlers 에서는 요청의 쿠키를 읽거나 쓸 수

[Next.js] React, Next.js 성능 최적화

리액트와 Next.js로 프로젝트를 만들다 보면 페이지가 느려지거나 렌더링이 과하게 일어나는 경우가 많음. 이런 문제를 방지하려면 성능 최적화를 고려한 구조와 기법이 필요함. 🐷최적화 기법 리렌더링부모가 리렌더될 때 props가 바뀌지 않으면 자식도 리렌더되지 않

[Testing] React와 Next.js의 Test

Testing Testing 개념 😛 테스트 환경 개발 중 에서는 백엔드와 직접 통신 X 데이터를 미리 정의해둔 다음, 그 데이터를 하여 테스트 🐵유닛/통합/E2E 유닛 Unit 테스트 가장 작은 단위 함수, 컴포넌트 등 를 독립적으로 테스트 외부 의

[Docker] Docker Image Size 줄이기 with Springboot

EC2에 올리기 위해서는 Image Size가 작아야한다.... 프리티어이기때문에 😢 왜 이미지 사이즈가 중요할까? AWS 프리티어 무료 티어 같은 환경에서 서버를 운영할 땐 용량과 트래픽이 제한적이라, Docker 이미지 사이즈가 크면 빌드/배포 속도 느림 🤬🤬...

[AWS] EC2 인스턴스에 Docker 컨테이너 배포

Process 컴퓨터를 빌리고, 안에서 Docker를 이용하여 앱을 실행시키고, 네트워크를 설정시켜서 외부에서 접속 가능하게 하는 것! AWS EC2 인스턴스 만들기 컴퓨터 빌리기 AWS EC2 접속하기 컴퓨터 접속하기 Docker compose 설치 빌린 컴

[Git] Git push 취소

민감한 정보가 담긴 파일을 그냥 push 해버렸다.. push 취소하고 다시 해야함.. Git push 취소하는 방법 2가지 reset: 되돌리고 싶은 시점의 commit이력으로 돌아가는 것 시간여행 revert: 현재까지 남긴 이력들을 유지한 채 되돌리고 싶은

[Docker] Docker 적용

왜 사용했나?🐒 EC2 인스턴스에 배포하려고 했는데 Docker 사용하면 편리하게 배포가 가능하다고 해서... 로컬에서 Docker로 애플리케이션을 개발하고, 동일한 컨테이너를 EC2나 다른 서버에 배포할 수 있다. Docker 개념🐋 Docker는 애플

[Next.js] Lazy Loading으로 성능 최적화하기

애플리케이션이 로드될 때 모든 리소스를 한 번에 불러오지 않고, 필요한 시점에 필요한 리소스만 동적으로 로드하는 기술Client Components 및 사용된 라이브러리의 로딩 연기초기 로드 속도를 개선ex. 사용자가 모달을 열기 위해 클릭할 때까지 모달 로딩을 연기

[AWS] EC2를 이용해 HTTPS 배포 (ft. 가비아)

과정들은 아래 참고했다. 유의할 점은 8800포트를 사용했기 때문에 프로토콜, 포트에는 80포트가 아니라 8800를 입력했다.

[CI/CD] Jenkins 적용하기

시작 전 aws 프리티어 사용 중 이므로 과금을 항상 생각해야한다😢 AWS 프리티어 과금 방지 참고 링크 탄력적 IP란?🐧 AWS의 탄력적 IP Elastic IP 는 고정된 공용 IPv4 주소를 제공하는 서비스로, AWS 계정에 귀속되어 있는 IP 주소를 말한다....

CI/CD 와 Jenkins (+Github Actions)

개발자가 코드를 수정하고 빌드와 테스트를 하고 배포까지 한다면 많은 시간이 소요된다. 하지만 Git에 올리는 것만으로 누군가 이 과정을 해준다면 시간을 단축시킬 수 있다. 👉 자동화 ✅ git push 이후 자동으로 테스트 + 빌드가 되는 게 CI ✅ 그 이후

[Spring] 웹 애플리케이션 개념

방향자바 웹 기술의 시작 서블릿, jsp, mvc, mvc 프레임워크, 스프링mvc 탄생 MVC 프레임워크를 직접 코드로 개발스프링MVC의 핵심구조를 한번쯤은 파악해야 함 → 스프링 MVC는 수많은 기능이 자동화, 추상화 됨 → 완전히 처음부터 만들어볼거임웹 애플리

[Git] Gitflow Workflow

지속적인 소프트웨어 개발 및 DevOps 작업 방식 구현을 지원하는 Git 워크플로다.프로젝트 릴리스를 중심으로 설계된 엄격한 분기 모델을 정의한다.대규모 프로젝트를 관리하기 위한 프레임워크를 제공한다.단일 master branch 대신 두 개의 branch를 사용하여

[ReactQuery] InvalidateQuery 와 SetQueryData 로 데이터를 업데이트 하기😀

invalidateQuery와 setQueryData는 데이터를 갱신하거나 상태를 업데이트할 때 사용되지만, 사용 목적과 동작 방식이 다름특정 쿼리를 "무효화 invalidate "하고, React Query가 해당 쿼리를 다시 가져오도록 triggers a refet

[React] UseReducer 사용해보기

useReducer 상태와 상태를 업데이트하는 로직을 분리하여 깔끔하게 관리 할 수 있음 상태 업데이트 로직은 reducer라는 함수로 정의되며, 이 함수는 현재 상태와 액션 action 을 받아 새로운 상태를 반환함 언제사용? 복잡한 상태 로직을 다룰 때,

[React] useRef와 불변성으로 해결한 실시간 채팅 버그

문제상황😥 소켓리스너를 이용해서 실시간으로 채팅 메시지를 주고 받을 때, 간헐적으로 채팅 목록이 제대로 정렬이 안될때가 있고, 미읽음 표시가 이미 열려있는 방인데도 +1 되는 경우가 있었다. 전체적으로 버그가 있었다.🐛🐛 알아야할 개념😍 1. 불변성 Imm

[Testing] Test 개념 + TDD와 테스트 자동화를 적용하는 방법

애츨리케이션의 코드품질 및 안정성을 위해유지보수성 향상 개발자의 자신감도 👍 테스트 코드가 완전하게 커버되어 있다면 프로젝트 신뢰성이 높아지며 사용자에게 안정적인 어플리케이션을 제공함.src components tests 이렇게 컴포넌트를 만들고 tests

[API] Restful API

REST API란? REST 원칙을 적용하여 서비스 API를 설계한 것 ✅REST의 기본 개념 REST는 REpresentational State Transfer의 약자 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것 Server Clie

[ReactQuery] React Query에서 에러를 다루는 3가지 주요 방법

React Query에서 error를 다루는 세 가지 주요 방법은 이렇다.useQuery에서 반환된 error 속성onError 콜백 query자체 또는 global QueryCache/ MutationCache Error bounderies 사용위는 가장 표준적인

[Next.js] Routing

공식홈페이지를 참고함 Next.js의 Routing System React vs Next.js React.js 라우터를 기본적으로 제공하지 않아 이라는

[React] SPA 개념

웹 프론트엔드 생태계에선 CSR은 흔히 사용되는 개발 방식이 되었다. SPA 구조를 통해서 페이지를 렌더링하여 사용자에게 빠른 인터렉션을 제공해주는 것이다. SPA란 정확히 뭘까요?과거에는 하나의 문서에 전달되는 정보의 양이 적었으므로 해당 페이지의 일부 영역만 변경되

[Next.js] Next.js 개념+(SSR, CSR, ISR, SSG)

🐷요약 Next.js는 React 프레임워크 CSR은 서버가 빈 HTML을 보내지만, SSR은 서버가 렌더링하여 완성된 HTML을 보내므로 SEO에 좋음 기본적으로 CSR을 하는 React 애플리케이션은 SEO에 취약함 next.js를 도입하면 pre rend

React-Query

React Query란? 💡 fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리 간단한 코드 사용 가능 어떤 기능? 간편한 데이터 관리 데이터 가져오기, 캐싱, 동기화 및 업데이트 처리 간편하게 할 수 있다. 실시간 업데이트 및

MVC 패턴

MVC 패턴 MVC는 프로젝트를 구성할 때 Model, View, Controller의 역할로 구분하는 패턴이다. Model 애플리케이션의 정보, 데이터를 나타낸다. DB, 처음의 정의하는 상수, 초기화값, 변수 등을 의미합니다. View 사용자가 보는 화면, U

[JWT] JWT

Access Token? Refresh Token? JWT는 Acses Token과 Refresh Token을 두는 방식 JSON Web Token 액세스 토큰은 사용자에 대한 정보를 담고 있어 서비스에 접근할 수 있는 토큰이다. 리프레시 토큰은 그 자체로는 별다른

오래가는 것들의 비밀

저자 이랑주는 국내 최초 비주얼 머천다이징 VMD 박사. 현대백화점·롯데백화점·이랜드에서 13년 근무 후 독립해 삼성생명·LG전자·풀무원·한솥도시락 등 유수 기업과 전국 수백 개 전통시장을 컨설팅했다. 핵심 전제 한때 열광하다 사라지는 것들이 있고, 몇 년, 몇십 년이...

기획하는 사람, MD

MD 종류 리테일MD 백화점, 마트, 홈쇼핑, 편의점 등 유통을 업으로 하는 회사의 MD 제조MD = 브랜드MD Ex. 패션MD 이커머스MD MD 상품을 기획하는 센스와 감각 + 데이터와 숫자를 다루는 논리 숫자 감각 키우는 방법 매일 매출 데이터를 확인하고 익히기 매...

Amazon

아마존의 문화, 성공 전략 핵심 상세페이지 같은 상품은 새 페이지에 등록하는 것이 아니라, 같은 페이지 내에서 Other Sellers on Amazon 탭에서 볼 수 있음 BuyBox를 차지하기 위해 셀러들이 경쟁을 함 가격 소비자들은 한 페이지에서 편리한 쇼핑이 가...

오케팅

메모 “무조건 팔리는 마케팅 공식은 없다!” → 고객의 심리, 현장 경험, 현실적인 방법론 강조 현장감 있는 스토리와 실무자 입장에서의 마케팅 인사이트가 강점 ‘브랜딩’, ‘콘셉트’, ‘고객 경험’, ‘마케터의 역할’ 등 실전 적용 중심의 내용 핵심 요점 마케팅은 ‘현...

데이터로 경험을 디자인하라

당신의제품에는 소비자 말고 팬이 있는가? 고객을 위한 가치가 아닌, 고객에 의한 가치 고객에 의해 가치있는 상품을 발굴하는 프롬 프롬마켓의 상품들은 소비자가 직접 발굴한 상품임 발굴 중 섹션에 올라온 제품을 상품 MD만 판단하는 것은 아니다. 프롬의 고객들이 먼저 매우...

마케터의 생각법

📙 『마케터의 생각법』 요약 1. 마케팅이란 무엇인가? 마케팅은 단순히 ‘광고’나 ‘판매’가 아니다. 고객의 입장에서 생각하고, 가치를 제공하는 활동 전체 를 의미한다. “내가 아니라, 고객의 머릿속에서 시작하는 일 ”이라는 관점이 중요하다. 2. 마케터의 핵심 사고...

천원을 경영하라

1부. 열정 — 유효기간이 없다 45세 창업. 보통의 열정이 아니었다. "내게 열정이란 간절함이었고, 더는 물러날 곳이 없는 초집중 같은 것이었다. 열정에는 만기도, 유효기간도 없다." 20대의 거침없는 열정과는 다른 종류의 것 — 자식과 가정을 지켜야 한다는 강박감,...

그로스 해킹:데이터와 실험을 통해 성장하는 서비스를 만드는 방법

그로스해킹이란? 그로스해킹이란? 전통적인 마케팅을 버리고 그 자리를 검증, 추적, 확장 가능한 고객 확보 기법으로 대체 하는 전략 도구: 플랫폼 API, PPC, 블로깅 등 브랜딩, 마인드 모호한 개념X 최소존속제품 MVP 으로 시작 → 피드백으로 개선 그로스해킹팀 엔...

인플레이션에서 살아남기

금리 상승기 투자법 1. 채권 X 금리가 상승하면 채권의 가격은 떨어지기 때문에 2. 월세 X 자산을 팔고 은행 예금을 들었다면 더 많은 돈을 벌 것이므로 3. 주식 고 PER 주식 X “금리가 오르면 성장주는 하락한다” PER = 주가 가격 /1년 이익 버는 돈 기대...

독서 천재가 된 홍팀장

하루 1시간씩 1주일에 1권 읽기 1시간만 투자하면 1년에 50권을 읽는다. 3년 동안 150권 → 그 분야 전문가 5년 동안 250권 → 국내에서 손꼽히는 전문가 7년 동안 350권 → 세계적인 전문가 독서는 중독성이 있다. 1권 1실행 원원 전략 중요한 것은 독서...

생각에 관한 생각

핵심 요점 두 가지 사고 시스템 시스템 1 — 빠르고 자동적, 직관적, 무의식적. 멈추거나 통제 불가. ex. 표정 보고 감정 파악, 1+1 계산 시스템 2 — 느리고 의식적, 논리적, 노력 필요. 게으르고 꼭 필요한 만큼만 작동. ex. 437×124 계산, 복잡한...

마켓 5.0

메모 필립 코틀러의 ‘마켓 5.0’은 최신 디지털 기술과 마케팅의 접목, 그리고 ‘기술로 인간답게’라는 새로운 마케팅 패러다임을 제시 AI, IoT, 로봇, AR/VR, 블록체인 등 첨단 기술이 실제 마케팅에서 어떻게 활용되는지 실제 기업 사례와 함께 설명 소비자 경험...

설득의 심리학

저자는 애리조나 주립대 심리마케팅학과 교수. 학계와 대중 양쪽에서 인정받은 사회심리학자로, 이 책은 출간 후 44개 언어로 번역되어 전 세계 500만 부 이상 팔렸다. 마케팅·광고·협상 분야의 바이블로 꼽힘 핵심 전제 인간은 모든 상황을 깊이 생각하고 판단할 시간이 없...

사지 않고 삽니다

구독경제 ‘사지 않고 빌려 쓰는 삶’이 새로운 소비 트렌드로 자리 잡고 있다. 패션 구독 서비스 이제 패션도 ‘구독’하는 시대. 예전엔 옷을 ‘소유’하는 게 당연했다면, 요즘은 원하는 스타일의 옷을 일정 기간 ‘빌려 입는’ 서비스 가 인기다. 사용자는 매번 새로운 옷을...

적용하기

진화된 마케팅 그로스 해킹

그로스해킹 방법, 절차, 기업 예시 그로스 해킹 기업 드롭박스 초기에 드롭박스는 페이팔처럼 초기 사용자를 ‘사들일’만한 여유 X ⇒ 돈이 별로 안드는 무료 저장 공간 제공함 추천 가입이 60% 증가 급속 실험으로 실험의 유효성 평가 지속함 일주일에 두 번 새로운 실험...

Mix 믹스

포지셔닝의 실전판 기업 이야기 위주라 이해하기도 쉽고 잘 읽힘 따분함과 즐거움을 섞어라 NBA: 스낵과 식사 스낵 NBA는 인스타그램에 짧고 임팩트 있는 영상을 만들어서 무료로 푼다. 바보 같은 실수를 모아 놓은 ‘Bloopers’, 선수들 유니폼에 마이크를 장착하여...

‘팔다’에서 ‘팔리다’로

핵심 전제: 디자인 컨설팅이란 기업의 경영 고민을 디자인적 관점으로 해결하는 것. 디자인의 힘으로 브랜드의 잠재력을 끌어내고, 상품을 '팔다'가 아닌 '팔리다'로 만드는 것이 목표. '팔리다'를 만드는 세 가지 방법 ① 발명하라 아이팟처럼 완전히 새로운 가치를 지닌 상...

감각을 디자인하라

소비자는 제품을 구매할 때 성능을 분석하는 게 아니라, 자신의 몸이 느끼는 감각과 감정에 기반해 판단한다. 이 책의 핵심 전제가 거기서 출발한다. 이 책이 말하는 새로운 브랜드 전략 다양한 감각 자극 → 브랜드를 느끼게 하는 것 감각 경험 디자인 ≠ 요즘 마케팅 단순한...

관계우선의 법칙

주요 내용 21세기 마케팅의 출발은 제품이 아니라 고객과의 관계다. 특정 유형의 고객들에게 독특한 가치를 지닌 상품을 제공한다. 관계우선의 법칙 제품이나 서비스를 중심으로 기업을 구축 X ➡️ 특정 유형의 고객들을 중심으로 기업 구축 O \ 의 농구공 → 농구 선수로의...

나만의 브랜드를 창조하라

퍼스널 브랜딩이란? 내가 갖고 있는 독특한 매력과 가치를 발굴 해서, 그것을 적합한 사람들에게 다양한 채널을 통해 알리는 것 이다. 즉, "남에게 자신을 어떻게 마케팅할 것인가"의 문제다. 퍼스널 브랜딩의 3대 원칙 ① 진정성 Authenticity 타인에게 유리하게...

누가 내 지갑을 조종하는가

기업들은 소비자들을 자극하고, 위협하고, 위안하고, 유혹하는 법에 대해 인간보다 훨씬 많은 것을 알고 있다. 브랜드의 유혹 — 맛과 냄새 우리는 엄마 배 속에서 들었던 소리와 음악을 좋아하도록 태어난다. 한 백화점은 산모를 대상으로 향기와 소리가 무의식에 미치는 영향력...

도쿄 디테일

마켓 4.0

경험중심 마케팅, 디지털 시대, 옴니채널 새로운 마켓 트랜드 커뮤니티 활성화 필요성 세분화 타기팅에서 고객 커뮤니티 인증으로 고객 신뢰에 대한 개념도 이제는 수직적이지 않고 수평적이다. 과거 고객들은 마케팅 활동에 쉽게 영향을 받았다. 권위나 전문지식을 찾고, 그런 활...

무인양품 보이지 않는 마케팅

NO BRAND NO DESIGN NO MARKETING 저자는 무인양품 이탈리아 1호점 프로젝트에 참여한 뒤 입사해 10년간 상품 개발부에서 일한 사람이다. 내부자 시각으로 무인양품을 마케팅적 관점에서 분석한 최초의 책. 무인양품이란 무인양품 = 상표 없는 좋은 품질...

번슈미트의 체험 마케팅

감각, 감성, 인지, 행동, 관계 모듈 → 체험 창출 번 슈미트 = 체험 마케팅의 주창자 체험 마케팅? 예전의 마케팅 21c 마케팅 마케팅 사고 고객 지향적 접근 고객 주도적 접근 핵심요소 마케팅 컨셉, 고객 만족, 고객관계관리 고객체험관리 마케팅 패러다임의 변화: 특...

스타벅스, 공간을 팝니다

스타벅스를 단순 커피 브랜드로만 보면 이 책의 핵심을 놓침. 어떻게 공간 자체를 상품으로 만들고, 사람들이 자발적으로 돈을 쓰게 만드는지에 대한 이야기. 마케팅 전략부터 서비스 철학, IT 혁신, 인사 시스템까지 — 스타벅스는 사실 거대한 경험 설계 회사 . 1. 공간...

에픽 콘텐츠 마케팅

콘텐츠 마케팅 그래서 콘텐츠 마케팅은? 타깃 고객을 명확의 정의하여 설득력 있는 콘텐츠 만들고 배포하는 프로세스 실제로 당신에게 관심이 생기게 만드는 것 epic 하게 콘텐츠 마케팅? epic = “영웅적이고 인상적인 것” 고객에게 더 집중 하고, 제품에는 덜 신경써야...

이커머스바이블 최저가가 가장 강력한 무기인가

잘 팔리는 브랜드의 법칙

브랜드 만들기 전에 먼저 해야 할 것 브랜드를 만들기 위해선 시장 & 소비자 파악 이 먼저다. 그 도구로 저자가 강조하는 게 검색어 . 검색어로 할 수 있는 것들: 기간 설정 연/월/주 단위 올해 해당 시장 규모 파악 성별, 연령, 기간에 따른 통계 확인 특정 시즌의...

좋아 보이는 것들의 비밀

좋아 보이는 것들의 비밀 — 이랑주 눈에 보이지 않는 철학을, 눈에 보이게 하라. 그것도 좋아 보이게. 전제 사람이 '좋다'고 느끼는 건 오감을 통한 본능적 판단 → 그 아래 과학적 법칙이 숨어있음 감각 우선순위: 시각 \ 청각, 미각 좋아 보여야 하는 궁극적 목적 =...

트렌드 코리아 2023

2023년 소비트렌드 키워드 평균 실종 정치적으로도 사회적으로도 양극화를 기반으로 하는 갈등과 분열이 계속되고 있다. 소비 시장 역시 극단적인 소비가 주류를 이루는 평균 실종의 트렌드가 해가 갈수록 명확해지고 있다. 이제는 평균적인 소비자나 평균적인 제품, 서비스로는...

팔리는 경험을 만드는 디자인

고객을 사로잡는 경험 디자인의 기술 들어가며 처음엔 이런 의문이 있었음: 경험 디자인이 온라인에도 적용 가능한가? 오프라인 '체험형 매장'에만 해당하는 얘기 아닌가? '좋은 경험'이란 게 실제로 가능한가? 책을 읽고 나서 결론 — 경험 디자인은 오프라인 한정이 아님....

포지셔닝

새 상품을 개발 할 때는 기업의 이름이 아닌 새로운 이름으로 만들되, 완전히 새로운 시장이 아닌 이상, 포지셔닝은 이미 확립되어있는 경쟁사의 포지션과 연결 하라 포지셔닝, 광고, 마인드에 진입 포지셔닝? “잠재고객의 마인드에 해당 상품의 위치를 잡아주는 것“ 잠재 고객...

프로세스 이코노미

아웃풋이 아닌 프로세스를 파는 새로운 가치 전략 프로세스, 커뮤니티, 안에서 밖으로 Why→How→What 과정 공개 → 우리는 ‘왜’ 이 제품을 만들었나, ‘왜’일하는가 ‘왜’에서 고유성 알리기 → 팬들의 공감 → 커뮤니티 생성 프로세스 이코노미란 정의 상품과 서비스...

핑크펭귄

나는 그냥 펭귄인가? 핑크펭귄인가! 묻히면 죽는다! 제품중심이아니라, 고객중심에서 생각해라 제프 베이조스도 똑같은 의견 고객이 진정으로 원하는 것을 주어라 최상의 이득 패키징에 목숨 걸어라! 브랜딩 브랜드는 고객이 당신과 당신의 회사에 대해 갖고 있는 생각과 느낌의 조...

Aesthetic Intelligence

미학 Aesthetics 이란? 단순한 겉모습 묘사 X 사람들이 여러 감각 을 통해 사물이나 경험을 인지하면서 얻게 되는 즐거움 제품을 마주하기까지의 모든 과정 + 사용 경험 회상 + 사는 상상까지 전부 미학의 영역 사람들은 더 이상 '물건'을 찾지 않는다 → 미학은...

GROWTH HACKING

스타트업을 위한 실용주의 마케팅 그로스 해킹 사전지식 린 스타트업 lean = ‘군살 없는, 낭비없는’ 아이디어 도출 → 디벨롭 → 프로덕트 생산 → 성과 측정 및 데이터와 배울 점 도출 → 후속 아이디어 도출 → 디벨롭 → 프로덕트 개선 → 성과 측정… 핵심은 아주...