This is a simple web application using MERN stack.
Collect campaign and comment data from the wadiz homepage and put it in MongoDB,
and link it with React to show the user the rendered screen.
Wadiz 홈페이지에서 캠페인과 댓글 데이터를 수집하고 MongoDB에 저장합니다.
이를 리액트와 연결해서 사용자에게 렌더링된 화면을 보여줍니다.
- Mongoose 모델 스키마 구성하기
- 웹 데이터 수집하여 저장하기
- Express.js를 활용해 REST API 구성하기
- React에서 캠페인 리스트 Rendering하기
NPM / Yarn and Node.js installed
Installing NPM modules on both client and server folders.
Execute these commands from the project directory.
cd client && npm install
cd server && npm install
cd server/crawler && npm install
You have to make .env
file in the server
folder. Please put your own MongoDB information in the form below and write it in the .env
file.
PORT = whatever_you_want
USER_NAME = your_name
PASSWORD = your_password
CLUSTER = your_cluster
DATEBASE = wadiz
Please execute the following command on the project /root
path.
cd server
node crawler/campaignList.js
node crawler/comment.js
Then json files(campaignList.json and comment.json)will be stored in /server/crawler/res forder.
Please execute the following command on the current path.
node models/Campaign.js
node models/Comment.js
![colleted data](https://private-user-images.githubusercontent.com/63188042/306885152-551c667d-8889-4718-ba35-777333469e37.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NzYzMTcsIm5iZiI6MTcyNDU3NjAxNywicGF0aCI6Ii82MzE4ODA0Mi8zMDY4ODUxNTItNTUxYzY2N2QtODg4OS00NzE4LWJhMzUtNzc3MzMzNDY5ZTM3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDA4NTMzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAzYjZiMTQ4ZGFlYjkxNmE5MTI3Y2NmMzFiMmVhNmUwOTgwOTYzNWVmMTgyNTJmYThkODg1ZDRjMWY0MjJlYjAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.L8YFF6A8vpwkLCZR_hWGJcQoWtG4KnOWbFtTurHI2Gg)
The campaign and comment data in each schema form are then stored in the MongoDB that you set up in the .env
file.
Open a terminal on server directory
npm run dev
and open another terminal on client directory
npm run dev
Access the web app at http://localhost:5173/campaign
![스크린샷 2024-02-22 오후 3 07 24](https://private-user-images.githubusercontent.com/63188042/306887976-efdd0bc7-2f40-42aa-80d8-7b0f9939b2fd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NzYzMTcsIm5iZiI6MTcyNDU3NjAxNywicGF0aCI6Ii82MzE4ODA0Mi8zMDY4ODc5NzYtZWZkZDBiYzctMmY0MC00MmFhLTgwZDgtN2IwZjk5MzliMmZkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDA4NTMzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThlYmFmM2JiMTU0OGUxYzgyYjFlNGQ2NDIzYWFmZmU3NzY4ODY1MDE1ZTA4MjJjN2E0Y2I5MWNiMTcxMGVlN2EmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.NBwlGluNCIE9Ovq5AIf9W1UGwyJIczSZKRqx13aEFJo)
![스크린샷 2024-02-22 오후 10 49 36](https://private-user-images.githubusercontent.com/63188042/307020064-712cd96e-b572-48bb-93ab-574616b19d77.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NzYzMTcsIm5iZiI6MTcyNDU3NjAxNywicGF0aCI6Ii82MzE4ODA0Mi8zMDcwMjAwNjQtNzEyY2Q5NmUtYjU3Mi00OGJiLTkzYWItNTc0NjE2YjE5ZDc3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDA4NTMzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZhOTJhNTMzZGRlYTA2MTcxMjJkNDYzMTU0NmExZjJmZDdmYzAyYmVmNWQ5YjE3MGJjNGNlYzZjNmFmMjA5NGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.uiEnKoeREslSZGOuib9Y6Snquo-dLl38Htx3IE3edOw)
![스크린샷 2024-02-22 오후 10 48 51](https://private-user-images.githubusercontent.com/63188042/307019996-33cb6ece-c92a-422d-8265-b6676ddd3ea5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NzYzMTcsIm5iZiI6MTcyNDU3NjAxNywicGF0aCI6Ii82MzE4ODA0Mi8zMDcwMTk5OTYtMzNjYjZlY2UtYzkyYS00MjJkLTgyNjUtYjY2NzZkZGQzZWE1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDA4NTMzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTZhZGQ4ZGNhNTc5YzE1YzRjODA4NzlhNDczMGFkZjlhYTYzMGE4YjRjNDc0YzAwYjRlOGJiOGJjNmQ3YmQwODkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.MrjWmNQYah95kwEdL_Wk13TULfsXGlrWEecQUGTuDs4)
![스크린샷 2024-02-22 오후 10 49 11](https://private-user-images.githubusercontent.com/63188042/307020712-cdcc11ed-508b-46e8-9a0d-7391aad9e5f4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NzYzMTcsIm5iZiI6MTcyNDU3NjAxNywicGF0aCI6Ii82MzE4ODA0Mi8zMDcwMjA3MTItY2RjYzExZWQtNTA4Yi00NmU4LTlhMGQtNzM5MWFhZDllNWY0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI1VDA4NTMzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWZjYjlmMzcxYjQ2MjRhZDI0NTI4ZGM5ZGZlNWU4NGY1MTQ2ZjE3OGFjZjg4MTcwM2IzMjQ4NmIzNmUxNjYwZDAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ePMGuINK6t-C8x2l8Qj0Ra1Au4H-WDGYGcZCky8Blao)