🍞 Front-End

React.Suspense란? Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능이다. 기본적으로 리액트는 JSX 코드 안에 들어있는 모든 컴포넌트를 즉시 호출하여 바로 랜더링을 진행한다. 예를 들어, 리액트는 다음과 같이 컴포넌트가 포함된 JSX 코드를 렌더링할 때, Event 함수를 바로 호출한다. 그러나 아래처럼 Suspense로 감싸주면 컴포넌트의 랜더링을 특정 작업 이후로 미루고, 그 작업이 끝날 때 까지는 fallback 속성으로 넘긴 컴포넌트를 대신 보여줄 수 있다. ✅ useState를 통한 Loading 이전까지는 늘 이렇게 비동기 작업을 수행하기 이전에 loading이라는 상태값을..

스켈레톤(Skeleton) 이란? 웹 페이지에서 로드 시간이 짧은 것처럼 보이게 하는 몇 가지 방법들이 있다. 스켈레톤은 그 방법 중에 하나로서 데이터가 로드되기 전에 콘텐츠의 자리비움(placholder)를 표시해서 사용자가 기다리는 시간을 좀 덜 지루하게 느끼게끔 하는 UI다. 그래서 오늘은 프로젝트를 로딩할 때 몇 초 동안 화면이 비어있는 것보단 스켈레톤을 보여주도록 설정해보려고 한다. App.tsx loading 상태를 생성하고 useEffect와 setTimeout을 이용해 loading이 2초 동안 되게 구현했다. loading 중이면 Placeholder 즉, 스켈레톤 컴포넌트를 렌더링하고 loading 끝나면 Item 컴포넌트를 렌더링한다. import React, { useEffect, ..

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

Retrofit2 설치 retrofit github에 들어가 코드를 복사해 안드로이드 스튜디오에 다운로드를 해준다. dependencies { implementation 'com.squareup.retrofit2:retrofit:2.9.0' } GitHub - square/retrofit: A type-safe HTTP client for Android and the JVM A type-safe HTTP client for Android and the JVM. Contribute to square/retrofit development by creating an account on GitHub. github.com 다음으로 안드로이드는 기본적으로 앱에서 따로 권한을 받지 않는 이상 통신이 안 된다. 그래서..

사용자가 로그인을 하면, 서버에서 해당 계정 정보를 확인해 유효시간이 있는 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..

Android에서 Database를 왜 배울까? 대부분의 정보는 서버에 저장하지만 클라이언트에서만 저장해야 하는 값도 존재한다. 또한 이러한 지식을 알고 있으면 서버 개발자와의 협업에도 유리하다! 그래서 안드로이드를 공부하더라도 DB를 배우는 것이 좋다. 안드로이드에서도 (Key-Value 및 관계형 데이터베이스) 형태 기반으로 값을 저장 가능할 수 있다. 대표적인 저장 방법으로는 3가지가 있다. - File (text...) - SharedPreferences (Key-Value) - RoomDB (관계형 DB) 📌 SharedPreferences 안드로이드에서 간단하게 값을 저장하고 불러오는 방법이다. 기본적인 자료구조만 가능하기 때문에 하나의 Key에 다중 값을 저장하기는 어렵다! Key-Value..

우선, 구글 폰트 페이지에 들어가 원하는 글꼴을 선택해준다. 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를 설정해주면 적용되는 것을 볼 수 있다!