미리보기

이전에 완성시켰던 WhiteWhale 프로젝트를 새롭게 리메이크하는 프로젝트를 진행 중입니다.

우선 목표는 기존 DB, BackEnd 기능을 담당하던 Firebase를 MySql+Express로 분리 후 AWS 배포를 통해서 실제 환경처럼 적용을 하는 것입니다.

또한 기존 프로젝트에서 클라이언트 컴포넌트는 자체적인 contextApi를 사용하는 만큼 렌더링 문제가 발생할 수 있었는데 외부 라이브러리를 사용하고 교체해 렌더링 문제를 최적화 하는 것을 염두하고 있습니다.

그 밖에 기존의 CSS에 애니메이션과 반응형 쿼리를 적용해 인터렉티브 웹을 목표로 작업을 하고 있습니다.

커스텀키보드를 판매하는 커머스 사이트를 제작하는 프로젝트입니다.

기술 스택 : React,React Vite, TailWindCss, TypeScirpt,

상태관리 : ReactQuery, contextAPI

DB & Backend : Firebase

Tool : figma

1인 프로젝트로 제작했으며 로그인, 마이페이지, 상품페이지, 권한별 다른 기능(상품 업로드, 물건 구매), 구매 페이지와 구매 현황페이지를 제작했고 최적화와 실시간 상태에 집중을 했습니다.

상태관리는 서버와 클라이언트로 분리해서 상태관리가 효율적으로 작동되도록 했습니다.

로그인은 Firebase를 이용해서 DB + SQL의 역할을 담당하되 클라이언트에서 로그인 처리가 이뤄지도록 설계했습니다.

물건을 결제할 때는 TossAPI, 네이버의 주소 입력 API를 사용해서 실제처럼 결제 처리가 이뤄지도록 설계했습니다.

이후 페이지의 성능을 올리는 방법에 대해 관심이 생겨 LazyLoading과 SementicTag를 적용해 사이트의 자체적인 성능과 SEO 엔진에 대한 최적화를 통해 LightHouse 기준 전체적인 성능을 10%가량 상승시켰습니다.

현재는 RE-MAKE 프로젝트 진행으로 인해 로그인이 되지 않습니다.

기술 스택 : React, Image-editor-library,

DB : MySQL

BackEnd : AWS, Axios

AI : Stable-diffsuion

머그컵, 무지티 등 평범한 상품에 생성형 AI를 이용하여 사용자가 원하는 이미지를 제작하고 상품에 합쳐 제작하는 커스텀 굿즈 사이트를 제작하는 프로젝트입니다.

해당 프로젝트에서 저는 이미지 관련 페이지의 UI 제작과 라이브러리의 기능을 저희 프로젝트에 맞게 커스터마이징 하는 역할을 담당했습니다.

이미지 관련 프로젝트는 프롬포트에 따라 여러 개의 이미지를 제작하는 이미지 제작 페이지, 생성된 페이지를 나열하고 선택하는 이미지 선택페이지, 선택한 이미지에 자르기, 좌우반전, 텍스트 추가 등의 2차 가공을 할 수 있는 이미지 수정페이지의 UI를 담당했습니다.

담당한 일을 하면서 이전 프로젝트에서 사용했던 모달탭을 이용한 UI와 이미지 개수의 상태에 따라 다른 레이아웃이 출력하도록 레이아웃을 적용했으며 기존에는 영어 원문에 이미지 자르기, 좌우반전 밖에 없는 이미지 수정 라이브러리를 수정해서 전부 한글로 출력, 도형 추가 기능, 텍스트 추가 기능, 글꼴 추가 등의 기능을 추가해 사용자가 이미지를 수정할 때의 편의성을 증진시켰습니다.

이때 팀원과 분쟁이 있었고 팀원과의 분쟁을 해결하는 방법을 배웠습니다.

사용 스택: HTML, CSS, JavaScript

DB: MySQL

backEnd : node.js, Express

AI를 활용한 코딩문제에 관련한 학습사이트 제작 프로젝트입니다.

OpenChat AI API를 활용하여 개인의 수준과 관심에 맞는 코딩테스트의 문제를 제작하고 채점할 수 있는 기능을 가졌습니다.

저는 해당 프로젝트에서 부분적으로 Front-End, Back-end의 기능을 맡아 마이페이지의 관련 UI/UX의 제작과 제작되어 있는 DB에서 유저의 데이터를 연동하는 일을 담당했습니다. 마이페이지를 제작 했을 때 중요하게 생각했던 부분은 사용자의 편의성 관련으로 모달탭을 사용해서 특별한 페이지 이동 없이 자신의 정보 변경, 결제 정보 확인, 문제 풀이 내역 출력, 회원탈퇴의 기능을 할 수 있도록 제작했습니다.

해당 기능과 UI를 제작하면서 DB를 단순하게 연동한 것 뿐 아니라 사용자가 해결한 문제의 갯수에 따라 다른 인터페이스를 출력하도록 상태에 따른 변화된 레이아웃을 출력하는 방법을 배웠습니다.

처음 시도해보는 팀프로젝트였기 때문에 코드의 역할에 따른 구조분리의 중요성을 모른 상태에서 프로젝트를 시작했기 때문에 팀원들이 각자 제작한 프로젝트를 마지막에 통합하는 역할도 맡았습니다.

해당 과정에서 무리한 코드 통합으로 인해 실행 충돌이 일어났었으며 실행이 되더라도 불안한 상태로 진행되었습니다. 해당 과정을 통해 코드 분리에 대한 중요성을 파악했고 그 이후에는 개인적인 기준을 가지고 구조 분리를 하도록 노력하고 있습니다.

온라인 강의 노마드코더에서 제공하는 Next.js에 대한 강의를 시청하고 사이드 프로젝트로 Next.js를 이용한 디자인 프로젝트를 진행했습니다.

front-End 개발자의 실력을 향상시키고자 온라인으로 주관하는 팀스파르타의 Front-End 심화과정에 참가 하여 CS 지식을 공부하였으며 같이 참가했던 참가자들과 함께 코딩테스트를 하면서 알고리즘 지식을 향상시켰습니다.

온라인 강의 사이트인 유데미에서 제공하는 TypeScript 강의를 시청하고 TypeScript의 개념과 중요 기법을 공부하고 Drag & Drop에 대한 사이드프로젝트를 진행했습니다.

광주정보문화산업진흥원이 주관한 인공지능콘텐츠융합창작랩 공모전에 참가하여,

OpenAI API 기반 코드 생성 웹서비스 ‘NDSB’ 프로젝트로 본선에 진출하고 프로젝트 지원비 200만원을 수령한 경험이 있습니다.

해당 프로젝트는 초기에 HTML, CSS, JavaScript 기반으로 구성되었으며, 복잡한 기능이 하나의 파일에 통합되어 발생한 유지 보수 문제를 해결하고자 React 기반 구조로 개편하는 것을 목표로 진행했습니다.

예선에서는 아이디어의 창의성과 실현 가능성 부문에서 높은 평가를 받아 본선 진출에 성공하였고, 프로젝트를 통해 React의 상태 관리와 렌더링 최적화 경험을 쌓을 수 있었습니다.

광주광역시에서 주관하는 AI 및 개발자 육성 산업에 대한 부트캠프로 약 1년동안 참가하여 Front-End에 필요한 HTML, CSS,Javascript, react에 관련된 내용과 AI에 대한 기초 이론 및 딥러닝 모델 구조에 대한 교육을 이수했습니다.

또한 교육 과정 중 실전과 유사한 환경에서 두 차례 팀 프로젝트를 수행했고, 각각 장려상과 최우수상을 수상하며 학습한 내용을 실무에 적용할 수 있는 역량을 입증했습니다.

사회복지학 동아리인 S.B.R에서 활동할 당시 참가했던 팀 공모전으로, 사회적 기업 또는 사회적 기관과 참여해 실제로 판매할 수 있는 제품을 만드는 공모전이었습니다. 당시 저희 팀원은 노인 복지관과 협약하여 제품을 생산할 수 있는 클라이언트를 모집해 복지관의 프로그램으로 지정하면, 저희가 제작한 십자수 도면으로 십자수 제품을 생산해 판매하고, 그 수익금을 클라이언트와 노인 복지관에 기부하는 형태로 사회적 순환을 도모하는 프로젝트로 참가해 장려상을 수상했습니다.

호서대학교 사회복지학부에서 활동 중인 사회동아리 S.B.R 동아리에 조장 역할을 담당했습니다. 동아리 조장으로서의 역할은 회장의 역할 전달, 조원들과의 소통 및 조율, 팀 공모전 참가를 통한 결과 창출이 있었습니다.