태그:

#Frontend

Lambda 콜드스타트 최적화로 진입 속도 개선 - 1부

AWS Lambda Cold Start: Next.js SSR 블로그 진입 성능 개선 서론 Deep Dive! 블로그의 프론트엔드는 Next.js와 서버리스 기반으로 Lambda에 Docker이미지 형식으로 저장되어 실행된다. 프론트엔드는 Next.js App Rout...

#AWS #ColdStart #Lambda #Frontend #최적화 #Featured

Administrator

💬 0·💕 0·👀 39

목차 기능 - 1부 : 게시글 상단 목차 구현

목차 기능 추가: 인라인 목차 구현 1. 목차 기능의 필요성 블로그의 게시물 중 기능 추가와 같은 포스팅은 종종 긴 길이와 복잡한 구조를 갖게 되었다. 그래서 글의 전체적인 흐름을 쉽게 파악하고 원하는 정보에 빠르게 접근할 수 있도록 '목차' 기능을 도입하기로 하였다....

#목차 #TOC #Frontend

Administrator

💬 0·💕 0·👀 34

[기능 추가] 글쓰기 자동 저장 기능 추가

글쓰기 UX 개선: 자동 저장 기능 도입기 1. 도입 목적: 불안정한 글쓰기 경험 개선 블로그에 글을 작성하다 의도하지 않은 상황으로 내용을 모두 잃는 경우가 발생했었다. 특히 장소 이동으로 네트워크 환경 변경으로 세션이 끊기거나, 브라우저가 갑자기 종료되거나, 실수로...

#Frontend #UX #AutoSave

Administrator

💬 0·💕 0·👀 10

[TTS] AWS Polly를 활용한 Text to Speech 기능 추가

1 이벤트 기반 아키텍처 1. 도입 배경 처음, 기술블로그를 시작하게 된 동기는 학습한 것을 기록하고자 하는 단순한 목적이었다. 그래서 기록하는데에 부족함 없는 읽고, 쓰는 기능이 완벽히 가능한 단순한 CRUD 목적으로 시작했다. 점차 기능을 추가하고 개선해나가면서 D...

#AWS #Polly #TTS #Backend #Frontend #디버깅 #featured

Administrator

💬 0·💕 0·👀 78

[프론트엔드] OG 태그 도입기

Next.js App Router에서 동적 Open Graph 태그 구현하기 1. 도입의 필요성 작성한 포스트의 링크를 카카오톡 등 소셜에 공유했을 때, 단순한 파란색 주소만 표시되어 시각적으로 아쉬웠다. Open Graph(OG)는 바로 이 문제를 해결해줄 방법이었다...

#OG #Frontend #OpenGraph

Administrator

💬 0·💕 0·👀 10

[검색 기능] AWS OpenSearch로 한국어 검색 기능 도입

AWS OpenSearch로 블로그에 한국어 검색 기능 도입 1. 목표: 서버리스 검색 엔진 구축 Deep Dive! 블로그에 한국어 검색 기능을 도입하기로 결정했다. 목표는 다음과 같이 설정했다. 기술 스택: AWS OpenSearch Service를 핵심 검색 엔진...

#AWS #Featured #Frontend #DynamoDB #Backend #Infra #OpenSearch

Administrator

💬 0·💕 0·👀 131

[프론트엔드 고도화-4] 메인 페이지 재구성

[TOC] 4. Next.js 블로그 고도화: 메인 페이지 재구성 1. 도입 'Deep Dive!'의 초기 버전 메인 페이지는 최신 게시물을 시간순으로 나열하는 단순한 목록 형태였다. 기능적으로 문제가 없고 심플한 게시물 목록을 볼 수 있었다. 하지만 메인 페이지에 처...

#Frontend #고도화 #메인페이지 #UI #UX #featured

Administrator

💬 0·💕 0·👀 40

[프론트엔드 고도화-3] 상세페이지 번들링 최적화

3 Next.js 번들 분석: reactsyntaxhighlighter 최적화로 초기 로딩 JS 210kB 절감하기 주요 기능인 다크 모드(Dark Mode) 도입을 성공적으로 마친 후, 프로젝트는 한 단계 더 성숙해졌다. 하지만 기능의 추가는 필연적으로 코드베이스의 ...

#Frontend #최적화 #bundle-analyzer

Administrator

💬 0·💕 0·👀 40

[프론트엔드 고도화-2] 성능 최적화

2 Dynamic Import로 댓글 섹션 지연 로딩하기 이번에 진행한 댓글 섹션 지연 로딩은 Deep Dive!의 블로그 프로젝트의 성능 최적화 과정의 일부로, 게시물 상세 페이지의 초기 로딩 속도를 개선하는 작업을 진행했다. 문제점: 불필요한 초기 로딩 기존 구조에...

#Frontend #최적화

Administrator

💬 0·💕 0·👀 14

[프론트엔드 고도화-1] 모바일 화면 최적화

1 모바일 최적화 블로그의 핵심 기능 개발을 마친 후, 가장 먼저 손대기로 한 것은 '모바일 최적화'였다. 블로그의 핵심 기능은 읽기에 대한 UI/UX라고생각해서, 이번 고도화의 목표는 데스크탑에서는 잘 보이던 블로그를 모바일에서도 쾌적하게 사용할 수 있도록 만드는 것...

#Frontend #최적화 #UI #UX

Administrator

💬 0·💕 0·👀 59

[🌙다크 모드 - 2부] 다크 모드 도입 성공기

다크 모드 도입 성공기 실패의 기록, 모든 것의 시작점 1부의 마지막, 나는 '전략적 후퇴'라는 이름으로 다크 모드 도입을 잠정 중단했다. 모든 것이 정상적으로 동작하는 것처럼 보였지만, 결과적으로 아무것도 변하지 않았던 기이한 현상. 그 미스터리는 풀리지 않는 숙제처...

#다크모드 #Frontend #UI #UX

Administrator

💬 0·💕 0·👀 115

[🌙다크 모드 - 1부] 다크 모드 도입 실패 회고록

다크 모드 도입 실패기 : 예상치 못한 거대한 벽 도입: 익숙함이 안겨준 방심 블로그의 디자인적 기능 개선을 진행하고 싶어, '다크 모드'를 도입하기로 마음먹었다. 많은 어려움을 겪었던 다양한 기능 추가 (특히 이미지 리사이징..) 를 진행해보니, 프론트엔드에서 다크모...

#다크모드 #Frontend #ToastUIEditor #회고록

Administrator

💬 0·💕 0·👀 57

Bedrock을 활용한 3줄 요약 기능 - 3부

AI 요약 기능 도입기 3부: 프론트엔드, 사용자 경험에 생명을 불어넣다 2부에서는 AWS Bedrock AI와 데이터베이스를 연결하여, 안전하고 효율적인 'AI 요약 API'를 완성했다. 이제 보이지 않는 곳의 모든 준비는 끝났다. 3부에서는 이 강력한 기능을 사용자...

#Frontend #Bedrock #요약기능 #logo #AWS

Administrator

💬 0·💕 0·👀 44

Bedrock을 활용한 3줄 요약 기능 - 2부

AI 요약 기능 도입기 2부: 백엔드, AI와 데이터베이스를 연결하다 1부에서는 '비용'이라는 현실적인 문제를 해결하기 위해, "최초 1회만 AI를 호출하고, 그 결과를 데이터베이스에 캐싱한다"는 아키텍처를 설계했다. 이제는 이 설계도를 실제 코드로 옮기는, 백엔드를 ...

#Frontend #요약기능 #Bedrock

Administrator

💬 0·💕 0·👀 41

[UI/UX 개선 2부] 체감 성능, 접근성, 그리고 스크롤 위치 복원

[UI/UX 개선 2부] 사소하지만 위대한 디테일: 체감 성능, 접근성, 그리고 스크롤 위치 복원 1부에서는 메인 페이지의 확장성 문제를 해결하고, 페이지네이션과 무한 스크롤이라는 튼튼한 '뼈대'와 '근육'을 만들었습니다. 기능적으로는 완벽했지만, 진정한 '고품질' U...

#Frontend #UX

Administrator

💬 0·💕 0·👀 41

[UI/UX 개선 1부] 무한 스크롤 & 스켈레톤 UI 도입

[UI/UX 개선 1부] 메인 페이지 개선: 확장성을 고려한 페이지네이션 API 설계와 구현 설명: 스켈레톤 UI 완성된 메인 페이지의 모습. 사용자는 초기 게시물들을 즉시 볼 수 있으며, 스크롤을 내리면 다음 콘텐츠가 로드될 것을 암시하는 '로딩스피너'가 위치해 있다...

#Frontend #Backend #UI

Administrator

💬 0·💕 0·👀 52

Github Link 버튼 추가 회고록

단순한 GitHub 링크 버튼 하나, AWS Parameter Store까지 사용한이유 최근 게시물 상세 페이지에 '좋아요' 기능을 성공적으로 추가하였고, 이어서 나를 표현할 수 있는 작은 버튼 하나를 더 추가해보기로 했다. 바로 내 GitHub 프로필로 연결되는 링크...

#회고록 #Frontend

Administrator

💬 0·💕 0·👀 18

[기능 추가] 좋아요 기능 도입 과정 회고록

'좋아요' 기능, 그냥 숫자 하나 더하는 게 아니었어 (1) 계획 & 기능 구현 Deep Dive 블로그에 '좋아요' 기능을 추가하기로 했다. 처음엔 간단하게 생각했다. 그냥 하트 버튼 하나 만들고, 숫자(count) 하나 더해주면 끝나는 거 아닌가? 하지만 이 작은 ...

#Backend #Frontend #Database

Administrator

💬 0·💕 0·👀 16