본문 바로가기

전체 글

 (79)
#3. 리뷰 수정 기능 구현 리뷰 수정 페이지에서는 다음과 같은 기능들이 필요하다 1) 리뷰 수정 페이지를 렌더링해줄 때, 작성한 글 까지 같이 불러와 렌더링해준다 2) 그리고 작성한 내용을 인풋칸에 value로 넣어준다 3) 비밀번호를 입력하지 않았다면, 입력하도록 alert창을 띄워준다 4) 입력한 비밀번호가 틀렸다면, 비밀번호가 틀렸다는 alert창을 띄워준다 5) 비밀번호가 맞고, 수정할 내용을 모두 입력한 경우에만 수정한 내용을 저장한다. 우선 수정페이지를 어떻게 백엔드에서 렌더링하는지 살펴본다. // 수정페이지 : 상세페이지에서 수정 버튼을 누르면 글을 수정할 수 있는 페이지로 이동 app.get('/update/:id', (req,res)=>{ review = Reviews.findOne({_id: req.params...
#2. 리뷰작성 화면 왼쪽 탭의 리뷰작성 버튼을 누르면 리뷰를 작성할 수 있는 페이지로 이동하게 된다. 1) 리뷰 작성 시 모든 칸이 작성되어 있는지 확인해주어야 하며 2) submit 버튼을 누르면 ajax 통신으로 post요청을 보내게 되어, Reviews 콜렉션에 작성한 리뷰가 저장되어야 한다. 3) 잘 저장되었다면 프론트엔드로 res.status(200)을 보내게 된다. 먼저 프론트엔드에서 1, 2번 기능은 다음과 같이 코드를 작성한다. jQuery로 각 input칸에 적힌 value들을 가져온다. 그 후 값들이 다 있는지 검사한 후에, 다 존재한다면 작성한 내용들을 post요청으로 보낸다. post요청이 잘 이루어졌다면, 백엔드로부터 성공 메시지를 받아 alert로 출력한 뒤, 메인화면으로 렌더링해준다. post요청..
#1. 메인화면의 구성 기본적인 CRUD를 중심으로 기능을 구현하였다. 우선 메인 화면을 구성하는 코드에 대해서 리뷰하고자 한다. 복잡한 로직은 사용되지 않았다. 1) 메인화면의 url로 들어왔을 때 index.html을 렌더링 해주고, 2) 이 때 db에서 작성한 글 목록을 불러와 서버사이드 렌더링을 해준다 이 부분을 코드로 구현하면 다음과 같다. // 메인페이지 : 홈화면, 작성한 글 목록을 최신순으로 보여줌 app.get('/', async (req, res) => { reviews = await Reviews.find().sort({created: -1}) if (reviews){ res.render('index', {reviews : reviews}); }else{ console.log("DB에서 데이터를 불러올 수 ..
#0. 프로젝트 소개 Node.js환경에서 Express프레임워크와 MongoDB를 활용하여 간단한 곡 리뷰사이트를 만들었다. 프론트엔드는 bootstrap으로 만들어진 템플릿을 사용하였고, 글 수정, 작성, 삭제버튼에 대해서는 jQuery를 이용해 ajax통신으로 구현하였다. aws ec2 환경에 배포하였기 때문에 다음 주소에서 실제 사이트 작동을 확인할 수 있다. http://52.79.173.212/
HTTP와 WebSocket 비교 | 실시간 통신에 대해서 일반적으로 WEB API를 이야기하면, REST API를 말한다. REST API는 요청과 응답이 구분된다는 특징을 보인다. 특히 REST API는 자원과 메소드를 명확하게 정의한다는 점에서 안정성을 지니지만, 실시간 통신 기능을 구현하기는 힘들다. REST API에서 실시간 통신을 구현하기 위해선 지속적으로 request, response를 보내야 하는데, 그러다보면 클라이언트와 서버 모두에게 부담이 된다. 이것을 보완하기 위해 등장한 것이 WebSocket API이다. request와 response를 구분하는 것이 아니라 클라이언트와 서버 모두를 연결해서 정보를 실시간으로 연결시켜준다. 이렇게 연결을 시켜주는 부분을 소켓이라 한다. 클라이언트에도 소켓이 있고, 서버에도 소켓이 있고 그 안에 패킷이라..
쿠키, 세션, 토큰 각 차이점에 대해 NodeJS - 인증(쿠키, 세션, 토큰) : 모바일 / 웹 서비스에 대부분 사용하는 HTTP는 무상태 프로토콜이다 \--> 즉, 통신 이후에 어떠한 연결도 남지 않는다결과적으로, 사용자는 각각의 HTTP통신에 자신을 알릴 수 있는 정보 velog.io 위 출처를 통해 아주 쉽게 개념을 이해할 수 있었다. 일반적으로 회원가입/로그인 인증을 위해선 3가지 개념이 사용된다. 1) 세션 2) 쿠키 3) 토큰 여기에 추가적으로 소셜로그인(구글 로그인)을 이용하는 경우가 있다. 이 경우를 제외하고 세션, 쿠키, 토큰 각각의 경우에 대해 정리를 해볼 필요성을 느꼈다. 1. 쿠키 방식 가장 기본이 되는 방식으로 쿠키 방식이 존재한다. 1) 클라이언트가 서버에 로그인을 하면, 2) 서버는 클라이언트에 쿠키를 준다 3)..
SASS의 작동과정, 기본 개념 | CSS를 언어화 CSS를 사용하다가, SCSS를 알게되었다. 리액트로 링크드인 클론을 만들다가, SCSS를 자꾸 사용하길래, 한 번 익혀봐야겠다는 생각을 하게 되서, 기본 요소들을 정리하게 되었다. SCSS를 배우려고, 2시간, 3시간 들일 필요는 없는 것 같고, 기본 문법만 알면 되는 것 같다. 우선은 SASS는 CSS를 언어처럼 사용할 수 있게 해주는 것이다. 변수, 함수가 존재하듯이, CSS에서 변수, 함수를 정의해서 사용할 수 있게 해주는 것이 SASS다. 이 때 SASS를 브라우저 상에서 바로 사용할 수 없기 때문에 컴파일을 해주어야 한다. SASS를 사용하게 되면, 다른 언어를 사용할 때와 마찬가지로 변수, 함수가 존재한다. $로 변수를 정의하고, mixin과 include로 함수를 정의해서 사용하면 된다. ..
CSS, Bootstrap 기본 개념 정리 아무 생각 없이 Bootstrap 템플릿을 가져다 쓰다가, 좀 더 정교하게 만들어 보고 싶어서, 튜토리얼을 수강한 뒤 기본 개념을 정리하였다. CSS라는 것이 어떤 의미인지 처음 알았는데, Cascading Style Sheet의 줄임말이라고 한다. Cascading이 폭포를 의미하는데, DOM에서 상위 문서, 하위 문서의 트리 구조를 가지듯이 마찬가지로 CSS 속성을 정의하는 것에 있어서도 우선순위가 존재하기 때문에 Cascading이라는 용어를 사용한다는 것을 알 수 있었다. 이렇게 CSS를 사용해서 화면을 구성하게 되는데, CSS나 Bootstrap이나 기본적인 Flow는 동일하다. 1) 박스가 기본요소가 된다. 2) 화면을 분할해주고 (그리드) 3) 분할된 부분 각각에 (컨테이너) 4) 박스들을 ..

티스토리툴바