[24.01.16]

Vue.js

 

로그인을 성공할 시 자기 프로필 페이지로 자동으로 redirect 되도록 라우터를 push 해주었다.

 

그런데 어느 순간 갑자기 redirect가 되지 않고 로그인 버튼이 무한으로 로딩되는 버그가 발생하였다.

오늘 새벽을 앗아간 이 버그의 해결 과정을 알아보자

 

//라우팅하기 전 jwt토큰이 존재하는지 확인

let tokenCookieName = 'token';

function isTokenCookieExist() {

return Cookies.get(tokenCookieName);

}

//다른 페이지로 이동하기 전 로그인 여부 확인

router.beforeEach((to, from, next) => {

const publicPages = ['/login', '/register', '/home'];

const authRequired = !publicPages.includes(to.path);

const loggedIn = isTokenCookieExist() ? true : false;

// trying to access a restricted page + not logged in

// redirect to login page

if (authRequired && !loggedIn) {

next('/login');

} else {

next();

}

});

 

 

내 원래 코드는 이러하다. 인증이 필요한 페이지는 로그인 여부를 확인해야하는데 이 로그인 여부를 jwtToken이 담긴 쿠키가 있는지 여부로 확인해주었다. 

여기서 문제는 이 쿠키값이 분명히 존재하는 것을 개발자모드에서 확인을 했음에도 불구하고 계속 undefined 값을 받아와서 생기는 문제였다.

 

처음에는 쿠키 인식 처리 과정이 비동기로 이루어져서 너무 빨리 읽어오나? 싶었지만 그게 아니었다!!!

문제는 바로 오후 쯤 서버코드에 넣어주었던 쿠키의 httpOnly 옵션 때문이었다.

 

어차피 토큰이 담긴 쿠키는 서버에 보내주는 용도로만 쓰이기 때문에 읽을 필요가 없다 생각하고 httpOnly 옵션을 true로 바꾸어줬는데 이 때문에 쿠키 인식을 아예 못하는 상황이었던 것이다.

 

해결책으로 userinfo 라는 유저 정보가 담긴 쿠키를 기준으로 로그인 여부를 판단하도록 코드를 수정해주었더니 제대로 redirect가 된 것을 확인할 수 있었다.

 

 

이건 결국 프론트엔드에 미숙해서의 문제가 아닌 그냥 쿠키에 대한 이해부족이라 할 말이 없군 ㅠㅠ

CS 공부

GET, POST의 개념과 함께 데이터 흐름에 대해서 설명해주세요.

GET 메서드는 데이터를 요청할 때, POST 메서드는 데이터를 전송할 때 주로 사용된다.

GET 메서드

사용자가 브라우저에 URL을 입력하거나 링크를 클릭한다 → 브라우저가 URL에 포함된 쿼리 스트링들을 포함한 HTTP Request를 서버에 보낸다 → 서버에게서 Response를 받는다. → 획득한 자원을 브라우저가 활용한다.

특징

1. URL의 쿼리 문자열에 데이터가 그대로 노출되어 보안에 취약하다.
2. URL 길이에 제한이 있어 대용량 데이터 전송에 적합하지 않다 → 읽기에 적합
3. 동일한 요청 시 캐싱한 응답을 반환할 수 있다.

POST 메서드

사용자가 폼에 데이터를 입력한다 → 브라우저가 입력받은 데이터를 HTTP body에 담아 서버에 전송한다 → 서버가 요청을 처리한다 → 획득한 자원이 있다면 브라우저가 활용한다.

특징

1. HTTP body에 직접 담아 전송하므로 상대적으로 보안이 강화된다.
2. HTTP body는 제한이 없어 대용량 데이터 전송에 적합하다 → 쓰기에 적합
3. POST 요청은 캐싱이 불가능하다.

두 메서드 모두 클라이언트와 서버의 데이터 교환에 활용되지만 데이터의 위치와 사용 목적에 차이가 있다.

 

 

OSI 7계층에 대해 아는대로 설명해주세요.

Application Layer: 사용자와 직접 상호작용하는 어플리케이션이 존재하는 레이어

어플리케이션과 직접 관련되며 HTTP, SMTP 등이 여기에 속한다.

Presentation Layer: 데이터의 형식(format)을 정의하는 레이어

암호화, 압축 등이 이 계층에서 일어남

Session Layer: 다른 서버와 통신을 하기 위한 세션을 만드는 레이어

통신 세션을 설정, 유지, 종료하는 역할을 하며 데이터 동기화를 담당

Transport Layer: 최종 수신 프로세스로 데이터의 전송을 담당하는 레이어

에러 복구, 흐름 제어, 중복 검사 등을 실시하며 TCP, UDP 등이 이 계층에 속함. 이 계층의 식별자는 포트 번호

Network Layer: 패킷을 목적지까지 가장 빠른 길로 전송하기 위한 레이어

라우팅, 패킷 전달, 경로 선택등을 다루며 가장 효율적인 경로를 선택해 패킷을 전달함

이 계층의 식별자는 IP 주소이며 IP, 인터넷, 라우터 등이 이 계층에 속함

DataLink Layer: 데이터의 물리적인 전송과 에러 검출, 흐름 제어를 담당하는 레이어

프레임 단위로 데이터를 전송하고 transport layer의 물리 버전이라고 할 수 있음. 이 계층의 식별자는 MAC Address이며 이더넷(LAN에서 사용되는 네트워크 프로토콜) 이 계층에 속함

Physical Layer: 데이터를 전기 신호로 변환해주는 레이어

물리적 매체를 이용하여 비트를 전송하고 전기 신호와 광 신호를 다룸

 

느낀 점

프론트에 시간 많이 갈어넣고 있는데 기본없이 하려니까 넘 힘들구마..

프론트 서버는 또 언제 띄우냐...