슬로

웹 서버 : http+css 같은 static 내용 serving

WAS : 서버사이드 코드 실행을 통해 dynamic한 내용 serving

<웹 서버>

NGINX, Apache HTTP server 등

Apache HTTP server :

connection 요청마다 프로세스 생성 -> (C10K problem) : 요청이 많아져 connection이 많아지면 메모리 부족, CPU 부하 증가(context switching) // but 모듈구성으로 확장성 good

NGINX : async, event-driven approach. master process가 생성한 worker process들이 작업큐에 있는 작업을 처리하는 구조로, 요청마다 프로세스를 생성하지 않기 때문에 요청당 메모리 사용량 ↓, context switching 비용 ↓. (worker는 일반적으로 core 개수만큼 생성)  -> C10K problem 해결, 고성능  // but 설정이 비교적 자유롭지 x

웹서버를 단독으로 쓸때는 정적인 컨텐츠를 서빙하지만, 동적인 컨텐츠가 필요할 경우 WAS에 요청을 전달하여 여 처리(프록시 기능)

<WAS>

- DB 조회나 비지니스 로직 처리 등 동적인 컨텐츠에 대한 요청을 처리

Tomcat : Web server + Servlet 구동환경을 제공하고, Servlet의 생명주기를 관리하여 Servlet Container라고도 불림

Servlet : Java Enterprise Edition의 일부로서, HTTP 요청(GET, POST 등)을 받아 처리하고 HTTP 응답을 반환함.

Spring을 통해 작성한 소스코드 -> 컴파일 -> Servlet Container (Tomcat) 등록 -> HTTP 요청 올 시 Servlet Container(Tomcat) 이 Servlet을 찾고, 쓰레드풀에서 쓰레드를 가져와 처리 

웹 서버와 WAS를 따로 두는 이유 : Application Server가 비지니스 로직에 더 집중할 수 있도록 하기 위함, 부하를 분산 

AWS Elastic Beanstalk 무료버전을 사용해 지금까지 만든 웹페이지를 배포해보았다.

1.해외결제 가능한 카드 준비

2.Root 유저 가입

3.모든 권한이 있는 Root유저로 작업할 시 위험요소가 있으므로 IAM 사용자 생성

4.IAM 사용자 권한 부여

5.IAM 사용자로 로그인하여 작업

로컬에서 html, css, javascript를 사용해 웹페이지를 띄울 때 app.py파일, templates 폴더에 index.html파일이 있었다.

터미널의 프로젝트 폴더 작업공간에서

1. mkdir deploy    (deploy라는 폴더 만들어주기)

2. cp app.py deploy/application.py   (app.py를 deploy폴더 안의 application.py라는 파일로 복사)

3. cp -r templates deploy/templates   (templates 폴더를 deploy폴더 안의 templates 폴더로 복사)

4. pip freeze > deploy/requirements.txt    (내 가상환경에 설치된 라이브러리를 deploy 폴더안의 requirements.txt로 정리)

이후, 터미널의 작업공간을 deploy 폴더로 이동(cd deploy)후, aws에 올리는 작업 시작

1. application.py에 들어가서 app = Flask(__name__)  부분을 application = app = Flask(__name__)으로 바꿔준다

2. application.py의 마지막에 app.run('0.0.0.0', port=5000, debug=True) 부분은 로컬에서 작업할 때 썼던 부분이므로

     이 부분을 app.run()  으로 바꿔준다

3. 터미널에 pip install awsebcli

4. eb init

5. 위치는 서울찾아서하기 (mongoDB DB설정이랑 맞춰주는듯?)

6. 액세스 키 입력, application 이름 입력, 언어확인 나오는대로 하기

7. ssh key 만들기

8. eb create myweb

aws elastic beanstalk 서비스 가서 환경탭 눌러서 상태가 ON으로 나오면 완료!

이후 코드 수정은, 로컬에서 작업한 뒤, 변경사항을 deploy 폴더 안에 반영하고, 터미널에서 eb deploy myweb 해주면 끝

====================================문제발생===================================

AWS에 업로드가 되었는데 서버상태 심각으로,

100% requests are failing이라고 떴다. 그냥 페이지에 로드되는게 없다는 뜻인듯.

로컬에서는 아무 문제가 없었는데, 뭔지 모르겠다

==============================================================================

AWS에서 제공하는 로그탭에 나오는 로그의 에러메세지를 아무리 검색해도 해결방법을 찾을 수 없어 포기했었는데,

누군가가 터미널에 eb logs 로도 로그를 볼 수 있다고 알려주었다.

해당 에러메세지를 보고 application.py를 봤더니 

가 안되어있는걸 발견했다. 아마 바꾸고 저장을 안한 것 같다.

코드한줄에 3시간을 태운게 너무 허무했다.

myweb.eba-tr6mkvut.ap-northeast-2.elasticbeanstalk.com

오랜 삽질끝에 배포에 성공!

내일은 다른페이지 배포해보고, 기존에 만들었던 것들 기능추가 해줘ㅜ야겟다

<MongoDB>

몽고DB가입, 데이터베이스 생성후

파이썬 라이브러리 pymongo, dnspython 설치

[기본코드]

[삽입]

db.users.insert_one('dictionary')

[추출]

데이터 다 가져오기 : 

<Flask>

[기본 코드]

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():
   return 'This is mypage!'

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

- 실행시켜놓고 브라우저 열어서 localhost:5000 하면 페이지 뜸. 남들에게 배포된상태는X 나만볼수있음

- mypage함수의 route를 보면 /mypage임. localhost:5000/mypage하면 mypage함수를 불러옴

- route에 해당하는 함수 return 값에 html 태그를 넣어주면 페이지에 html이 표시되는데, return부분에 페이지 html을

다 담는 것은 좋지 않으므로 html파일과 연결시켜주어야 한다.

==> templates 폴더를 만들고 html파일 넣어놓고, app.py에서 flask의 render_template를 import해준다.

       이제 함수 return값에 render_template( '템플릿폴더안의파일이름.html' )

*프론트와 백엔드의 소통 방식*

GET방식 : 통상적으로 데이터를 조회(Read) 요청할 때 사용, 주소에 ?로 시작하는 부분

- get방식은 formData에 데이터를 태워서 보낼 수 없어서 query를 파라미터로 넘겨주는 방법을 사용해야한다는데,

아직 모르겠다. (추후 공부해서 업데이트)

POST방식 : 통상적으로 데이터를 생성(Create), 변경(Update), 삭제(Delete) 할 때 사용

eg) 회원가입, 회원탈퇴, 비밀번호 수정 등

-> 데이터 전달이 바로 보이지 않는 HTML

formData에 데이터를 태워서 보낼 수 있다.

=================== GET 요청 정리=====================

fetch요청의 기본값은 GET방식이며, /test에 GET 요청을 보내면 백엔드의 /test route에 해당하는

test_get()함수가 호출되고, 이 함수의 return값인 json데이터가 /test에 표시됨. 이 데이터는 fetch에 담겨 fetch 안 매개변수에 전달된다.

=================== POST요청 정리=====================

let formData = new FormData();

formData.append("video_submit", "video_url");

해당 코드는 /test라는 페이지로 POST요청을 보낼거고, 보낼 데이터는 formData임. 이게 request에 담겨서 보내짐.

보내게 되면 백엔드의 /test route에 해당하는 함수가 호출되고, 이 함수 내부에서 request.form['video_sumbit']을 찍어보면  "video_url"이 나옴.

이제 함수 내에서 서비스의 논리에 따라 video_url을 처리하고, return에 사용자에게 보낼 데이터를 return해주면, 프론트에 fetch 함수의 data 변수(위 코드상)에 이것이 담겨나오게 됨. 이제 프론트에서 이걸 사용자에게 보여주거나 하면됨

#############버튼을 클릭하면 사용자 입력이 백엔드로 전송되게 하고싶을때#############

사용자입력칸을 <input>태그 또는 <select>태그로 하고 id를 달아놓는다.

전송버튼을 만들어두고, button 태그의 onclick= "함수이름"에서 let temp = $(#'id이름')으로 데이터를 가져올 수 있고,

여기서 let 임시변수 = new FormData()        임시변수.apend('key값', temp) 이런식으로 FormData에 값 저장해서 백엔드로 날리기.

[FormData 메소드]

let formData = new FormData()

formData.append( name, value )

formData.append( name, blob, fileName )   : input type이 file인경우

formData.delete( name )

formData.get( name )

formData.getAll( name )

formData.has( name )     :  주어진 name에 해당하는 값이 있을경우 true, 없을경우 false 반환 

formData.set( name, value ) : 

formData.set( name, blob, fileName ) :     set도 append와 비슷하지만, append는 중복 가능, set은 덮어씌움

예시

<API 활용>

Youtube API로 영상 받아오기 : https://imslo.tistory.com/17

JSON으로 받아온 영상목록 forEach, append로 붙이기

결과

<웹스크래핑>

beautifulsoup4, selenium과 같은 파이썬 라이브러리들이 있음.

나는 beautifulsoup4 사용했다. Selenium은 동적 웹 크롤링에 좋은듯 ? (확실x)

네이버 플레이스 '클라이밍짐' 검색 후 나온 암장 리스트를 받아올 생각이었으나,

네이버 플레이스의 html에 iframe이 있어서 이를 크롤링하려면 Selenium을 이용해 크롬 드라이버를 변경 하고 ...~~~~.... 과정이 복잡해 그냥 비지니스 검색을 크롤링 하기로 함.

빨간 부분에 마우스 우클릭 -> 검사

몇 개 더 해보면, 비지니스 이름이 담긴 곳은 span 태그에 OSrXXb 클래스인 것을 알 수 있다.

import requests

from bs4 import BeautifulSoup

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}

data = requests.get('내가 검색한것의 주소',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

a = soup.find_all('span', {'class' : 'OSrXXb'})

 

requests 라이브러리 설치하고, requests.get('주소')를 통해 페이지 정보 받아오고,

BeautifulSoup(data.text, 'html.parser')를 통해 html로 파싱해준다.

 

a는 리스트인데, 각 element를 프린트 해주면

 

OSrXXb라는 이름을 포함한 클래스도 가져와버렸다.

클래스 이름이 OSrXXb가 유일한 것만 남기기

 

==================사고 발생========================

위와 같은 방법으로 검색되는 암장 이름과, 해당 암장의 별점, 위치, 전화번호를 가져오는데는 성공하였으나,

구글 지도 검색시 한 페이지에 사진이 같이 나오는 것이 아니고, 이름을 클릭하면 사진이 나오는 창(모달)이 새로 나오는 형태였다. Beautifulsoup4로 정적인 웹페이지는 쉽게 크롤링 할 수 있지만, 이렇게 클릭해야 정보가 새로 로드되는 경우 request로 받아온 url이 바뀌기 때문에 이를 처리해줄 수가 없었다. 약 5시간의 삽질 후, Selenium으로 하기로 결정, 이후 약 5시간의 삽질 끝에 성공한 내용을 다음 글에 쓸

Javascipt란 ?

=> 브라우저에 명령을 내리는 표준 언어로, Java와 관련X

=> html의 head 안에 <script></script>라는 태그에 쓴다

script 안에 function을 만들어주고,

button에 onclick했을 때 hey를 호출하도록 하기

<Javascript문법>

변수만들기:     let a = 1

함수만들기:     function name(){       }

리스트:            let lst = ['one', 'two', 'three', 'four']

리스트접근:     lst[0] 

딕셔너리:        let dic = {'name' : '영수',  'age' : 27}

딕셔너리접근: dic['name']

console.log() : print와 비슷한 역할. 브라우저의 개발자도구 -> console에 결과값이출력

반복문: iterable.forEach( (a) => { 수행할 동작 } )

조건문: if (조건 > 기준) { 수행할 동작 } else { 수행할 동작 }

문자열 표현 시, " 문자 " 보다 ` 문자 ` (백틱)로 표현하는게 더 유연한듯함. (문자열 내 줄바꿈 허용, ${변수} 를 통해 포맷팅 가능. 마치 파이썬의 f'문자열'같이)

<jQuery>

Javascript로 구현할 수 있는 기능들을 편리하게 해줄 수 있는 많은 기능들이 있는 라이브러리

import:   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>  </style>부분에 작성하며, $('#변수명').함수(인자) 이런식으로 사용가능.

변수명은 html 블록에 id로 지정할 수 있다.

div블록에 q1이라는 id를 주고,

style에서 이 변수에 대한 함수를 작성한 뒤, 안에 jquery구문 작성

q1의 텍스트를 '바꿀 텍스트'로, 색깔을 red로 바꿔주기

.append() 함수 자주쓰임 (데이터를 받아와서 html 만들어두고 html블록에 append해줄 때)

$( '#변수명' ).empty()   : 변수명에 해당하는 블록을 비워줌

$( '#변수명' ).append()

$(window).load()
: 해당 페이지의 모든 외부 리소스 ... 즉 모든 요소가 로드 된 후에 처리

$(document).ready()
: DOM 객체만 로드 되자마자 처리

<Fetch>

---문법---

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})

url은 데이터를 받아올 수 있는 url

=========fetch 예시코드=============

============jQuery, Fetch 연습==================

        $(document).ready(function () {
            setInterval(function () {
                // console.log('갱신')
                fetch("날씨 받아오는 url").then(res => res.json()).then(data => {
                    let temp = data['temp']
                    $('#weather').empty()
                    $('#weather').append(`${temp}˚C`)
    
                    let now = new Date()
                    $('#timenow').text(`${now.getHours()}시 ${now.getMinutes()}분 ${now.getSeconds()}초`)
                })

            }, 1000);  //1000은 갱신되는 시간으로, 1초 = 1000
        
           function submit_boulder(){
                alert('준비중임 ㅋ')
        }
        })

<div class = 'image_box'>

- 백그라운드 사진과 텍스트를 담은 박스

- width, height로 크기 조절,

- border-radius로 테두리 둥글게

- text-align 글씨 가운데 정렬

- padding으로 글씨 위치 조절 (padding한 만큼 width와 height도 변함)

- background-image로 url에서 이미지 가져오고, position, size로 박스 사이즈에 맞게 이미지를 보여주는 위치 조절

<div class = 'wrap'>

- 로그인박스와 ID, PW창을 묶어주는 div

- margin 옵션을 통해 이 div를 가운데로 옮겨줌 (auto 시 좌우 기준으로 가운데정렬)

- auto로 가운데정렬할 때 width가 정의되어있지 않으면 정렬이 안된다

- 여러가지 해봐도 상하 기준 가운데정렬은 안됨(다른 방법이 필요할 것으로 예상)

<폰트 씌우기>

google fonts : https://fonts.google.com/?subset=korean 

Select Regular 400

import에서 style 내부 복사 -> 내 코드 style부분에 붙여넣기

CSS rules to specify familites 부분 복사 ->

*{} 안에있는 부분이 적용하는 부분인듯 함 -> 일괄 적용이고, 이 부분에 대해서 좀 더 알아볼 필요有

<CSS파일 분리>

1.style부분 드래그해서, 생성한 style.css 파일에 붙여넣기

2.내 head 부분에 이 style.css를 가져오는 코드를 넣어줄 수 있음

코드가 깔끔해지는 부분도 있지만, 더 중요한 것은 남들이 작성해놓은 style(라이브러리)을 가져올 수 있다는 점이 핵심.

<유명한 CSS 모음 bootstrap 활용해보기>

bootstrap 홈페이지에서 오른쪽 위 점 세개 누르면 버전을 고를 수 있음

https://getbootstrap.com/docs/5.0/getting-started/introduction/

==> layout, content, component등 다양한 모음이 있다.

head에 이걸 복붙해주면 라이브러리 가져옴 

버튼 하나를 가져와서 LOGIN 버튼을 파랗고 귀엽게 만들어주었다.

<라이브러리를 활용한 페이지 만들기 연습>

bootstrap 라이브러리를 활용하여 간단한 웹 페이지를 만들고, github을 통해 배포해보았다.

버튼은 아무 기능 없지만, 배워가면서 업데이트 해볼 예정

https://mottoslo.github.io/web-rate_my_send/

<Web 동작원리>

브라우저의 역할 - 서버에 요청을 전달하고, 정보를 가져와서, 정보를 보여주는 역할

                              => 개발자도구에서 나에게 보여지는 네이버 페이지 수정가능, 새로고침하면 돌아옴, 와이파이꺼도 페                                       이지그대로

                              => 서버에 요청을 하면 HTML, CSS, Javascript를 받아옴  (front-end)