민희의 코딩일지

SKT FLY AI Challenger 4기 프로젝트 프론트엔드 개발하면서 앱 상에서 미술작품의 사진을 찍어 크롭한 뒤 찌그러진 사진을 평평하게 펴주어야 했다. 사용자가 미술작품의 사진을 찍고 모서리에 맞게 크롭해주면, 평평하게 펴주는 기능을 구현하고자 이와 관련된 React Native 라이브러리를 찾아보았다. 그 과정에서 react-native-document-scanner-plugin이라는 오픈 소스를 찾게 되었고, 이를 활용해본 내용을 이번 포스팅에서 정리해보고자 한다. react-native-document-scanner 라이브러리는 아이폰 유저들에게 친숙할 것이다. 그 이유가 아이폰 메모앱의 문서스캔과 동일한 기능을 수행하기 때문이다. 이 라이브러리는 말그대로 최적의 문서스캔을 위한 라이브러리..

1- Next.js 의 장점 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. (*React는 라이브러리이다.) React로 개발할 때 SPA를 이용하여 CSR(Client Side Rendering)을 하기 때문에 좋은 점도 있지만, 검색엔진 최적화 부분에 취약하다. (SEO) CSR를 하면 첫페이지에서 빈 html을 가져와서 JS 파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출될 일이 없다. 그러나, Next.js에서는 Pre-Rendering을 통해 페이지를 미리 렌더링하며 완성된 html을 가져오기때문에 사용자와 검색엔진 크롤러에게 바로 렌더링된 페이지를 전달할 수 있다. 원래 React의 방식 (4단계에 화면보임) SSR ..