💽 취향 가득 디자인 아카이빙

jinja2로 단어 목록 테이블 DB에 저장된 단어 목록을 가져와 테이블을 채움. ✅ app.py - words 컬렉션의 단어들을 가져와 넘겨줌. @app.route('/') def main(): # DB에서 저장된 단어 찾아서 HTML에 나타내기 words = list(db.words.find({}, {"_id": False})) # list 안에 db.words.find로 조건 없는 모든 단어 {}를 찾음. 즉, words는 내 db에 저장된 모든 단어들의 리스트. # _id는 mongodb에서 자동으로 만들어주는 id인데 자료형이 특이해서 _id가 들어있는 리스트를 render_template에 넣으면 에러 발생하기 때문에 False. return render_template("index.html"..

1. 새 단어 / 기존 단어 구분 ✅ url 예시 localhost:5000/detail/hello?status_give=new ⇒ 💾 버튼 localhost:5000/detail/hello?status_give=old ⇒ 🗑️버튼 status_receive = request.args.get("status_give", "new") # status_give 라는 파라미터를 status_receive 라는 이름으로 받음 # status_give 라는 파라미터를 주지 않을 경우를 대비해, 기본값을 "new"로 주도록 함. return render_template("detail.html", word=keyword, result=result, status=status_receive) # detail.html에 s..

Jinja2 템플릿 언어 Flask 프레임워크에서 사용하는 템플릿 언어. ‘템플릿’이 되는 Html 문서에 데이터가 들어갈 곳을 표시해놓는 역할을 합니다. 파이참 > setting > Template Languages > Jinja2 설정 ✅ Owlbot API 요청 Flask r = requests.get(f"", headers={"Authorization": "Token [내토큰]"}) result = r.json() print(result) ✅ jinja2를 이용해서 detail.html에 값을 채워 넣어주기 위해 detil.html과 연결되어 있는 detail 함수 안에 사전 API에 요청을 보내고 값을 받아오는 부분이 필요. @app.route('/detail/') def detail(keywo..

Ajax 기본 골격 $.ajax({ type: "GET", //GET 방식으로 요청 url: "여기에URL을입력", //요청할 url data: {}, //요청하면서 함께 줄 데이터 (GET 요청 시엔 비워둠) success: function(response){ //성공하면, response 값에 서버의 결과 값을 담아서 함수 실행 console.log(response) } }) html에서 단어 뜻 보여주기 ✅ API에서 단어 뜻 찾아서 결과 보내주기 @app.route('/detail/') def detail(keyword): # API에서 단어 뜻 찾아서 결과 보내기 return render_template("detail.html", word=keyword) # 를 detail.html에 word라..

✅ AWS 서버와 MongoDB 연결 (app.py) client = MongoClient('15.164.98.36', 27017, username="test", password="test") db = client.dbsparta_plus_week2 로컬에서 개발할 때 AWS 서버에 있는 MongoDB를 바로 연결해서 코딩하면 나중에 배포할 때 DB를 복사해 옮길 필요가 없어 편함.

✅ 영어 사전 API - OWLBOT API를 사용해서 단어, 뜻, 예문 가져와야함. ✅ 영어 사전 Open API Owlbot English Dictionary API Owlbot English Dictionary API owlbot.info ✅ get a token 클릭해서 이메일 작성 후, 이메일로 API 키 받기 ✅ 파이썬으로 API에 요청 보내기 r = requests.get("", headers={"Authorization": "Token [토큰]"}) result = r.json() print(result) ✅ Ajax로 요청 보내기 $.ajax({ type: "GET", url: "", beforeSend: function (xhr) { xhr.setRequestHeader("Authori..

1. Flask 서버를 구동시켜주는 프레임워크 즉, 서버를 구동할 때 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있다. 2. 패키지 설치 Project Interpreter 가상환경에 필요한 패키지 : flask, requests, pymongo 3. 기본 폴더 구성 static 폴더 : 이미지, css파일 templates : html 파일 app.py 파일 : flask를 작성하는 파이썬 코드 4. Flask 시작코드 (app.py) (템플릿으로 외울 필요 X) from flask import Flask, render_template app = Flask(__name__) @app.route('/') def main(): return render_template("index.html") @app.rou..

1. 기능 파악하기 페이지 기능 분류 속성 메인페이지 배너 메인페이지 검색 단어 목록에 단어가 있으면 단어장 하이라이트 및 단어 위치로 스크롤 단어가 없을 경우, 사전에 있는 단어이면 상세페이지로 이동 사전에 없는 단어이면 '없는 단어' alret 메인페이지 단어 목록 DB에 저장되어 있는 단어의 단어, 뜻을 보여줌 메인페이지 단어 목록 단어 클릭하면 상세페이지로 이동 메인페이지 단어 목록 단어 뜻 상세페이지 단어박스 새 단어 단어 목록에 단어가 없는 새 단어이면 Save 아이콘 표시 클릭 시 단어 DB에 저장하고, Delete 아이콘으로 바뀜 상세페이지 단어박스 기존 단어 단어 목록에 단어가 있는 기존 단어이면 Delete 아이콘 표시 클릭 시 단어 DB에서 삭제하고, Save 아이콘으로 바뀜 상세페에..

✅ CSS 박스 영역 바깥 여백 영역 (Margin Area) 테두리 영역 (Border Area) 안쪽 여백 영역 (Padding Area) 내용 영역 (Content Area) ✅ 각 영역을 꾸밀 때 사용하는 속성 바깥 여백 : margin 속성 테두리 : border 속성 안쪽 여백 : padding 속성 박스 가로 크기 : width 속성 박스 세로 크기 : height 속성 박스 크기 기준 : box-sizing 속성 박스의 배경 : background 속성 ✅ 속성 축약 표현 (shorthand) 4개 속성 : top, right, bottom, left (시계방향 !) 3개 속성 : top, right/left, bottom 2개 속성 : top/bottom, right/left 1개 속성 ..

🐱 RDBMS 알아보기 1. RDBMS ✅ RDBMS는 관계형 데이터베이스. ✅ 관계형 데이터베이스가 중요한 이유는 거의 모든 서비스의 메인 데이터베이스는 NoSql이 아니라 RDBMS. ✅ 엑셀과 같은 표의 형태로 데이터가 저장됨. ✅ 테이블을 만들 때 column이 고정되어 있기 때문에 데이터가 실제로 저장되면 column을 수정하기가 쉽지 않음. ✅ 테이블을 여러개 만들어서 테이블기지 연결됨 ✅ RDBMS에서 R은 Relation을 의미함 ✅ 제품에는 Oracle, MySql, postgreSQL, Mssql이 있음. 2. NoSql ✅ JSON 형태로 데이터가 저장됨. ✅ 도큐먼트라는 RDBMS의 테이블과 비슷한 곳에 저장됨. ✅ 도큐먼트는 생성될 때 컬럼이 고정되지 않기 때문에 변경에 용이함. ..