1. RealEasy - 부동산 통합 플랫폼(23.09.01 ~ 23.12.31)
ㄱ. 프로젝트 소개 - (MVP버전)
- RealEasy는 공인중개사를 위한 부동산 통합 플랫폼으로 직방, 다방, 네이버 부동산의 기능을 하나로 통합하여 매물 등록, 조회, 수정, 삭제를 간편하게 할 수 있고, 이를 통해 업무효율과 편의성이 향상되어, 공인중개사들의 업무가 더욱 간단해집니다.
- RealEasy는 차후 업데이트를 통해 부동산등기(인터넷등기소), 건축물대장(정부24), 토지이용계획확인서(일사편리) 등과 같은 부동산 계약서 작성에 필요한 서류를 한 번에 발급받을 수 있는 기능과 발급된 부동산의 정보를 계약서에 바로 입력하여 중개사의 오타같은 실수를 사전에 방지하여 더욱 안전한 중개시장을 만들것 입니다.
ㄴ. 나의 역할
- RealEasy MVP 버전을 통해 부동산 시장성을 검증하고, 프로젝트를 단독으로 완성할 책임을 맡았습니다.
- 프론트 엔드 부분(UI/UX) 전반을 Next.js를 활용하여 개발합니다.
- 백 엔드 부분에서는 Json 및 Firebase를 이용하여 API 구조를 설계하고, API를 개발하며 데이터 테이블을 구축하고 크롤링 서버 배포 및 DB를 구축합니다.
- Puppeteer을 활용하여 크롤링을 통해 3사의 CRUD 기능 등을 구현합니다.
- Electron을 사용하여 데스크탑앱을 배포하여 유저의 피드백을 받아 에러 및 개선사항을 개선합니다.
- 7년의 공인중개사 경력을 토대로 사용자 니즈를 파악하고 부동산 업무의 불편함을 토대로 개발을 진행합니다.
ㄷ. 사용 기술
- Next.js를 기반으로 Material-UI템플릿을 사용하여 프론트 전반의 UI를 구성함
- Puppeteer을 사용하여 3사에 등록된 중개사의 매물정보를 크롤링하여 Data Table을 구성
- DB의 경우 서버를 사용하지 않아도 되는 FireBase를 사용하였음
- 크롤링 서버는 AWS의 LigthSale를 사용하다가 처리속도 문제로 Electron 애플리케이션에서 사용자의 로컬 서버(Express 서버)를 활용
- 그외 라이브러리 : Electron, React-DnD, Axios, React-Context, useRouter등
ㄹ. 데이터 구조화
- 플랫폼마다 다른 데이터를 API구조화 하여 RealEasy만의 API를 설계해서 한눈에 데이터를 파악하기 쉽게 만들었음
ㅁ. 프로젝트 미리보기
메인페이지
- 현재활성화된 플랫폼과 해당플랫폼의 매물상태를 알려줌
프로필 페이지
- 등록된 플랫폼의 계정을 관리하는 페이지로 체크박스를 사용하여 활성화를 여부를 설정하고 계정의 id와 pw를 수정함
매물리스트 페이지
- 각 플랫폼에 등록된 매물의 리스트를 볼수있고 매물클릭시 상세페이지로 이동하게함
매물 등록페이지
- 원하는 플랫폼 또는 모든 플랫폼에 한번에 매물등록을 할 수 있는 페이지
- 플랫폼마다 다른 입력값을 통일하여 RealEasy만의 API를 만들어서 사용함
매물 수정페이지
- 플랫폼에 등록된 매물을 수정할 수 있는페이지로 해당 플랫폼마다 수정할수있는 영역에 한해서 전부 수정가능
ㅂ. 문제해결
1. 네이버에 매물등록시 Canvas를 사용해 싸인
문제
프론트에서 받아온 매물등록 데이터를 크롤링하여 네이버에 매물등록을 할 때, 집주인의 성함을 마우스로 싸인해야 하는데, 이때 새로운 페이지가 iframe으로 감싸져 있어서 해당 성함을 찾을 수 없는 문제가 발생해결
- 기존의 page가 아닌 popuPage라는 새로운 page를 만들어서 새로운페이지가 열림을 감지하게함
- puppeteer의 메소드중에
contentFrame()을 사용하여 ifame내부요소를 찾아냄- 그후 캔버스의 위치와 싸인을 설정하면 캔버스에 '차'라고 싸인을 하게함
2. 네이버에 매물등록시 Canvas를 사용해 싸인2
문제
싸인후 mouse이벤트가 작동되지않아 싸인이 완료됨을 인지하지못하는 문제해결
- 마우스를 클릭하고 땠을때 이벤트가 작동하는결 발견하고
canvas.onmousedown(document.createEvent("MouseEvents"));onmousedown로 문제해결3. puppeteer을 이용해서 이미지 업로드
문제
플랫폼에 이미지를 업로드할때 url로된 이미지가 아닌 로컬에 저장된 이미지를 업로드를 해야하는 문제해결
프론트 프로젝트에서 이미지를 json파일로 업로드할때 base64링크로 업로드를 한후- 이미지 URL을 변수에 저장하고 해당 이미지를 Buffer로 변환한 후 로컬에 저장하고, 그리고 저장된 이미지를 업로드하고, 업로드가 완료되면 로컬에서 해당 이미지를 삭제하는 방식으로 문제를 해결함
4. AWS Xvfb
문제
- 크롤링을 할때는 보통 유저에게 크롤링하는 페이지를 보여주지않고 백단에서 진행을 하고 puppeteer에서는 headless를 new라고 설정해야함
- 직방, 네이버는 new로하면 잘되지만 다방은 new라고 하면 selector를 찾지못하는문제
해결
- AWS의 ligthSale을 이용해서 크롤링 서버를 배포를 했고 Xvfb를 사용하면 가상윈도 시스템을 제공해서 가상의 디스플레이를 사용할수 있다는걸 알게됨
- 디스프레이를 98번, X서버를 98으로 열어서 사용하면 헤드리스가 false여도 크롤링을 하게됨
5. http, https 통신
문제
- 웹페이지를 배포한 vercel은 https, AWS의 서버는 http를 사용하고 있어서 CORS문제로 통신이 안되는 문제
해결
- Next의 API Router를 사용해서 https에서도 http로 axios를 통해 get요청이 가능하게함
- 클라이언트사이드쪽 파일에서 서버에 요청할 값을 전달해주고
- src폴더안에 api폴더를 만들고 파일을 만들어두고 axios로 서버에 get요청을 해서 서버에 필요한 정보를 전달해줌으로써 문제를 해결함
6. electron을 사용하여 CPU문제 해결
문제
- AWS LightSale에 올린 서버의 CPU가 크롤링을 하기엔 작고, 크롤링 속도가 늦어지다보니 Selector를 가끔 찾지못해서 에러가 발생함
해결
- Electron을 사용하여 AWS의 서버가 아닌 유저의 CPU를 사용하여 크롤링을 진행시킴
- 만약 오류가 나더라도 헤드리스를 New가 아닌 False로 진행하여 유저의 디스플레이에 크롤링이 진행하는 모습을 보여주고 오류나는 부분을 캡쳐를 받아 수정하기로함.
7.AWS 서버의 대체재로 유저의 express서버를 이용하기로함
문제
- 원래는 AWS에서 크롤링을 하고 값을 디비에 저장하는거 였지만 위의 문제로 인해 더이상 AWS서버를 사용하지 못하게되되면서 다른서버를 찾아야하는 문제
해결
- 유저가 일렉트론앱을을 시작하면 유저의 로컬에서 express서버인 http://localhost:4000 포트를 열게하고 유저의 로컬 서버에서 크롤링이 작동되게 코드를 변경함
- 아래코드는 크롤링 프로젝트의 main.js파일에 있는 코드로 유저가 클릭할때 cmd와 userId를 전달해주고 그 값에 따라 어떤 함수를 실행하면 될지 알려주게함
8. puppeteer가 내장된 chromium을 찾지못하는 문제
문제
- Electron앱 실행시 패키징된 puppeteer가 내장된 chromium을 찾지못하여 페이지를 열지못하고 크롤링을 시작하지 못하는 문제가 발생함
해결
- node_modiles안에 puppeteer안에 chrom.exe파일이 있는지 확인함(없으면 로컬에 설치된 크로미엄의 폴더를 넣어줌
- 크롤링시 로컬에 설치된 크로미엄이 아닌 일렉트론앱 안에 패키징된 puppeteer안에 있는 크로미엄을 사용하게 경로를 지정해줌
- 그후 크롤링할 브라우저의 변수에 executablePath의 설정을 앱을설치했을때 내장된 크로미엄의 경로로 하면 문제해결!
ㅅ.새로배운것들
1. 반복문 ,if문 줄이기
- 하나하나 if로 비교하면서 예외처리를 진행했던 부분을 객체로 만들어서 줄여서 코드의 가독성과 재사용성을 높임
이전방법
새로배운 방법
2. 불필요한 state, onChange 줄이기
이전방법
새로배운 방법
- 온체인지로 파라미터를 전달하여 파라미터값 마다 예외처리도 가능함
3. Puppeteer
- Puppeteer는 Google이 개발한 Node.js 라이브러리로, 웹 브라우저를 제어하고 자동화하는 데 사용되고, Puppeteer는 주로 웹 스크래핑, 웹 테스트 자동화, 스크린샷 및 페이지 캡처 등의 작업에 활용함
- Puppeteer을 이용하여 Dom을 직접 조작하는 방법과 크롤링하는 방법을 알게됨
4. AWS , 리눅스
- AWS-LightSale의 Ubuntu Linux를 사용하여 서버를 세팅하고, 배포하고 작동하는 방법을 배웠고, 네트워크에 대한 약간의 지식을 공부하게됨!
5. Next.js Api Router를 이용한 서버 fetch
- http://localhost:3000/을 사용하여 개발을할때는 상관이 없지만 vercel로 배포를 하고 나서는 CORS문제로 http통신이 되지않았고 그때 알게된게 Next의 API.Router였다.
- page폴더에 api라는 이름의 폴더를 만들고 사용할 컴포넌트에서 import를 하면되는데 아래의 이미지 처럼 cmd, userId등 값을 담아서 api폴더의 httpRequest.js파일로 fetch를 날리고
- httpRequest.js파일에서 query로 cmd와 userId등을 받아온후 http로 axios.get을 하게되면 https를 사용해야하는 vercel에서도 http로 통신을 할수 있게된다.
6. Electron
- Electron을 사용하여 Slack, Discord같은 앱을 만들수 있게 되었다.
- 보통 Html등을 이용해서 만들지만 Next를 사용해서 만들고 vercel을 사용해서 배포한 url을 electron에서 보여줌으로써 간단한게 데스크탑 앱을 완성 했다.
- 아래 이미지에 보이는 createWindow 함수가 해당 URL의 내용을 Electron의 BrowserWindow에 로드하는 부분임
ㅇ.느낀점
- 프로젝트 진행에서 API 설계, 데이터 구조, 서버 통신, 그리고 Puppeteer를 사용한 크롤링과 같은 다양한 개발 측면에 도전하고 새로운 기술을 배워 적용하면서 프론트엔드 개발자로서의 역량이 높아진 좋은 경험을 했고, 개발자라는 직업에 대해 많은걸 느끼게 해준 프로젝트
- 4개월이라는 짧은 시간동안 단독으로 프로젝트를 완성해야하다보니 작성 중인 코드의 품질, 더 나은 접근 방식이 있는지에 대한 의문이 계속해서 생겼고, 컴포넌트 구분이 적절한가, 서버 및 데이터베이스 처리 방식, 그리고 크롤링 서버의 배포 전략 등 다양한 측면에서 신입 프론트엔드 개발자로서의 역할을 넘어 더욱 고민해야 할 사항이 많았고, 선임 개발자, 프로젝트 매니저, 백엔드 개발자들의 역할에 대한 필요성을 느끼게 되는 프로젝트였음
- Puppeteer, AWS, Electron 등 다양하고 새로운 기술들을 배움으로써 코딩실력이 상승하고, 프로젝트를 보는시야가 넓어지고, 에러나 상황에 따라 맞는 코딩과 새로운 방식을 접목하여 문제를 해결하는 과정이 보람차고 재밌었던 아주 값진 이번 프로젝트
개발작