728x90

분류 전체보기 186

커밋 컨벤션 정리

Commit Type Type 설명 Feat: 새로운 기능 추가 Fix: 버그 수정 또는 typo Refactor: 리팩토링 Design: CSS 등 사용자 UI 디자인 변경 Comment: 필요한 주석 추가 및 변경 Style: 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 Test: 테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우) Chore: 위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등) Init: 프로젝트 초기 생성 Rename: 파일 혹은 폴더명 수정하거나 옮기는 경우 Remove: 파일을 삭제하는 작업만 수행하는 경우

개발 2023.07.11

[세션 / 토큰 로그인 프로젝트] 진행 과정(2) 구성한 방법, 쿠키에 넣은값들

먼저 이번 포스팅에서 다룰 것은 제목과도 같이 어떤 것들을 주고 받는지 살펴보고자 한다. 세팅 내용 이전 포스팅에서 다뤘듯, express-session을 통해 session을 설정하고, session.data 객체를 추가하여 내용들을 담았다. 1. express-session의 설정 //index.js const sessionStore = new MySQLStore({ createDatabaseTable: true, schema: { tableName: 'sessions', columnNames: { session_id: 'session_id', data: 'data', expires: 'expires', }, }, host: DB_HOST, user: DB_USER, password: DB_PASSW..

개발/프로젝트 2023.07.09

[세션 / 토큰 로그인 프로젝트] 진행 과정(1) 쿠키 전달한 이후 어떻게 검증할 것인가?

현재 진행상태 지난 포스팅에서 세션로그인할 때 쿠키에 관련해서 작성했다. 그래서 공부한 것들을 토대로 먼저 내가 구현한 것을 설명하면, 세션검증시 쿠키: 로 되어있는 부분은 req.cookies로, 개발자도구에 보이는 모든 쿠키다. 지금은 1개만 있는 상태다. 이전 포스팅에서 설명했듯, s: 이후 . 까지가 실질적인 sessionID이다. express에서 session을 통해 쿠키를 만들 때 sessionID를 저렇게 넣어준다. 그렇기 때문에 굳이 다른 쿠키를 만들 필요 없이 저기서 파싱해서 쓸 수 있다. 다음과 같이 구현했고, 저렇게 콘솔을 찍어서 위의 스샷대로 확인할 수 있었다. (아직 에러처리 부분은 미들웨어를 만들지 않아서 임시로 저렇게 res로 보내고 있다.) 그렇다면 드디어 sessionID..

개발/프로젝트 2023.07.08

[세션 / 토큰 로그인 프로젝트] 진행 전 공부 과정.. express에서 지원하는 쿠키? 세션 쿠키? 쿠키와 세션 구분하기

이전에 세션 / 토큰 로그인의 과정을 설명했기에 세션 로그인 과정을 간단하게만 설명하고, 본론으로 들어가고자 한다. 세션 로그인에 대해 세션은 비밀번호처럼 인증 정보를 저장하지 않는다. 그 대신 sessionID라는 식별자를 저장한다. 쿠키에 sessionID가 존재하지 않을 경우, 서버에 요청하여 sessionID를 받아 쿠키에 보관한다. 이후 클라이언트가 서버에 요청하면 서버는 sessionID를 key로 가지고 있는 value의 값을 조회, 로그인 여부 혹은 중요 정보를 확인한다. 즉, id와 pw로 로그인했을 때 쿠키에 sessionID가 없으면 서버에서 sessionID를 생성, 쿠키에 담아서 보낸다. 이제 쿠키에는 sessionID가 담긴 상태이기 때문에 로그인한 후 로그인한 상태를 유지하기 ..

개발/프로젝트 2023.07.07

[세션 / 토큰 로그인 프로젝트] 구성 및 개요

로그인에 대한 비교를 하는 것이므로 프론트는 간단하게만 가져가고, 백엔드 중심으로 코드를 짜보려고 한다. 프론트에서는 한 페이지에 세션로그인, 토큰로그인을 각각 나누어 로그인 성공시 백엔드에서 보내준 메세지를 반환한다. 이제부터가 시작이다. 통신은 확인했으니, 본격적으로 비교해보자. 세션 로그인은 클라이언트의 정보를 서버측 저장소에 저장하고 사용한다. 토큰 로그인은 클라이언트의 정보를 클라이언트측(브라우저)에 저장하고 사용한다. 백엔드에서 세션 로그인을 할 때 할 일은 이렇게 나뉜다. 1~3. 사용자를 확인하고 서버측 저장소에 회원정보 세션을 생성 4~5. 세션 식별자(Session ID)는 클라이언트에게 쿠키(Cookie) 형태로 전달 이후 인증과정이 필요한 서비스에서 6번부터 클라이언트와 서버는 쿠키..

개발/프로젝트 2023.07.06

[405 Method Not Allowed] Allow: GET, HEAD, OPTIONS 만 나오는 경우... feat.멱등성

발단 세션로그인과 토큰로그인을 비교하는 개인프로젝트를 진행하면서 백엔드에 초점을 두다보니 로그인 html 코드를 그대로 구글링해서 가져왔다. 기본적으로 api 구성해서 테스트했는데, 오류가 발생했다. POST http://127.0.0.1:5500/session_login 405 (Method Not Allowed)라고 확인되는데, 네트워크를 살펴보니 다음과 같았다. 문제점 HTTP/1.1 405 Method Not Allowed Access-Control-Allow-Origin: http://127.0.0.1:5500 Vary: Origin Access-Control-Allow-Credentials: true Allow: GET, HEAD, OPTIONS Content-Length: 0 Date: We..

개발/http, server 2023.07.05

[mySQL] root 비밀번호 오류 초기화 간단설명, 초기화해도 안되는 경우

mysql -u root로 접속하게 되면 처음에는 바로 접속이 되지만, 비밀번호를 설정하고 나서는 당연히 비밀번호를 입력해야 접속할 수 있다. 내가 늘 쓰는 비밀번호를 입력했음에도 여러 시도를 해도 안돼서 비밀번호를 초기화하는 방법을 구글링해서 시도했다. 아주 간단하게 설명해보겠다. root 패스워드 재설정 1. mysql.server stop mysql 서버를 중지한다. 2. mysql.server start --skip-grant-tables mysql 서버를 재시작하는데, 해당 옵션을 주면 root 인증없이 서버에 접근할 수 있다. 3. mysql -u root 옵션을 부여한 다음 시작했기 때문에 비밀번호는 생략된다. 4. update mysql.user set authentication_strin..

개발/DB 2023.07.05

[프로그래머스 | JavaScript] 수열과 구간 쿼리 3

문제 설명 정수 배열 arr와 2차원 정수 배열 queries이 주어집니다. queries의 원소는 각각 하나의 query를 나타내며, [i, j] 꼴입니다. 각 query마다 순서대로 arr[i]의 값과 arr[j]의 값을 서로 바꿉니다. 위 규칙에 따라 queries를 처리한 이후의 arr를 return 하는 solution 함수를 완성해 주세요. 입출력 예 arr queries result [0, 1, 2, 3, 4] [[0, 3],[1, 2],[1, 4]] [3, 4, 1, 0, 2] 문제 풀이 function solution(arr, queries) { for (const query of queries) { const [i, j] = query; [arr[i], arr[j]] = [arr[j],..

[프로그래머스 | JavaScript] 빈 배열에 추가, 삭제하기

아무 원소도 들어있지 않은 빈 배열 X가 있습니다. 길이가 같은 정수 배열 arr과 boolean 배열 flag가 매개변수로 주어질 때, flag를 차례대로 순회하며 flag[i]가 true라면 X의 뒤에 arr[i]를 arr[i] × 2 번 추가하고, flag[i]가 false라면 X에서 마지막 arr[i]개의 원소를 제거한 뒤 X를 return 하는 solution 함수를 작성해 주세요. arr flag result [3, 2, 4, 1, 3] [true, false, true, false, false] [3, 3, 3, 3, 4, 4, 4, 4] function solution(arr, flag) { let answer = [] for(let i = 0; i < arr.length; i++){ if..

[엘리스트랙 SW 4기 | 2차 프로젝트 복기] 소통왕 프로젝트 / 별도의 docs를 작성하여 jsdoc 주석 적용

발단 리팩토링하면서 코드의 가독성을 위해 간결하게 적거나 네이밍 컨벤션, 아이덴테이션 등 여러 가지를 통일하며 진행하고 있다. 문득 새로운 방법이 떠올랐다. 프레임워크나 라이브러리의 함수에 마우스를 호버해서 정의된 내용을 확인하듯, 마우스를 호버했을 때 req, res에 대한 설명이나 자세한 팁을 알려줄 수 있지 않을까 싶었다. 물론 api명세서를 통해서 확인할 수 있지만, 조금 더 간편하고 빠른 팁을 제공하자는 생각이다. 해결 과정 1. 함수 상단에 jsdoc 주석 달기 그래서 구글링해본 결과, 함수 위에 이런 식으로 jsdoc형식의 주석을 추가할 수 있었다. /** * 회원가입 * @param req.body name: 이름, username: 사용자 ID, password: 패스워드, email: ..

개발/프로젝트 2023.07.02
728x90