코드 스파게티

팀플에서 긴빠이 

양식에 맞추어 받아야할 데이터가 많을 때가있다

이메일.. 전화 등등

자세한 설명을 하기엔 상단의 코드가 너무 직관적이기도 하고

예제가 많이 풀려있어서 복붙하는 사람들이 많아 (왜 난 몰랐나)

수반하는 코드를 더 적지 않겠다

목차

1. 팀 "경기도민"

2. 프로젝트 결과물과 설명

3. 맘에 든 코드

4. 프로젝트 SA

1. 팀 "경기도민"

  안녕하십니까 내배캠 노드4기 A반 7조 "경기도민"의 프로젝트 설명을 맡게 된 조봉진입니다.

금번 발표에 앞서 5 영업일 간 프로젝트에 매진하신 여러분께 고생하셨다는 말씀 드리겠습니다.

 저희 팀 "경기도민"은 팀원 전원이 경기도 주민이라는 공통점을 가진 것을 알게되어 지은 이름으로

위의 슬로건 처럼 Go Great한 실력 발전을 이루고자 합니다.

 하단에 설명문이 있지만 일정 및 계획서, 와이어 프레임, API, DB 다이어그램 등

상세한  SA에 관심 가지시게 된 분들은 아래 링크를 빙문해 주시면 감사하겠습니다.

[팀 프로젝트#3 / 경기도민] S.A (tistory.com)

2.  프로젝트 결과물과 설명

2.1 로그인 페이지

저희 프로젝트의 첫 화면입니다.

로그인이 반드시 필요한 서비스이기 때문에

홈 화면보다 직관적인 로그인 화면을 가장 먼저 나오도록 제작하였습니다

2.2 회원가입 페이지

발제에 있는 요구사항을 만족할 수 있도록 작성 페이지를 제작하였습니다

각 항목들은 

위 이미지와 같은 코드 작성을 통해 공란, 규격에 맞지않는 데이터를 받지 않도록 하였습니다

폼 작성 후 하단의 유저, 사장님 버튼을 누르시면 유저/사장님 회원으로 가입이 완료 됩니다.

2.3  유저 페이지

새로 가입한 회원의 유저 페이지 입니다

발제와 같이 첫 가입시 1,000,000 포인트를 증정하였습니다

하단의 표에는 세탁 서비스 신청 시 사용하게 될 데이터의 목록이 적혀있습니다

2.4 새로운 세탁 서비스 신청

해당 버튼을 누르시면 서비스 신청 페이지로 넘어갑니다

서비스 신청시 파일 선택을 통해 세탁물 이미지를 올리실 수 있습니다

물론 하지 않으셔도 좋습니다

 하지만 소중한 빨래를 위해 요구사항은 꼭 작성 부탁드립니다.

요청 사항이 없으시다면 간단한 감사의 말을 전해보는 건 어떨까요?

오고가는 현금이 아니더라도 웃음 꽃은 핍니다

신청 완료 후의 서비스 내역 페이지 입니다.

10,000포인트가 차감되었고 유저 정보와 서비스 관련 사항들이 생겼습니다.

진행사항은 사장님 회원이 서비스를 진행하면 바뀝니다

리뷰는 세탁물을 돌려받으신 후에 작성할 수 있습니다

앞서 올리신 사진은 이미지 보기란 위에 마우스를 올리시면 보실 수 있습니다

2.4.1 서비스 수거 후

신청한 서비스가 채택되었을 때의 상태입니다

수거가 완료된 후의 모습입니다

배송이 완료된 모습입니다

이제 리뷰를 작성하실 수 있습니다

리뷰작성시 팝업창으로 리뷰 작성 화면이 뜹니다

깔끔

다른 유저의 페이지도 한번 보여드리겠습니다

2.5 사장님 페이지

사장님 페이지도 간결한 화면으로 구성되있습니다

새 유저인 만큼 포인트가 없습니다

그러면 세탁물 조회 페이지로 들어가보겠습니다.

위에 방금 가입했던 새유저가 신청한 세탁물이 있습니다

수락 버튼을 통해 세탁물을 가져갈 수 있습니다

다른 사장님보다 빠르게 가져가 봅시다

다시 사장 페이지로 나왔지만 업데이트가 있네요

수락한 서비스는 수거 중으로 뜨게 됩니다

업데이트 버튼을 통해 다른 수거 상태를 만들 수 있습니다.

아무것도 누르지 않았을 때의 수거 중 

첫 업데이트 수거 완료

빨래가 완료 되었다면? 배송 중

이후 마지막 업데이트로 배송완료가 있습니다

이후엔 사장님이 업데이트 하실 수 없고 유저가 리뷰작성시 

리뷰확인이 뜨게 됩니다

리뷰 확인페이지 입니다

손님의 상세한 리뷰가 좋네요

이번엔 다른 사장님의 서비스 내역을 보여드리겠습니다

보시면 4개의 서비스를 진행했지만 배송 완료가 된 빨래는 2건이라

총 2만 포인트를 획득한 걸 볼 수 있습니다.

3. 맘에 든 코드 설명

변다슬 님

이미 로그인 되어 있는 유저는 로그인 페이지에 접속하지 못하도록 해야 했다.
이부분 로직을 어떻게 해야 하나 막막했는데, 팀원분의 도움으로 해결 할 수 있었다.
TOKEN payload값을 활용해 사용자를 구분할 수 있다는 점이 흥미롭게 다가왔고 많이 배울 수 있는 시간이었다.

김정민 님

자랑이라기 보단 피드백이 될 만한 코드여서 가져왔습니다. 현재는 Repository 에서 했지만 좀 더 보완해서 Service 에서 데이터 가공을 하는 방향으로 바꿀 수 있을거라고 생각합니다. 아쉬운 코드 이면서 제가 더 발전할 수 있을 것 같다는 생각을 가지게 되는 코드입니다.

박민욱 님

제 코드는 아니지만 시퀄라이즈 문법을 잘 몰랐는데 이 코드를 공부하고 나서 쉽게

응용할 수 있었기 때문에 마음에 드는 코드로 골랐습니다.

이재관 님

form태그에서 submit버튼으로 데이터 받아오는 코드라 넣어봤습니다.

조봉진

코드보다는 모듈화와 Layered Architecture Pattern에 이해가 전혀 가지 않았는데

팀원들의 도움으로 전체적인 맥락이 조금이나마 이해하게 된거 같았고

구조가 인상깊었습니다.

이상으로 프로젝트 설명을 마치겠습니다

하단은 SA문서에서도 보실 수 있는 내용으로 앞서 보셨다면 보실 필요 없습니다.

4. 프로젝트 SA

프로젝트 제목/간단 설명

팀 이름

경기도민

팀 이름 설명

팀원 모두 경기도에 사는 것을 바탕으로 결정

팀원

김정민, 박민욱, 변다슬, 이재관, 조봉진

프로젝트 명칭

세탁 프로젝트

프로젝트 설명

이용자들이 세탁 서비스 신청 시 사장이 선택할 수 있음

이용자들이 세탁 서비스에 대한 리뷰를 달 수 있음

세탁물의 상태를 대기 중, 수거 중, 수거 완료, 배송 중, 배송 완료 다섯 단계로 알 수 있음

프로젝트 일정

12/30 ~ 1/6

일정 세부 계획

R & R

와이어프레임

와이어프레임은 사전에 작성되어 실제 서비스와는 다른 요소가 있습니다

API

다이어그램

이상입니다 감사합니다

둘을 포트 다르게 해서 따로 돌리는게...

처음 알았네요

상상도 못했음, 먀번 백엔드 쪽에 코드 추가해서 돌렸는데

이러면 웹에 올릴 때 어떻게 할지 상상도 안가네유

두개 사나?

글로 쓰고, 기능이 있고, 화면 미화 이외의 용도가 있으면 그게 프로그래밍 언어지

html, 왜 언어가 아닐까

언어가 아닌건 내 스파게티 아니겠나요?

1. js에서 html넘기기

res.sendFile(__dirname + {내보낼 html 파일 경로})

이걸 왜 기억 못했을까

날로먹을 생각을 버려야한다

2. fetch

사용하게 된 이유

정예반 진도가 모듈까진 못갔는데 app.js하나 위주로 쓰고

그러니 html에서 어느정도 부담을 져줘야해서

js기술이 메인인데 html에서 쓰는걸 예시로 보여주셨다

----------------------

사용한 npm

express, cookie-parser

html에서 기억할것

fetch

-----------------------------------

이번 정예반의 꽃인 게시판 만들기가 내일인데

사용할 기술로 html이 선정되었다

당연한거지만

특기할 것은 html을 최근의 노드반 수업의 방향성과는 다르게 

'html-그냥 화면만 구현'이 아니라

예전 수업처럼 일단 html에서도 기능을 어느정도 분담하게 만드는 방식을 채택했다

여기서 사용된게 fetch

fetch는 찾아보니 js에서도 많이 쓰이는 물건이지만

html에서도 사용은 할 수 있는 모양

다시 지옥이 왔다

간단한 fetch 내용 긴빠이, 출처는 아래와 같습니다

[JavaScript] fetch 함수 쓰는 법, fetch 함수로 HTTP 요청하는 법 (velog.io)

자바스크립트의 fetch() 함수로 원격 API 호출하기 | Engineering Blog by Dale Seo

Fetch 사용하기 - Web API | MDN (mozilla.org)

좋은 설명 감사합니다, 내용 좀 배끼겠습니다

상세한 설명인데 내가 이해못하는건 의지가 부족한 것 같다

원격 API를 간편하게 호출할 수 있도록 브라우저에서 제공하는 게 fetch() 함수

라는게 간단한 설명 같다

이전엔 제이쿼리 같은걸로 했다는 모양

나도 써봤던거 같은데 하나도 몰라 진짜

fetch 사용법 

fetch() 함수는 첫번째 인자로 URL, 

두번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환합니다. 

반환된 객체는, API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 

실패했을 경우에는 예외(error) 객체를 reject합니다.

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

이건 모질라 코드 예시

const data = {
    id: document.getElementById('id').value,
    password: document.getElementById('password').value
}

fetch("/", {
    method: "POST",
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data)
}).then((response) => response.json())
.then((data) => {
    location.href = "/profile"
}).catch((error) => {
    alert("너 계정없어")
})

이게 사용한 코드인데

const줄에서 데이터 json

fetch 에서 방식

post로 쏘고

헤더에 보낼 내용을 양식 저장

바디

그리고 하나하나 내려서

후

EJS

Node.js와 Express에서 많이 사용되고 있는 템플릿 엔진이다.

embedded javascript template의 약자로

ejs는 기존의 HTML 문법에 한해서 <% %>를 사용하여 크게 벗어나지 않아
더욱 쉽게 서버의 데이터를 사용하거나 코드를 실행할 수 있는 장점이 있다.

일반적인 HTML 파일에서 스크립트 코드는 <script></script> 내부에 작성해야 하는 번거로움이 있었지만, ejs는 지정된 태그를 사용해 스크립트 내용을 하나의 요소처럼 사용할 수 있게 한다. 가장 큰 장점은 서버에서 보낸 변수를 가져와서 사용할 수 있다.

 이 강점을 이용해 페이지를 동적으로 짜는 것이 기존보다 훨씬 수월해집니다. 또한, 서버에서 보낸 변수를 가져와 사용할 수 있기 때문에 ejs 같은 템플릿 엔진을 사용한다.

출처

[Node.js] Javascript ejs 템플릿 엔진 (velog.io)

Node.js - ejs에 대하여 (tistory.com)

Ejs에 대해 (velog.io)

여러 정보를 찾다가 나온 정보

한번에 질문하겠습니다 - 코딩애플 온라인 강좌 (codingapple.com)

 ejs파일은 html 파일이랑 똑같은데 중간에 자바스크립트 변수 (DB에서 뽑은 게시물 이런거) 같은걸 쉽게 집어넣을 수 있습니다.

그래서 쓰는 일종의 html 대용품입니다.

그리고 실제로 유저에게 ejs파일을 보내줄 땐 ejs가 html파일로 자동으로 변환되어서 보내집니다. 

막줄이 핵심같다

죽겠다

2주일만 틀어박혀서 기초부터 다시했으면 한다

정예반이라고 따로 빼줄줄 알았는데

느슨한 생각이 나를 조졌다

따흑흑

브라우저가 서버에게 쿠키를 주는 방법

• 요청 헤더 (request header) 에 Cookie 라는 값에 넣어 주면 서버는 쿠키를 가져올수 있다.
• 그러므로 썬더 클라이언트 등에서 header 에 Cookie 설정을 하면 서버는 쿠키를 받을 수 있다

요청 헤더 예시 (브라우저 → 속성 → 네트워크 → 요청 선택)

브라우저 저장된 쿠키 예시 (브라우저 → 속성 → 어플리케이션 → 쿠키)

서버에서 쿠키를 가져오는 법요청 헤더 예시 (브라우저 → 속성 → 네트워크 → 요청 선택)

브라우저 저장된 쿠키 예시 (브라우저 → 속성 → 어플리케이션 → 쿠키)

서버가 브라우저에게 쿠키를 저장하라고 명령하는 법

• 응답 헤더에 Set-Cookie 라는 값으로 값을 넣으면 된다.
• 아래처럼 하면 cookie-parser 가 알아서 응답 헤더에 Set-Cookie 를 넣어준다.

쿠키를 삭제 하라고 명령하는 방법

• Set-Cookie 에서 삭제하려는 키의 값을 빈문자열 보내주면 된다.
• 코드에서는 clearCookie 를 사용하면 대신 Set-Cookie 의 삭제 키에 빈문자열 값을 넣어준다.

쿼리스트링 (query string)

• url 끝에 서버에게 보내줄 정보를 (값)을 의미한다.
• 전체 url 에서 ? (물음표) 뒤에 구문을 의미한다.
• 각 값의 구분자는 & 이다
• 각 값은 key=value 로 보내야한다.

금일은 복습위주라 적을 내용이 마땅찮습니다

  Access Token은 사용자의 권한이 확인(ex: 로그인) 되었을 경우 해당 사용자를 인증하는 용도로 발급하게됩니다.

Cookie로 jwt를 발급하고 설정한 Expire 기간이 지날 때 인증이 만료되게 하는것 또한 Access Token이라고 부를 수 있다.

사용자가 Access Token을 가지고 인증을 요청할 경우 Token을 생성할 때 사용한 **비밀키(Secret Key)**를 가지고 인증하기 때문에, 복잡한 설계없이 코드를 구현할 수 있고, 여러 분기를 거치지 않아도 된다는 장점이 있다.

Access Token의 경우 Stateless(무상태) 즉, Node.js 서버가 죽었다 살아나더라도 동일한 동작을하는 방식. 즉, jwt를 이용해 사용자의 인증 여부는 확인할 수 있지만, 처음 발급한 사용자 본인인지 확인할 수는 없다.

Access Token은 그 자체로도 사용자를 인증하는 모든 정보를 가지고 있다. 그렇기 때문에 토큰을 가지고 있는 시간이 늘어날 수록 탈취되었을 때는 피해가 더욱 커지게 됩니다.

만약 토큰이 탈취되었다고 인지하더라도 저희들은 해당 토큰이 탈취된 토큰인지 알 수 없고, 고의적으로 만료를 시킬 수도 없을 것 입니다. 그러므로 저희들은 언제든지 사용자의 토큰이 탈취될 수 있다고 생각을 하고, 피해를 최소화 할 수 있는 방향으로 개발을 진행해야합니다.

 Refresh Token은 Access Token 처럼 해당하는 사용자의 모든 인증 정보를 관리하는 것이 아닌, 특정한 사용자가 Access Token을 발급받을 수 있게 하기 위한 용도로만 사용된다.

Refesh Token은 사용자의 인증정보를 사용자가 가지고 있는 것이 아닌, 서버에서 해당 사용자의 정보를 저장소 또는 별도의 DB에 저장하여 관리한다. 그렇기 때문에, 서버에서 특정 Token 만료가 필요할 경우 저장된 Token을 제거하여 사용자의 인증 여부를 언제든지 제어가 가능하다는 장점이 있다.

그렇다면 어째서 바로 Access Token을 발급하지 않고, Refresh Token을 거쳐서 Access Token을 발급하는것일까요? 사용자에게 발급한 Token이 탈취당할 경우 피해를 최소화 하기 위해서 사용합니다.

저희가 실제 세계에서 사용하는 OTP와 같이 짧은 시간 내에서만 인증 정보를 사용할 수 있게하고, 주기적으로 재발급하여, 토큰이 유출되더라도 오랜 기간동안 피해를 입는것이 아닌, 짧은 기간동안만 사용가능하도록 하여 피해를 최소화할 수 있게 됩니다.

언제든지 토큰이 탈취될 수 있다는 것을 가정하고, 탈취를 막는것이 어렵다면, 우리는 탈취된 토큰자체를 사용할 수 있는 기간을 줄여서 피해를 막을 것 입니다.