[항해99 36일차] (22.04.11) axios 를 통한 서버-클라이언트 통신 (회원가입, 로그인)

 

어제에 이어서 프로젝트 진행.

이제 남은 과제들은 대략 이정도.

 

• 로그인페이지 : 로그인 기능 구현 (JWT 사용) 🔥(월)
• 헤더 : 분기(로그인/로그아웃 시. user_info 받아와야 함) 🔥(월)
• 메인페이지 : 검색 기능 구현(카테고리값/검색어 넘기기), 포스트 뷰(텍스트 생략), 클릭 시 디테일 페이지 이동 (useParams) 🔥(화)
• 마이페이지 : 프로필 이미지 등록/변경(Form data), 내가 쓴 글/ 내가 쓴 댓글 불러오기() 🔥 (화)

 

 

각 기능 구현을 위해 시도했던 것들을 기록해둔다. 

 

1. Axios 를 통한 서버-클라이언트 통신

1) Axios 인스턴스 생성

• axios 를 사용하기 위해 우선 인스턴스를 생성해야 한다.
• 구성 기본 값 설정을 쉽게 해줄 수 있다. 

// import 
import axios from 'axios';

export const api = axios.create(
	{
		// `url`이 절대값이 아닌 경우 `baseURL`은 URL 앞에 붙습니다.
         // 상대적인 URL을 인스턴스 메서드에 전달하려면 `baseURL`을 설정하는 것은 편리합니다.
		baseURL: 'IP 주소',  (서버 배포 후에 넣는 듯)
        
        // `headers`는 사용자 지정 헤더입니다.
        // content-Type 이란 리소스의 미디어 타입을 나타내기 위해 사용된다.
        // 요청(request)에서 content-Type 은 클라이언트가 서버에게 어떤 형식의 데이터가 실제로 보내지는 것인지 알려주는 용도로 사용된다.
        // content-Type은 리소스 혹은 데이터의 MIME type 을 지정하면 된다.
        // application/json 은 애플리케이션간 데이터 통신에서 JSON 형식이 사용된다는 의미.
        // charset=UTF-8 은 html 파일의 인코딩을 알려주는 것. 브라우저에게 text를 어떻게 그려달라는지 말해주는 것.
        // 인코딩은 웹브라우저, 컴퓨터의 HTML 파일을 웹브라우저에게 표시될 수 있도록 변환하는 처리작업을 의미.
		headers: {
			'content-type': 'application/json;charset=UTF-8',
			accept: 'application/json',
		},
	},
    
    // `withCredentials`은 자격 증명을 사용하여 사이트 간 액세스 제어 요청을 해야 하는지 여부를 나타낸다.
    // 프론트-백 통신 시 이 값을 true 로 바꿔놔야 한다.
    // 아래는 기본적인 logic
    // 아이디와 비밀번호가 서버로 넘어오면 유저의 정보가 맞는지 확인한 후에 cookie에 token을 발급한다.
    // 그 후 다른 페이지에서의 인증도 이 token을 통해 이뤄진다.
    // 같은 origin의 경우 request header 에 cookie가 추가되는데 orgin이 달라지는 경우 자동으로 추가되지 않아, 통신이 성공적으로 이뤄져 로그인이 성공하더라도 cookie에 token 값이 정상적으로 들어가지 않고 인증이 이뤄지지 않는다.
    // 이를 해결하기 위해 axios withCredentials 설정을 true로 바꿔줘야 한다. 
	{ withCredentials: true },
);

 

 

참고

1. REST API Content-Type 설정

https://6991httam.medium.com/rest-api-content-type-%EC%84%A4%EC%A0%95-c903e06a9936

 

2. Axios 설정 시 헤더를 넣는 법

https://blog.jell.kr/dev/js/tip/2020/01/07/Axios%20%EC%84%A4%EC%A0%95%20%EC%8B%9C%20%ED%97%A4%EB%8D%94%EB%A5%BC%20%EB%84%A3%EB%8A%94%20%EB%B2%95/

 

3.axios 비동기 post 전송 (FormData 전송 관련 내용 참고)

https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/axios-%EB%B9%84%EB%8F%99%EA%B8%B0-post-%EC%A0%84%EC%86%A1-c7f273a1edce

 

4. [React] Axios 와 CSS (ES6 Destructuring 참고)
https://ssungkang.tistory.com/entry/React-Axios-%EC%99%80-CSS?category=372028

 

 

2. FormData 사용해서 파일 보내기

출처 : MDN

 

클라이언트에서 서버 파일 업로드 과정

• 파일 업로드 구현 시, 웹브라우저에서 form 을 통해 파일을 등록하고 전송한다
• 웹 브라우저가 보내는 HTTP 메시지는 content-Type 속성이 multipart/form-data 로 지정되고, 정해진 형식에 따라 메시지를 인코딩하여 전송한다.
• 이를 처리하기 위한 서버는 multipart 메시지에 대해서 각 파트별로 분리하여 개별 파일의 정보를 얻게 된다.
• 이미지 파일도 문자열로 이뤄져 있기 때문에 이미지 파일을 문자로 생성하여 HTTP request body 에 담아 서버로 전송하는 것.

 

• 서버에 post를 보내게 될 때,  file 을 업로드하는 경우 formData 를 사용해야 한다.

// formData 객체 생성
const formData = new FormData();

// formData 객체에 file 넣기
formData.append('file', 파일 위치 찾아서 value 값 입력);

 

form ? 입력 양식 전체를 감싸는 태그

• name : form의 이름, 서버로 보내질 때 이름의 값으로 데이터 전송한다.
• action : form이 전송되는 서버 url 또는 html 링크.
• method : 전송 방법 설정. get은 default,
  post는 데이터를 url에 공개하지 않고 숨겨서 전송하는 방법이다.
• autocomplete : 자동 완성. on으로 하면 form 전체에 자동 완성 허용한다.
• enctype : 폼 데이터(form data)가 서버로 제출될 때
  해당 데이터가 인코딩되는 방법을 명시한다.

 

entype 속성값

• application/x-www-form-urlencoded
  • default 값으로, 모든 문자들을 서버로 보내기 전에 인코딩됨을 명시한다.
• text/plain
  • 공백 문자(space)는 “+” 기호로 변환하지만, 나머지 문자는 모두 인코딩되지 않음을 명시한다.
• multipart/form-data  
  • 모든 문자를 인코딩하지 않음을 명시한다.
    이 방식은 <form> 요소가 파일이나 이미지를 서버로 전송할 때 주로 사용한다.

<form action="/home/uploadfiles" method="post" enctype="multipart/form-data">
    파일명 : <input type="file" name="myfile">
    <button type="submit">제출하기</button>
</form>

 

참고

1. HTTP multipart/form-data 란?

https://velog.io/@shin6403/HTTP-multipartform-data-%EB%9E%80

 

 

 

 

3. JWT 를 이용하여 토큰 기반 인증 회원가입 / 로그인 기능 구현

어제 블로그 게시물에 써뒀지만, 잘 이해가 되지 않아 다시 정리해본다.

 

JWT 는 토큰의 한 형식. 데이터가 JSON 형태로 이루어져 있는 토큰.

(토큰은 로그인 이후 서버가 만들어 주는 문자열)

 

서버에서 만들어 준 토큰은 서명이 있기 때문에 무결성이 보장된다.

(무결성이란 : 정보가 변경되거나 위조되지 않았음을 의미하는 성질)

 

• 생김새 : [header].[payload(내용)].[signature(서명)]
  • header: 토큰 타입과 암호화 방식 정보가 들어간다.
  • payload: 토큰에 담을 정보가 name: value 쌍으로 들어간다.
  • signature: 서명 정보. secret key를 포함해서 header와 payload 정보가 암호화 되어 들어간다.
• 동작 방식 : 토큰 기반 동작 방식대로 움직입니다. 
  • 유저가 로그인을 시도하면,
  • 서버가 요청을 확인하고 secret key를 가지고 access_token을 발급한다.
  • 클라이언트는 JWT를 받아 저장하고, 
  • 클라이언트는 API 요청을 할 때 Authorization header에 JWT를 담아서 보낸다.
  • 서버는 JWT의 서명을 확인하고 payload에서 정보를 확인해서 API 응답을 보낸다.

 

JWT 를 저장하는 방법, Localstorage/Cookie/Session ...

찾아보니 localstorage 에 저장하는 방법, cookie 에 저장하는 방법이 있었다.

이 외에도 다양한 방법이 있다고 한다.

그런데 각 방식에서 모두 보안에 대한 우려가 있었다. 공격받을 수 있다는 것.

 

이 부분은 지금은 자세히 모르는 부분이나, 앞으로 실무에서 중요한 부분이 될 수 있을 거라고 생각한다.

*공부해야 하는 부분이라는 말!

 

 

 

 

참고 

1.JWT 로그인방식 구현하기 (feat. session에서 jwt로)

https://velog.io/@_woogie/JWT-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EB%B0%A9%EC%8B%9D-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-feat.-session%EC%97%90%EC%84%9C-jwt%EB%A1%9C

 

2. 프론트에서 안전하게 로그인 처리하기 (ft. React)

https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

 

3. jwt 으로 로그인 구현하기

https://yeri-kim.github.io/posts/jwt-authorization/

 

4.Buffer 이해하기 02 - Buffer와 Base64

https://krauser085.github.io/node.js-02-Buffer/

 

5.“buffer.from base64 javascript” Code Answer’s

https://www.codegrepper.com/code-examples/javascript/buffer.from+base64+javascript

 

(남겨진 주제들. 내일의 나에게 던져둔다.)

로컬스토리지/ 세션/ 쿠키

Data URL