기록하고 싶은 것들

오늘은 proxy에 대해서 공부하였고, 실습을 진행하였다. proxy 프록시(Proxy)란 '대리', '대신'이라는 뜻을 가지며, 프로토콜에 있어서는 대리 응답 등에서 사용하는 개념이다. React 앱에서 브라우저를 통해 API를 요청할 때, proxy를 통해 백엔드 서버로 요청을 우회하여 보내게된다. 백엔드 서버는 응답을 React 앱으로 보내고, React 앱은 받은 응답을 백엔드 서버 대신 브라우저에게 전달한다. 이렇게 되면 출처가 같아지기 때문에 브라우저는 이 사실을 눈치 채지 못하고 허용하게 된다. Proxy 실습 api는 책의 정보를 제공하는 서버, api2는 todo의 정보를 제공하는 서버 my-app은 클라이언트 부분이다. 이를 이용해서 my-app부분에 책의 정보와 todo의 정보를 불러..

오늘은 GraphGL에 대해서 공부하였다. 많이 들어는 봤지만, 정확하게 어떤 기술인지 몰랐는데 이번 기회를 통해 새롭게 알게 되었다. GraphQL 오픈 소스로 제공된 쿼리 언어 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻함 사용 이유는? GraphQL은 그래프 형태로 관계를 생각하는 것에서 출발하여, 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답하는 방식으로 구성되었기 때문에 고정된 자원이 아닌 클라이언트 요청에 따라 유연하게 자원을 가져올 수 있다는 점이 가장 큰 이유 GraphQL VS REST API REST API의 한계 - Overfetch: 필요 없는 데이터까지 제공함 - Underfetch: endpoint 가 필요한 정..

오늘은 CSS 애니메이션에 대해서 배웠다. @keyframes 라는 키워드를 활용하여 애니메이션 효과를 나타내는데, 우선 css 키프레임 블록을 생성한 뒤, 애니메이션을 적용시키고 싶은 요소에 animation 속성으로 키프레임 이름을 불러와서 사용을 한다. 회전하는 키프레임 예시 @keyframes lotate { 0% { transform : rotate(0deg) } 50% { transform : rotate(180deg) } 100% { transform : rotate(360deg) } } /* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션입니다. */ /*3초 동안 lotate 애니메이션이 재생*/ #logo { animation : lotate..

오늘은 반응형 웹에 대해서 공부하였다. 반응형 웹이란? 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여, 크기에 따라 레이아웃이 변하는 웹 사이트를 의미 미디어 쿼리 미디어 쿼리는 특정 조건이 true인 경우에만 코드 블록{ } 내부의 CSS 코드를 실행해주는 구문 미디어 타입을 개선하여 좀 더 구체적인 조건으로 필요한 스타일을 적용 가능 media 미디어 타입 (조건(너비 및 높이)) { (CSS 입력하는 부분) } --예제 @media screen (max-width: 400px) { body { color: red; } } 실습 예시 import styled from "styled-components"; im..

오늘은 토큰에 대해서 배웠고, 토큰을 이용한 로그인, 로그아웃 실습을 진행하였다. 실습 중에서 가장 어려움을 겪었던 부분이 있었는데, 그 부분을 간단히 적어보려고 한다. 토큰 웹 보안에서의 토큰은 인증과 권한 정보를 담고 있는 암호화된 문자열 의미 이를 이용해 특정 애플리케이션에 대한 사용자의 접근 권한을 부여가 가능하다 오늘 진행한 실습의 전체적인 과정과 유사한 이미지이다. 이중에서 오늘 가장 어려움을 겪었던 부분은 F, G, H 부분이다. 이 부분에 대해서 설명을 하자면, accessToken이 만료된다면 refreshToken을 이용하여서 다시 accessToken을 얻어온 뒤, 클라이언트로 보내는 과정이다. 이 과정에서 어려웠던 점은 조건 분기를 적절하게 해야되는 것이었다. 쿠키로부터 받아온 ac..

오늘은 Cookie에 대해서 배웠고, 실습을 진행하였다. 쿠키 HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일 실습 - 로그인 로그아웃 구현 클라이언트와 서버가 쿠키를 주고 받으면서 로그인, 로그아웃을 구현을 실습하였다. 작동흐름에 따라 실습내용을 정리해보고자 한다. 로그인 1. 서버로 로그인 요청 우선 Axios를 통하여 로그인을 처리하는 post 요청을 보내준다. 클라이언트 axios.post("http://localhost:4000/login", {loginInfo, checkedKeepLogin}) 2. 서버에서 로그인 요청 처리 서버 /login.js data에 저장된 아이디, 비밀번호와 요청받은 ..