1. script 태그 안에서 ejs 템플릿 엔진 사용하기
목표: ejs 템플릿 엔진을 이용해 서버사이드 랜더링으로 넘겨준 값을 script 태그안에서 사용하고 싶었다.
해결1: input에 ejs 문법을 이용해 값을 넣어 초기화 시켜준다.
그 후 script 태그에서 jquery 문법으로 해당 값을 가져와 사용할 수 있다.
<input id=article_id_box style="display:none" value="<%=article._id%>"> 해결2: => script 태그 안에서 바로 문자열안에 ejs 템플릿을 적용시켰더니 해결되었다.
$.ajax({
type: "PUT",
url: "/api/articles",
data: {
articleId: '<%=article._id%>',
title: $("#article_title").val(),
contents: $("#article_contents").val(),
...
2. Monogo E11000 duplicate key error
Model Schema 를 수정 후, 기존 데이터 (수정 전 Schema) 의 Index key 값이 새로 생성하려는 데이터와 충돌하면서 발생하는 에러.
해결법 : https://ajh322.tistory.com/73
3. ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client 오류
[ERR_HTTP_HEADERS_SENT]는 서버가 클라이언트에 둘 이상의 응답을 보내려고 할 때 발생하는 오류
res.json을 하는 시점에서 해당 함수를 완전히 빠져나온다고 생각했는데 그게 아니었다.. return 을 따로 명시해주어서 해결했다
https://velog.io/@yhe228/ERRHTTPHEADERSSENT-Cannot-set-headers-after-they-are-sent-to-the-client
4. express.URLEncoded , express.json
ajax에서 서버로 값을 넘길때 데이터 값이 undefined 로 넘어가길래 원인을 한참 찾았다
알아보니 get 이나 delete 요청은 별로 상관이 없지만
put , post 의 경우는 body에 데이터를 담아 요청을 보내기 때문에
데이터의 유형에 따라 미들웨어에서
app.use(express.json()) //json 파싱
app.use(express.urlencoded()) //urlencoded 파싱
와 같은 코드를 사용해 별도의 파싱작업이 필요하다고 한다.
https://expressjs.com/ko/api.html
https://mchch.tistory.com/181 => 이 글이 도움이 많이 되었다
실제로 확인해보니
Content-Type이 application/x-www-form-urlencoded; charset=UTF-8 로 찍힌다
+) 계속 브라우저 콘솔창과 nodejs 콘솔창만 확인했는데
이제 개발자 도구에서 볼 수 있는 다른 데이터들도 열어서 잘 살펴봐야겠다.
5. form 태그 이용한 서버요청
데이터 요청 부분은 거의 onclick 속성과 ajax를 이용해 해결했는데
form 태그를 이용한 방법도 있다.
다만 이 방식은 페이지가 새로고침 되므로 부분 갱신을 하고싶은 경우는 적합하지 않다.
<form action="/examples/media/action_target.php">
이름 : <input type="text" name="st_name"><br>
학번 : <input type="text" name="st_id"><br>
학과 : <input type="text" name="department"><br>
<input type="submit">
</form>submit 부분은 input이 아닌 버튼 태그 (혹은 submit 타입을 명시한 다른 태그들)을 넣어도 상관없다. 버튼 태그는 default type이 submit이므로 따로 명시해주지 않아도 제대로 동작한다.
http://www.tcpschool.com/html-tags/form
폼 태그 참고
https://www.nextree.co.kr/p8428/
6. 자바스크립트 기본 동작원리
https://www.youtube.com/watch?v=v67LloZ1ieI
7. Ajax
서버에서
return res.status(400).json({msg:'message', ..}) 과 같은 형태로 응답할 시에 ajax코드에서
error: function (xhr, status, error) {
if(xhr.status===400){
alert(xhr.responseJSON.msg);
}
},와 같은 코드를 통해 응답 에러에 대한 처리를 해줄 수 있었다.
xhr 내부 구조는 다음과 같았다.
