내일배움캠프 4기_미니프로젝트 2일차 TIL

내일배움캠프 4기_미니프로젝트 2일차 TIL

 

미니프로젝트 개인 페이지만들어보기

미니프로젝트로 조원을 소개하는 프로젝트를 만들게 되었습니다.

이 과정에서 스스로 해결한 내용을 작성하고자 합니다.

---

 

📌 Pycharm  가상 환경설정

 

처음에 그냥 5ColorBird이름의 빈폴더를 만들고 open해주니 venv파일이 없어서 당황했습니다.

venv파일

부랴부랴 다시 스파르타코딩클럽 강의를 재수강! venv파일을 추가해줬습니다.

[location]에 '\venv' 추가

[base interpreter] python버전 3.8 확인

그리고 폴더 열어주면 정상적으로 venv파일이 생성된걸 확인할 수 있습니다.

 

다음과 같은 방식으로해도 가상환경이 설정되지만, venv파일을 생성 하시는 걸 추천합니다.

interpreter show all

[Setting]-[python Interpreter]-[show All..]

 

virtual environment 추가

[Associate this virtual environment with the current project] 체크버튼 체크!

---

📌 html에 이미지 삽입

폴더구성

📄 yellow.html

<img src="../static/image/TIL.png"/>

저는 현재 templates 폴더내에 yellow.html파일에서 TIL.png 사진 파일을 삽입하고 싶었습니다.

그래서 상위폴더로 넘어갈 수 있게 ../앞에 붙이고 나머지 폴더 내에 이미지 파일로 파일 경로 작성해주니 TIL.png 이미지가 잘 삽입되는 걸 확인할 수 있었습니다.

만약 yellow.html파일과 같은 위치에 있다면 src="TIL.png"라고 작성해도 이미지가 잘 삽입됩니다.

파일 경로는 상위폴더로 가는지, 하위폴더로 접근하는지에 따라 달라집니다.

 

 

📌 이미지 클릭시, 사이트 이동

📄 yellow.html

<a href="https://pangeei-h.tistory.com/">
    <img src="../static/image/TIL.png"/>
</a>

---

📌 부트스트랩 grid 설정

 

부트스트랩이란?

CDN 

Content Delivery Network
누군가 올려둔 css를 링크를 통해 접근해 우리가 사용하는 것!

 

Grid system

부트스트랩을 활용해서 팀원들과 어제 만든 와이어 프레임을 구상해보기로 했다.

와이어프레임

<style>
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
</style>

 

css 설정 중 flex-direction [row/column] 옵션을 활용해서 이걸 다 수정하려고 하니, css가 너무 길어지는 느낌이고 원하는 프레임도 아니어서 구글링과 유투브 검색을 했다.

그러던 중 발견한 부트스크램에서 제공하는 Grid system!

 

부트스트랩 grid system

 

 [Layout]-[Grid]

 

bootstrap grid 12의미

bootstrap은 페이지 한줄의 크기를 12라고 봅니다.

그래서 <div class="col-lg-3"></div> 이런식으로 largesize(웹페이지)로 봤을 때 3크기로 설정.

<div class="col-md-2"></div> 이런식으로 medium(웹페이지나 모바일) 봤을 때 2크기로 설정.

 

와이어프레임 grid로 표현

 

저희 조의 조원 소개 페이지 구성!

grid응용 div 구조

따라서 다음과 같이 구성!

grid 적용 조원소개페이지 구성

깔끔한 layout으로 원하는 형태 html 구성!

 

---

📌 서버 구동시 페이지 이동

 

📄 app.py

# 메인 화면
@app.route('/')
def home():
    return render_template('index.html')

# 이동 화면
@app.route('/yellow')
def getYellow():
    return render_template('yellow.html')
    
# 이동 화면에서 구현되는 api기능들
@app.route("/yellow/homework/click", methods=["POST"])
def remove_comment():
    num_receive = request.form['num_give']
    db.visitorbook.update_one({'num': int(num_receive)},{'$set':{'click':1}})

    return jsonify({'msg': '삭제 완료!'})

route와 함수 이름을 다르게 해줘야 한다.

 

📄 index.html

<a href="/yellow">
    <img class="visual" width="200" src="../static/image/coffee.jpg" alt="yellow">
</a>

<a href="yellow">
    <img class="visual" width="200" src="../static/image/coffee.jpg" alt="yellow">
</a>

local:5000('/')에서 index.html에서 이미지 버튼 클릭 시, yellow.html로 넘어가는 코드 작성. 

처음에 href에 "yellow.html"로 했더니 서버 구동시 작동을 안해서 당황했습니다.

검색해보기도하고 그냥 아무 값이나 넣어보기도 하면서 구현했더니  "yellow"와 "/yellow"입력 시, 페이지가 이동하는 걸 확인할 수 있었습니다.

 

---

✏️ 느낀점

오늘은 조원들과 한번 본인의 소개 페이지를 만들어보는 시간을 가지기로 했다.

어제 회의 & 특강 콤보로 조금 정신없는 하루였는데 오늘은 수월하게 흘러가는 느낌~

적당히 혼자 공부하고 적당히 팀원들과 소통하고... 어제는 정리하랴, 소통하랴, 힘들었어서 약간 허둥지둥..

아무래도 온라인으로 진행하니 팀원분 오류 원인을 찾아보고 싶은데 어렵다.

화면 보려고 하니 눈알이 빠질것같다.

 

 

이제 해당 파일 git에도 올려야하는데, 이 과정을 조금 쉬었다 하고자 한다.

앞으로 더 구현해야 하는 방향

• navy창 검색 했을때, 팀원인지 아닌지 알 수 있는 alert기능?(구체적으로 어떤 기능을 구현할지 이야기 나눠봐야 한다.)
• 아무 것도 입력하지 않고 [방명록 남기기] 버튼 클릭하면 alert으로 알려주고 html에 기록이 남지 않도록 구현.