Front-end/GDSC
-
[GDSC/슈파인드] 개발 일지 #1-2주 차Front-end/GDSC 2023. 1. 9. 21:52
✅ 회원가입 페이지 구현 [1 Week] - 가입 폼 페이지 컴포넌트화 - react router 적용하기 [2 Week] - 디자인 적용 # 첫 로그인 화면 버튼 클릭 시 모달 컴포넌트 띄우기 Modal.js - styled-components CSS-in-JS 라이브러리를 설치해서 버튼 디자인을 했다. import { useState } from 'react'; import ModalBasic from './ModalBasic'; import styled from 'styled-components'; // 모달을 노출하는 페이지 function Modal() { // 모달창 노출 여부 state const [modalOpen, setModalOpen] = useState(false); // 모달창 노..
-
[GDSC/Front-End] JWT 로그인Front-end/GDSC 2022. 12. 6. 16:46
📕 JSON Web Token 인증에 필요한 정보들을 암호화시킨 JSON 토큰 웹표준으로서, 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인(self-contained) 방식으로 정보를 안정성 있게 전달 JWT 기반 인증은 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별하는 방식 📌 JWT 사용 순서 클라이언트 사용자가 아이디, 패스워드를 통해 웹서비스 인증 서버에서 서명된 JWT를 생성하여 클라이언트에 응답으로 돌려줌 클라이언트가 서버에 데이터를 추가적으로 요구할 때 JWT를 HTTP Header에 첨부 서버에서 클라이언트로부터 온 JWT를 검증 📌 JWT 구조 WT는 ‘.’을 구분자로 3가지의 문자열로 되어 있다. aaaaaa.bbbbbb.cccccc 헤..
-
[GDSC/Front-End] React lazy loadingFront-end/GDSC 2022. 11. 8. 15:59
📌 lazy loading 필요 시점까지 객체의 초기화를 연기시키기 위해 컴퓨터 프로그래밍에 흔히 사용되는 디자인 패턴의 하나이다. 페이지를 불러오는 시점에 당장 필요하지 않은 리소스들은 나중에 불러오자! 📌 React image placeholder 대역폭 사용량을 줄이고 사용자 경험을 개선하며 페이지 로딩 속도를 높이기 위해 뷰포트 외부에서 이미지 로드를 연기한다. 1️⃣ 코드 추가 이미지를 지연로딩 하는 방법 중 가장 쉬운 것은 img 요소 안에 loading=" lazy" 속성을 추가하는 것이다. 2️⃣ 이미지 블러 처리 라이브러리 사용 React Lazy Load Image Component 자바스크립트 라이브러리 사용 react-lazy-load-image-component React Comp..