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

CONNECTED ✅ 개요 여행자와 가이드를 연결하는 여행 플랫폼 CONNECTED 가이드는 자랑하고 싶은 여행지와 지역 여행 팁을 여행자에게 제공해주어 직접 짠 여행 일정과 다양한 프로그램을 제시할 수 있습니다. 여행자는 길이 정해져 있는 예전의 단체 투어 패키지가 아닌 자신들만의 자유로운 여행 계획을 세울 수 있고, 시간과 노력을 절약할 수 있습니다. 또, 가이드 여행 이후 리뷰 작성과 자유 여행을 다녀온 후 본인의 여행기를 공유할 수 있는 커뮤니티 공간이 있어 여행의 질을 향상시킬 수 있습니다. 1️⃣ 가이드로 가입하여 본인이 계획한 투어 상품을 등록하면 2️⃣ 여행자는 상품을 서치하고 원하는 투어 상품을 선택, 결제하고, 3️⃣ 가이드의 여행 일정대로 여행을 다닐 수 있음. ✅ 관련 자료 깃허브 ..

CONNECTED ✅ 개요 여행자와 가이드를 연결하는 여행 플랫폼 CONNECTED 가이드는 자랑하고 싶은 여행지와 지역 여행 팁을 여행자에게 제공해주어 직접 짠 여행 일정과 다양한 프로그램을 제시할 수 있습니다. 가이드는 유명 관광지 뿐만 아니라 추천하고 싶은 숨은 명소, 맛집 등을 소개할 수 있습니다. 여행자는 길이 정해져 있는 예전의 단체 투어 패키지가 아닌 자신들만의 자유로운 여행 계획을 세울 수 있고, 혼자서, 둘이서 등 소규모의 여행이라도 가이드와 함께해 시간과 노력을 절약하며 실패 없는 여행을 떠날 수 있습니다. 또, 가이드 여행 이후 리뷰 작성과 자유 여행을 다녀온 후 본인의 여행기를 공유할 수 있는 공간이 있어 CONNECTED와 함께한 모든 여행자들은 여행의 질을 향상시킬 수 있습니다...

✅ 최종 코드 깃허브 https://github.com/mingyeong1203/Vocabulary-Notebook GitHub - mingyeong1203/Vocabulary-Notebook: Sparta Coding Club Boot Camp - Web Plus - Vocabulary Notebook Sparta Coding Club Boot Camp - Web Plus - Vocabulary Notebook - GitHub - mingyeong1203/Vocabulary-Notebook: Sparta Coding Club Boot Camp - Web Plus - Vocabulary Notebook github.com ✅ 학습 내용 정리 노션 (블로그 내용이랑 동일) https://fair-cheet..

“status_give = old” 일 때만 예문 작성 칸 띄우기 input 박스에 입력된 예문이 해당 단어를 포함하고 있는지 확인 있으면 DB의 examples 컬렉션에 예문 저장. 예문들 중에서 해당 단어에 관한 것만 찾아와서 보여주는 함수를 만들어 페이지 로딩 시, 새 예문 저장 시, 기존 예문 삭제 시 함수 실행. 예문 삭제 시 여러 예문 중 어떤 것인지 구분을 하기 위해 각 줄에 id 부여 단어 삭제 시 해당 예문들도 같이 지워줌. {% if status=="old" %} // Write your own sentences! This sentence contains the word 'word'. delete I don't like using the MS Word program. delete add..

✅ og 태그 Open Graph 태그로 웹페이지의 링크를 공유할 때 나타나는 미리 보기를 설정하는 태그 메타 태그의 종류 중 하나로, ‘제목, 설명, 이미지, 링크, 타입’ 등을 삽입할 수 있음. ✅ favicon 주소창의 즐겨찾기 아이콘 ✅ og태그와 favicon 설정

✅ API에서 단어 뜻 찾아서 detail.html로 결과 보내는 서버 함수 內 r = requests.get(f"", headers={"Authorization": "Token [내토큰]"}) result = r.json() print(result) detail.html에 보내지는 result라는 값을 사전 API에서 찾을 수 없어서 ‘정의를 찾을 수 없다’는 메시지 즉, 다른 형태의 데이터를 주기 때문에 처리하지 못해서 에러 발생 ! 이 때 에러를 보여주지 않고 단어 목록 페이지로 리다이렉팅 해야함 ✅ 값을 잘 받아왔을 때의 상태코드가 200이므로 200이 아닐 때 메인페이지로 리다이렉팅 시키고 ‘단어를 찾을 수 없다’는 메시지 남겨주기 if r.status_code != 200: return red..

단어장에 단어가 있으면 단어장 하이라이트 없으면 사전에 있는 단어이면 상세페이지로 이동 사전에 없는 단어면 ‘없는 단어’ 표시 ✅ 검색을 위해 word 키 값만 모여있는 word_list 만들기 let words = {{ words|tojson }}; //'이 부분은 Html 코드가 아니고 진짜 데이터'라고 말해주기 위해 tojson을 사용 let word_list = []; //딕셔너리에서 단어들만 모으기 위한 list 생성 for (let i = 0; i < words.length; i++) { //words의 길이보다 짧은 동안 반복 word_list.push(words[i]["word"]) //words의 i번째의 word 키 값을 word_list 안에 하나씩 넣음 } tojson 전 tojso..

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라..