<aside> 💡 블로그 이전 예정입니다

</aside>

프로젝트 동기

회사 사수(라고 쓰고 친구라고 읽는다 )의 생일을 기념하여 여러 가지 아이디어를 생각했었다. n개월 전 부터 … 하지만 마땅한 아이디어는 나오지 않았다.😅 몇 번 시도했던게 Spline Design 활용해서 webGL사이트 만들어서 안에서 뭔가 컨텐츠를 즐길 수 있으면 좋겠다? 정도 였는데 프로그램 자체가 내 컴퓨터에서 원활하게 안돌아갔다… 회사 맥북에서만 돌아가는.. 그래서 이틀 정도 개발 해보다가 접고 다른 것들 탐색..

일주일 정도 남았을 때 아이돌 팬페이지? 같은 느낌으로 사이트 만들어서 주면 어떨까 하다가 또 너무 식상…하고 디자인에 자신이 없기 때문에 그냥 선물과 케이크와 풍선으로 만족하려다가 문득.. 며칠 전 아이유 인생네컷 포토프레임 나왔던게 생각났다. …..?

와 좀 재밌겠는데 싶어서 빠르게 제작할 수 있도록 관련 라이브러리 추려보면서 시작!

프로젝트 설명

웹캠을 활용하여 사진을 찍고 다운로드 받을 수 있는 포토부스 서비스! for나의사수🤩🍖

JJEONG'S BDAY

프로젝트 기술

React.js CSS React-Webcam html2canvas Vercel

• React.js
  • 사용자 선택에 의해 UI가 전환되는 경우가 많고 컴포넌트화 할 수 있는 부분이 많을 것 같아서 선택했다. 결과적으로 아주 만족스러웠다. 클릭으로 바뀌는 state에 따라 컴포넌트만 갈아끼워서 웅경네컷, 웅경그레이 영역을 쉽게 전환할 수 있고 Cam영역이나 버튼 영역등 공통으로 쓰이는 부분들은 컴포넌트화해서 재사용했다.
  • 회사에서는 해당 기술을 쓰지 않아서 빨리 쓸 수 있을까 걱정했는데, 몇 번 형식만 다시 복기하니깐 바로 쓸 수 있었다. 이래서 원리 위주로 알아두는게 중요한걸까
• React-Webcam
  • 리액트에서 바로 사용할 수 있는 웹캠 라이브러리라서 선택
• html2canvas
  • 여러 canvas관련 라이브러리 중 가장 상위에 있는 라이브러리를 우선 선택했다. 일단 관련 글들이 많아서 빠르게 쓰기에 편할 것 같았다. object-fit을 지원하지 않는 다는 글을 보고 조금 고민했는데 해당 속성을 쓸지 미지수여서 그냥 선택했다.

컴포넌트 구조

• 크게 Main 컴포넌트의 첫 페이지와 포토부스 기능을 하는 PhotoBooth 페이지를 넣는 이름 유무에 따라 다르게 보여주기로했다.

import { useState } from 'react'
// import './App.css'
import Main from './pages/Main'
import PhotoBooth from './pages/PhotoBooth'
function App() {
  const [name, setName] = useState('')

  return (
    <>
      {/* 개발 편의를 위해 임시 주석 처리 */}
      {name ? <PhotoBooth name={name}/>: <Main setName={setName}/>}
     {/* <PhotoBooth/> */}
    </>
  )
}

export default App