[항해99 1기] [Chapter1] 웹개발 미니 프로젝트 (4) (2021.3.4)

[항해99 1기] [Chapter1] 웹개발 미니 프로젝트 (4) (2021.3.4)

CSS 오류

• 서버를 구동했을 때 CSS가 적용이 안되는 오류
• CSS 파일 자체는 불러오나, 개발자가 저장한 코드가 적용이 되어있지 않은 상태

이유

• 웹 서버에서 캐시에 올려놓고 새로운 파일로 교체를 안 해주기 때문이다.

해결책

• 브라우저에서 캐시를 지우기
• css파일이름을 바꾸기

<link href = "../static/style.css?ver0.1" rel = "stylesheet">

위와같이 CSS에 변경사항이 생기면 ver을 수정하면 적용된다.

회원가입 기능

해쉬 함수

• 입력 데이터를 랜덤하게 암호화
• 항상 똑같은 길이의 암호화된 값을 뱉어낸다.
• 결과 값으로 역으로 유추 불가
• 패스워드에 사용

일어나는 일

• 아이디, 패스워드 등을 받아 서버에 넘긴다.
• 패스워드는 해쉬함수를 통해 암호화
• DB에 저장

로그인 기능

JWT

• JSON Web Token
• 사용자 정보 안정성있게 전달
• 한 번 발급받으면 로그인한 것이 인증된다.
• 로그인은 만료시간이 있다.

일어나는 일

• 사용자가 로그인 정보를 입력
• 패스워드를 해쉬를 통해 암호화
• 입력된 정보가 DB에 있는지 조회
• 회원인 경우,(DB에 있는 경우) JWT토큰을 클라이언트에게 전달
  • 로그인 한 사람의 아이디
  • 로그인이 유효한 시간
  • 암호화를 해야 한다.
  • 서버만의 특별 키로 암호화
• 로그인 성공 메시지를 받으면 건네받은 토큰틀 쿠키로 저장하여 만료 전까지 갖고있으면서, API요청을 보낼 때마다 회원임을 확인 받는다.
• 로그아웃 시 해당 토큰 삭제

쿠키

• 브라우저에 저장된 정보
• 로그인에 대한 인증 정보
• 클라이언트가 서버로 정보를 보낼 때 항상 같이 보낸다.

DOM 요소에 접근할 수 없을 때

브라우저는 HTML을 읽다가 script를 만나면 먼저 실행한다. 이때, DOM 생성을 멈춘다. 이는 src 속성이 있는 script를 만났을 때도 마찬가지이다.

여기서 발생하는 문제점 두가지

스크립트는 스크립트 아래에 있는 DOM 요소에 접근할 수 없다. 따라서, DOM 요소에 핸들러를 추가하는 것과 같은 여러 행위가 불가능

페이지 위쪽에 용량이 큰 스크립트가 있는 경우 스크립트가 페이지를 막는다. 즉, 페이지에 접속하는 사용자들은 스크립트를 다운받고 실행할 때까지 스크립트 아래쪽 페이지를 볼 수 없다.

이러한 문제는 스크립트 페이지를 /body위에 바로 둠으로 해결할 수 있으나, 완벽한 방법은 아니다.

defer

<script defer src="#"></script>

defer 속성이 있는 스크립트는 브라우저가 백그라운드에서 다운로드한다. 그러므로 HTML 파싱이 멈추지 않고 defer 스크립트는 페이지 구성이 끝날 때까지 지연된다.