본문 바로가기
Project/축구모임 홈페이지개발

[축구모임 홈페이지개발] 11/30 개발일지 Nodejs

by 한33 2023. 12. 1.

이전에 공지사항탭에서 게시물을 눌러서 notice-detail 로 렌더링시 로그인이 안되어있으면

login.ejs 로 이동시켜서 로그인을 강제시키고 게시물 접근을 막았었다.

근데 alert 를 이용해서 사용자에게 로그인이 필요하다는 문구를 보여줄 필요가 있다고 판단되었다.

 

지금 아직 풀리지 않은 의문인건데,

만약에 서버에서 

res.render('login', {message: '로그인이 필요합니다.'});

 

다음과 같은 꼴로 message 변수에 문자를 넣어서 특정 ejs 로 넘긴다고 가정해보자.

그러면 나는 ejs 파일에서 저 변수를 사용하기 위해서 

<%= message%>

 

다음과 같이 변수를 출력할텐데,

그럼 저 변수가 불러와있지 않은 상태에서 접근을 하면 서버 에러가 난다.

 

이럴 때 전문가들은 어떤 방법으로 코드를 작성할까?

if 문을 사용해서 예외처리를 사용하나?

아니면 다른 방법이 있나

이 문제가 해결되어야 더 원할한 프로젝트를 만들 수 있다.

이번 주말에 시간적 여유가 있으니 이 부분을 꼭 해결해봐야한다.

 

내가 일단 임시방편으로 여유가 없이 생각해낸 방법은

위의 message 변수를 사용할 수 있는 login.ejs 파일에서

<script>
        alert('<%= message%>')
    </script>

 

이 코드만 추가한 복사파일인

login-need.ejs 파일을 만들어냈고,

위 message 는 login-need.ejs 로만 전달.

공지사항의 notice-detail 로 접근을 할 시에 login-need.ejs 로 렌더링을 시키는 것이다.

하지만 이러면 단 3줄의 차이만 있는 로그인 페이지가 하나 더 만들어지는거고 용량적으로나 분명히 로스가 생길거라고 생각한다.

 

이번 주말에 꼭 해결해야되는 문제.

하지만 일단은 정상작동됨


오늘은 시간이 없어서 간단한 디자인적 요소를 추가했다.

나는 앱개발은 배우지 않았기 때문에 이 웹을 만들고 사용자들이 모바일로 더 쉽게 접근할 수 있게 

아이폰같은 경우 safari 로 들어가서 해당 홈페이지 접속 후에 "홈화면에추가" 버튼을 눌러서

배경화면에 아이콘을 만드는건데, 그런 경우 내가 이전 프로젝트인 <나의 해방일지> 에서 겪어보니까

예를 들면  [나] 이런 이모티콘과 함께 앞글자만 따져서 아이콘이 자동생성 후 저장이 되었다.

나는 앱처럼 이 아이콘이 내가 원하는 아이콘으로 변경되길 원했고 검색을 했다.

 

아이폰의 경우:

<link rel="apple-touch-icon" sizes="180x180" href="여기에_이미지_주소_붙여넣기">

 

또는 Android의 경우:

<link rel="apple-touch-icon" sizes="180x180" href="여기에_이미지_주소_붙여넣기">

 

위의 코드들을 홈태그 안에 입력해주니 정상적으로 아이콘이 변경되었고 보기 좋아졌다.

 

문득 저 위에 rel 이 무슨 의미일까 궁금해서 검색을 해보니

 

rel은 HTML에서 사용되는 속성(attribute) 중 하나로, "relationship"의 약어입니다. 이 속성은 현재 문서와 링크된 리소스 사이의 관계를 정의합니다.

<link> 요소에서 rel 속성은 링크된 문서와 현재 문서 간의 관계를 명시하는 데 사용됩니다. 위에서 제시한 코드에서 rel="apple-touch-icon"는 링크된 문서(즉, 웹 페이지)와 Apple 기기(주로 iOS 기기) 간의 관계를 나타냅니다.

 

라는 답변을 얻었다.