KMS's Portfolio

Projects

포트폴리오

웹 사이트

2024.09 (개인 프로젝트)

0 / 0

현재 보고 계시는 포트폴리오 페이지입니다.

Next.js 14+를 다시 사용해보고, 더욱 친숙해질 수 있었습니다.

NodeMailer를 활용한 메일 전송 시스템을 제작해볼 수 있었습니다.

4K부터 핸드폰까지, 복잡한 반응형 구현을 해볼 수 있었습니다.

해외에서 인기가많은 shadn/ui + tailwindCSS를 활용해서 UI를 구성해보며 경험을 쌓았습니다.

주요 기능

스크롤 애니메이션, 반응형 웹, 메일 전송

Github

https://github.com/yoyobar/portfolio

Frontend

Next.js, Shadn/ui, TypeScript, TailwindCSS

Deployment

Vercel

훈수왕

2024.08 - 2024.09 (팀 프로젝트)

0 / 0

OZ 코딩스쿨에서 주최한 FE-BE 콜라보프로젝트로 진행하게 된 프로젝트입니다. 팀장을 맡아서 진행하게 되었습니다.

다시 한번 AI를 활용한 플랫폼 서비스를 기획하였고, 대화간 네이버 지식인 서비스에 AI를 배합한 질문 플랫폼을 개발하였습니다.

반응형을 고려한 모던 웹 스타일에 맞는 웹페이지를 구상하여 현대웹에 부합한 형태로 제작하였습니다.

다양한 모달, 메일 인증 등을 추가하여 사용자 편의성과 보안을 크게 신경써서 제작해볼 수 있었습니다.

PrivateRoute등을 활용한 사용자 접근제한을 구현하고,어드민 페이지를 구현하여 관리자측면의 편의성을 고려하였습니다.

주요 기능

게시판 CRUD, 질문 작성및 AI 답변

어드민 페이지

실시간 알림

담당 파트

전체적인 모달 및 UI 구상

기획 및 개발 총괄

어드민 페이지

사용자 메일 인증, Auth 로직

실시간 알림, Admin 알림

유저 신고 처리

Github

https://github.com/OZ-Coding-School

URL

https://hunsuking.yoyobar.xyz

Frontend

React, React-query, Zustand, TypeScript, TailwindCSS, Tiptap

Backend

Django FrameWork

Database

Postgre SQL

Deployment

Amazon Web Service

Emotree

2024.07 - 2024.08 (팀 프로젝트)

0 / 0

OZ 코딩스쿨에서 주최한 FE-BE 협동프로젝트로 진행하게 된 프로젝트입니다. 팀장을 맡아서 진행하게 되었습니다.

조코딩 2024 GOOGLE 해커톤 출전을 위해 AI를 활용한 플랫폼 서비스를 기획하였고, 대화간 감정분석을 분석하여 이를 이용해 정원을 가꾸는 시뮬레이션 웹 게임을 개발하였습니다.

Preserve-3D를 활용한 2.5D 스타일의 디자인을 설계하여 복잡한 CSS 구조를 다뤄볼 수 있었습니다.

다양한 사운드 인터랙션, 모달등을 추가하여 사용자 편의성을 크게 신경써서 제작해볼 수 있었습니다.

PrivateRoute등을 활용한 사용자 접근제한을 구현하고, 어드민 페이지를 구현하여 관리자측면의 편의성도 고려하였습니다.

규격있는 상태관리를 Zustand를 통해 다뤄보며 상태관리와 좀더 친숙해 질 수 있었습니다.

주요 기능

AI 감정분석, 나무 심기, 채팅방 생성

마이 페이지, 어드민 페이지

담당 파트

CI/CD, 로그인 로직, 어드민 로직

메인 페이지 로직, 경험치 시스템 로직

Github

https://github.com/OZ-Coding-School

URL

https://emotree.yoyobar.xyz

Frontend

React, Zustand, TypeScript, TailwindCSS

Backend

Django FrameWork

Database

Postgre SQL

Deployment

Amazon Web Service

블로그 웹 사이트

2024.05 - 2024.06 (개인 프로젝트)

0 / 0

Next.js 최신버전에 익숙해지고자 직접 블로그를 개발해보기위해 시작된 프로젝트 입니다.

직접 MDX-plugin을 세팅하며 Markdown문법에 익숙해 질 수 있었고 컴포넌트에 MDX를 파싱하는 방법을 익혔습니다.

댓글 시스템 구현을 위해 Supabase를 활용하면서 NoSQL에 더욱 채화 될 수 있었습니다.

Category, Post, Series등의 다양한 디렉토리를 나누면서 Next.js에 더욱 적응할 수 있었습니다.

Next.js의 SEO에 최적화를 진행하고, 이미지를 최적화 하는 등 다양한 최적화 기법을 연습해볼 수 있었습니다.

주요 기능

카테고리 분류, 시리즈 분류, 게시글, 음악 재생등 블로그 플랫폼에 존재하는 대부분의 기능

Github

https://github.com/yoyobar/newBlog

URL

https://wiki.yoyobar.xyz

Frontend

Next.js, TypeScript, TailwindCSS

Backend

Supabase

Deployment

Vercel

어드민 페이지

2024.04 - 2024.05 (개인 프로젝트)

0 / 0

백엔드와의 연동을 연습하기위해 개인적으로 진행한 프로젝트 입니다.

MySQL, Docker환경을 구축하여 직접 백엔드 로직을 구성해보았습니다.

React-query를 사용하여 서버 상태에 대한 최적화를 해볼 수 있었습니다.

Typescript를 최초로 사용하여 enum, 유틸리티 타입등 다양한 타입을 연습해보았습니다.

사용자 인증로직을 직접 처음부터 구축하여 인증의 대한 이해를 넓혔습니다.

어드민 페이지를 제작하여 어드민의 사용자 관할을 구현해보았습니다.

주요 기능

카테고리 구별, 태스크 생성, 수정, 삭제 (CRUD)

어드민 페이지 전체 관할

Github

https://github.com/yoyobar/adminpage

Frontend

React, React-query, Zustand

TypeScript, TailwindCSS

Backend

Express.js

Database

MySQL

WeatherMe

2024.04 (개인 프로젝트)

0 / 0

수강 기간중 처음으로 개인적으로 진행하게된 프로젝트입니다.

다른 프로젝트보다 완성도가 낮지만, 반응형을 고려하고, API를 연동하는 과정을 처음으로 진행하면서 좋은 경험을 쌓을 수 있었습니다.

프론트가 백엔드의 API와 RESTFUL하게 통신하는 과정을 연습해 볼 수 있었습니다.

사용자 인터랙션 (검색, 캐러셀, 토글)등을 직접 설계하면서 UI로직을 연습해볼 수 있었습니다.

반응형을 고려하고, 사용자 편의성을 처음으로 고려해볼 수 있었습니다.

주요 기능

검색기능, 주간 날씨, 일간 날씨, 화씨/섭씨 변환

Github

https://github.com/yoyobar/weatherme

URL

https://weather-me-eight.vercel.app

Frontend

React, Javascript

Deployment

Vercel