whenever purple

N빵

위치기반 공동구매 플랫폼 'N빵'입니다.<N빵>은 혼자사는 것보다 같이 구매하면 더 이득이라면?!
이웃과 함께 구매할 수 있는 공동구매 커뮤니티 서비스입니다.
자신의 주변에있는 공구 게시글을 작성해보고, 참여해 보세요:)더 좋은 서비스로 개선해나가기위해 피드백 이벤트를 진행중입니다.

많은 관심과 참여부탁드립니다!

5월 25일 ~ 6월 1일 (23시 59분)까지 공구게시글에 참여하시거나,
피드백을 작성해주신 분들에게는 추첨을 통해 치킨3마리와 메가커피 기프티콘 50잔을 빵빵 쏩니다!
당첨자 발표 및 상품 발송은 2022년 6월 2일 순차적으로 발송할 예정입니다

N빵 URL : https://nbbang.site

        Back-end(Node.js) : 장윤아, 오경은, 한재혁
        Front-end(React) : 권영민, 곽진호, 장수찬
        Designer(UI/UX) : 김원경, 이화정

웹 페이지와 모바일로도 확인가능합니다 :)

5주차 한일!

- 소켓/ CRUD 버그 수정 및 서비스배포

- 테스트 서버 연결

- 마켓팅, 유저피드백 반영

유저피드백 및 수정사항

1. 인터넷이 느릴 경우 글 등록하기를 여러번 누를 수 있는 현상이 있음

(게시글이 중복하여 생김)

2. 가격, 인원, 제목, 상세위치, 내용, 채팅 글자 수 제한

3. 설명페이지의 잘못된 이미지 변경

4. 비로그인 상태로 메인페이지 접근 시 바로 설명 페이지 보여주기

(설명페이지가 미흡하다는 의견이 있어 추가할 예정)

5. 게시물 카테고리 추가

6. 오른쪽 하단의 시/구/동 버튼을 누를 경우 해당 레벨에 맞게 화면 범위 설정

7. 채팅 유저리시트에서 외부를 클릭했을 경우 닫히게 설정

8. 브라우저 탭 상단의 배경이 흰색일 경우 로고가 보이지 않아, 색상 조정

9. 게시글이 없을 경우 생성되는 문구의 간격 조정

0. 채팅창에서 이용자가 이전 내용을 보고 있을 경우 새로운 메세지를 토스트메시지 형식으로 제공

11. 후기 서비스 (구현중)

12. 유저정보수정 (구현중)

13. 회원탈퇴 (구현중)

3주차 한 일!

3주차에는 실전프로젝트에 대해서 중간점검을 해야했다. 

우리가 최소 기능 구현하기로 했던 것들을 마무리하고 정리했다.

중간발표 시, (또는 인터뷰시) 알아두면 좋았을 것들.

- Websocket 과 socket io 의 차이점?

- 엔진엑스를 사용하는 이유는?

- HTTP 와 HTTPS 의 차이점? (HTTPS의 이점은?)

2주차에 한일!

완료된 로그인, 회원가입 API를 배포하여 프론트와 연결하는 작업을 했다. 

여유가 생겨 회원가입 인증코드 라이브러리(nodemailer)를 추가했다. 

회원가입을 하려면 인증코드가 필요하게 되서 번거롭게 됬다.

기획단계에서 socket관련 지식이 없으니 API를 추가한다거나 이벤트 이름을 설정하지 않았었다.

또한, mysql 에 채팅관련한 테이블을 추가했고, 소켓을 배포된 환경과 연결을 시켰다. 

메인페이지같은 경우, 프론트에 필요한 데이터를 지속적으로 추가되어

지속적으로 바뀌었다. 그만큼 Mysql을 쿼리문의 Inner Join, 새로운 group 생성하여 다시 적용했다.

Mysql 스케줄러를 통해서 1분마다 게시판 종료시점을 지난 경우, 완료된 상태로 자동화 시켰다.

또한, 이메일로 보내지는 인증코드는 DB에 저장되고 있어 5분마다 삭제되어 DB의 용량이 과부화 되지 않게 하였다.

2주차: 기술적인 이슈와 해결

이슈1. Mysql 에러, Error Code: 1071. Specified key was too long; 

Mysql에서 Primary Key(PK)를 여러개 설정 할 수 있다는 말에,

유저 고유번호, 이메일, 닉네임, 심지어 이미지까지 설정을 했다. 

하지만, 이미지같은 경우 Varchar(5000)으로 설정해둔 상태였다. 

총 PK의 문자길이가 제한이 되어있는데, 그 길이보다 더 길어져서 생긴 문제였다. 

이미지를 PK에서 제외하니, 해결되었다. 

프로젝트: Social Study Network (SSN: 쓴)    *프론트엔드와 첫 협업프로젝트

설명: 팀원들, 학교친구들과 공부시간을 공유하며 응원할 수 있는 소셜네트워크 사이트입니다.

제작: 2022.04.08~2022.04.14

시연영상: https://youtu.be/ZAMqhx5jCNU

깃허브: https://github.com/ymkwon3/ssn (프론트엔드) / https://github.com/moonhjang/miniproject_back (백엔드)

노션: https://www.notion.so/d556601ee2de4629a9a1947675f23dd6

와이어프레임

사용 기술

• Server: AWS EC2 (Ubuntu 18.04 LTS)
• Framework: Express (Node.js)
• Database: MongoDB (Mongoose)
• JWT (Json Web Token)
• Crypto-js
• CORS
• Front-end: React

핵심 기능

• 로그인/ 회원가입 페이지
  • 아이디 패쓰원드 입력 가능
  • 로그인 시, 토큰전달 (모든페이지에서 해당 토큰확인 기능)
  • 빈칸 및 아이디 형식(4자이상, 대소문자, 숫자, 특수문자(!@#"-_)) 확인 가능
  • 회원가입시 아이디/닉네임 중복검사
  • 비밀번호 재확인 일치 확인 가능
• 메인페이지
  • 해당 유저와 친구리스트 조회
  • 공부시간 시작/정지 버튼
  • 총 공부시간 조회가능
  • 친구 추가가능
  • 친구와 공부시간 순위 확인가능
  • 친구의 공부시간 및 접속 확인 가능
• 방명록 페이지
  • 등록된 친구 방명록에 코멘트 조회, 작성 가능
  • 방명록 주인과 방명록 작성자만 삭제 가능
  • 본인 방명록 페이지에서는 상태메세지 수정 가능

Trouble Shooting   

▶ Auth-Middleware에 대해 프론트 업무에 대한 이해부족했다.

→ 개인프로젝트 진행시, 로그인 실행시 로그인인증 확인API도 함께 확인되었다. 그때, 로컬스토리지에 유저 정보를 넣어두었다. 하지만 프론트에서 로그인인증 확인하는 방법이 따로 있기 때문에 굳이 필요없어 제외를 했다. 저장된 토큰으로 모든페이지의 로그인 인증확인하는 방법을 동일하여 문제없이 작동되었다. 

▶ 로컬에 있는 MongoDB를 사용하고자 했지만, 로컬DB의 내용을 확인하려고 하니 배포과정에서 오류가 발생하였다. 

→ 로컬DB를 사용하지 않고 MongoDB클라우드에 직접 연결하여 실행하였다. 

▶ _id를 commentid 로 사용하게 되면서, _id를 백엔드에서 object에서 string으로 객체 type을 변경해야하는 점에서 어려웠다.

→ Comment 스키마에서 _id를 commentid로 만들어 string으로 변경하여 전달하였다. 

개인회고

첫 프론트엔드와의 협력프로젝트였다. 프론트업무에 대한 지식이 부족했기에 표현방식과 이해하는 방식이 굉장히 달랐다. 프로젝트 중반부터는 서로의 업무를 이해하고 나니 생각보다 프로젝트가 문제없이 풀렸다. 

개인 프로젝트시에는 내 작업을 웹사이트에서 확인하는 것이 편했는데, 협력할 때는 확인할 수 없는 뷰가 없어서 불편했다. 썬더 클라이언트가 그 역할을 대신했지만, 회원가입이나 로그인 시 전달되는 정보를 직접작성해야하는 번거로웠지만 잘 적응 할 수 있었다. 특히, 모든페이지를 auth-middleware로 연결 후에는 토큰이 없기에 썬더 클라이언트를 사용할 수 없었다. (이후 알아보니, 헤더에 토큰을 넣어 확인해볼수 있다는 것을 알게되었다.) 

협력했던 프론트 분이 굉장히 잘하시던 분이라, 밴엔드로서 굉장히 도움도 많이 받았고 수월하게 프로젝트를 진행할 수 있었다. 프로젝트 진행시, 염려했던 CORS 이슈나 auth-middleware(인증미들웨어)에 대한 이슈는 거의 없었다. 배포 초반, 인증 미들웨어에 대한 약간의 이슈가 있었으나 콘솔찍으면서 전달하고 전달받는 데이터를 확인하니 큰 이슈없이 해결되었다.

굉장히 만족스러웠던 점은 모든 기능들이 문제없이 잘 작동했고, 모든 팀원들 또한 만족스럽게 끝낸 프로젝트라서 더 좋았다. 우리 팀원 모두 흥해라!

항해99 5주차에는 프론트엔드와 백엔드가 함께 미니프로젝트를 진행하게 되었다.

그전에도 CORS 모듈을 설치에 진행하는 것이 좋다라고만 들었는데, 

프론트 작업과 연결시 필요한 작업이기에 CORS를 자세히 알아보기로 했다.

CORS란?

CORS(Cross-Origin Resource Sharing), 교차 출처 리소스 공유라고 해석된다. 
CORS정책은 우리가 가져오는 리소스들이 안전한지 검사하는 관문이다. 

웹 개발을 하다보면 CORS 정책 위반으로 인해 에러가 발생한다. 콘솔에서 아래와 같은 메세지를 확인할수 있다.

CORS 관련 이슈는 모두 CORS 정책을 위반했기 때문에 발생한다.

위의 에러는 CORS를 허용해서 아무런 탈 없이 다른 출처 리소스를 공유해달라는 권고사항과 같은 것이다.

CORS라는 방어막 덕분에 우리가 이 곳 저 곳에서 가져오는 리소스가 안전하다는 최소한의 보장을 받을 수 있다.

출처 (Origin) 란?

서버의 위치를 의미하는 URL은 Protocol, Host, Port 까지를 의미한다. 

웹에는 SOP(Same Origin Policy) 와 CORS(Cross Origin Resource Sharing) 두가지 정책이 있다.

▶ SOP(동일 출처 정책) ◀

같은 출처에서만 리소스를 공유할 수 있다" 라는 규칙을 가진 정책

→ URL의 구성요소 중 Protocol, Host, Port 세가지 동일한지 확인한다.

→ 같은 Protocol, Host, Port을 사용한다면 요소는 다르더라도 같은 출처로 인정된다.

→ 리소스가 자신의 출처와 다를경우, 브라우저는 교차출처 요청을 실행한다. 

즉, Protocol, Host, Port 중 하나라도 일치하지 않으면 Cross Origin 이라고 한다. 

▷ 실무에서 참고하자면 ◁

프론트 서버와 백엔드 서버 연결시

프론트 서버 URL이  http://localhost:3000,

백엔드 서버 http://localhost:8080 일때

SOP 정책에 어긋나기때문에, 서버로부터 응답이 넘어올 때 

브라우저에서 CORS 정책 오류를 발생시킨다. 

▶ CORS (교차 출처 리소스 공유) ◀

추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처의

선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게  알려주는 체제이다. 

CORS 동작방식

1. 클라이언트에서  HTTP요청 헤더에 Origin을 담아 전달한다. 

2. 서버는 응답헤어에 Access-Control-Allow-Origin을 담아 클라이언트로 전달한다.

3. 클라이언트에서 자신이 보냈던 요청의 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교한다. 

자신이 보낸 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교하여 차단할지 말지 결정한다. 

만약 유효하지 않다면 그 응답을 사용하지 않고 버린다. 

(위의 경우 둘다 http://localhost:3000 이기 때문에 유효한 경우다.)

아래의 블로그를 참고하여 작성되었습니다.

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

프로젝트 : 로그인/회원가입 페이지

설명 : 로그인, 회원가입, 게시글 코멘트 등록, 조회, 수정, 삭제 기능구현 연습을 위해 제작되었습니다. 

제작 : 2022.03.25 ~ 2022.03.31

시연영상: https://youtu.be/sNPd6aWwgQM

깃허브:  https://github.com/moonhjang/node_1

사용 기술

• Server: AWS EC2 (Ubuntu 18.04 LTS)
• Framework: Express, Mongoose(Node.js)
• Database: MongoDB
• front-end: HTML5, CSS3, Javascript, Jquery, bootstrap

핵심 기능

• 회원가입페이지
• 로그인 페이지 
• 로그인 검사
  • 조회페이지 제외, 로그인 한 경우만 볼수 있도록 하기
• 댓글
  • 로그인한 사용자만 댓글 추가/ 수정/ 삭제

Trouble Shooting

▶ 인증이 필요한 페이지와 인증미들웨어를 연결되어있지만, 안내 알람이 JS파일이 아닌 HTML파일의 알람을 띄우는 이슈가있었다. 

→ 인증 미들웨어.js와 router.js 이 제대로 연결되어 있지 않았다. 로그인시, 미들웨어와 연결된 로컬스토리지에 잘못된 인증키가 들어가게 되면서 인증 키를 제대로 전달해주지 못하면서 생겨난 이슈였다. 연결이 잘 되면서 알림이슈는 해결되었다. 

▶ 댓글 추가시, mongoDB의 subdocument이용방법으로 댓글을 추가하였다. 이와 같은 방법으로 조회를 하려고 했지만 예상치 못한 오류로 작동이 되지않았다.

→ 예상치 못한 오류를 잡기위해서 Try-Catch문을 이용하여 해결되었다.

+ 지난주 작업에서 아쉬웠던 비밀번호 암호화 처리 및, env 파일과 .gitignore을 사용하여 보안을 강화하였다.

Node.js 프로젝트를 

활성화시키면서 자동적으로 만들어지는

"package.json"

에 대해서 알아보고자 한다.

npm 이란?

npm은 Node Package Manager의 약어로, 명칭 그대로 노드 패키지 매니저이다.

노드가 자바스크립트 프로그램을 컴퓨터에서도 실행할 수 있게 해준다. 

자바스크립트 프로그램은 패키지로 npm에 등록되어 있으며

특정 기능의 패키지가 필요하다면 npm 에서 찾아 설치하면 된다.

package.json

프로젝트에 필요한 패키지를 추가하다보면 패키지가 어마어마해진다.
사용하는 패키지는 저마다 고유한 버전이 있으며,
동일한 버전을 설치하지 않으면 문제가 생길수 있다. 

이때 설치한 패키지의 버전을 관리하는 파일을
package.json 이라고 한다.

package.json 설치하기

프로젝트를 시작하기 전에 폴더 내부에 무조건 package.json부터 만들고 시작해야 한다!

npm init -y

* -y : 모든 항목에 Yes를 한다는 의미이다.

프로젝트 이름, 설명 등을 작성하고 싶다면, 

'npm init'로 실행시키고 콘솔창에서 작성할 수 있다.

아래의 형식으로 package.json 미리보기가 나온다.

{
  "name": "프로젝트 이름",
  "version": "프로젝트 버전",
  "description": "프로젝트 설명",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "작성자 이름",
  "license": "ISC",
  }
}

package.json 작성시 알아두기

package name :

패키지 이름으로 Package.json의 name 속성에 저장된다. 

version :

패키지 버전은 SemVer의 방식의 버전 넘버링을 따라 항상 세자리로 이루어져 있다. 

package.json에 가장 중요한 항목은 "name" 과 "version" 이다.

이 2가지 항목을 통해 패키지 고유성을 판별하게 된다.

필수 항목이며, 해당 내용이 없으면 패키지를 설치 할 수 없다.

description :

문자열로 기입해야하며, 

npm search로 검색된 리스트에 표시되어 만들어진 패키지를 찾고 이해하는 도움을 준다. 

entry point :

자바스크림트 실행파일 진입점. 보통 마지막으로 module.exports를 하는 파일을 지정한다. 

package.json의 main속성에 저장된다.

test commend : 

코드 테스트 시 입력하는 명령어를 의미한다.

package.json scripts 속성안의 test 속성에 저장된다.

git repository :

코드를 저장해둔 깃 저장소 주소를 의미한다.

소스에 문제가 생기면 사용자들이 이 저장소에 방문에 문제를 제기하거나

코드 수정본을 올릴 수 있다. package.json repository 속성에 저장된다.

keywords : 키워드를 문자열 배열로 설명되며,

npm search로 검색된 리스트에 표시되어 만들어진 패키지를 찾고 이해하는 도움을 준다.

bugs :

프로젝트의 이슈와 버그 트레킹을 볼수있는 url 또는 이슈를 알릴 email 주소를 입력한다. 

패키지 사용자가 문제가 있을 시 도움을 줄 수 있다.

 license : 

패키지 사용자들이 만들어진 패키지를 사용하기 위해 어떻게 권한을 얻고,

어떤 금기 사항이 있는지 이해하기 위해 라이센스를 명시해야 한다. 

dependencies :

패키지 설치시, 패키지 이름과 함께 설치된 버전이 저장된다.  

devDenpendencies :

패키지 모듈을 이용하는 사람이라면, 패키지 테스트 및 문서 작성에 사용되는

외부 프레임 워크는 다운로드를 원하지 않을 것이다. 

이러한 경우, devDependencies 객체에 디펜던시를 추가하는 것도 좋은 방법이다.  

더 자세한 사항은 아래의 링크를 참조할 수 있다.

https://docs.npmjs.com/cli/v8/configuring-npm/package-json

프로젝트: 게시글 페이지

설명: 게시글 목록 조회, 등록, 수정 삭제의 기능 구현을 연습을 위해 제작되었습니다. 

제작: 2022.03.18 ~2022.03.24

시연영상: https://youtu.be/hJivoIls7AQ

깃허브: https://github.com/moonhjang/node_1

사용 기술

• Server: AWS EC2 (Ubuntu 18.04 LTS)
• Framework: Express, Mongoose (Node.js)
• Database: MongoDB
• front-end: HTML5, CSS3, Javascript, Jquery, bootstrap

핵심 기능

• 게시글 목록조회페이지
  • 제목, 작성자명, 작성날짜 조회
  • 작성 날짜 기준으로 내림차순 정렬
  • 특정 게시글 선택시 게시글 조회페이지로 이동
• 게시글 작성페이지
  • 제목, 작성자명, 비밀번호, 작성내용 입력 후 저장
  • 입력란이 비어있을 시, "입력해주세요" 알람띄우기
• 게시글 조회페이지
  • 제목, 작성자명, 작성날짜, 작성 내용 조회
• 게시글 수정/삭제페이지
  • 입력란이 비어있을 시, "입력해주세요" 알람띄우기
  • 비밀번호가 일치할 시, 수정/삭제 가능
  • 비밀번호가 일치하지 않을 시, "비밀번호 불일치" 알람띄우기

Trouble Shooting 

Node.js의 시스템을 완전히 이해하지 못한채 프로젝트를 진행하게 되었다. 1~2일차은 Node.js에 대해서 배웠고, 3~4일차에는 웹사이트의 백엔드 역할에 집중하였다. 5~7일차에는 프론트와 백엔드에 연결에 집중하여 프로젝트를 진행하였다. Node.js의 짧은 이해와 짧은 시간동안 프로젝트를 진행하였기에 완성도는 떨어지지만, 목표하는 기능구현은 완성하였다. 

▶ DB저장시, 각 포스팅에 대해서 postsid를 지정했는데, 1개 이후로 postsid 중복관련 에러가 나오면서 저장되지 않았다.

→ postsid를 작성날짜에 연관해서 넘버링 해주니 문제없이 저장됨

▶ MongoDB를 이용했을때와 다르게 Mongoose는 아이디와 비밀번호가 없어도 Robo3T에서 DB내용을 확인할 수 있었다.  하지만, 도메인과 연결 후 Robo3T에 저장된 내용과 연결되지 않고 자체 DB를 만들어 실행되었다. 어디에 저장되고 있는지 아직도 의문이 든다. DB내용 조회나 관리하기가 불편할 것같아 프로젝트 마지막날 소유하고있는 MongoDB로 경로를 변경하려고 하였음.

→ 도메인에 연결된 자체 DB는 껏다 켜도 같은 DB에 연결되어서 아직도 사용해도되는지 의문이 듦.

해당부분은 추후 스터디가 필요함.

▶ 비밀번호 저장시, 암호화처리가 어려웠다.

→ 게시글 작성시 암호화 처리된 비밀번호로 저장이 가능함. 하지만, 삭제 및 수정페이지에서 비밀번호 확인시 작성된 비밀번호를 암호화 시킨것과 저장된 비밀번호를 비교했을때 같은 값이 아님. 또한, 암호화 처리된 비밀번호가 '$'와 같은 기호가 있어 Schema에서 비밀번호는 'String' 지정된 상태와 달라서 오류를 냄. 또한, 비밀번호 암호화처리를 위한 충분한 시간이 없어서 추후 다시 도전할 예정임.

- CSS 사용하기 (구글웹폰트, 이미지 넣기)
- 부트스트랩사용하기
- 포스팅박스 만들기

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
   <link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Poor Story', cursive;
        }
        .mytitle {

            max-width: 100%;
            height: 600px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img.vogue.co.kr/vogue/2021/12/style_61c299401f4b3.jpeg");
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .card {
            max-width: 95%;
            width: 500px;
            height:100px;

            margin: 10px auto 0px auto;
        ;
        }
        .mypost {
            max-width: 95%;
            width: 500px;
            height: 300px;

            background-color: transparent;
            color: black;
            border-radius: 5px;

            border: 1px solid grey;

            margin: 20px auto;
            padding: 20px;
        }
        .mypost > button {
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>아이유 팬명록</h1>
    </div>

    <div class="mypost">
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingInput" placeholder="닉네임">
          <label for="floatingInput">닉네임</label>
        </div>

        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
            <label for="floatingTextarea2">응원댓글</label>
        </div>

        <button type="button" class="btn btn-dark">응원남기기</button>
    </div>

    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>앨범 너무 좋아요!</p>
          <footer class="blockquote-footer">아이러브유</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>앨범 너무 좋아요!</p>
          <footer class="blockquote-footer">아이러브유</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>앨범 너무 좋아요!</p>
          <footer class="blockquote-footer">아이러브유</cite></footer>
        </blockquote>
      </div>
    </div>

</body>

</html>