2023.11.10 ~ 2023.12.08

6인 팀 프로젝트

주니어 개발자를 위한 WebRTC 기반 1:1 화상 컨설팅 플랫폼입니다.언제 어디서든 쉽고 편리하게 화상 컨설팅을 받을 수 있는 환경을 제공하는 것을 목표로 사이트를 제작하였습니다.

WebRTC 기반 무료 오픈소스 플랫폼 Openvidu 를 next.js 에 도입하여 화상 회의 기능을 구현했습니다.

atomic design pattern 과 storybook 을 통해 컴포넌트 UI 작업현황 공유 및 chromatic 과 github actions 를 통한 배포 자동화를 구현했습니다.

전역 상태 관리를 위해 recoil 을 사용시 새로고침할 때마다 상태가 날라가는 것을 막기 위해 recoil persist 를 도입하여 전역 상태를 관리해주었습니다.

FEATURE

시니어 개발자와 주니어 개발자가 1:1 화상회의를 하며 웹캠이나 화면을 공유하거나 채팅을 하며 취업에 관한 컨설팅을 가능하게 합니다.

FRONTEND

next.js, recoil, storybook, github actions, typescript, MUI, styled-component, openvidu-browser.js

BACKEND

spring boot, jpa, docker, github actions, aws ec2, s3, route53

DEPLOYMENT

ec2, vercel, github actions

배포도메인

2023.08.31 ~ 2023.09.14

4인 팀 프로젝트

개발자를 위한 스터디 모집 플랫폼 Do IT 입니다.OpenAI API 와 프롬프트 엔지니어링을 통해 CS 면접 연습 기능을 구현했습니다.

Sequelize 와 MVC 패턴을 통해 backend 코드를 구성했습니다.UX 를 고려하여 hover 애니메이션, 로그인 마우스 트래킹 애니메이션을 구상했습니다.

slack 의bolt.js 와 Webhook, SocketMode를 활용해 스터디 개설신청 알림과 그에 대한 운영진의 수락 시스템을 슬랙봇 기능을 통해 구현했습니다.

팀 프로젝트 내에선 slackbot 시스템, 스터디 상세페이지 로직 및 UI 구현, 웹 로그인 및 회원가입 마우스 트래킹 애니메이션, figma 디자인, alert 애니메이션작업을 담당했습니다.

FEATURE

개발자를 위한 플랫폼입니다. 스터디를 개설하거나 참여할 수 있고 GPT 면접관을 통해 CS 면접을 연습할 수 있습니다.

FRONTEND

Javascript, SCSS, BEM

BACKEND

sequelize, RDS, MySQL, MVC

DEPLOYMENT

EC2, pm2

배포도메인

2023.07.17 ~ 2023.07.23

4인 팀 프로젝트

부트캠프에서의 첫 팀프로젝트로 제작한 반응형 웹사이트 입니다. 20대 여성을 페르소나로 삼아 나에게 맞는 화장품을 추천해주는 서비스를 목표로 사이트를 제작하였습니다.

스크롤 인터렉션, 3d carousel 등을 이용한 애니메이션, scss 등을 이용하여 UI/UX 측면의 구현에 집중하였습니다.

CSS 애니메이션과 JS 애니메이션의 차이, 가독성을 위한 BEM 방법론을 고려하여 웹사이트를 만들었고 웹 사이트중 SEO 에 미치는 요소들에 대한 개념을 알게 되었습니다.

팀 프로젝트 내에선 첫 화면인 안내페이지를 담당하여 페이지에 적용되는 스크롤 인터렉션, transition 애니메이션, iframe background 등의 애니메이션을 js 애니메이션 방식으로 구현했습니다.

FEATURE

필터와 추천 유튜브 영상을 통해 나에게 맞는 화장품을 추천받을 수 있습니다.

FRONTEND

Javascript, SCSS, BEM

DEPLOYMENT

Netlify

배포도메인