웹 페이지 만들기 (1)

지난번 미니 프로젝트때 아쉬워서 혼자 기본 기능만 넣어서 만들어보려고하는데

 

처음부터 혼자 하려니 시작부터 삐그덕...

 

부트스트랩을 다운받았더니 templates, static 폴더가 없길래 

새로 만들어서 넣고 돌렸더니 세상에나 다 깨지는것아닌가....

 

그래서 너무나도 단순하게 그냥 하지뭐~ 하고 그냥 했다가

하하하하하ㅏ하하하ㅏ하하하핳 과거의 내자신아 왜그랬니ㅜㅜㅜㅜ

 

index 파일에서 원하는대로 다 고치고 app.py 만들어서 경로설정하고 돌렸더니

404 에러가 잔뜩 뜨는것이 아니던가..ㅠㅜㅜㅠㅜㅜ

 

구글링 해보니  templates 안에 있어야한다고....ㅎ...

어쩐지 전에 강의에서 강사님이 스펠링 틀리면 안된다고 신신당부를 하셨던게 생각이 나네ㅜㅜ

 

그때부터 시작이었다.. 오늘의 고난 mvp.....

 

https://scribblinganything.tistory.com/404

[Bootstrap] Templates 무료 예제로 Flask와 연동하기

이 분 덕분에 진짜 짱구 열심히 돌리면서 간신히 해결했다ㅜㅡㅜ

 

먼저 

그래 좋아 templates, static 만들고 잘 넣어주고 

패키지 다 깔자 flask, dnspython, requests, pymongo!!!! 다 깔아주자 어차피 쓸거니까^^

 

 

이제templates 먼저 손봐주자

href 검색해서 

<link href="assets/img/favicon.png" rel="icon">

이렇게 되어있는거 당장 모조리 다 바꿔주자

<link href="static/assets/img/favicon.png" rel="icon">

요러케.. static 안으로 경로설정을 다시 해주는것,,!!

맨 밑에 요것도 빼먹지 말고 해주자!

<script src="static/assets/js/main.js"></script>

 

 

다음 app.py를 부셔버려

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.5t10eya.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbparc

# 경로설정
@app.route('/')
def home():
   return render_template('index.html')

@app.route('/sa_single', methods=['GET'])
def sa_path():
   return render_template('sa_single.html')

@app.route('/park_single', methods=['GET'])
def park_path():
   return render_template('park_single.html')

@app.route('/su_single', methods=['GET'])
def su_path():
   return render_template('su_single.html')

@app.route('/go_single', methods=['GET'])
def go_path():
   return render_template('go_single.html')

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

경로 설정 잘 해주자.. 정신 차리구... templates에 index 파일 말고도 있어서 다 경로 설정을 해줬다

저 경로를 기억해서 다시 index로 돌아가자

href의 html 경로를 /sa_single 아니면 / (index.html) 로 만들어주자!

app.py에 설정해놓은 경로 이름으로 바꿔주는것!!

<div class="item web col-sm-6 col-md-6 col-lg-3 mb-6">
  <a href="/sa_single" class="item-wrap fancybox">
    <div class="work-info">
      <h2>사재혁</h2>
      <h3>팀장</h3>
    </div>
    <img class="img-fluid" src="static/assets/img/img_1.jpg">
  </a>
</div>

 

자 저렇게 경로 설정 해주자! 

그럼 안깨지고 나오는 화면을 볼 수 있다ㅠㅠ 오래 고민했었으니 절대 안까먹어야지!!!

 

---

 

grid! 

부트스트랩을 이용하다보면 grid를 정확하게 이해하고 있는게 중요한 것 같다

 

https://unikys.tistory.com/371

[Bootstrap] 시작하기, CSS 기능: 그리드 시스템(Grid system)

다시 보며 제대로 이해했다!!

확실히 처음볼때랑 그 다음 볼때랑 다른듯!!!

 

---

 

클릭하면 새 창에서 열리게 하는 것도 구글링해서 알아냈다!

 

구글링없으면 개발 못할듯....ㅎㅎ..

<p><a href="https://sizzang97.tistory.com/40?category=1079849" target='_blank'

 

---

 

사실 예쁘고 보기좋게 만드는 것 보다

 

백엔드쪽 post, get 구현 포함해서 웹페이지를 처음부터 끝까지 내가 만들어보고 싶었다

 

근데 css 에서 생각보다 시간이 너무 많이 걸려서 속상쓰ㅜㅜ

 

내일은 나머지 경로설정 다 해주고 본격적인 구현 해 봐야지!! 아뵤!!!!