(1교시)
숙제 리뷰 하심
1. 처음에 인스턴스 설정할 때 왜 http와 https를 추가해주는지?
-이유 말해주셨는데 까먹음
- 포트는 컴퓨터와 컴퓨터를 연결하는 통로임. 80번 포트를 쓰면 다른 컴퓨터에서 다 접속할 수 있음.
그외에는 다 방화벽을 세워서 다른 컴퓨터에서 못들어옴
2. 마리아디비 버전 설정해주는 이유
- 버전 설정 안하고 하면 접근 권한 없다고 에러 뜸. 이럴때 앞에 sudo 붙이면 들어갈 수 있는데, (관리자 계정)
버전 설정을 해주면 패스워드를 바꿔줄수있음. 패스워드 설정해서 ubuntu 계정으로도 들어갈 수 있음.
---------------------------------------------
(서버 접속된 상태에서)
내가 ssh 서버에서 나오면 아이피로 들어간 사이트가 끊김.
내가 연결을 끊으니까 끊김!!
오늘은 이 문제 해결해서 서버를 제대로 돌릴거라고 함
----------------------------------------------
sudo node server.js &
서버가 돌아가는데 다른 코드도 칠 수 있음!
백그라운드에 돌려놓는다는 뜻.
이상태로 터미널에서 나와도 서버가 계속 돌아가고있는것임.
그럼 이걸 어떻게 끔?
ps -ef
(작업관리자 여는 명령어임 선생님은 ps -ef | grep 이라고 쓰셨는데,, 그냥 저렇게 써도 된다고 함)
해주면 막 쫘라라락 뭐라고 리스트 뜸
상태에서
sudo kill -9 <끄고싶은 서버의 pid 값>
해주면 그 서버 꺼짐
--------------------------------------------
(로컬 pc 터미널로)
npm install pm2
선생님은 터미널 local_back 이라고 하나 새로 만들어주심
그다음
pm2 start
실행 시켰더니 오류남.
package.json으로 가서
이렇게
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"pm2 start server.js"
},추가해주기
npx pm2 start server.js[요거는 파일명]
서버 실행 (이거는 서버를 백그라운드에서 돌려놓은건가>)
npx pm2 stop server[이부분도 파일명인데 확장자 빼고]
서버 중지
sudo npx pm2 kill
서버 지우기. 삭제
npx pm2 start server.js
npx pm2 monit
이거 찍으면 로그가 나온다고 함.
종료하려면 컨C 눌러주면 됨..
--------------------------------------
다시 서버 컴퓨터로 가서 (리눅스 터미널)
pwd
ls
ls -al
로 현대 디렉토리와 상태 확인을 해준뒤
sudo npm install -g pm2
설치해주기
sudo npx pm2 start server.js
해주면
이런 식으로 뜸.
package.json 파일을 수정해줘야한다고 함. (이유를 말해주셨는데 못들음)
vi package.json
으로 열어줘서
script 부분에 i 눌러서
,"start" : "sudo pm2 start server.js"
추가해주기 (앞에 test 있으니깐 콤마 붙이는거 잊지말기)
이제 ESC 누르면 저장됨
:wq!
해준 뒤
npm run start
이 표를 다시 확인하고싶을때는 npx pm2 list
npx pm2 start server.js
해주면 실행됨
최종 확인해야 할 것은
아이피 주소로 들어갔을때 화면 보여야 함.!!
인스턴스에 가보면
내 사이트의 아이피는
http://3.128.199.228/
----------
근데 이게 백그라운드에서 돌아가고있는게 맞는지 확인하려면..? 어케 함
===========================
(3교시)
postman 이라는 툴을 사용해본다고 함.
userid
userpw
username
애네들을 사용한다고 하면
중간에 테스트를 해볼수있는 툴이있다고 해봄
request method 가 post 일때가 난감함.
postman 내가 포스트값을 편하게 테스트 해볼수있는 툴.
화면 없이 back단 먼저 만들어 둘 수 있게함!
프론트 -> 백 (요청)
백-> 프론트 (응답은 json 형태로 ex- result:"ok", msg:"로그인 성공")
이런 형태를 restful api 라고 합니다.
이때 post 는 form 에다가 데이터값을 줘야해서 화면 그릴때까지 기다려야 함.
postman 이용하면 화면을 기다릴 필요가 없음.
--------------------------
google에 postman 검색- postmanDownload
구글 아이디로 회원가입 가능
myworkspace- new workspace
현재 로컬 백에서 서버가 돌아가고 있다면 거기에 해당하는 화면 내용이 나옴
우측 상단에 save 누르면 url 값을 저장해놓을 수 있다.
아 node server.js 실행 시켜서 다시 요청 보내보니깐 나옴..
이제 이상태에서 바디 내용에 담아서 보내고 싶다면
데이터 내용을 적어주고 요청을 보내면 바디에다가 이 내용을 싣고 보내게 됨.
내 postman에서 작성해봤는데
왜 이렇게 나오고 선생님처럼 밑에 제이슨 데이터 들이 안나오지??..
데이터를 바디에 담아서 보내줬는데,, 여기서 뭘 어떻게 확인해야 되는지 모르겠슴.
------------------------------------
(4교시)
Restful API
request method type
1. GET : 데이터를 가져올때 (CRUD 로 치면 R) select문
2. POST : 데이터를 입력할 때 (C) insert문
3. PUT : 테이터를 수정할 때 (U) update문
- 대부분 patch를 써서 수정하려하고 put 을 쓰는경우는 매우 드묾
4. DELETE : 데이터를 삭제할 때 (D) delete문
5. PATCH : 데이터를 일부 수정할 때 (U) update문
6. OPTIONS : 요청을 체크
7. HEAD : 데이터를 request message header만 받아올 때//회원가입 url 만든다면
app.post ('user/join',(req,res)=>{
})
//회원 정보 url
app.get('/user',(req,res)=>{
})
//회원 수정
app.patch('/user/modify',(req,res)=>{ //리퀘스트 메소드만 바꿔주면 됨~ patch로
})
//회원탈퇴 url
app.delete('/user/delete',(req,res)=>{
})원래 같으면 회원 탈퇴 url 만든다고 하면
app.get('user/userinfo_delete') 이런식으로 써야하는데
위의 코드블럭처럼 레스트 api 사용하면, 더 직관적으로 표현 가능!
근데 rest api 종류가 세부적으로 가면 엄청나게나게나게나게 많다고 함!! 그거에 현혹되지말고 필요한것만 사용하면 된다고 함. 실제로 개발 할때는 정말 쓰는것만 쓴다. 막상 post로만 써도 구동은 됨.
코드를 직관적으로만 볼 수 있게 해주면 됨!
-----------------------------------
Restful API 만들어보기
-리액트로 만든 댓글 화면이랑 DB와 연결해볼거라고 함.
그러기 위해서는 front server 와 back-end server 필요
지금 back은 실서버를 구동하고 있지만 front는 구동하고있지 않음.
그래서 일단은 로컬에서 작업을 해볼것임
DB와 연결하는것이 완료가 되면
내가 프론트에서 텍스트 쓰면 데베에 넣어지고 브라우저에도 나오게
-----------------------------------
* 씨퀄라이즈를 사용한다고 함
PS C:\Users\82102\OneDrive\바탕 화면\AWS\back (back 폴더에다가 설치)
>npm install sequelize
npm install sequelize-cli
npm install mysql2
npx sequelize init (sequelize 폴더생성)
-여기서 config/ models/seeder 폴더가 생성되었는지 확인
-config 폴더에서 config.json 을 수정 (해당 정보에 맞게- 아직 만들진 않았지만 일단 database : react-comment)
그리고 cmd 에서 데이터베이스 만들어줘야 함!
-models 폴더 안에 comment.js 파일 생성 (DB 모델을 만들기 위해서)
module.exports = (sequelize,DataTypes)=>{
const Comment = sequelize.define('Comment',{
},{
})
return Comment
}두,세번째 인자값은 객체로~ 그리고 마지막에 변수를 리턴!
괄호 안에 세팅을 해주자
module.exports = (sequelize,DataTypes)=>{
const Comment = sequelize.define('Comment',{
userid :{
type:DataTypes.STRING(30),
allowNull:false,
},
content:{
type:DataTypes.TEXT,
allowNull:false,
},
data:{
type:DataTypes.DATE
},
},{
charset:'utf8mb4',
collate:'utf8mb4_general_ci'
})
return Comment
}-models 안에 있는 index.js 설정 (필요 없는 코드 부분은 빼주고 필요한거 추가)
const Sequelize = require('sequelize');
const env = process.env.NODE_ENV || 'development';
const config = require(__dirname + '/../config/config.json')[env];
const db = {};
const comment = require('./comment')
let sequelize;
if (config.use_env_variable) {
sequelize = new Sequelize(process.env[config.use_env_variable], config);
} else {
sequelize = new Sequelize(config.database, config.username, config.password, config);
}
db.Comment = comment(sequelize,Sequelize)
Object.keys(db).forEach(modelName => {
if (db[modelName].associate) {
db[modelName].associate(db);
}
});
db.sequelize = sequelize;
db.Sequelize = Sequelize;
module.exports = db;뜬금없는 오류해결 Tip
바로바로
<! powershell 터미널에서 - 경로 입력시 띄어쓰기 때문에 발생하는 오류 해결 !>
C:\Users\82102\OneDrive\바탕 화면\ReactPractice
경로로 들어가야 하는데
바탕 화면 부분을 그대로 터미널에 치면
요렇게 된다!
띄어쓰기 때문에 오류가 발생하는것 같은데, 이 경우에는 간단히
따옴표로 >바탕 화면< 전체를 감싸서 해결 가능!
간-단
'React.js' 카테고리의 다른 글
| [1128] react CopyToClipboard - 클릭시 텍스트 복사하기 (0) | 2021.11.29 |
|---|---|
| [1116] react 마감시간 정하는 기능 - datepicker 사용하기 (0) | 2021.11.16 |
| [0930] 코인 거래소 만들기 - next.js를 이용한 뼈대 만들기 (0) | 2021.09.30 |
| [react] react-13/ AWS 콘솔 설정/ AWS를 이용한 배포/ 리눅스 설치 명령어/ vi 에디터 (0) | 2021.07.16 |
| 6.28 리액트 시작 (2) | 2021.06.28 |