🔸 사각형, 화살표, 텍스트, 테이블 노드 존재(추후 추가 및 수정 예정)
🔸 사각형 노드에 이미지 URL 추가 가능(나중에 업로드 형식으로 변경 예정)
🔸 화살표로 노드와 노드 자동 연결
DEV.AGE
ALL-IN-ONE 플랫폼
개인 블로그와 여러 작업을 하는데 필요한 (캔버스, 일정관리 등) 기능들을 모아놓은 플랫폼입니다.
기술적 도전과 해결,문제 해결 사례,개선 포인트 / 회고
기술스택
Next.jsTailwindCSSZustandReact-queryReact-hook-formYupSpring BootSpring SecuritySpring Data JPAQueryDSLRedisMySQLAWS S3AWS SESFigmablender
사용하지 않는 스택 : emotion, redux, Styled-component, Axios, Storybook, mui, antd, GraphQL,Apollo Client
✅ 서버/배포 관련
- 1. 무중단 배포 적용🔸 Blue-Green / Rolling 방식 검토 및 적용으로 서비스 중단 없는 배포 환경 마련.
- 2. SSL 인증서 적용🔸 crontab + certbot으로 인증서 자동 갱신 설정.
- 3. 방화벽 설정🔸 http, https만 접근 가능
- 4. 리디렉션 처리🔸 nginx로 http로 접근시 https로 변경
✅ 백엔드 관련
- 1. Spring Security 기반 인증/인가🔸 회원가입, 로그인, OAuth 연동(Google, Kakao 등) 및 JWT 기반 인증/인가 구현.
- 2. AWS SES 연동🔸 이메일 인증 및 no-reply 발송 시스템 구축.
- 3. S3 업로드 + 이미지 처리🔸 업로드된 이미지를 WebP로 변환, 리사이징 및 썸네일 자동 생성 후 S3 저장, 임시로 저장된 사진들을 따로 모아 삭제 처리
- 4. API 설계 및 구현🔸 게시글, 댓글, 유저, 즐겨찾기, 협업도구 등 Controller / Service / Repository로 처리, querydsl, jpql, spring-data-jpa로 처리
✅ 프론트엔드 관련
- 1. Next.js 14 기반 웹 애플리케이션 개발🔸 Zustand를 활용한 전역 상태 관리, react-hook-form으로 사용자 입력 폼 검증 및 UI/UX 최적화
- 2. 컴포넌트 재사용성 및 모듈화🔸 TailwindCSS 기반으로 버튼 등 핵심 UI 컴포넌트를 직접 구현하고, 로딩·에러 처리 로직을 내장하여 일관된 사용자 경험과 유지보수 효율성 확보
- 3. 다크 모드, 테마 지원🔸 TailwindCSS 설정(tailwind.config.js)을 통해 다크 모드를 전역적으로 적용하고, UI 전반의 색상 테마 일관성을 유지
- 4. 애니메이션 및 인터랙티브 요소 구현🔸 CSS Animation, Three.js, Gsap, Framer Motion 등 활용
- 5. API 연동 및 데이터 처리🔸 Fetch 나 React Query, Nextjs SSR로 서버 데이터 효율적 처리, 별도 함수로 오류 및 로딩 상태 관리
- 6. 퍼포먼스 최적화🔸 Lazy loading, 코드 스플리팅, 이미지 미리보기 등으로 페이지 로딩 속도 향상