🖐 자랑하고 싶은 개발자, 윤창식입니다.

• 오픈 소스를 통한 학습을 즐기며
• 요구 사항 구현에 집중하는
• 만들고 싶은 게 많은 개발자입니다.

<aside> 🧑🏻‍💻 React, Next.js / Typescript, Javascript

</aside>

🏙 Experience

2022.03~

KC-MIC (링크)

Team Softmax - 프론트엔드 엔지니어

실시간 다중 동시 접속 시뮬레이터 UI 및 씬(Scene) 개발

• canvas 를 다루기 위해 Phaser 엔진으로 씬 구성
• 기존 CRA 기반 프로젝트를 Vite 기반으로 마이그레이션
• scss 모듈의 네이밍 컨벤션 정립(BEM)
• 모바일 Landscape에 반응하는 디자인 구현
• PWA 및 SEO 장착 및 개선
• Redux 에서 Redux Tool Kit 으로 마이그레이션
• i18n 으로 영어와 한글 버전 구현

ISR과 CMS를 이용한 정적 블로그 개발

• Next.js 를 통한 서버사이드 렌더링 적용
• Notion API 를 CMS로 사용하여 게시글 구현
• Notion API 에서 가져오는 .HEIC 이미지 확장자 관련 오류 해결
• 파일 시스템 캐싱을 통해 네트워크 중복 호출을 줄이고 페이지당 빌드 시간 최적화

유저 인터랙티브 3D 씬 구현

• Threejs 를 이용해 유저의 코드 입력에 따라 변하는 3D 씬 구현 및 물리엔진 추가
• grpc , Protobuf 를 이용한 데이터 통신 사용
• 기존의 클라이언트 사이드 데이터 호출을 SWR 로 업데이트
• Recoil 로 코드 에디터를 제어하는 컨트롤러 상태 관리
• 디자인 시스템을 커스터마이징하여 메인 화면 UI 구현

BAAS 관리자 대시보드 개발

• 전체 UI 및 디자인 기획 담당
• 각 페이지 요구사항 정리
• react-table을 사용한 검색, 정렬 등의 기능을 가진 데이터 테이블 공통 컴포넌트 설계
• react-hook-form 과 zod 를 이용해 데이터 추가 등에 쓰이는 견고한 폼 구현
• JWT를 통한 관리자 계정 로그인
• 반응형 디자인 설계

Skill Set

• Typescript Javascript React Next.js Vite RTK Recoil SWR
• Emotion Tailwindcss React-Table Zod React-Hook-Form

🛴 Side Projects

Nexthree-fiber

홈페이지 링크

Nextjs@13 TailwindCSS Threejs Typescript valtio framer-motion

• Next.js@13 과 R3F를 이용한 3D 웹 앱
• drei와 [maath](<https://github.com/pmndrs/maath>), [valtio](https://github.com/pmndrs/valtio) 를 활용하여 구현
• 색 변화, 로컬 파일, 생성 AI를 이용한 생성 구현
• 데칼 텍스쳐 선택 및 캡쳐 추가
• 셔츠와 요트 모델 중 선택 가능

GitHub - CaesiumY/r3f-next-13: React-three-fiber와 Next@13으로 만드는 프로젝트

노션 API 블로그

홈페이지 링크

Nextjs@13 TailwindCSS Typescript Notion API SWR

• [프로그래머스] Next.js와 TypeScript로 만드는 NotionAPI 블로그 강의 자료
• Next@12 에서 Next@13 으로 마이그레이션
• Notion API 를 CMS로 활용
• 정적 SSR 빌드를 통해 최적화 및 속도 개선
• 빌드 과정 중에 프리뷰 썸네일 제작 로직 추가

GitHub - CaesiumY/notion-blog-v2: Next.js와 Notion API로 만드는 블로그

마헤 뮤지컬 사이트

홈페이지 링크

Nextjs TailwindCSS Firebase Typescript

• 마헤 뮤지컬 - ‘어쩌면 해피엔딩’ 홍보 및 예매 사이트
• 기획/디자인 팀과 협업하여 1인 풀스택 개발
• 재사용도가 낮은 여러 폰트를 import 해 사용하는 건 비효율적이라고 생각해 svg 로 만들어 적용
• lighthouse를 통한 성능 측정으로 모든 분야 100점 달성

GitHub - CaesiumY/mahe-musical: MA:HE 뮤지컬 티켓팅 홍보 페이지

마치 무비 나잇

홈페이지 링크

Nextjs TailwindCSS Firebase Typescript

• ’마치 무비 나잇’ 홍보 및 예매 사이트
• 반응형 디자인을 염두하여 개발
• Realtime DB 를 이용하여 실시간 예매 구현
• 관리자 페이지를 통해 예매자 관리
• 이미지가 많은 만큼 .webp 를 사용해 이미지 압축

👀 Community

강의