회고록 블로그
HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (3) 본문
저번 글에서 로그인창을 완성했다.
이어서 계속 웹페이지들을 만들어야한다..
※ 멘토없이 초보자가 혼자 만드는 코드이므로, 효율적인 코드가 아닐 수 있음
(마치 float나 flex를 놔두고 <table>로 레이아웃을 만드는 것과 같은 비효율적인 코드일 수 있음 주의)
도구: Visual Studio Code
언어: HTML, CSS (언어가 아니지만..)
서버: 없음 (클라이언트 사용)
그 외: 없음
section 안에서 div로 나눈 이유는 아래의 링크에서의 설명 때문이다.
article로 나눠야하나, section으로 나눠야하나 고민을 했는데 "section 요소는 HTML 문서의 전체적인 내용에 포함되며
article 요소는 문서의 전체적인 내용과는 별도의 독립적인 내용이 들어갈 때 사용"이라고 설명이 적혀있길래
'나, 즐겨찾기, 채널, 친구' 정보가 서로 독립적이지는 않지만 요소는 나눠져야 할 것 같아서 div 태그를 쓰기로 했다.
tcpschool.com/html/html5_element_semantic
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
두번째 페이지. 친구리스트 화면 (friend.html)
HTML 만들기 : <head> 영역
# 로그인 페이지와 동일한 내용으로 작성하기로 했다. #
1. 일단 <head> 태그의 내용들은 거의 반복적으로 모든 웹페이지에 적용될텐데 이걸 각 html 문서마다 각각 적어줘야할까 싶어서 "html 문서에서 html 문서를 불러오는 방법"에 대하여 찾아봤지만, 자바스크립트를 이용하는 것 외에 방법을 찾지 못했다..
=> 그냥 동일한 내용을 계속 복붙해주기로 했다..
2. 로그인 페이지(index.html)과 친구리스트 화면(friend.html) 연결해주기
* 저번에 로그인 페이지를 <form> 태그로 만들고 action 속성을 비워두었는데, 여기에 'friend.html'을 넣기로 했다.
(HTML과 CSS만 이용하기로 했기 때문에)
* 하지만 원래 같으면... 서버의 어떤 스크립트(.php, .jsp 등 페이지)로 연결하고 -> 서버에서 ID와 PW를 체크하는 등 계정이 유효한지 확인하는 작업을 한 후 -> 서버사이드 스크립트 언어로 작성된 곳에서 친구리스트 화면으로 리다이렉션 시키는 것이 맞지 않을까.
※ 2번을 진행하다보니, 405 에러가 발생하였다
이것을 해결해야 다음 단계로 넘어갈 수 있다.. ㅠㅠ
문제가 되는 것은 아래의 화면이다.
저번에 만든 로그인 페이지에서 ID와 비밀번호를 입력 후 로그인을 클릭하면,
위와 같이 405 에러가 발생한다. ㅠㅠ
그래서 일단 405 에러코드에 대해서 알아보기로 했다.
* 405 : HTTP 응답 코드 중 하나. 클라이언트에서 전송하는 메서드와 웹서버에서 받을 수 있는(?) 메서드가 달라서 발생하는 문제이다.
출처: docs.microsoft.com/ko-kr/troubleshoot/iis/http-error-405-website
IIS 웹 사이트를 방문할 때 HTTP 오류 405.0 - Internet Information Services
이 문서에서는 클라이언트 요청에서 HTTP 사양을 준수하지 않는 HTTP 동사 또는 클라이언트가 POST 메서드를 사용하여 정적 HTML 페이지로 요청을 보내기 때문에 발생하는 문제를 설명합니다.
docs.microsoft.com
위의 내용에서 IIS에 집중하지 않고 405 오류에 대해서 집중해보면..
'클라이언트가 HTTP 사양을 준수하지 않는 HTTP 메서드를 사용하여 HTTP 요청을 하게 하여 발생'한다고 되어있다.
=> 클라이언트가 서버에게 주는 메서드(method)를 확인 해봐야할 것 같다.
내가 쓴 HTML 문서는 별 내용이 없다. 다른 내용은 별로 중요하지 않고, 제일 중요한 부분은 여기이다.
=> form 태그를 사용했고 method가 "post"인 곳
...
<header class="logo_header">
<img src="logo.png" alt="카카오톡로고" class="logo">
</header>
<section class="login_form" id="login_form">
<form name="loginform" action="friend.html" method="post">
<input type="text" class="id-pw" name="id" alt="ID입력" placeholder="계정" required>
<input type="password" class="id-pw" name="pwd" alt="비밀번호입력" placeholder="비밀번호" required>
<input type="submit" class="loginbutton" value="로그인" alt="로그인버튼">
<label class="auto-login"><input type="checkbox" name="auto_login" value="auto_yes" alt="자동로그인">자동로그인</label>
</form>
...
왜 이 부분이 문제라고 생각했냐면..
405 에러코드가 메서드의 문제라고 말해줘서도 그렇지만,
우연히 다른 작업하다가 method="get"으로 변경했었는데 그땐 에러없이 잘 작동했었기 때문이다.
즉, 100% 이 부분이 문제라고 확신할 수 있다.
어쨌든, 해결해야할 문제가 명확해졌다.
'post 메서드 방식으로 전송할 때 405 에러가 발생하는 원인과 해결방법'을 찾으면 될 것 같다.
(1) 원인 찾기:
HTTP 요청 헤더와 응답 헤더를 다 뒤져봤는데 아래와 같이 나타났다.
=> POST로 요청을 했는데, 웹서버가 405 에러코드를 주면서
'get, head, options 메서드만 받아줄 수 있어(Allow: GET, HEAD, OPTIONS)라고 응답(response)을 줬다.
왜... get, head, options 메서드 밖에 안된다고 하는건지 모르겠다. (ㅠ)
나름대로 원인을 찾으려고 열심히 구글링을 했다. 그리고 원인으로 추정되는 것을 찾았다.
docs.microsoft.com/ko-kr/troubleshoot/iis/http-error-405-website
IIS 웹 사이트를 방문할 때 HTTP 오류 405.0 - Internet Information Services
이 문서에서는 클라이언트 요청에서 HTTP 사양을 준수하지 않는 HTTP 동사 또는 클라이언트가 POST 메서드를 사용하여 정적 HTML 페이지로 요청을 보내기 때문에 발생하는 문제를 설명합니다.
docs.microsoft.com
(위에서 405 코드를 설명할 때 첨부한 링크와 동일한 곳이다)
IIS 웹서버 기준이기는 하지만 아마 대부분의 웹서버들이 비슷하지 않을까..?
해석하자면, 정적 HTML 페이지를 POST로 전송하면...
웹 서버의 처리기(handler)가 그 페이지를 POST 메서드로 받아주지 않는다는 이야기인 것 같다. (동적이면 받아주는건가?)
어쨌든, 그래서 이 문제를 해결하려면 웹서버의 config 파일을 변경해주면 된다는 이야기...
* HTML은 정적 웹페이지이다.
* 정적과 동적 웹페이지의 차이는 아래 능력자님의 블로그 참고 : hogni.tistory.com/75
정적 웹페이지, 동적 웹페이지는 뭘까
이번에는 정적 웹 페이지와 동적 웹 페이지에 대해서 알아보겠습니다. 특히 웹크롤링에 관심이 있으신 분이라면 알아두면 도움이 됩니다. 정적 웹 페이지 (static web pages) 정적 웹 페이지는 언제
hogni.tistory.com
그러나, 중요한 점은 나는 웹서버를 별도로 구축한 적이 없다 (로컬PC로 코드 실행중임)
내가 사용하는 거라고는 visual studio code에 확장프로그램으로 받은 Live Server 뿐..
웹서버를 구축했으면 config 파일을 수정하겠는데 구축을 안했는데 어디에서 어떻게 수정하라고..? ㅠ
사용하는 확장 프로그램 'Live Server'의 문제인가 싶어서 가상머신에 웹서버(아파치)를 설치해서 문제의 HTML 문서를 열어보았다.
=> 여기에서도 동일한 에러가 발생하게 되었을 때 -> config 파일을 수정하고도 에러코드가 사라지지 않는다면 HTML 문서나 내 PC의 문제일 것이고, config 파일을 수정했을 때 에러코드가 사라진다면 확장프로그램 Live Server의 문제일 것 같다.
- 이걸 해결하기 위해서 가상머신에 웹서버(아파치)까지 설치해서 확인하고 있다..
가상머신에서 웹서버(아파치) 구축 후 동일하게 HTML 문서를 열어보았고,
ID와 비밀번호를 입력해서 '로그인' 버튼까지 눌러본 결과, 200 상태 코드를 받았다.
그래서 조심스럽게 405코드가 발생하는 원인을 분석해보자면
사용하고 있던 Live Server 확장 프로그램의 문제가 아닐까.. 싶다.
(2) 해결방법:
문제는 이걸 해결해야 한다는 것인데 어떻게 해결해야할지 모르겠다.
평소에는 HTML 문서를 작성 후 아래와 같이 클릭해서 결과물을 확인하지만 (=Live Server 확장프로그램 이용)
405 에러가 발생하는 문제가 이 Live Server 때문인 것 같으니 일단은 이 기능을 사용하지 않기로 했다.
+추가)
구글링 하다가 Live Server 확장 프로그램을 만드신 제작자로 예상되는 능력자님의 github에서
내가 지금 가지고 있는 405 에러 발생 문제에 대한 내용을 찾아왔다.
능력자님 : github.com/ritwickdey/vscode-live-server/issues/541
Status Code: 405 Method Not Allowed · Issue #541 · ritwickdey/vscode-live-server
I'm submitting a... [ ] Regression (a behavior that used to work and stopped working in a new release) [x] Bug report
내 낮은 수준의 영어 독해 능력으로 얼추 해석을 해보자면..
"HTML <form>에서 method="post"를 하고 submit을 누르면 Live Server는 405 Method Not Allowed 에러를 반환한다.
브라우저의 개발자 도구로 보면 응답 헤더는 "Allow: GET, HEAD, OPTIONS"로 나온다.
발생하는 환경은 Chrome, Firefox 등이다."
아래에 여러 사람들이 댓글을 달았는데
많은 사람들도 같은 이슈가 발생하고 있고, 이슈가 해결되지 않으면 Live Server 확장프로그램을 중단시키고 사용을 하라고 제안을 주고 있다.
해결하기 어려운 이슈인가보다.
이슈 해결방안 하나 찾아내느라 오랜 시간이 걸려서 글을 나누기로 했다.
아직 <head> 다 작성도 못했는데 큰일이다. 일단 오늘은 여기까지.
'2. 프로그래밍 언어 공부 > 무엇이든 만들어보기' 카테고리의 다른 글
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (6)_더보기 화면 완성 (0) | 2021.03.25 |
|---|---|
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (5)_채팅목록 완성 (0) | 2021.03.23 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (4)_친구리스트 완성(추후 기능 수정) (0) | 2021.03.16 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (2)_로그인 페이지 완성 (0) | 2021.03.10 |
| HTML과 CSS 공부: 혼자 힘으로 카카오톡 PC버전 클론하기 (1) (0) | 2021.03.09 |
