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";..

프론트에서 사용자와 마주하는 디테일한 부분을 신경 쓰는 것은 매우 중요하다. 그래서 업로드 시간을 그대로 노출시키는 게 아니라 보여주기 전에 한 번 더 가공을 해서 보여주는 것을 구현할 것이다. 그렇기 때문에 오늘은 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를 설정해주면 적용되는 것을 볼 수 있다!

프론트엔드와 백엔드 별도로 개발을 진행한다면 백엔드의 api 개발이 모두 완료될 때까지 기다릴 수 없다. 그렇기 때문에 가짜 데이터 서버를 두고 먼저 개발을 진행할 필요가 있다. 특정 Request를 날리면 가짜 데이터를 보내줄 가상 서버를 MockServer라고 하는데 오늘은 api 개발을 위한 툴인 postman을 이용해서 mock server를 구축해보려고 한다! Postman API Platform | Sign Up for Free Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can cre..

✅ 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를 네트워크 수..

애플리케이션의 전역 상태를 효과적으로 공유하고 관리하기 위해 redux가 등장했다. redux는 상태를 변화시키는 방법과 상태의 변이를 구독하는 방법을 제공한다. Context를 사용할 경우에 Context가 가지고 있는 전역 데이터를 효과적으로 관리할 것에 대한 라이브러리가 Redux이다. Redux는 기본적으로 Flux 패턴을 따르고 있다. 어떤 Action이 발생하면, Dispatcher에서 이를 받아와 해석한 후 Store에서 저장된 정보에 변경을 가하고, 그 결과가 View로 다시 전달되도록 한다. 그런데 모바일에서 터치를 하는 것처럼, 웹에서도 사용자가 View를 통해서 클릭 같은 액션을 발생시킬 수 있다. 그런 경우도 고려하면 아래와 같은 흐름이 만들어진다. 이러면 뭐가 단방향이냐… 라고 볼..