과연 Node.js는 무엇인지, 그래서 React 공부할 때 왜 필요한지 알아보자
[한입 크기로 잘라먹는 리액트]

개요

• 특정 컴퓨터에서 책 찾기 검색이 되지 않는다는 문의.

안전한 Token 저장

• 로그인에서 중요한 점이 바로 보안이다. 로그인을 위해 JWT(Json Web Token)를 발급 받은 후 브라우저에 안전하게 저장하는 것이 필요하다.
  일반적으로 토큰을 저장하는 저장소는 localStorage와 Cookie로 나뉜다.

Web Storage

• 쿠키와 달리 서버에 전송되지 않으며, 각 도메인마다 독립적으로 작동.
• 크기 제한이 있는 쿠키보다 훨씬 크며 (일반적으로 5MB 이상), 데이터를 키-값 쌍으로 저장
• Local Stroage 와 Session Storage

웹 브라우저에 기본적으로 내장되어있는 데이터 저장소가 있다. 자바스크립트 내장 함수만으로 접근가능한,

개요

• 토큰이 유효시간을 가지고 있어 쿠키에 담아 보관하고 있음에도 페이지 진입 시 새로운 토큰 값을 호출하고 있고, 같은 API를 사용하는 페이지 진입 시에도 새로운 토큰 값을 호출하고 있는 문제 발견.

이미지 최적화

메인급 서비스들을 개발하면서 느낀 점 중 하나는 생각보다 이미지 파일들이 많이 필요하다. 주로 간단한 아이콘들이 많다.
많은 아이콘들을 간단하게 관리를 하기 위해서는 여러가지 방법이 있다. 대표적으로 이미지 스프라이트 기법을 주로 사용하는 것 같았다.

URI, URL, URN에 이어서 URL의 Query Parameter과 Path Variabled를 사용하는 방법을 작성.

전남 메타스쿨의 기존 메인사이트에는 자주 사용하는 사이트들이나 즐겨찾기로 추가한 사이트들의 이름과 아이콘들을 다 노출되어있었다. 하지만 메인 사이트에 노출 되는 부분은 클래스 운영, 교수 학습자료, 독서인문교육, 에듀테크 활용, 에듀테크 이해하기 이렇게 5개의 글자와 아이콘만 노출이 되고 클릭 시 크게 5가지로 분할된 상태에서 하위로 관련 사이트들의 이름과 아이콘이 노출되게 변경해달라고 했다. 그리고 클릭해서 들어오게 된 부분에는 배경색을 줘야했다.

고안한 방법은 앞에서 클릭한 값을 URL에 Query Parameter로 붙여서 넘긴 다음 자주 사용하는 사이트 페이지에서 Query Parameter에 있는 값을 가져온 후 스타일을 주는 방법을 생각했다. 또한 선생님, 학생, 학부모마다 보여지는 갯수가 달라지므로 userType을 붙여서 보여지고 안보여지고를 설정했다.

작업을 하다가 CORS 이슈가 발생했고, CORS 이슈를 해결하는 방법에 대해 공부를 했다.
CORS 이슈 → SOP 로 인해 CORS 정책 허용 → 보안정책 왜 필요해? → XSS 취약점 대비 → XSS…
이렇게 꼬리에 꼬리를 물었다. XSS라는 것 부터 정확히 알아야 할 것 같아서 공부하게되었다.