꿈꾸는 개발자, Front-end Developer

Trust that the dots will connect in your future.

#CSS #Dev #EJS #HTML #Hexo #JavaScript #dev #jQuery #smallTalk #번역 #삽질 #신세계 #이론 #정보처리기사

ejs 'escape' 기능을 탈출하기


지금까지 이 게시판(GitHub page로 옮기기 전)은 오직 Text만 담을 수 있었다.

이미지나 gif 형식 파일, 소스 코드 등을 사용해 보다 가독성 높은 글을 올리고 싶은 마음은 굴뚝 같았지만

그 기능을 구현한다는 것이 생각보다 만만치 않았다.

과거 사용자의 입장에서 보았을 때는

‘뭐 그까이거 대충 <img> 태그 써서 보이게 하면 되는거 아니야?’ 라고 생각했다.

그러나 개발자 입장에서 바라보니 ‘이미지와 같은 각종 파일을 어떻게 서버에 업로드 할 것인가?,

<img> 태그를 본문에 쓴다고 해도 데이터베이스에는 ‘String문자열’ 방식으로 저장되는데,

어떻게 이 html 태그가 웹페이지 상에서 실행되게 할 것인가?’ 등의 물음이 떠오름과 동시에

이것이 생각보다 거대한 작업임을 알게 되었다(물론 실력에 따라 상대적으로 느낄 규모이다.).


하나 하나 해결해 보자..
파일 업로드의 경우 이고잉님의 생활코딩 node js강좌를 참고하였다.
일단 서버에 파일을 업로드 하는 것은 해결이 되었는데, 업로드한 파일을 게시물로 가져오는 것이 문제이다.

현재 게시판은 아래 스크린 샷과 같이 태그를 실행시키는 것이 아니라 태그 그대로 출력하고 있다.

20170801

경우의 수를 따지기 시작했다.

Mongo DB에서 String 값으로 내보내기 때문인가?

heroku 서버 자체에서 escape 기능을 사용하는 것일까?

escape된 문자들을 <, > 로 환원 시킬 수는 없을까?

이 모든 경우의 수에 대한 정보를 구글링 하였고, 많은 시간이 소요되었다….물론 이 안에 답은 .. 없었다…
답은 그만 포기하고 잘까…라는 생각이 들 무렵 찾아왔다.

이 게시판은 ejs 템플릿을 사용하고 있다.

ejs(Embedded JavaScript)는 순수 html 태그 외에도

다른 js 파일에 저장된 변수나 함수, 조건문 등을 html 태그처럼 불러오거나 사용할 수 있다.

이 때 사용하는 명령어가 <%= 인데, <%= 로 태그를 열어 jsp문을 담고 %>로 닫으면 된다.

<h2><%= userObject.name =>님 안녕하세요</h2>

그런데 <%= 외에도 다른 한가지 명령어가 더 있었다. 바로 <%-

이 둘의 차이는 극명한데, <%=는 escape 기능이 있어 <> 와 같은 특수 문자를

&lt&gt로 변환하여 출력하고 <%-는 그와 반대로 태그 효과가 반영된 내용을 출력한다.

따라서 <%=를 사용하여 가져온 데이터에 태그가 있다면

&ltimg&gt 와 같은 모습으로 출력되어 태그가 적용되지 않는다.

결국 =- 로 바꿔주면 되는.. 해결하는데 1초도 걸리지 않는 문제였다.

아~ 이게 선배 개발자 분들이 말씀하신 ‘삽질’이구나!!


#삽질