🍞 Front-End/React

Swiper를 적용하려고 라이브러리를 찾아보다 Effect coverflow가 맘에 들어 선택하게 됐다. Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 사용 방법 공식문서에 나온 대로 따라해봤다. 먼저, swiper 를 설치해준다. npm i swiper 다음으로 import를 해줬는데 모듈을 찾을 수 없다고 오류가 떴다. package 파일을 찾아보니 현재 내 프로젝트 swiper 버전은 6.8.4였다. import { Swiper, SwiperSlide } from "swiper/react";..

사용자가 로그인을 하면, 서버에서 해당 계정 정보를 확인해 유효시간이 있는 JWT 토큰을 발급한다. 해당 사용자는 유효시간이 끝날 때까지, 인증이 필요한 요청마다 해당 JWT 토큰을 http 헤더에 넣어 서버에 요청을 한다. 서버에서는 해당 JWT 토큰이 유효한지 확인하고 정보를 전달한다. 1. 사용자가 username, password로 로그인을 한다. 2. 서버는 해당 계정 정보를 읽어 사용자가 있는지 확인을 하고, JWT 토큰을 발급한다. 이때, JWT 토큰에 사용자의 고유한 ID값을 부여한 후, 기타 정보와 함께 Payload에 넣고 토큰의 유효 기간을 설정한다. 3. 서버는 secret_key를 이용해 Access Token을 발급하고, 해당 JWT 토큰을 브라우저에게 전달한다. 4. 사용자는 ..

JWT 토큰을 어디에 저장해야 할까? JWT 인증은 서버가 상태를 갖지 않아 클라이언트 측에서 토큰을 저장하고 있어야 한다. 우리가 사용할 수 있는 저장소는 쿠키, 세션 스토리지, 로컬 스토리지가 있다. (기존에는 쿠키만 존재했으나 HTML5 들어 저장소 종류가 되었다.) 이 중 어떤 저장소에 JWT토큰을 저장해야 할까라는 고민을 시작으로 웹 저장소를 선택할 때 고려해야 할 점들은 무엇이고 이들의 차이점은 무엇인지 정리해보았다! 고려해야 할 점 ✅ 얼마나 오래 보관할 것인가 저장소별 휘발성에 차이가 있다. - 쿠키는 만료일을 지정하게 되어있고 만료일이 경과하면 삭제된다. - 세션 스토리지에 저장된 데이터는 브라우저를 닫으면 제거된다. 자동 로그인 등 브라우저를 열었을 때도 유지해야 하는 데이터는 보관하기..

프론트에서 사용자와 마주하는 디테일한 부분을 신경 쓰는 것은 매우 중요하다. 그래서 업로드 시간을 그대로 노출시키는 게 아니라 보여주기 전에 한 번 더 가공을 해서 보여주는 것을 구현할 것이다. 그렇기 때문에 오늘은 react-moment라는 라이브러리를 사용해볼 것이다! 이 라이브러리를 사용하면 손쉽게 구현 가능하다. ✅ react-moment - react-moment는 react에서 moment를 편리하게 사용할 수 있게 만들어 놓은 라이브러리다. - 심지어 react-moment는 별다른 작업을 하지 않아도 실시간으로 시간이 변하게 제공을 해준다. GitHub - headzoo/react-moment: React component for the moment date library. React co..

어떠한 사이트든 사이드 메뉴, 혹은 내비게이션 바 부분을 토글식으로 구현해 놓은 곳은 많을 것이다. 그래서 아래처럼 상태 값을 관리해주는 useState를 이용해서 토글 메뉴를 구현해볼 것이다! 사진처럼 오른쪽 화살표 메뉴 버튼을 누르면 없던 메뉴바가 나오게 만들면 되는 것이다. 우선 해줘야 할 것은 토글할 메뉴 리스트의 상태를 관리하기 위해 useState를 사용해주는 것이다. 편의상 불필요한 css는 지웠다. 상태에 따라 아래의 두 css가 바뀌는 게 포인트다! display: "block" display: "none" 그러고 나서 버튼이 눌리지 않은 상태면 arrow_down를, 눌린 상태면 arrow_up 이미지로 조건을 걸어준다. import React, { useState } from "rea..

우선, 구글 폰트 페이지에 들어가 원하는 글꼴을 선택해준다. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Noto Fonts가 제일 심플한 것 같아 선택을 해줬다! 둘러보다가 마음에 드는 폰트를 선택하면 장바구니처럼 폰트들이 Selected families에 담긴다. Selected families를 보면 아래쪽에 알아서 내가 선택한 폰트들을 이용할 수 있는 코드를 만들어 놓았기 때문에 폰트가 쓰일 스타일시트에 그대로 복사 붙여넣기를 하면 된다. index.css 파일에 import 해주고, body에 font-family를 설정해주면 적용되는 것을 볼 수 있다!

✅ JWT란 JWT(JSON Web Token)의 약자로, Json 포맷을 이용해 인증에 필요한 정보를 암호화 한 웹 토큰이다. JWT는 아래 사진 같이 긴 암호화 된 토큰으로, 토큰 자체를 정보로 사용하는 Self-Contained 방식으로 안전성을 보장한다. 주로 회원 인증이나 정보 전달을 위해 쓰이며, Access Token(JWT)을 HTTP 헤더에 넣어 서버와 통신한다. JWT.IO JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. jwt.io ✅ JWT 구조 JWT 공식 사이트에 들어가면 암호화된 토큰을 볼 수 있다. 위에 사진을 보면 ..

React의 특징 중 하나는 데이터가 단방향으로 흐른다는 점이다. 즉, 부모 component에서 자식 component로 props가 옮겨오는 식의 형태를 띄고 있다. 따라서 모든 component에서 쓰여야 하는 상태(ex 유저 정보)가 있다면 이 정보를 계속 부모에서 자식으로, 또 그 자식으로 전달해야 하는 어려움이 있다. ❗React의 한계 - 상태 공유를 위해 상위 요소까지 끌어올리면 거대한 트리가 재렌더될 수도... - Context는 단일 값만을 저장할 수 있고, 자체 Consumer를 가지는 여러 값의 집합은 담을 수 없다. - 최상단(state가 존재하는 곳)부터 트리의 잎(state가 사용되는 곳)까지의 코드 분할이 어렵다. 따라서 Redux를 통해 상태관리를 시행했지만 React에 최..

문제 index.js 파일을 수정하고 렌더링 했지만, 화면에 아무것도 나타나지 않음! 콘솔을 보니 아래처럼 에러가 났었다. react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function 원인 여기에 사용한 ReactDOM은 React 18의 최신 가져오기 방법에서 더 이상 사용되지 않는다고 한다. packge.json을 보니 18버전이었다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; ReactD..

📌 모킹(Mocking)이란? Mock(모의 데이터)을 만들어서 활용하는 방식을 말한다. 통상적으로 data fetch를 해야 하는 경우 통신을 통해 응답을 내려주는 서버가 있어야 한다. 서버가 없는 경우, api 요청으로 내려올 데이터를 프론트에서 모킹하거나 서버의 역할을 해주는 무언가가 필요하다. 완전하게 서버가 구축되지 않은 단계에서, 프론트엔드 개발자들은 API 호출과 관련된 테스팅을 진행하기 위해 API를 모킹해주는 과정을 거친다. 📌 MSW.js MSW(Mock Service Worker의 약자)는 API Mocking의 라이브러리로, 서버향의 네트워크 요청을 가로채서 모의 응답을 보내주는 역할을 한다. 따라서, MSW 라이브러리를 통하면, Mock 서버를 구축하지 않아도 API를 네트워크 수..