OSD600 - 나의 세 번째 Hacktoberfest 기여

1. 소개

이번에는 음식 주문 시스템용 API를 만드는데 주목하는 프로젝트를 진행하고 있습니다. 이 프로젝트는 JavaScript, CSS 및 Embedded JavaScript(EJS)를 사용했습니다.

EJS는 사용자가 일반 JavaScript로 HTML 마크업을 생성할 수 있는 템플릿 언어입니다. 이 언어는 나에게 완전히 새로운 언어이므로 그것에 대해 배울 수 있는 기회를 스스로에게 주고 싶습니다.

2. 문제

처음에는 댓글 작성을 허용하기 전에 사용자 인증을 확인해야 하는 issue에 할당되었습니다. 하지만 작업을 시작했을 때 이 문제가 해결되지 않은 문제와 관련되어 있음을 깨달았습니다. 결과적으로 나는 메인테이너와 소통하고 프로젝트의 다른 문제로 이동하기로 결정했습니다.

내 새 항목issue은 메뉴 페이지 생성에 관한 것으로, 해당 항목url은 쿼리 문자열을 수신하고 제공된 쿼리 문자열을 기반으로 해당 사진을 표시합니다.

3. 솔루션

다음은 문제를 해결하기 위해 수행한 몇 가지 단계입니다.

페이지 상단에 가장 인기 있는 음식이나 새로운 음식을 보여주는 슬라이더를 만듭니다.

사진

을 포함할 일부<div><img></div> 태그를 만듭니다.

css 스타일 만들기

슬라이더를 제어하는 ​​생성slider.js

// slider.js
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slide");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace("active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 4000); 
}

결과:

이름, 가격 등과 같은 일부 정보를 사용하여 식품 항목을 생성합니다.

grid를 사용하여 식품 항목

을 만듭니다.

css 스타일 만들기

결과:

메뉴 페이지에 대한 좋아요를 업데이트href하고 쿼리 문자열을 읽고 템플릿에 전달합니다menu.ejs.

메뉴 섹션의 업데이트href가 메뉴 페이지에 연결되고 적절한 쿼리 문자열도 전달하도록 합니다.

<li class="mb-2"><a href="/menu?type=starters">Starters</a></li>
<li class="mb-2"><a href="/menu?type=burgers">Burgers</a></li>
<li class="mb-2"><a href="/menu?type=pastas">Pastas</a></li>
<li class="mb-2"><a href="/menu?type=wraps">Wraps</a></li>
<li class="mb-2"><a href="/menu?type=desserts">Desserts</a></li>

쿼리 문자열을 가져와서 템플릿에 전달합니다menu.ejs.

router.get('/menu', verifyUser,  function(req, res, next) {
  let loggedIn = false;
  if (req.cookies && req.cookies.user && req.cookies.login) {
    loggedIn = isUserValid(req.cookies.user, req.cookies.login);
  } 
  let type  = req.query.type;
  res.render('menu', { title: 'Express', type ,loggedIn});

});

템플릿에서 데이터 검색 및 데이터 확인menu.ejs

EJS를 접해본적이 없어서 사실 가장 까다로운 부분입니다. 이 언어에 대한 설명서를 찾고 몇 가지 코드 예제를 읽어 구문의 의미를 이해하는 데 약 10분이 걸립니다.

일부if 문을 사용하여 문자열 쿼리에 해당하는 제목을 표시했습니다.
참고: 동일한 코드를 사용하지만 "type"is undefined 오류로 인해 이 단계에서 약 10분 동안 멈췄고 해결책을 찾았을 때 무엇을 말해야 할지 모르겠습니다 :x . 서버를 다시 시작하세요!!

  <% if (type == 'starters') { %>
   <div class="title"><h1>Starters</h1></div>
  <%} %>

  <% if (type == 'burgers') { %>
   <div class="title"><h1>Burgers</h1></div>
  <%} %>

  <% if (type == 'pastas') { %>
   <div class="title"><h1>Pastas</h1></div>
  <%} %>

  <% if (type == 'wraps') { %>
   <div class="title"><h1>Wraps</h1></div>
  <%} %>

  <% if (type == 'desserts') { %>
   <div class="title"><h1>Desserts</h1></div>
  <%} %>   

그런 다음 문자열 쿼리 값을 사용하여 올바른 그림에 대한 해당 경로를 가져옵니다.

<div class="grid-item">
 <img src="/images/<%= type%>2.jpg"> 
 ...
</div>

결과:




메인테이너는 PR을 매우 빠르게 검토했고, 아무런 요구 사항 없이 내PR를 병합했습니다.

4. 전반적으로

제 생각에는 EJS의 문법이 처음에는 혼란스러울 것이지만 그것으로 작업하는 것은 여전히 ​​재미있습니다.
게시물을 읽어 주셔서 감사합니다.

즐거운 코딩하세요!