웹 개발플러스 2주차 나만의 단어장 만들기

이제 1주차에 이어 2주차 시작되고 우선 이해가 안되는부분을 다시한번 반복하면서 배워볼수 있어서 좋다!

이번 2주차에서는 Flask의 더많은기능과 멀티페이지를 만들어보는 시간! 

 

우선, 본격적으로 프로젝트를 만들기 전 기초 강의를 시작

▶ flask를 통해 멀티페이지 만들기 (버튼을 클릭하면 상세페이지로가고, 상세페이지에서 다시 메인으로 가는 방법)

 

여기에서도 마찬가지로!

패키지설치,폴더구조,파일 등은 동일하게 만들어준다! 

 

※ 나만의 단어장 내가 만든 결과물!!!!

 

나만의 단어장 메인 페이지 

영어단어 검색 후 상세페이지 

검색한 영어단어 저장하는경우 예문 추가 기능

내 단어장에 있는 영어 검색하는경우 별도 표시

 

그외에 영어단어를 잘못입력하는 경우 얼럿발생, 기존 영어단어장 삭제, 예문 삭제 등 이 가능하도록 만들었다

 

이번 주 처음으로 배운 기초 페이지 연결하는 방법

※ 상세페이지로 가는 하이퍼링크

  <a href="/detail">상세 페이지로 가기</a>

※ 메인페이지로 돌아가는 버튼 만들기

// script 태그 안에 정의하기 function to_main() { window.location.href = "/" }

 

<!-- 버튼에 함수 연결하기 --> <button onclick="to_main()">메인으로 돌아가기</button>

 

짧은 코드는 onclick에 바로 넣을 수 있습니다.

<button onclick='window.location.href = "/"'>메인으로 돌아가기</button>

 

추가로, 이번2주차부터 새롭게 배우는 언어 " Jinja2 템플릿 언어 "

설명해주시는걸 바탕으로 실습을 해봤을때는 기존에 배웠던거에 비하면 훨씬 수월하고 좋았지만 생소해서 어려웠던건 사실이였다

 

jinja2 템플릿 언어를 사용하면 서버에서 특정 이름으로 값을 보내면 

html에 들어갈 자리에 {{ }} 로 표시해서 받을 수 있다

(변동성이 있는 특정값을 보낼때는 쉽게 보낼 수 있을 것 같다)

 

▶ 참고로, Jinja2언어를 사용하려면 파이참에서 "jinja2"를 preference에서 설치해줘야 한다.

 

본격적인 프로젝트 시작에 앞서, 마지막으로 Jinja2언어 응용 실습!

이전에 배운 ajax를 통해 요청하는 방식과 직접적으로 비교를 해주셔서 이해가 빨랐던것같다!

 

Jinja2언어 응용편

 

Jinja2언어 활용(URL일부를 변수로 받는 방법)

 

우선은 너무 생소한 언어다보니 ㅠㅠㅠㅠㅠ 부딪혀보면서 이해해보자는 마음으로 일단은 따라해보고있다!!

따라하다보면은 이해가 갈거라 생각하고 개발일지를 작성하면서 한번더 복습

 

이번 단어장 Owlbot이라는 Open API를사용하므로 웹사이트를 통해 

토큰을 미리 신청을 해두어야한다!

 

※ API 설계하기

나만의 단어장 API설계

무엇을 만들때에는 항상 이런 설계를 하는게 가장 중요하다고 생각한다.

온라인강의에서 그냥 말로 설명해주셨다면은 좀 어려울수도있을것같았지만 자세한 설명을 위해 이렇게 설계도 까지 작성을 해주셨다ㅠㅠ

 

처음에는 쉽게생각했지만, 이런 작은 프로젝트에도 생각해야할 기능들이 생각보다 많았다

회사일하면서도 정말 예상치 못한 문제들로 인해서 심각한 문제들이 발생하는경우가 있었는데, 이번 2주차에서 공부를 하면서

모든 경우의 수를 대비해서 프로젝트를 완성하지않으면 안되겠다는 생각이 들었다!! 더 많은 경험이 필요하다고 느끼는 순간

 

※ 나만의 단어장 프로젝트 진행 방법 

 

1. ajax로 단어 뜻 가져오기 : ajax를 이용해서 Open API 요청해서 단어 뜻 가져오기 이때, null 값이 있는경우 빈 텍스트로 대체

2. HTML에서 단어 뜻 보여주기(Jinja2 이용) : 

Open API 요청(Flask) 

r = requests.get(f"<https://owlbot.info/api/v4/dictionary/{keyword}>", headers={"Authorization": "Token [내토큰]"}) result = r.json() print(result)

3. 새단어/기존단어 구분하기 

4. 단어 저장 / 삭제 기능 만들기

5. 단어 목록 가져오기 

6. 검색기능 만들기

7. 사전에 없는 단어 일경우 

 

 

온라인 강의에 관심이 있으신분들은 아래 링크로 수강하는경우 할인 가능합니다!

https://spartacodingclub.kr/?f_name=%EA%B0%95%ED%99%8D%EC%88%9C&f_uid=6044be3eea76fe086b066ce7