[8주차] 1. 나의 책 관리하기 프로젝트 JS로 만들기

Javascript

나의 책 관리하기 프로젝트 만들기

구성

• 1. 로그인 페이지 <>2. 리스트 페이지 <> 3. add 화면

<> 3. detail 화면 <> 4. edit 화면

 

API 사용방법

• axios 라이브러리 사용
• http 프로토콜을 사용해서 데이터를 요청하고 가져올 수 있는 라이브러리
• res 데이터를 활용해서 우리의 view에 표현하게 됨
• Promise 활용
• axios.post(‘주소’ , {
  body, }).then(res => { } );
• 프로미스 상태로 지원됨(axios.post도 프로미스여서 then을 통해서 서버로부터 데이터를 정상적으로 가져오게 되면 resolve 돼서 res라고 하는 데이터가 우리에게 넘어오게 됨)
  • async-await 활용
• const res = await axios.post(‘주소’, {
  body,});
• await를 포함한 값이 async function 안에 있어야 함

Axios

• 브라우저 환경(chrome 등), 서버 환경(node.js 등) 이런 양쪽에서 똑 같은 api로 http 클라이언트의 역할을 할 수 있게 도와주는 라이브러리
• Promise base
• 많은 개발자들이 사용

DOMCotentLoaded

• 최초 html 문서가 완전히 로드 및 파싱되었을 때 발생
• 스타일시트 같은 스타일이 적용되거나 이미지 이런 것에 대한 로드가 끝나는 것은 기다리지 않는다.
• 이 이벤트 말고 load라는 이벤트는 모든 페이지가 완전히 로드 되었을 때 사용
• load 이벤트보다 빨리 일어나는 이벤트
• 기능 구현
• 버튼 이벤트 연결
• 토큰 체크,
• 토큰으로 서버에서 나의 정보 받아오기(문제시 로그 아웃됨)
• 나의 책을 서버에서 받아오기(api 활용)
• 받아 온 책을 그리기(그린 책 html 넣어주기)

localStorage(Window.local.storage)

• 이 속성을 통해서 Storage에 접근할 수 있게 해줌
• 전역 개체
• 개발자 도구>Application>Storage>Local Storage 들어가면 현재 주소에 해당하는 key token인 어떤 value 값이 있는 지 확인 가능(없으면 null이라고 뜸)
• getItem : value값 얻어짐
• 로그인 된 상태이면 token이 있는 상태, 로그아웃시 key와 value 사라짐

Window.location

• 전역 개체
• 개체를 통해서 location에 다른 주소를 assign해서 처리
• 페이지 이동

데이터 속성 이용

• 데이터 속성을 이용해서 자바스크립트를 연결시켜주는 값을 나올 수 있도록 처리
• data-사용할 key값

리스트 페이지

• 로그인 후 보이는 첫 페이지
• 로그아웃 버튼 DOM 클릭 시 로그아웃 되도록 이벤트 연결해줘야 한다(bindLogoutButton 함수)
• view 버튼 누르면 detail 페이지로 이동

로그인 페이지

• 맨 처음 보이는 페이지
• 책 삭제 가능

add 페이지(책 추가하기)

• 책을 추가하는 화면

detail 페이지(책 정보 보기)

• 상세보기를 통해 책의 상세설명 확인하는 화면
• 책 삭제 가능
• 로그인 페이지로 이동 가능
• 제목, 글쓴이, 책을 살 수 있는 페이지

edit 페이지(책 정보 수정)

• 올려놨던 책 정보 수정 가능

서버로부터 데이터 가져오는 작업

• 7개의 API 사용
• 로그인 할 때 POST를 이용해서 api 주소 치고 Body에는 email과 password 보내게 됨
• 내정보 확인 시 GET을 이용해서 로그인 POST에 작성한 주소와 동일한데 Requset Headers에 Authorization(권한)으로 로그인할 때 받았던 토큰 사용
• 책 목록 가져오기, 책 정보 가져오기(책 추가하기에서 추가된 책 정보 반영됨), 책 추가하기, 책 수정하기, 책 삭제하기의 모든 api의 Request Headers에 Authorization(권한)으로 토큰 값을 넘겨 받아서 처리하게 됨, 각각 GET, GET, POST, PATCH, DELETE를 통해서 api 주소를 치게 된다
• 책 추가하기, 책 수정하기에는 title, message, author, url을 보내게 됨
• 책 수정하기, 책 삭제하기, 책 정보 가져오기 에는 가져온 api 주소 뒤에 북아이디를 추가해서 처리하게 됨