day9(4/28) TIL
day9 느낀점
오늘은 그전에 배운 내용에서 아주 조금 업그레이드 된 내용을 배웠다. 이미지 업로드, f-string 등 새로운 내용이지만 간단하게 익힐 수 있었다. 나 조금 웹이랑 친해진걸까?..ㅋ
웹서비스 동작 원리
클라이언트
클라이언트는 요청을 하는 쪽이다.
핸드폰이나 웹 브라우저 모두 클라이언트
서버
서버는 요청을 받는 쪽이다.
api
api라는 창구를 통해 서버는 요청을 받는다
api는 정해진 규칙이 있고, 규칙에 따라 요청에 대한 응답을 준다.
HTML,CSS,JS
HTML은 뼈대 / CSS는 꾸미기 / JavaScript는 움직이게 하는 것이다.
JQuery
JQuery는 JavaScript의 라이브러리로, HTML 조작을 쉽게 하는 것이다.
라이브러리는 임포트를해서 사용해야한다.
id 이름표를 붙여주고 그에 해당하는 값을 가져 올 수 있다. (id="아이디") -> $('#아이디').val()
Ajax
서버 통신을 위해 쓰인다.
$.ajax({
type: "GET",
url: "요청할 URL",
data: {},
success: function (response) {
// 서버가 준 데이터가 response에 있다.
}
})Flask
서버를 만드는 프레임워크이다.
이미지 전송
자바스크립트 파일업로드 라이브러리
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>파일 업로드 코드(자바스크립트 코드 시작하는 부분에)
bsCustomFileInput.init()서버 쪽 파일 받는 코드
file = request.files["file_give"]클라이언트 쪽 파일 보내기 코드
function posting() {
let title = $('#title').val();
let content = $("#content").val();
let file = $('#file')[0].files[0];
let form_data = new FormData();
form_data.append("file_give", file);
form_data.append("title_give", title);
form_data.append("content_give", content);
$.ajax({
type: "POST",
url: "/diary",
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
//파일 보낼때 기 세팅이 최적화 되지 않았을 수 있어 cache, contentType, processData false로 한다.f-string 과 datetime
f-string
myname = '홍길동'
text = f'내 이름은 {myname}입니다.'datetime
now = datetime.now()
date_time = now.strftime("%Y-%m-%d-%H-%M-%S")서버 환경 세팅 명령어
포트포워딩
80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000nohup 설정
: ssh 접속을 끊어도 서버가 계속 돌 수 있게 하기
원격 접속을 종료하더라도 서버가 계속 돌아가게 하기
nohup python app.py &서버 종료하기(주로 돌고있는 파일에 변경이 생길 경우 사용)
# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'
# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]
Hello World!!