07/22(목) 스파르타 대학생 코딩 불꽃반 4강

1. Flask 프레임워크

로컬 개발환경, 그리고 클라이언트와 서버가 서로 요청을 주고받는 것을 직접 코딩을 통해 구현하면서, 좀 더 직관적 이해가 됐다.

 

프레임워크와 라이브러리 차이. 라이브러리는 한파일에 여러개 사용가능하지만, 프레임워크는 대개 한개. 프레임워크를 쓰면 프레임워크에서 정한 규칙 안에서 작성해야한다는 것!

 

@app.route('/mypage') / 사용자가 입력한 url에 따라서, 이 api 코드중 어디로 이동할지가 정해짐. /뒤에 url 주소가 써있는데 해당 url을 입력했을시에는 그 아래에 있는 함수가 실행된다.

ㄱ플라스크 내장함수 render_template을 통해서 html파일을 불러온다는 거. 그래서 / 뒤에 아무것도 없는 즉 루트 페이지 메인페이지 url로 접속했을땐 해당부분 함수내에 있는 render_template을 통해서 html파일을 불러오는!

 

데이터 조회를 할때와, 데이터 생성,변경 , 삭제 할떄에 따라 클라이언트 요청하는 방식이 다르다는 거

 

2. 모두의 책리뷰 API만들고 클라이언트에 연결

 

리뷰 저장:

클라이언트가 요청방식과, 요청 url을 api에 주고, 거기에 더해 데이터(ex. 인풋박스에 사용자가 삽입한 데이터를 제이쿼리 이용해서 val 값 가져와서 변수에 넣음 이변수를 넘겨줌) 같이 넘겨주기도 한다. 

그럼 api는 클라이언트가 보낸 url,방식에 맞는 코드 부분으로 이동하고, 클라이언트가 준 데이터 정보들을 코드가 짜진대로 처리를 한다.(ex. 해당 데이터 변수에 담고, 이 변수를 딕트에 담아 이 딕트를 db에 저장하기) 그리고 이게 성공했을 경우 클라이언트에 다시 반환값을 준다. 성공메시지 등.

 

리뷰 보여주기:

클라이언트가 겟방식으로 요청을 한다 url만 지정해서

겟방식의 경우, 데이터를 클라이언트가 요청하진 않아. 그래서 api단에서는 db에 저장된 데이터들을 가져와서 변수 에 담고, 이 변수를 클라이언트에 보내주면 되는 거임.

그럼 클라이언트는 성공시 response를 통해 api가 제공한 정보를 받아오고, 그 데이터에서 필요한 것들을 뽑아서 쓰면 됨. 받아온 데이터를 html 추가 시키는 것도 가능!

페이지 새로고침: window.location.reload()

 

3. 나홀로 메모장 API 만들고 클라이언트에 연결

 url 만 가지고 meta 태그를 활용해서 여러정보를 긁어올 수 있다는 사실이 신박. 그리고 우리가 메신저를 사용할때 썸네일요약 등이 나오는 것도 이 meta태그 내의 og 를 활용한것이라는 것. 바로 안나오는 경우 'meta[property="og:image"]') 이런식으로 태그내 속성= "" 을 같이 써줌으로써 요소 지정도 가능하다.

 

서버부터 짤땐, 일단 클라이언트에게 전달 받게되는 정보가 무엇인지 부터 파악하기!

또 그 받은 정보로 부터 추가적인 값들을 추출 할 수 있는 경우(ex. url 정보 바탕으로 크롤링해서, 영화제목, 요약 등등의 데이터 추출가능) 이를 활용하기. 클라이언트로 부터 받은 url을 api내 코드에 크롤링 코드에 바로 삽입.

 

태그내 속성값으로도 &{} 삽입 가능

 

4. 숙제 쇼핑몰 만들기

몽고디비가 자주 꺼져서, 이를 수동으로 키는 법 배움. api,클라이언트 모두 /url 부분이 잘 되어있는지 확인하는게 매우 중요하다고 느낌. 이를 위해서 서버 클라이언트 연결 확인을 먼저해야겠다는 생각을 하게 됨.

 

5. 전반적 느낀점

클라이언트가 api를 통해 서버에 정보를 요청하고 주고 받는다는게 머릿속으로는 이해가 됐었는데, 막상 이렇게 구현해보는 것은 또 다르구나, 그리고 확실히 구현해봄으로 이해하는 점들이 있다고 느꼈다. 앞으로도, 이쪽 길로 갈것이라면 깊게는 아니더라도 이렇게 기본적인 부분들은 해보는 것이 필요하다고 느꼈다. 그래서 앱쪽도 공부해보고 싶다고 느낌.

기능 한가지 추가하는 게, 페이지 하나 추가하는게 쉬운일이 아니라는 걸 느끼면서 개발자에게 요청할때 무책임한 요청을 자제해야겠다는 것. 그리고 최대한 기존에 했던 것을 활용해서 할 수 있는 부분을 요청하는게 개발자 입장에서도 좋지 않을까 하는 생각이 들었던 것 같다. 

url을 사용자가 입력하면, 그에 맞는 연관된 정보들을 크롤링 한뒤 디비에 저장하고 이를 다시 클라이언트 단에서 보여주는 작업이 매우 인상적. 이를 플젝 할때도 활용하고 싶다. 

 

6. 기타 활동_ 인액 회장단 방향성 발표 피피티 만들기

오늘 했던 작업은 먼저 워드로, 발표한 내용을 정리한뒤 이를 피피티로 구현하는 작업을 했다. 말하고 싶은 방향성의 요소는 다양한데 이를 몇개로 묶는 작업. 그리고 너무 길어지지 않게 하는 작업. 또 이를 피피티로 시각화 할때 각 파트마다 적합한 방식을 택하고, 그리고 페이지간 디자인이 너무 똑같지 않게 구성하는 작업을 했다. 기존에 공부했던 아이콘 활용, 선 활용, 이전에 버블차트 디자인 등등을 활용해서 만들 수 있었다. 배운거 남주지 않아~ 

낼 오전에 발표연습도 좀 해봐야지!