안녕하세요 .
이윤수 입니다 .
About .
배움을 기록하고 함께 성장하기를 바랍니다.
블로그를 통해 경험을 기록하고 공유하고 있습니다.
유저 중심의 UI/UX 구현을 지향합니다.
접근성과 성능을 중요시하며 작은 부분이라도 유저 경험에 도움이 된다면 개선하고자 노력하고 있습니다.
유저와 개발자 사이의 연결고리가 되기 위해 노력합니다.
주도적으로 프로젝트에 참여하며, 회고를 통해 더 나은 협업 방식을 고민하고 있습니다.
빠르게 변화하는 자바스크립트 생태계에 큰 흥미를 느끼고 있습니다.
React, Next.js, 그리고 NestJS를 활용한 풀스택 어플리케이션에 관심이 많습니다.
또한, AI와 다양한 SaaS를 조합한 새로운 서비스를 상상하는 것을 좋아합니다.
Tech .
JavaScript: JavaScript ES6+ 문법을 사용하여 프로그래밍할 수 있습니다.TypeScript: TypeScript를 통해 정적 타입을 검사하여 타입 안정성을 유지할 수 있습니다.React: React를 사용하여 클라이언트 사이드 렌더링 어플리케이션을 구현할 수 있습니다.Next.js: Next.js 를 사용하여 SEO를 적용한 서버 사이드 렌더링 어플리케이션을 구현할 수 있습니다.NestJS: NestJS 를 사용하여 간단한 REST API를 구현할 수 있습니다.클라우드: Oracle Cloud Infrastructure를 사용하여 서비스를 배포하고 있습니다.Git: Git을 사용하여 프로젝트 관리와 협업을 할 수 있습니다.
Project .
Noveloper
2024.02 ~ 2024.05
프로젝트 구조
기술 스택
Next.js, TypeScript, Mantine, Tailwind, Supabase, Prisma, React-Query(Tanstack-Query), Tiptap, Reactflow, Nivo, React-pdf, OpenAI
프로젝트 설명
Noveloper는 AI 기반 소설 창작 플랫폼입니다.
창작 과정을 더욱 효율적으로 이끌어낼 수 있는 대시보드를 제공합니다.
AI와 함께 페이지를 작성하고, 결과를 쉽게 txt, pdf로 내보낼 수 있습니다.
프로젝트 기여
- Supabase Authentication을 통한 이메일/비밀번호 인증과 OAuth 인증
- react-resizable-panels를 이용한 반응형 대시보드 레이아웃
- Tiptap을 이용한 커스텀 WYSIWYG 텍스트 에디터
- React-pdf를 이용한 PDF 내보내기
- Reactflow를 이용한 관계도 플로우차트
- Next.js ↔︎ prisma ↔︎ postgresql 의 구조로 데이터베이스 조작 추상화
- OpenAI gpt-3.5-turbo-0125 모델을 사용한 AI 소설 작성
- github actions를 통해 oracle cloud 도커 CI/CD 구성
문서
leey00nsu 블로그
2024.01 ~
기술 스택
Next.js, TypeScript, Contentlayer, NextAuth, Octokit, Supabase, Zustand, Tailwind, react-md-editor
프로젝트 설명
Next.js 와 Contentlayer 를 이용한 블로그입니다.
경험을 기록하고 공유하고자 만들었습니다.
프로젝트 기여
- Next.js 14를 이용한 SEO 적용 (sitemap, meta tag, og image)
- Contentlayer를 이용한 MDX 파일 관리 및 페이지 생성
- NextAuth를 이용한 OAuth 유저 인증
- Octokit을 이용한 블로그 글 자동 커밋
- react-md-editor를 사용한 블로그 템플릿 마크다운 에디터
- Supabase를 사용한 조회수 카운터
문서
나만의 수야 수호 만들기
2023.05 ~ 2023.08 , 2023.12 (리팩토링)
- Github(FE) : https://github.com/leey00nsu/syu-character-maker
- Github(BE) : https://github.com/leey00nsu/syu-character-maker-be
- 배포 : https://character-maker.l37.store/
프로젝트 구조
기술 스택
React, TypeScript, React-Query, Zustand, Konva, Tailwind, Framer-Motion, NestJS, PostgreSQL, Redis, Oracle Cloud, Docker, Nginx
프로젝트 설명
삼육대학교 마스코트인 수야, 수호를 꾸밀 수 있는 프로그램입니다.
자유롭게 꾸민 수야, 수호를 업로드하여 학우들과 공유할 수 있습니다.
프로젝트 기여
- Konva를 통한 캔버스 드로잉
- React-Query를 통한 UI 낙관적 업데이트
- NestJS를 이용한 PostgreSQL DB와 Redis 세션을 활용한 유저 인증, 이미지 저장
- Oracle Cloud에 Nginx, Docker를 활용하여 클라이언트,서버 배포
문서
아트폴리오
2023.04 ~ 2023.09
프로젝트 구조
기술 스택
React, TypeScript, React-Query, Zustand, Nivo,Tailwind, Framer-Motion
프로젝트 설명
AI 기반 예술품 경매 서비스입니다.
사용자가 업로드한 그림을 AI를 통해 분석하고, 그림에 맞는 설명과 음성을 자동으로 생성합니다.
프론트엔드 2명, 백엔드 2명, 디자이너 1명으로 진행되었으며 프론트엔드 및 팀장을 맡았습니다.
프로젝트 기여
- React-Query를 통한 실시간 경매 리스트 무한 스크롤
- Nivo Chart를 통한 실시간 경매가 차트 및 AI 분석 결과 파이 차트
- Framer-Motion을 이용한 페이지 트랜지션
문서
- 리액트에서 무한스크롤 구현해보기
- React-Query 도대체 왜 사용하는 걸까?
- nivo chart로 데이터 시각화하기
- framer-motion으로 페이지 트랜지션 구현하기
- 소규모 프로젝트를 진행하면서 배운점
Experience .
멋쟁이사자처럼 .
멤버, 운영진
2022.03 ~ 2024.02
멋쟁이사자처럼 삼육대에서 멤버로 활동 후 쌓은 지식을 기반으로 운영진으로 활동하였습니다. 프론트엔드 파트를 맡으며 세션 강의 및 동아리 활동을 지원하였습니다.
문서
GDSC .
멤버
2022.03 ~ 2023.02
Google Developer Student Clubs 삼육대에서 멤버로 활동하며 세션과 스터디에 참여하였습니다.
삼육대학교 .
컴퓨터공학과
2022.03 ~ 2024.02
2022년에 컴퓨터공학과로 편입하여 자료구조, 알고리즘, 데이터베이스 등을 배우며 기초를 중시하는 개발자를 지향하고 있습니다.