[내일배움캠프] 최종 프로젝트 Day 29 | Node.js 4기 | Day 110 | 24.04.23.(화)

html코드에 script로 javascript 코드를 포함하는 것과 ejs의 차이가 뭐야? 미친 디테일로 설명해줘봐.

 

```

 

HTML 문서에 JavaScript 코드를 포함하는 방법과 EJS(Embedded JavaScript templating)를 사용하는 것 사이에는 여러 차이점이 있습니다. 두 방법 모두 웹 페이지에 동적 내용을 추가하는 데 사용될 수 있지만, 구현 방식과 사용 사례에서 차이가 나타납니다.

1. 정의 및 기본 개념

• HTML 내의 JavaScript: HTML 문서 내에서 <script> 태그를 사용하여 직접 JavaScript 코드를 작성하거나 외부 JavaScript 파일을 참조하는 방법입니다. 이를 통해 클라이언트 사이드에서 동적인 기능을 구현할 수 있습니다.
• EJS(Embedded JavaScript Templating): 서버 사이드에서 HTML을 생성하기 위해 JavaScript를 사용하는 템플릿 엔진입니다. EJS는 특정 데이터를 HTML 템플릿에 바인딩하여 동적 웹 페이지를 생성할 수 있게 해줍니다.

2. 실행 시점

• HTML 내의 JavaScript: 브라우저에서 HTML 문서를 로드할 때 실행됩니다. 사용자의 상호작용에 따라 동적으로 컨텐츠를 변경할 수 있으며, 주로 클라이언트 사이드에서 작동합니다.
• EJS: 서버 사이드에서 실행됩니다. 클라이언트에게 보내기 전에 서버에서 HTML 문서를 생성합니다. 이 과정에서 서버 사이드의 데이터를 HTML에 삽입할 수 있습니다.

3. 주요 사용 사례

• HTML 내의 JavaScript: 클라이언트 사이드에서의 이벤트 처리, 페이지 내 동적 요소의 조작, AJAX 요청을 통한 비동기적 데이터 로딩 및 처리 등에 주로 사용됩니다.
• EJS: 데이터베이스에서 가져온 데이터를 웹 페이지에 표시하거나, 사용자별 웹 페이지 컨텐츠를 동적으로 생성하는 등 서버 사이드 렌더링에 적합합니다.

4. 장점 및 단점

• HTML 내의 JavaScript 장점: 클라이언트 사이드에서 바로 실행되므로 사용자 상호작용에 대한 실시간 반응 구현이 가능합니다. 단점으로는, 모든 데이터가 클라이언트에 노출되어 있어 보안 측면에서 취약할 수 있습니다.
• EJS 장점: 서버 사이드에서 데이터를 처리하고 HTML을 생성하기 때문에, 보안 측면에서 더욱 안전합니다. 또한, 서버 사이드 데이터를 직접 활용하여 동적인 페이지를 더 쉽게 생성할 수 있습니다. 단점으로는, 페이지를 렌더링하기 위해 서버와의 통신이 필요하므로, 클라이언트 사이드만 사용하는 경우보다 응답 시간이 느려질 수 있습니다.

5. 결론

HTML 내의 JavaScript 사용과 EJS 사용은 각각의 사용 사례와 필요성에 따라 선택됩니다. 클라이언트 사이드에서의 동적인 변화와 상호작용이 중점이라면 HTML 내의 JavaScript가, 서버 사이드 데이터를 기반으로 한 동적 웹 페이지 생성이 중점이라면 EJS가 더 적합할 수 있습니다.