본문 바로가기

전체 글

 (225)
15. 네비게이션 바 네비게이션 바 는 모든화면 위쪽에 고정되어 있는 부트스트랩 컴포넌트이다. 이를 이용해 메인페이지(Home)으로 돌아갈수있는 장치를 만들 수 있다. 네비게이션바는 모든 페이지에서 공통적으로 보여져야 하므로 projects\mysite\templates\base.html 을 다음과 같이 수정하자. pybo:index 페이지로 이동해 주는 Pybo 로고를 가장 왼쪽에 배치하고 그 오른쪽에 로그인 링크를 추가했다. 로그인 기능은 추후에 설정한다. 좌상단에 Pybo 아이콘과 로그인 아이콘이 생겼다. 아무 페이지에서 Pybo 를 누르면 메인 페이지로 돌아간다. 로그인 버튼은 아직 설정을 안해서 아무런 일도 발생하지 않는다. 웹 브라우저의 크기를 작게 조절하면 로그인버튼이 사라지고 우상단에 메뉴버튼이 생긴다. 부트스..
14. 폼 [질문등록] 질문 등록을 하기위해 '질문 등록하기' 버튼을 만들어야 한다. question_list.html 파일을 수정해 '질문 등록하기' 버튼을 생성하자. 과 같은 링크이지만 부트스트랩의 btn btn-primary 클래스를 적용하면 버튼으로 보인다. 버튼을 클릭하면 pybo:question_create 별칭에 해당되는 URL 이 호출된다. 이제 pybo:question_create 별칭에 해당하는 URL 매핑규칙을 추가해야한다. projects\mysite\pybo\urls.py 파일을 수정하자. views.question_create 함수를 호출하도록 매핑했다. [Form] 이제 views.question_create 함수를 작성해야 한다. 그 전에 Form 에 대해서 먼저 알아보면, 폼은 페이지..
13. 표준 HTML & 템플릿 상속 [표준 HTML] 지금까지 작성한 질문 목록, 질문 상세 템플릿은 표준 HTML 구조가 아니다. 어떤 웹 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동하게 하려면 반드시 웹 표준을 지키는 HTML 문서를 작성해야한다. 표준 HTML 문서의 구조는 html, head, body 엘리먼트가 있어야하고, CSS 파일 링크는 head 엘리먼트 안에 있어야 한다. meta, title 엘리먼트 또한 head 엘리먼트 등이 포함되어야 한다. [템플릿 상속] 앞에서 작성한 질문 목록, 질문 상세 템플릿을 표준 HTML 구조가 되도록 수정하자. 템플릿 파일들을 모두 표준 HTML 구조로 변경한다면 body 엘리먼트의 바깥 부분은 모두 같은 내용으로 중복될 것이다. 그러면 CSS 파일 이름이 변경되..
12. 부트스트랩 [부트스트랩] 부트스트랩은 디자이너의 도움 없이 개발자 혼자서 괜찮은 수준의 웹 페이지를 만들수 있게 도와주는 프레임워크이다. https://getbootstrap.com/docs/5.1/getting-started/download/ Download Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more. getbootstrap.com 링크를 통해 다운로드하자. 버전은 5.x 버전이다. 다운로드하면 다음과 같은 폴더가 있다. 그안에 css 폴더안에 bootstrap.min.css 파일이 있다...
11. 스태틱 디렉토리 [static 디렉토리] 스타일시트 파일은 장고의 스태틱 디렉토리에 저장해야 한다. 스태틱 디렉토리도 템플릿 디렉토리와 마찬가지로 config/settings.py 파일에 등록하여 사용한다. 일단 config/settings.py 파일을 수정하자. STATICFILES_DIRS 라는 리스트 변수를 추가하고 BASE_DIR/'static' 디렉토리를 추가했다.BASE_DIR/static 은 /Users//projects/mysite/static 을 의미하기때문에 다음 위치에 static 디렉토리를 생성해야한다. [스타일 시트] style.css 파일을 projects/mysite/static/style.css 에 만들고 다음과 같이 작성하자. style.css 파일에는 상세화면에 적용할 스타일을 정의했다...
10. 답변 등록하기 [답변 등록 폼] 질문 상세 템플릿에 답변을 저장할 수 있는 form을 추가해보자. pybo/question_detail.html 을 다음과 같이 수정하자. 답변의 내용을 입력할 수 있는 textarea 와 답변을 저장 할 수있는 "답변등록" 버튼도 추가했다. 답변 저장을 위한 URL은 form 태그의 action 속성에 {% url 'pybo:answer_create' question.id %} 로 지정했다. form 태그 바로 밑에 있는 {% csrf_token %} 은 보안에 관련된 항목으로 form으로 전송한 데이터가 실제 웹페이지에서 작성한 데이터인지를 판단하는 역할을 한다. 막약 해커가 이상한 방법으로 데이터를 전송할 경우에는 서버에서 발행한 csrf_torkn 값과 해커가 일방적으로 보낸 c..
9. URL 별칭 [URL 하드 코딩] question_list.html 템플릿에 사용된 다음 링크를 보자. 질문 상세를 위한 URL 링크이다. 하지만 이러한 URL 링크는 수정될 가능성이 있다. 예를 들어 http://localhost:8000/pybo/question/2 또는 http://localhost:8000/pybo/2/question 처럼 바뀔수 있다. 실제 프로젝트에서 이러한 URL 리팩토링은 빈번하게 발생한다. URL 링크가 자주 변경된다면 템플릿에서 사용한 모든 URL 들을 일일이 찾아가며 수정해야 하는 리스크가 발생한다. 이러한 문제점을 해결하기 위해서는 해당 URL에 대한 실제 링크 대신 링크의 주소가 1:1 매핑되어 있는 별칭을 사용해야 한다. 링크의 주소 대신 별칭을 사용하려면 URL 매핑에 na..
8. 템플릿 [질문 목록] http://localhost:8000/pybo/ 페이지에 들어가면 등록한 질문을 볼 수 있도록 구현해 보자. pybo/views.py 파일의 index 함수를 다음과 같이 수정하자. 질문 목록 데이터는 Question.objects.order_by('-create_date') 로 얻을 수 있다. order_by는 조회 결과를 정렬하는 함수이다. order_by('-create_date')는 작성일시 역순으로 정령하라는 의미이다. " - " 기호가 붙어 있으면 역방향, 없으면 순방향 정렬을 의미한다. 게시물은 보통 최신순으로 보기 때문에 작성일시의 역순으로 정렬한다. render 함수는 파이썬 데이터를 템플릿에 적용하여 HTML로 반환하는 함수이다. 즉, 위에서 사용한 render 함수는 ..

티스토리툴바