내일배움캠프_미니프로젝트_팀소개SA(Starting Assignments) 2일차

 

프로젝트 명 : 팀 소개 페이지 제작

사용하는 언어 : 파이썬, Html, css, JS

사용하는 패키지 : 파이썬-flask, mongoDB

 

 

여태까지는 하나의 프로젝트 당 하나의 Html(index.html) 을 랜더링 해 왔다.

----

@app.route('/')
def home():
   return render_template('index.html')

----

왜냐하면 연습하는 과정에서 클라이언트와 서버가 어떻게 통신을 하며 어떻게 데이터를 주고 받는지 배워야 했기 때문이다.

허나 팀 소개 페이지 제작 프로젝트에서는 가장 처음 도메인으로 접속 시 보여주는 home 페이지와는 별도로 팀원들 개개인을 소개하는 페이지를 추가적으로 보여줘야 한다.

 

<div class="card" style="width: 19%;" onclick="location.href='#';">
  <div class="card_img" style="background-image: url('../static/image/LEEJAEKWAN.png'); background-position: 10% 100%"></div>
  <div class="card-body">
      <p class="card-text">
      이름  : 이재관<br/>
      취미  : 유튜브 감상<br/>
      MBTI : INTJ<br/>
      TMI  : 코로나로 인한 컨디션 저하<br/>
      </p>
  </div>
</div>

해당 div 태그는 home 페이지에서 팀원의 사진과 간략한 정보를 보여주는 일종의 카드 형식의 태그이다.

이 카드를 클릭하여 onclick 이벤트가 발생할 경우, 해당 팀원의 개인 소개 페이지로 주소를 이동해야 한다.

 

 

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/minsoo')
def minsoo():
    return render_template('index.html')

우선 새로운 route 를 만들어 줘야 한다. 

클라이언트와 서버는 항상 request, response 를 주고 받으며 서로 소통한다. 

로컬 환경에서 초보적인 html 을 연습할 경우 <a href="index.html"></a> 이렇게 html 페이지를 넘어갈 수 있겠지만,

실제 서비스에서는 사용자가 프로젝트를 통째로 다운받아서 html 을 열람하는 것이 아닌, 그 때 그 때 부분적으로 클라이언트가 

'이 html 을 보여줘' 라고 보내는 요청에 따라 해당 주소만을 클라이언트가 response 하여 전송해 준다.

 

따라서 클라이언트는 카드를 클릭할 시 '이 팀원의 개인 소개 페이지를 보여줘' 라고 서버에 요청하는 것이고,

클라이언트는 /minsoo 라는 주소로 요청을 받아 html 을 보여줘야 한다.

 

 

<div class="card" style="width: 19%;" onclick="location.href='/minsoo';">
  <div class="card_img" style="background-image: url('../static/image/minsoo.jpeg')"></div>
  <div class="card-body">
      <p class="card-text">
      이름  : 김민수<br/>
      취미  : 유튜브 감상<br/>
      MBTI : ???<br/>
      TMI  : 적성검사 무조건 공무원<br/>
      </p>
  </div>
</div>

 

클라이언트는 onclick 이벤트가 발생 시

location.href='/minsoo'

 라는 키워드를 사용하여 서버측으로 '/minsoo 라는 주소를 호출하여 내가 원하는 페이지를 로딩해달라' 라고 요청한다.