2/4 토 (ejs와 `express-ejs-layouts` 동시 사용시 가능한 url 경로는 오직 query string 방법뿐) TIL, TIT

TIL | WIL

2/4 토 (ejs와 `express-ejs-layouts` 동시 사용시 가능한 url 경로는 오직 query string 방법뿐) TIL, TIT

깊은바다거북 2023. 2. 5. 01:24

(베이커리 이커머스 프로젝트 4일차)

프론트 작업에 들어갔는데 자괴감이 든다. 한 달 반 전 2번째 프로젝트를 할 때보다도 실력이 뒤쳐진 것 같아서…

힘든 하루였다.

오늘 한 일

관리자 회원 관리(목록조회 + 페이지네이션) 페이지 완성

관리자 상품 관리(목록조회 + 페이지네이션) 페이지 완성

빵 이미지 출처:

https://www.breadtop.com.au/

https://labaking.com/#!products/desserts/29/black-forest/

참고 이커머스 사이트

https://flone.jamstacktemplates.dev/home-furniture-two

(위의 상위 사이트) https://wrapbootstrap.com/search?q=ecommerce

네이버 스마트스토어 판매자 페이지 https://sell.smartstore.naver.com/#/products/origin-list

이미지 저장하는 방법들

sdk s3 bucket

multer

(Docs들)

express-ejs-layouts 모듈 사용법 - https://www.npmjs.com/package/express-ejs-layouts

sequelize (구체적) api 문서 - https://sequelize.org/v3/api/model/

express.js res.render()와 그 외 문서 - https://www.geeksforgeeks.org/express-js-res-render-function/

“Tracking” a remote branch

로컬 브랜치더러 원격 브랜치를 “트래킹하라”고 지정해줄 수 있다. 이것의 장점은:

git pull origin develop 대신 git pull 로 명령할 수 있다.

타겟 원격 브랜치와 비교해서 몇 커밋을 앞서거나 뒤지는지 간단히 확인받을 수 있다.
```
> git status
On branch main
Your branch is ahead of 'origin/main' by 42 commits.
  (use "git push" to publish your local commits)
...
```
⇒ 내가 원하는 게 바로 여기서 “Your branch is ahaed of ‘origin/develop’ by 2 commits.” 이런 식으로 안내 받는 것이다.

관계 설정 방법:

존재하는 원격 브랜치 origin/dev를 기반으로 새 로컬 브랜치 만들고 tracking 지정하기:
```
$ git checkout --track origin/dev
Branch dev set up to track remote branch dev from origin.
Switched to a new branch 'dev'
```
⇒ 원격과 같은 이름으로 로컬 브랜치 dev를 만들고 tracking까지 지정해줌.

존재하는 로컬 브랜치 dev를 기반으로 새 원격 브랜치 origin/dev를 만들고 tracking 지정하기:
```
$ git push -u origin dev
```

현재 위치의 로컬 브랜치에게 트래킹할 원격 브랜치를 origin/dev로 (재)지정해주기:
```
$ git branch -u origin/dev
```

-u 플래그의 의미

git push -u origin master 에서

: git push --help 명령으로 이동한 docs 페이지에 따르면 -u (--set-upstream) 플래그의 역할은 다음과 같다.

For every branch that is up to date or successfully pushed, add upstream (tracking) reference, used by argument-less git-pull(1) and other commands. For more information, see branch.<name>.merge in git-config(1).

⇒ 즉 -u 뒤에 붙은 원격 브랜치를 트래킹하도록 추가 설정 (push가 성공적으로 된 경우)

git branch -u origin/dev 에서

: 역시나 docs에 따르면

-u <upstream>
--set-upstream-to=<upstream>
Set up <branchname>'s tracking information so <upstream> is considered <branchname>'s upstream branch. If no <branchname> is specified, then it defaults to the current branch.

⇒ -u 뒤에 붙은 원격 브랜치를 트래킹하도록 설정함. (=git push에 쓰인 것과 같은 역할)

⇒ 전체 syntax:

git branch 원하는_로컬_브랜치 --set-upstream-to=원하는_원격저장소_별명/추적_대상_원격_브랜치

예)
git branch dev --set-upstream-to=origin2/develop

만약 현재 로컬 브랜치가 이미 dev라면)
git branch -u origin2/develop

⇒ 만약 대상_원격_브랜치가 아직 존재하지 않는 상태이고 현재 로컬 브랜치에 이미 트래킹중으로 짝지어진 다른 원격_브랜치가 있다면, 그냥 저 위의 명령어로는 안 되고 먼저 git branch --unset-upstream 명령어로 현재 트래킹을 끊고, 그 후에 저 위의 명령어를 쓰거나 다음 push 때 git push -u를 쓰도록 한다.

결과:

git branch -u origin/develop

으로 다음과 같이 원하는 결과를 받아볼 수 있게 됨:

> git branch -u origin/develop
branch 'main' set up to track 'origin/develop'.

> git status
On branch main
Your branch is ahead of 'origin/develop' by 4 commits.
  (use "git push" to publish your local commits)

nodemon이 ejs 변경도 인식하게 하기:

nodemon.json 파일을 만들지 않았을 때 노드몬 기본 설정은 .js, .mjs, .json 파일을 추적한다. 현재 ejs로 작업중이어서 이 또한 추적 확장자로 넣기 위해 설정파일을 만들었다.

// nodemon.json
{
	"ext": ".js, .ejs, .json"
}

⇒ 잘 된다.

에러: `express-ejs-layouts`사용시 url에 슬래시(/)를 넣으면 “body” 템플릿으로 인식 못함 주의

🚩

⇒ 이것의 중요한 의미는, url에 파라미터를 전달하는 방법 중 req.params는 사용하지 못한다는 것이다. 반드시 쿼리스트링 방식으로 전달하여 req.query로 받아야, 헤더와 푸터가 예쁘게 잘 적용된 채로 남아있을 수 있다.

아래와 같이 슬래시(/)를 써준 경로로 라우터 경로를 지정하였더니 디폴트 페이지 안의 ‘body’ 페이지라고 인식을 못하는 것을 발견했다:

// views/partials/header.ejs
<li><a href="/admin/products" class="nav-link px-2 link-dark">(임시)관리자 페이지로</a></li>

// views/layouts/main.ejs
<body>
    <div class="container-xxl px-md-5 bg-white shadow-lg">

        <%- include('../partials/header.ejs') %>
        
        <main>
            <%- body %>
        </main>
        
        <%- include('../partials/footer.ejs') %>
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>

그래서 이렇게 나와야 하는 페이지가

이렇게 나옴: (헤더와 푸터의 스타일이 인식이 안 되는 듯)

⇒ 가만 보니 이상하다. express-ejs-layouts가 인식을 못 하는 게 아니고 (”body”자리에 잘 끼워넣고는 있으니) 스타일시트가 적용되지 않고 있는 것 같다. 왜지..?

// views/layouts/main.ejs
<head>
	...
	<link rel="stylesheet" href="css/styles.css">
</head>

이걸 해결하는 다른 방법이 있을지도 모르겠다. 다만 지금은 일단 경로명에 슬래시(/) 대신 언더바로 표현하는 것으로 넘어가기로 한다.

에러: ejs 파일명에 점(.)을 넣을 시 res.render()로 인식하지 못함

또 파일명을 admin.product.list.ejs 같이 설정하면 res.render로 파일명을 넣어줄 때 “list 모듈을 찾지 못했음” 에러가 뜬다.

⇒ 파일명을 admin_product_list.ejs로 바꾸고 res.render(’admin_product_list’)와 같이 호출하니 잘 됨.

EJS 기초

공식 문서:

EJS

'E' is for 'effective'. EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript.

https://ejs.co/#docs

<% 제어 흐름을 위한 'Scriptlet' 태그, 출력 없음

<%_ 'Whitespace Slurping' 스크립틀릿 태그, 그 앞의 모든 공백 제거

<%= 값을 템플릿으로 출력(HTML 이스케이프됨)

<%- 이스케이프 처리되지 않은 값을 템플릿으로 출력합니다.

<%# 주석 태그, 실행 없음, 출력 없음

<%% 리터럴 '<%' 출력

%> 일반 종료 태그

%> 트림 모드('newline slurp') 태그, 줄 바꿈 다음 트림

_%> 'Whitespace Slurping' 종료 태그, 그 뒤의 모든 공백 제거

res.send() 전에 sequelize 쿼리 결과를 인터셉트할 때 지저분하지 않게 데이터만 깔끔히 받는 방법

결론: raw: true 옵션 지정해주기.

⇒ repository 계층에서 실제 findAll() 등의 메소드로 조회할 때 옵션값으로 raw: true를 해주면 된다. 그러면 res.json({data})로 보내진 결과값을 볼 때와 똑같이 깔끔하게 콘솔로도 찍을 수 있게 된다.

HTML img 태그 경로 지정 제대로 하기

ejs 파일에 작성중이든 뭐든, 핵심은 Express를 쓰고 있다는 것이고, 이 Express의 미들웨어로 정적 파일 경로를app.use(express.static('public')); 지정해줬다는 것이다.

이리하여 프로젝트 어디서든 css, js, img 파일들은 디폴트로 public 폴더 내부를 찾게 된다.

예시)

이미지 파일 위치가 루트/public/img/sweet_cake.jpg 라면, 다음과 같이 쓰면 된다:

// app.js
app.use(express.static('public')); // app.js와 public 폴더는 같은 레벨

// 프로젝트 내 어느 경로, 어느 파일에서든
<img src="img/sweet_cake.jpg" /> // = public/img/sweet_cake.jpg

Uploaded by N2T