- 중첩라우터를 제거하고 컴포넌트로 구성을 변경
- Board라는 영역을 표시하는 컴포넌트를 두어 Board를 컴포넌트가 아니라 리스트 렌더링을 통해서 뷰를 구성했다.
- 헤더에서 로그인을 통해서 서버에 아이디와 비밀번호를 데이터로 보내고 JWT를 받아 세션 스토리지에 토큰을 저장했다.
- 세션 스토리지의 경우 JSON 데이터를 담을 수 없기 때문에 userInfo는 Stringify로 문자열로 저장한다.
- 라우터 변경을 통해서 글 읽기/작성 페이지 컴포넌트를 다르게 둠
- 글 작성 컴포넌트를 통해서 서버에 게시글 작성 요청을 진행
구조를 위해 적용한 내용
Session Storage
웹 스토리지 객체로 브라우저 내에 키-값 형태의 데이터를 저장할 수 있는 곳이다. 쿠키를 사용하는 방법도 있으나 아래와 같은 이유가 있다.
- 쿠키와 다르게 네트워크 요청 시 서버로 전송되지 않는다. 대부분의 웹 브라우저는 최소 2MB 정도의 공간을 제공한다.
- HTTP 헤더를 통해 해당 객체를 조작할 수 없다.
- Origin에 묶여 있기 때문에 프로토콜이나 서브 도메인이 다르면 데이터에 접근할 수 없다.
스토리지를 사용하기 위해서는 아래와 같은 메소드와 속성을 사용할 수 있다.
- setItem(key, value) : 키-값 쌍을 보관한다.
- getItem(key) : 키에 해당하는 값을 받아온다.
- removeItem(key) : 키와 해당 값을 삭제한다.
- clear() : 모두 삭제한다.
- key(index) : 인덱스에 해당하는 키를 받아온다.