웹개발 플러스 - 01주 개발일지

우진님·2021년 7월 17일

스파르타코딩클럽-웹개발 플러스

목록 보기

1/5

1. 나홀로일기장 `Lv.2` 만들기(준비)

30) 파일업로드 - 진행 할 순서!

잘 따라해주세요! 🤓
1. 서버 쪽에서 파일 받기 코드 먼저 작성
2. 클라이언트 쪽에서 파일 보내기 코드 작성
3. 잘 저장되나 확인
4. 파일 이름 변경해주기(날짜, 시간으로 - 겹치지 않게!)

31) 서버 쪽 파일 받기, 클라이언트 보내기 - 한방에

파일을 받을 땐 조금 특별한 코드가 필요해요 - 마찬가지로 외우지 않기!

[코드스니펫] - 서버 쪽 받기 코드

file = request.files["file_give"]

save_to = 'static/mypicture.jpg'
file.save(save_to)

[코드스니펫] - 클라이언트 쪽 보내기 코드

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()
        }
    });
}

2. 나홀로일기장 `Lv.2` 만들기(서버)

32) 파일 이름 변경해주기 전에 - 문법 연습

변경 전에, 우선 몇 가지 문법을 연습해볼까요? - test.py 파일을 만들어주세요!
1. f-string에 대해서 배워보자!
  - 알고 있으면 엄청 예쁜 코드를 쓸 수 있는 f-string
```
myname = '홍길동'
text = f'내 이름은 {myname}입니다.'
```
2. datetime 함수에 대해서 배워보자!
  - 더 많은 문법을 원한다면, 구글에 python datetime 사용법 이라고 치면 좌르륵!나옵니다
  - 예를 들면 이런 곳! (링크)
  - 날짜 시간을 다루는 함수!
  임포트하기
```
from datetime import datetime
```
  자주 쓰는 문법 - 1. 지금 날짜 시간 찍기
```
now = datetime.now()
print(now)
```
  자주 쓰는 문법 - 2. 날짜 시간을 원하는 형태로 변환하기
```
date_time = now.strftime("%Y-%m-%d-%H-%M-%S")
print(date_time)
```

33) 파일 이름 변경해주고 저장하기

우리의 전략 - 겹치는 이름이 있으면 안되니까, 날짜-시간으로 해줄거예요!

일단, 확장자를 빼내기

extension = file.filename.split('.')[-1]

새로운 이름을 만들어주기

today = datetime.now()
mytime = today.strftime('%Y-%m-%d-%H-%M-%S')

filename = f'file-{mytime}'

새로운 이름으로 저장하기

save_to = f'static/{filename}.{extension}'
file.save(save_to)

변경된 파일 이름을 db에도 저장하기

doc = {
    'title':title_receive,
    'content':content_receive,
    'file':f'{filename}.{extension}',
}
db.diary.insert_one(doc)

3. 나홀로일기장 `Lv.2` 만들기(클라이언트)

34) 카드에 만들어 붙여보기

우리가 이미 적어뒀던 코드를 약간만 수정하면 완성!

function listing() {
    $.ajax({
        type: "GET",
        url: "/listing",
        data: {},
        success: function (response) {
            if (response["result"] == "success") {
                let articles = response['articles']
                for (let i = 0; i < articles.length; i++) {
                    let title = articles[i]['title']
                    let content = articles[i]['content']
                    let file = articles[i]['file']

                    let temp_html = `<div class="card">
                                        <img src="../static/${file}" class="card-img-top">
                                        <div class="card-body">
                                            <h5 class="card-title">${title}</h5>
                                            <p class="card-text">${content}</p>
                                        </div>
                                    </div>`

                    $('#cards-box').append(temp_html)
                }
            }
        }
    });
}

35) 잘 작동하는지 확인!

확인해봅시다!
- 에러가 뜬다면? → 먼저 개발자도구의 console을 확인하고, 서버(app.py)를 확인하기!

위에 코드들은 나만의 일기장 사진파일 받아오는 방법의 코드들이니 꼭 다시한번 읽어야함.

4. AWS - EC2 세팅하기

39) filezilla로 접속하기

파일질라 실행, 다음과 같이 설정

정보들을 입력하고, ok 누르면 서버의 파일들을 볼 수 있음
(Host: 내 EC2서버의 ip // User: ubuntu 로 입력)

![https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c91661f0-1274-4f35-b9c2-3a09879a0b09/Untitled.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c91661f0-1274-4f35-b9c2-3a09879a0b09/Untitled.png)

40) EC2 세팅하기
- [코드스니펫] - EC2 한방에 세팅하기
```
[initial_ec2.sh](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d3623fe8-8b17-45d1-bb70-304e88dfb537/initial_ec2.sh)
```
  파일질라로 업로드하고, git bash(또는 터미널)에서 아래 코드를 차례대로 입력해주세요.
  
  3분 정도 기다리면 모든 세팅이 완료됩니다.
```
sudo chmod 755 initial_ec2.sh
```
```
./initial_ec2.sh
```

이후 혼자서 개발할 때 꼭 읽어봐야함

5. 포트포워딩

45) 포트 번호를 떼고 접속해봅니다!

앗, 어떻게 되는걸까! → 아까 세팅해뒀으니까요~! 🤗
```
http://내AWS아이피/
```
46) 포트 번호 없애기 - 기본 개념

우리는 이미 포트포워딩 세팅을 해뒀기 때문에, 여기서는 개념만!
- 지금은 5000포트에서 웹 서비스가 실행되고 있습니다. 그래서 매번 :5000 이라고 뒤에 붙여줘야 하죠. 뒤에 붙는 포트 번호를 없애려면 어떻게 해야할까요?
- http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동으로 연결이 됩니다.
- 포트 번호를 입력하지 않아도 자동으로 접속되기 위해, 우리는 80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩(port forwarding) 을 사용하겠습니다.
- 리눅스에서 기본으로 제공해주는 포트포워딩을 사용할 것입니다. 그림으로 보면 아래와 같습니다.

포트포워딩의 개념을 꼭 알아야함

6. nohup 설정하기

47) SSH 접속을 끊어도 서버가 계속 돌게 하기
- 현재 상황
  
  Git bash 또는 맥의 터미널을 종료하면 (=즉, SSH 접속을 끊으면) 프로세스가 종료되면서, 서버가 돌아가지 않고 있습니다. 그러나 우리가 원격접속을 끊어도, 서버는 계속 동작해야겠죠?
- 원격 접속을 종료하더라도 서버가 계속 돌아가게 하기
```
# 아래의 명령어로 실행하면 된다
nohup python app.py &
```
- 서버 종료하기 - 강제종료하는 방법
```
# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'

# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]
```
- 다시 켜기
```
nohup python app.py &
```
48) SSH 접속을 종료한 뒤, 접속해봅니다!
- 브라우저에서 접속하기
```
http://내AWS아이피/
```

ec2를 구매하고 git brash로 nohup python app.py & 를 꼭 해주자!
끌때는 ps -ef | grep 'app.py' 하여 app.py 찾아
kill -9 [포트번호?] 쳐서 app.py 끈후
파일질라에서 업데이트 코드올리기

우진님

안녕하십니까

다음 포스트

웹개발 플러스 - 01주 개발일지

스파르타코딩클럽-웹개발 플러스

1. 나홀로일기장 `Lv.2` 만들기(준비)

2. 나홀로일기장 `Lv.2` 만들기(서버)

3. 나홀로일기장 `Lv.2` 만들기(클라이언트)

4. AWS - EC2 세팅하기

5. 포트포워딩

6. nohup 설정하기

웹개발 플러스 - 02주 개발일지

0개의 댓글

관련 채용 정보

웹개발 플러스 - 01주 개발일지

스파르타코딩클럽-웹개발 플러스

1. 나홀로일기장 Lv.2 만들기(준비)

2. 나홀로일기장 Lv.2 만들기(서버)

3. 나홀로일기장 Lv.2 만들기(클라이언트)

4. AWS - EC2 세팅하기

5. 포트포워딩

6. nohup 설정하기

웹개발 플러스 - 02주 개발일지

0개의 댓글

관련 채용 정보

1. 나홀로일기장 `Lv.2` 만들기(준비)

2. 나홀로일기장 `Lv.2` 만들기(서버)

3. 나홀로일기장 `Lv.2` 만들기(클라이언트)