비전공자가 Chat GPT만 가지고 영작 연습 웹사이트 만들 수 있을까?

-

 GPT4로 영작 사이트 만들기

01. 개요 물어보기

- OOO한 웹사이트를 만들 예정이다.
- 주 목표는 문장으로 영어를 공부하는 것이다.
- MongoDB에 예문을 저장하고 불러올 것이다. (예시)
- 데이터베이스에 있는 예문 중 하나를 랜덤으로 불러온다. (한국어)
- 유저는 영작을 해야하며, 일치하면 넘어가고 아니면 다시 한다.
- 힌트 버튼을 누르면 주어와 동사를 알려준다. (삭제)

어떻게 만들어야할지 상세하게 알려줘라!

chatgpt 대화내용


1. Choose a technology stack
2. Set up the development environment
3. Create the backend
4. Create the frontend
5. Test the website
6. Deploy the website
7. Populate the database



일단 각각의 단계와 단계별 간단한 설명을 제공 받았다.

1. mongoDB, Express, React, Node.js (MERN) 설치 및 환경 설정.

1.1 https://nodejs.org/ 에서 Node.js 설치
- 이미 설치되어 있어서 PASSSSS!

1.2 리액트로 프론트엔드 만들기
- 터미널에 npx create-react-app english-practice 입력 후 리액트 폴더 생성
- cd english-practice 로 폴더 접속
- npm start 로 리액트앱 실행 (브라우저 주소 http://localhost:3000)

1.3 Node.js와 Express로 백엔드 만들기
- cd backend 명령어로 english-practice > backend 폴더에 접속
- npm init -y 입력
- npm install express cors mongoose dotenv - 필요 파일 설치
- backend 폴더 안에 server.js 파일 생성

1.4 frontend와 backend가 함께 작동하도록 설정
- npm install ‑‑save‑dev concurrently nodemon 입력
- backend/package.json 파일에 스크립트 추가
"scripts": {
  "start": "node server.js",
  "server": "nodemon server.js",
  "client": "npm start --prefix ../",
  "dev": "concurrently \"npm run server\" \"npm run client\""
},

1.5 frontend backend 서버 구동
- backend 폴더에서 npm run dev 명령어 입력 (http://localhost:3000에 실행됨)

 


2. Frontend UI 디자인 및 backend와 연결하기

2.1 src 폴더에 components 폴더 생성하고 그 안에 MainPage.js 파일 생성
2.2 MainPage.js에 GPT로부터 제공받은 코드 추가
2.3 MainPage.css에 GPT로부터 제공받은 코드 추가
2.4 src/App.js 파일에 제공받은 코드 추가

 

 

3. frontend와 backend API 연결하기

3.1 Axios 설치 npm install axios  
3.2 utility 파일 만들기
- src 폴더에 utils 폴더 생성 후 api.js 생성
- 제공받은 코드 api.js에 추가
3.3 MainPage.js 파일 코드 변경 (fetch 추가)

 


4. backend API endpoints 생성

4.1 backend 폴더에 routes.js 파일 생성 (Express 서버를 위한 API routes를 포함(?))
4.2 routes.js에 제공 받은 코드 추가
4.3 server.js 파일 코드 업데이트 (API routes 추가)

 


5. 웹사이트 테스트

5.1 english-practice 폴더에서 npm start 명령어 입력 (localhost:3000 접속하면 보임)
5.2 backend 서버 구동
- backend 폴더에서 node server.js 명령어 입력 (backend API는 localhost:5000 접속)
5.3 localhost:3000에서 웹사이트 작동 확인

 


6. 결과




위치: 대한민국 서울특별시

댓글

댓글 쓰기

이 블로그의 인기 게시물

자바스크립트 if문 더 간결하게 쓰는 방법, 들여쓰기(indentation) 생략

-
자바스크립트 if문 더 간결하게 쓰는 방법 들여쓰기 생략하기 첫 글자에 들여쓰기를 하면 모니터로 볼 수 있는 화면이 그만큼 작아지기 때문에 보기 힘들다. 이 때 indentation (들여쓰기)를 생략해주면 좋다. #1 if (수정 전) function checkSpeed ( speed ) { const speedLimit = 70 ; const kmPerPoint = 5 ; if ( speed < speedLimit + kmPerPoint ) console . log ( ' Ok ' ) ; else { const points = Math . floor ( ( speed - speedLimit ) / kmPerPoint ) ; if ( points >= 12 ) console . log ( ' License suspended ' ) ; console . log ( ' Point: ' , points ) ; } } if와 else를 쓰면서 else 뒤로는 다 들여쓰기 가 적용되어 있다. const points = Math . floor ( ( speed - speedLimit ) / kmPerPoint ) ; if ( points >= 12 ) console . log ( ' License suspended ' ) ; console . log ( ' Point: ' , points ) ;
자세한 내용 보기

자바스크립트 깔끔한 코딩을 위한 필수 개념

-
 하나의 function에는 하나의 역할만!! 한 사람은 하나의 역할만 한다. 식당에서 홀은 홀 담당, 주방은 주방 담당인 것처럼 코딩에서 하나의 함수는 하나의 역할만 하게 만드는 것이 중요하다. 그래야 재사용 가능하고, 수정이 용이한 코드를 만들어낼 수 있다. 예제 Example 수정 전 showPrimes ( 20 ) ; function showPrimes ( limit ) { for ( let num = 2 ; num <= limit ; num ++ ) { let isPrime = true ; for ( let factor = 2 ; factor < num ; factor ++ ) { if ( num % factor === 0 ) { isPrime = false ; break ; } } if ( isPrime ) console . log ( num ) ; } } 수정 전 showPrimes 함수에는 2부터 limit까지 숫자를 반복해서 소수이면 출력하는 역할과 들어온 숫자가 소수인지 판단하는 역할, 총 2가지의 역할이 있었다. 이는 가독성이 좋지 못한 코드다. 수정 후 showPrimes ( 20 ) ; function showPrimes ( limit ) { for ( let num = 2 ; num <= limit ; num ++ ) { if ( isPrime ( num )) console . log ( num ) ; } } function isPrime ( num ) { for ( let factor = 2 ; factor < num ; factor ++ ) { if ( num % factor === 0 ) { return false ; } return true ; } ...
자세한 내용 보기