Frontend

브라우저 작동 원리/Reflow+Repaint/Virtual dom

브라우저란? 네트워크상의 사이트나 정보(World Wide Web)에 엑세스하는 데 사용되는 컴퓨터 프로그램 World Wide Web? 월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. 클라이언트(사용자)와 웹 서버(서버)의 양방향 통신을 지원하고 주고받는 HTML 문서, 파일, 이미지 등을 연동하고 출력을 담당하는 소프트웨어이다. 즉, 컴퓨터에 설치되어 있는 하나의 프로그램으로, 이 프로그램을 다운받고 실행하게 된다면 주소창을 입력할 수 있는 도구가 되는 것이다. 주소창에 URL를 통해 서버의 자원을 요청하면 화면에 띄워줌 크롬, 사파리, 파이어폭스 등이 있다 브라우저 구성 사용자 인터페이스 ..

SOP, CORS

SOP Same Origin Policy → 동일 출처 정책. 동일한 출처(프로토콜, 호스트명, 포트가 모두 같아야 함)의 리소스에만 접근하도록 제한! https://duckgugong.kr:80 → https: 프로토콜, duckgugong.kr: 호스트명, 80: 포트 브라우저는 동일한 서버가 아닌 곳에서 받아온 데이터를 기본적으로 차단한다. 예를 들어 https://duckgugong.kr에서 로그인을 한 후 쿠키에 토큰을 받은 후 https://duck90.kr에 접속해서 axios나 ajax를 이용해서 HTTP 요청을 보내면 자동으로 쿠키에 토큰이 전송된다! 이러한 이유로 브라우저는 기본적으로 HTTP 요청(axios, ajax, javascript)을 동일한 출처로 제한했다! CORS Cros..

refresh token axios interceptor

Why? refresh token과 access token을 사용할 때, 인증이 필요한 api 요청 시 access token이 만료되면 refresh token을 이용해서 access token을 받아온 후 요청하려고 했던 api를 다시 요청하는 axios interceptor를 구현해보자. 만약, refresh token이 만료되면 로그인 페이지로 이동시키자! intercetor 구현 서버에서는 refresh token과 access token을 header로 각각 X-REFRESH-TOKEN과 X-ACCESS-TOKEN으로 준다고 가정. refresh token과 access token 둘 다 백엔드의 보안 미들웨어를 통과하는데 필요하다 가정 클라이언트는 refresh token을 local sto..

carousel 만들기

What to do? react-slick이라는 라이브러리를 이용해서 간단하게(?) carousel(캐러셀)을 구현해보자. 우선 react-slick을 설치하자. yarn add react-slick 그리고 react-slick에 기본적인 디자인을 입혀줄 slick-carousel을 설치하자. yarn add slick-carousel react-slick과 slick-carousel만 이용하면 디자인이 별로?라서 조금의 커스텀을 해주었다. 위 두 라이브러리를 설치한 후 개발자도구를 열어서 태그의 classname을 확인하면서 누구든 css를 수정하면서 커스텀할 수 있다. 사용법 Slider 컴포넌트 우선 react-slick의 Slider 컴포넌트와 기본적으로 slide될 아이템들을 하나씩만 보이게 해..