look-forest

카카오 맵 API 사용 1. 외부 사이트에서 API 키 받기 2. API_URL을 이용해 데이터를 요청 결국 URL은 특정 컴퓨터의 특정 리소스를 지칭한다. 브라우저가 URL을 통해 HTML 파일을 요청하는 것과 마찬가지로 서버도 URL을 통해 데이터를 요청한다. - config.js에 API key와 URL 공통부분을 상수화 - API_URL을 통해 데이터를 fetch - 이 경우엔 백엔드가 아니라 프론트엔드에서 데이터를 요청해 HTML의 내용을 채웠다. * API_URL의 구성 참고 따라하며 배우는 노드, 리액트 시리즈

기존 방식 - 사용성 측면 페이지를 바꿀 때마다 URL이 바뀌고 HTML 파일이 바뀜. 리로드됨. HTML 속 Image, JS 파일이 많으면 로드하기 느리고 비효율적. 내용만 바꾸고 싶다면? - 코드 재사용성 측면 콘텐츠마다 HTML 파일이 있어 관리하기 힘듦. 중복되는 코드. HTML template이 있고 그 안에 들어갈 내용만 동적으로 변경하고 싶다면? Ajax란? 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신하는 기술 리로드 할때마다 모든 정보를 다운로드하는 비효율을 회피! 예) 자동완성 - 글자 입력시 마다 브라우저와 웹 서버가 통신. 이때 전체 페이지가 리로드 되는 것이 아님! 장점 부분적 갱신 일부 정보가 달라졌음에도 전체 페이지를 리로드 하는 비효율 개선 -> 사용자: 사..

React.js로 frontend 파트를 만들고 Express.js로 backend로 만들었다. 어떻게 연결해야 할까?  1. 브라우저에서 Frontend로 요청 보내는 과정웹 애플리케이션 로드 과정브라우저에서 URL 입력:사용자가 브라우저의 주소창에 http://localhost:3000과 같은 URL을 입력(여기서 localhost:3000은 개발 중인 프론트엔드 서버(React 서버)를 가리킴)HTTP 요청:브라우저는 해당 URL로 HTTP GET 요청을 보냄. 프론트엔드 서버 응답:React 서버는 요청을 받아서 index.html 파일을 브라우저에 응답으로 보낸다. 이 index.html 파일은 React 애플리케이션의 진입점이다.HTML 파싱 및 리소스 로드:브라우저는 index.html 파일..

용어 resource owner : 사용자 resource server: 구글, 페이스북 client: 나의 서비스 목적 구글 등을 통해 사용자의 신원 확인 및 API 사용 사용자는 간편하고 서비스 제공자는 부담을 던다. 작동 방식 - access token을 획득하여 접근, 인증 사용자에 의해 구글, 페이스북에서 access token 발급 oauth를 통해 구글은 사용자를 거쳐 서비스 제공자(client)에게 access token 전달(authorized redirection URI) 서비스 제공자는 access token을 이용해 사용자 대신 구글에 접속 가능 사용자 정보를 요청하고 응답 받음으로써 신원 확인 참고 : 생활코딩

1. 로그인 시 아이디, 비밀번호가 맞다면 토큰을 생성해 서버측 DB와 브라우저측 쿠키에 넣는다. 2. 인증 : 토큰을 이용한 로그인 유지 및 권한 확인 - 쿠키의 토큰을 복호화해 user id를 찾음 - user id로 DB를 조회해 DB의 토큰과 쿠키의 토큰이 일치하면 인증 성공 3. 로그아웃 DB의 토큰을 지움 → 쿠키의 토큰과 DB의 토큰이 일치하지 않아 인증 X →로그인풀림 # 정리 생성: user id → 토큰 → 쿠키, DB에 저장 인증: 쿠키 토큰 → user id → DB 토큰 → 쿠키, DB 토큰 일치 로그아웃: DB 토큰 삭제 → 쿠키, DB 토큰 불일치

intro 중요 정보를 쿠키로 브라우저에 저장하면 보안상 위험하다 Session이란? 세션 데이터는 쿠키 자체에 저장되지 않고 세션 ID 만 저장됨. 세션 데이터는 서버 측에 저장! - 브라우저는 쿠키를 이용해 사용자를 식별하는 식별자만 저장(세션 ID = 사용자를 식별하는 쿠키 값) - 실제 데이터는 서버쪽에 안전하게 파일이나 db로 저장 session 도입하기 session 동작 방식 1. 처음엔 request header에 sessionIdsessionId 없음 -> response header로 전달받음 2. 브라우저에 쿠키값으로 저장 3. 이후 request header로 sessionId 전달 4. session을 프로그래밍적으로 활용하기 request.session 객체의 데이터 활용 (re..