[React.js] 웹 카메라 제어 : 사진 촬영 기능 위해 react-camera-pro 설치, Styled-Components도 필요!

1. 단말기의 카메라 이용한 사진 촬영 기능

스마트폰이나 노트북의 카메라를 이용해 사진을 촬영해 저장하는 기능을 구현하고자 하였다. react-webcam과 react-camera-pro가 눈에 띄었는데 공식문서와 데모를 통해 내가 원하는 기능에 react-camera-pro가 더 맞아 선택하였다.

 

2. Styled-Components가 설치되어 있어야!

처음에는 Next.js 프로젝트에서 진행을 했었다. Styled-Components가 없다는 에러가 발생하여 설치해 주었으나 역시 작동하지 않았다. 그래서 React.js 프로젝트를 새로 생성하여 테스트를 진행하였다. Usage의 코드를 이용해 테스트하였고 역시 Styled-Components가 없다는 에러가 발생하였다. 하지만 React.js 프로젝트에서는 정상적으로 작동하였다. 결론은 react-camera-pro를 사용하기 위해서는 Styled-Components가 설치되어 있어야 한다. Next.js에서 작동하지 않는 문제는 좀 더 테스트를 해봐야겠다.