내일배움캠프 TIL (230314): ejs로 변수 전달하기

ejs로 변수 전달하기

워크샵 상세 페이지에서 로그인을 한 사용자만 워크샵 신청을 할 수 있도록 제한을 하고 싶었다. 즉, 워크샵 신청 버튼을 누르면 사용자가 로그인을 했는지 확인해서 비로그인 상태일 시 '로그인 후 이용 가능합니다'라는 경고창 메시지를 노출해야 한다.

워크샵 상세 페이지 render (신청 페이지 모달 포함)```

  @Get('/detail')
  @UseGuards(JwtUserPageGuard)
  async getWorkshopsDetail(
    @CurrentUser() user: CurrentUserDto | boolean,
    @Req() req: Request,
    @Res() res: Response,
    @RealIP() clientIp: string,
  ) {
    if (typeof user === 'boolean' && user === false) {
      return res.render('workshops/workshop-detail', { user: false });
    }
    if (typeof user === 'object') {
      try {
        const refreshToken = req.cookies[TOKEN_NAME.userRefresh];
        // refresh 토큰 인증 검사
        await this.authService.checkRefreshTokenInRedis(
          user.id,
          user.user_type,
          clientIp,
          refreshToken,
        );

        return res.render('workshops/workshop-detail', { user: user });
      } catch (err) {
        res.clearCookie(TOKEN_NAME.userAccess);
        res.clearCookie(TOKEN_NAME.userRefresh);
        return res.render('workshops/workshop-detail', { user: false });
      }
    }
    return;
  }

@UseGuards 데코레이터를 통해 user 로그인 여부를 확인한다. 우리는 ejs로 프론트 화면을 렌더링하고 있으므로 res.render를 통해 ejs 파일로 변수를 전달할 수 있다.

// user 로그인 여부 데이터 확인 후 false면 워크샵 문의 신청 막기
      const user = '<%= user %>'
      const modal = document.querySelector('#exampleModal')
      modal.addEventListener('show.bs.modal', (e) => {
        if(user === 'false')
        alert('로그인 이후 이용 가능합니다!')
        e.preventDefault()
      })

ejs 파일의 script 태그 안에 const user = '<%= user %>'와 같은 형태로 user 변수를 활용할 수 있도록 보내준다. 다만 user는 따옴표와 함께 전달되었으므로 값이 문자열로 변환된다. 예를 들어 false라면 'false'라는 문자열로 전달된다. 따라서 if 조건문에 user === 'false'와 같이 분기 처리한다.

user가 false라면 부트스트랩 모달 창이 열리는 이벤트를 막아야 한다. 부트스트랩에서 모달창이 열릴 떄 실행되는 이벤트 show.bs.modal를 이벤트로 등록하고, 경고창이 노출된 후 e.preventDefault 함수를 추가하여 모달창이 열리지 않도록 한다.

*e.preventDefault: 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드