본문 바로가기
동적 페이지 Title 변경 - React & Next.js 들어가며사용자가 다른 페이지로 이동했을 때, 브라우저 탭의 title이 그대로 "Home"으로 남아있나요?홈페이지: "My App"제품 상세 페이지: "My App" (변경 안 됨)사용자 프로필: "My App" (변경 안 됨)❌ 나쁜 경험제대로 된 웹사이트는 페이지마다 고유한 title을 가져야 합니다.홈페이지: "Home - My App"제품 상세 페이지: "iPhone 15 - My Shop"사용자 프로필: "John Doe - My App"✅ 좋은 경험이 가이드에서는 React와 Next.js에서 동적으로 title을 변경하는 방법을 배웁니다.1. React에서 Title 변경방법 1: useEffect와 document.title기본 사용법typescriptimport { useEffect } .. 2026. 3. 3.
Storybook - 컴포넌트 개발의 완전한 혁신 들어가며당신이 리액트 컴포넌트를 개발할 때, 매번 전체 애플리케이션을 실행해서 그 컴포넌트를 테스트했던 경험이 있나요?문제 상황:Button 컴포넌트를 수정했다면:1. npm start2. 애플리케이션 대기 (3-5초)3. 버튼이 있는 페이지로 이동4. 버튼 상태 변경 (hover, disabled 등)5. 수정이 필요하면 1번부터 반복...→ 아주 비효율적입니다!Storybook은 이 모든 번거로움을 제거합니다. 각 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 환경을 제공합니다. 컴포넌트의 모든 상태(정상, 로딩, 에러 등)를 한눈에 볼 수 있고, 상호작용까지 테스트할 수 있습니다.공식 사이트 가이드라인https://storybook.js.org/tutorials/intro-to-storybook/.. 2026. 2. 24.
인증(Auth) 시스템 인증(Auth) 시스템 완벽 가이드1. 전체 흐름 개요회원가입 흐름:사용자가 프론트엔드에서 회원가입 폼 입력프론트엔드가 입력값 유효성 검사백엔드로 회원가입 요청 전송백엔드가 비밀번호 해싱 후 DB에 저장성공 응답 반환로그인 흐름:사용자가 이메일/비밀번호 입력백엔드가 DB에서 사용자 조회비밀번호 검증JWT 토큰 생성 및 반환프론트엔드가 토큰 저장이후 요청마다 토큰을 헤더에 포함2. 핵심 개념2.1 비밀번호 해싱비밀번호를 평문으로 저장하면 안 됩니다. bcrypt 같은 라이브러리로 해싱하여 저장합니다.// bcrypt 예시const hashedPassword = await bcrypt.hash(plainPassword, 10); // 10은 salt roundsconst isMatch = await bcry.. 2026. 2. 10.
Docker란? Docker - 개발과 배포의 혁명들어가며당신이 개발한 애플리케이션이 로컬에서는 완벽하게 작동하는데, 서버에 배포하면 에러가 발생한 적이 있나요?이유:- 개발 PC: Node 16, Python 3.9, PostgreSQL 12- 테스트 서버: Node 14, Python 3.8, PostgreSQL 11- 프로덕션: Node 18, Python 3.10, PostgreSQL 13→ 환경이 다르면 코드가 다르게 작동합니다!Docker는 이 모든 문제를 근본적으로 해결합니다. 애플리케이션과 모든 의존성을 하나의 컨테이너로 패킹하여, 어디서나 동일하게 실행되도록 합니다.(공식 사이트)https://www.docker.com/ Docker: Accelerated Container Application Deve.. 2026. 2. 7.
Giscus란? Giscus - GitHub로 관리하는 댓글 시스템들어가며블로그에 댓글 시스템이 필요한데, Disqus 같은 외부 서비스는 너무 무겁고 추적이 많습니다. 또한 댓글 데이터 소유권도 보장되지 않습니다.Giscus는 완전히 다른 접근 방식입니다. GitHub Discussions를 댓글 저장소로 사용합니다. 즉, 모든 댓글이 당신의 GitHub 저장소에 저장되고, 당신이 완전히 통제할 수 있습니다.(공식 사이트)https://github.com/giscus/giscus GitHub - giscus/giscus: A commenting system powered by GitHub Discussions. :speech_balloon: :gem:A commenting system powered by GitHub .. 2026. 2. 6.
Prisma란? Prisma - 현대적 ORM의 완벽한 선택들어가며데이터베이스와 통신할 때 SQL을 직접 작성하는 것이 얼마나 번거로운지 알고 계신가요?-- SQL 직접 작성 (번거로움)SELECT * FROM users WHERE email = $1;INSERT INTO users (name, email, age) VALUES ($1, $2, $3);UPDATE users SET age = $1 WHERE id = $2;DELETE FROM users WHERE id = $1;Prisma는 이 모든 번거로움을 없앱니다. 타입 안전한 데이터베이스 접근, 자동 마이그레이션, 강력한 관계 설정 - 모든 것을 우아하게 처리합니다.(공식 사이트)https://github.com/prisma/prisma GitHub - pris.. 2026. 2. 5.
MSW란? MSW (Mock Service Worker) - 네트워크 레벨 API 모킹들어가며당신이 프론트엔드 개발 중에 백엔드 API가 완성되기를 기다린 적이 있나요? 또는 백엔드 개발자가 특정 에러 상황을 재현하기 어려워 했나요?MSW(Mock Service Worker)는 이 모든 문제를 해결합니다. Service Worker API를 사용하여 네트워크 레벨에서 API 요청을 가로채고, 정의된 핸들러가 응답을 제공합니다. 이는 단순한 모킹을 넘어, 실제 네트워크 요청처럼 작동합니다.공식 깃허브https://github.com/mswjs/mswMSW의 핵심 개념기존 방식 vs MSW기존 방식 (fetch 모킹):┌─ 테스트 코드├─ jest.mock('/api/users', ...)├─ 매번 설정 필요└─ 부분.. 2026. 2. 4.
Deno란? Deno - Node.js의 문제를 근본적으로 해결한 JavaScript 런타임들어가며당신이 Node.js 생태계의 문제점을 느껴본 적이 있나요?npm의 의존성 지옥 (node_modules의 쓸데없는 크기)보안 문제 (패키지가 무분별하게 파일 접근)모듈 시스템의 혼란 (CommonJS vs ES Modules)TypeScript 설정의 복잡함Deno는 Node.js의 창시자 Ryan Dahl이 Node.js의 "10년의 후회"를 토대로 만든 새로운 JavaScript 런타임입니다. 처음부터 올바르게 설계되어, 더 안전하고 효율적입니다.공식 깃허브https://github.com/denoland/deno/Node.js vs Deno 비교핵심 차이점Node.js (1009년):├─ CommonJS + ES.. 2026. 2. 3.
FSD란? FSD (Feature-Sliced Design) - 프론트엔드 아키텍처 혁신들어가며당신이 점점 커지는 리액트 프로젝트에서 다음과 같은 문제를 겪었다면, FSD가 답입니다:"이 컴포넌트는 어디에 있지?" - 파일 구조가 복잡함"이 유틸 함수를 쓸 수 있나?" - 순환 의존성으로 사용 불가"리팩토링하면 뭔가 깨질까봐..." - 의존성 파악이 어려움"여러 팀원이 같은 기능을 만들고 있어" - 협업이 어려움FSD(Feature-Sliced Design)는 이 모든 문제를 구조적으로 해결하는 방법론입니다. 프로젝트를 수평적 계층(shared, entities, features 등)과 수직적 슬라이스(각 기능)로 구분하여, 확장성과 유지보수성이 뛰어난 아키텍처를 만듭니다.공식 깃허브https://github.co.. 2026. 2. 2.
Neon란? Neon - 서버리스 PostgreSQL의 미래들어가며전통적인 PostgreSQL 서버를 관리하는 것은 힘듭니다. 데이터베이스 인스턴스를 항상 실행 중으로 유지해야 하고, 트래픽에 따른 수동 스케일링을 해야 하며, 백업과 보안을 신경 써야 합니다.Neon은 이 모든 문제를 완전히 해결합니다. 서버리스 PostgreSQL 플랫폼으로, 자동 스케일링, 즉각적인 분기(branching), 관리형 호스팅을 제공합니다. AWS Lambda와 유사하게 사용한 만큼만 비용을 지불하면서도 완전한 PostgreSQL 기능을 사용할 수 있습니다.공식 깃허브https://github.com/neondatabase/neon GitHub - neondatabase/neon: Neon: Serverless Postgres. We.. 2026. 2. 1.
Lefthook란? Lefthook - Husky보다 빠르고 강력한 Git 훅 관리들어가며Husky를 사용 중인데 pre-commit 훅이 실행될 때마다 5-10초 기다린다면? Node.js 오버헤드 때문입니다. Lefthook은 Go로 작성되어 100배 더 빠릅니다.Go 바이너리로 빌드된 Lefthook은 npm 패키지 설치 없이도 작동하며, JavaScript뿐 아니라 Python, Ruby, Java 등 모든 프로젝트에서 사용할 수 있습니다. 특히 대규모 모노레포에서 Lefthook의 병렬 실행 기능은 개발 속도를 획기적으로 향상시킵니다.공식 깃허브https://github.com/evilmartians/lefthook GitHub - evilmartians/lefthook: Fast and powerful Git h.. 2026. 1. 31.
Husky란? Husky - Git 훅으로 자동화된 코드 품질 관리들어가며당신이 실수로 버그가 있는 코드를 커밋하거나, 스타일 가이드를 따르지 않은 코드를 메인 브랜치에 푸시했던 경험이 있나요? Husky는 이런 인간의 실수를 완전히 자동화된 방식으로 방지합니다.Husky는 Git 훅(hook)을 관리하는 도구입니다. 개발자가 코드를 커밋하거나 푸시하기 전에 자동으로 검증 작업을 수행하므로, 문제 있는 코드가 저장소에 들어가는 것을 원천적으로 차단합니다.공식 사이트https://github.com/typicode/husky GitHub - typicode/husky: Git hooks made easy 🐶 woof!Git hooks made easy 🐶 woof! Contribute to typicode/husky.. 2026. 1. 30.
Axios로 API 통신 구현하기 Axios로 API 통신을 구현하려면 먼저 프로젝트에 Axios를 설치하고, axios.get(), axios.post() 등의 메서드를 사용하여 서버와 HTTP 요청/응답을 주고받습니다. 이는 프론트엔드(Vue, React 등)와 백엔드 서버 간 데이터 교환을 위해 필수적이며, Promise 기반으로 비동기 처리를 간편하게 할 수 있어 fetch API보다 많이 사용됩니다. 요청 성공 시 .then()으로 데이터를 처리하고, 실패 시 .catch()로 오류를 관리하며, JSON 데이터 처리가 용이합니다. 1. Axios 설치npm 사용 시: npm install axiosyarn 사용 시: yarn add axios 2. 기본 사용법 (GET 요청)import axios from 'axios';// G.. 2026. 1. 11.
대기업에서도 사용하는 VS Code 확장 프로그램 Best 5 vs code 캐시를 날려버려서 (미친 클로드 때문..) 확장 프로그램을 다시 깔고 있는데..이거 저거 기웃거리다가 마침 다음 영상이 나와서 기록용으로 올려준다. 코드 스펠 체커랑 북마크, 폴라 코드 이 3개는 꽤 유용해 보인다.https://www.youtube.com/watch?v=tjJd-R1wZh4+ 아, 그리고 마지막 익스텐션이 결국 코드를 이미지화하도록 도와주는건데https://uneverknow.tistory.com/81 CodeSnap 사용하기(나만 몰랐음🥲)팀원분 블로그에 갔다가 발견한 스크린샷. 구글링 하다 몇 번 봤었는데 엄청 깔끔하다 생각만하고 어떻게 하는 건지는 몰랐는데 여쭤보니 코드스냅이라는 익스텐션 사용하셨다고!! 당장 구글링uneverknow.tistory.com이 블로그 .. 2026. 1. 10.
깃허브 코드 리뷰에서 코드 제안하는 방법 깃허브에서 코드 리뷰를 하다 보면 comment를 남길 수 있다.이때 그냥 comment만 남기는 것이 아닌 실제로 "코드" 그 자체를 제안할 수 있다.방법은 "suggestion 기능"을 사용하는 것이다.하는 방법은 매우 쉽다. 리뷰하고자 하는 PR로 가서, Files changed로 진입한다.이후 내가 제안하고자 하는 코드를 드레그 (노랑색이 나오게 위에서 부터 밑으로) 하고 파란 + 버튼을 누른다그러면 이렇게 뜨는데, 위 Add a suggestion를 누르고 본인 제안하고 싶은 코드를 작성한다. 이후 Preview를 누르면 어떻게 바뀌는지를 미리 볼 수 있다.이후 Add single comment를 누르면 끝이다.관련 글https://nesoy.github.io/blog/Github--sugges.. 2026. 1. 8.
프론트엔드에서의 프록시 프론트에서 프록시 설정을 하기 전에, 일단 프록시가 무엇인지는 다음 글을 읽어보면 알 수 있다. https://velog.io/@wlwl99/Proxy ProxyCORS 에러를 해결하는 정석적인 방법은 프론트엔드 개발자가 백엔드 개발자에게 프론트엔드 개발 서버 도메인을 허용해달라고 요청을 해야하고, 백엔드 개발자는 응답 헤더에 필요한 값들을 담velog.io로컬 헤더는 http로 시작된다. 그러나 배포가 될 때에는 https로 배포가 된다.근데 이때에 백엔드와 api 통신을 하게 되는데, 백엔드 친화적으로 소통하는 것이 편하다. (경험적임)swagger에서 api 타겟의 헤더 값을 https로 맞추어야 나중에 배포를 편하게 할 수 있다. 물론 https로 헤더 값이 타겟이 되고 프론트에서 로컬 서버는 h.. 2026. 1. 4.
리액트 emotion 사용법 Emotion 은 JS로 css 스타일을 작성하도록 설계된 라이브러리다.Emotion은 프레임워크에 구애받지 않고 사용이 가능하며, React와 함께 사용할 수도 있다. 특히 이 라이브러리를 토스에서 쓰고 있다.https://toss.oopy.io/cc9367e4-4ff6-4241-8189-9f3cf250f5d2 토스 프론트엔드 챕터의 모든 것토스 프론트엔드 챕터를 소개합니다! 이 문서에는 프론트엔드 챕터에 대해서 궁금하신 분들께서 꼭 알았으면 하는 정보들이 담겨 있습니다.toss.oopy.io 특히나 css의 props를 이용한 방법을 즐겨 쓴다고 한다.https://emotion.sh/docs/css-prop Emotion – The css PropThe primary way to style ele.. 2026. 1. 4.
깃허브 PR 리뷰 AI 자동화 PR 리뷰를 자동화하는 방법을 밑에서 다룬다.https://goddaehee.tistory.com/373 [gemini 활용기] - Github PR 리뷰 AI 자동화 (PullRequest 소스검토 Automation with Gemini Code Assist)안녕하세요! 갓대희 입니다. :- ) 오늘은 요즘 핫한 gemini cli를 설치해서 사용해보고, vscode나 cursor에 "Gemini Code Assist"를 추가하여 사용해 보고 있다. 현재까지는 Claude Code와 Gemini CLI를 비교했을때 gegoddaehee.tistory.com(생각보다 세팅하기 쉬움) 2025. 12. 25.
내도메인.한국으로 무료 도메인 등록 https://teserre.tistory.com/25 무료 도메인 등록하기(내도메인.한국)이전에 Freenom 이라는 무료 도메인 등록 사이트에 관한 글을 작성했었다. 해외 사이트라 속도가 느리긴 했지만 테스트용으로는 큰 문제가 없어서 사용했었다.https://teserre.tistory.com/3 무료 도메인teserre.tistory.com내도메인.한국이라는 사이트에서 도메인을 무료로 등록할 수 있다.물론 가비아가 제일 좋긴 한데, 돈을 써야하고 처음 도메인 등록해보는 사람들이 연습하기에는 이 사이트가 적절한 거 같다.하는 방식은 위의 글을 읽으면 되고, 관련 DNS를 획득해서 vercel에 등록시키면 된다. 2025. 12. 10.
깃허브 코드 리뷰하는 방법 깃허브 코드 리뷰는 주로 Pull Request(풀 리퀘스트)를 통해 이루어집니다. 리뷰를 하려면, 리뷰할 풀 리퀘스트를 선택하고 'Files Changed' 탭에서 변경된 코드를 확인합니다. 각 코드 라인 옆의 '+' 아이콘을 클릭하거나 해당 라인 범위를 드래그하여 코드 코멘트를 작성하고, 필요에 따라 'Suggestion' 기능을 활용할 수 있습니다. 깃허브 코드 리뷰 방법풀 리퀘스트(Pull Request) 선택: 리뷰하려는 풀 리퀘스트를 클릭합니다. 풀 리퀘스트는 기존 코드에 새로운 코드를 병합해달라고 제안하는 요청입니다.변경 사항 확인: 상단 탭에서 **'Files Changed'**를 클릭하여 해당 풀 리퀘스트에서 변경된 파일 목록을 확인합니다.코멘트 작성:> 코드 라인 옆에 있는 '+' 버튼.. 2025. 11. 17.

티스토리툴바