Loading...
소개

개인 블로그

개인
FE,BE
1. 블로그 카테고리 CRUD
2. 블로그 글 CRUD
3. 이미지 업로드
4. 블로그 마크다운 에디터(기능 추가 및 수정 중)
5. 블로그 인덱스 목차

유튜브 플리

개인
FE,BE
1. 유튜브 URL을 youtube data api v3로 정보 받아오기
2. 재생노래, 재생목록 로컬스토리지 저장
3. 플레이리스트 생성
4. 재생,정지 등 기능 구현

일정

개인
FE,BE
1. 일정 카테고리 CRUD
2. 일정 CRUD
3. openweather api로 날씨 조회
4. 메모장

게시판

개인
FE,BE
1. 게시판 CRUD
2. 게시판 정렬
3. 게시판 제목 검색

인증처리

개인
FE,BE
1.일반 로그인
2.oauth 로그인

솔리투어

팀
FE
블로그 카테고리 CRUD
블로그 에디터(기능 추가 및 수정 중)
기술적 도전과 해결,문제 해결 사례,개선 포인트 / 회고

기술스택

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, 코드 스플리팅, 이미지 미리보기 등으로 페이지 로딩 속도 향상

Contact

이메일

ssssksss@naver.com

학업

서울과학기술대학교 기계시스템디자인

자격증

정보처리기사