전체 글

각 페이지를 나타날 때 고화질 이미지를 사용한다. CSR을 기반으로 하여 첫 로딩이 느린 것에 더하여 고해상도 이미지 때문에 부하가 더 심한 것 같다는 생각이 들었다.  이에 속도를 개선해보고 싶다는 생각이 들었고, 성능 최적화를 진행해보았다.  https://pagespeed.web.dev/?hl=ko PageSpeed Insights올바른 URL을 입력하세요.pagespeed.web.devPageSpeed 라는 사이트를 사용하여 성능을 측정했다.  55점,,이라고 한다. 아래로 내려가면 상세한 진단을 확인할 수 있다. 각 진단 내용을 누르면 해결 방법에 관한 문서들도 제공해준다.  우선 이미지에 대한 최적화를 진행하였다. 이미지 webp 로 변환하기webp는 차세대 이미지 형식으로, 구글에서 발표하였..

import { useNavigate } from 'react-router-dom';import * as S from './GNB.style';import { useState } from 'react';const GNB = () => { const navigate = useNavigate(); const [active, setActive] = useState('home'); const handldeActive = (label: string, path: string) => { setActive(label); navigate(path); }; const navList = [ { label: 'home', name: '홈', path: '/home', icon: null }, {..

온보딩 단계에서 닉네임을 입력하고 중복 여부를 처리한다.  모든 단어의 경우를 생각해야하기 때문에 한글자를 입력할 때마다 API 요청을 하였고 이미 존재하는 닉네임의 경우에는 error status 를 반환받아 이를 활용하여 에러 처리를 하였다.  import StepProps from '../../../types/StepPropsType';import BtnSmall from '../../common/Button/SmallButton/BtnSmall';import OnboardingInput from '../OnboardingInput/OnboardingInput';import Title from '../../common/Title/Title';import * as S from './Step2.styl..

인증과 인가인증 Authentication서버가 리퀘스트를 보낸 유저가 누구인지를 파악하는 기능이다.일종의 회원가입과 로그인 절차라고 생각할 수 있으며 이를 위해 유저 정보를 담기 위한 유저 모델이 필요하다. 쿠키 인증서버 response 나 클라이언트 코드에 따라 브라우저에 저장되는 작은 단위의 문자열 파일이름, 값, 속성으로 구분되며 각 속성들은 세미콜론으로 구분된다. 속성에는 만료인, 보안 설정 등이 존재한다. 서버는 reponse 값에 있는 Set-Cookie 헤더에 쿠키를 보내주며 클라이언트는 이 쿠키를 저장한 후 브라우저가 request 를 보낼 때 자동으로 쿠키 헤더에 해당 쿠키가 추가되어 보내진다. Authorization 헤더 인증서박 body 값에 인증서를 추가하여 클라이언트에 전송한다..

StorybookUI 컴포넌트 개발 도구이다작업 효율 증가원활한 소통UI 변경 확인디자인 시스템 활용스토리북 설치npx storybook@latest init스토리북 열기npm run storybook6006번 포트로 연결되어서 프로젝트에 영향을 주지 않고 사이트를 열 수 있다..storybook 디렉토리는 스토리북의 전체적인 설정 관리stories 디렉토리는 실제 스토리 파일을 작성→ .stories.js 에 작성한 것들이 스토리북 웹사이트에 반영.실습import "./customButton.css";import PropTypes from "prop-types";export const CustomButton = ({ size, label, variant, backgroundColor, colo..

인증서버가 리퀘스트를 보낸 유저가 누구인지 파악하는 기능먼저 서버에 유저에 대한 정보가 필요하며, 일종의 유저 클래스인 유저 모델이 필요하다.보통 고유 식별값으로 이메일을 사용하는 추세이고, 비밀번호 같은 경우는 암호화하여 사용한다.클라이언트에서 회원가입 정보를 전달하면 서버는 이를 확인하고 저장한다. 이후 id 번호를 생성하여 유저를 특정짓는다.로그인의 경우 서버 URL 로 리퀘스트를 보내면 로그인 값으로 유저를 찾고 비밀번호로 유저가 맞는지 확인한다. 로그인이 성공하면 성공 리스폰스와 함께 문자열(인증서) 값을 보내준다. 이후 해당 문자열을 리퀘스트와 함께 보내며 유저를 알아낼 수 있다.해당 인증서는 유효기간이 존재하여, 인증서가 만료되면 다시 로그인해야한다.쿠키 인증쿠키: 서버 리스폰스나 클라이언트..

API 라우트 만들기api폴더에 js 파일을 만든다. 이 파일이 곧 엔드포인트가 된다.//short-linksexport default function handler(req, res) { res.send('안녕 API');}이후 /api/short-links 경로로 리퀘스트가 들어왔을 때 실행된다. request 와 response 를 통해서 api 연결을 다룰 수 있다. request 객체를 통하여 body 값, method 종류 등을 확인할 수 있다. response 객체를 통해서 status, send 메소드 등으로 상태값 등을 확인할 수 있다. export default function handler (req, res) { switch (req.method) { case 'POST': ..

Image 컴포넌트Next 의 Image 컴포넌트는 주소를 변경해준다.해당 컴포넌트를 사용하면 주소를 거쳐서 이미지의 크기를 최적화해준다.레이지 로딩꼭 필요한 순간에만 이미지를 다운받아 페이지 로딩 속도를 최적화 할 수 있다.Image 컴포넌트 사용법이미지의 크기를 지정하지 않는다면 오류가 발생한다. 지정한 이미지 크기를 기준으로 최적화하기 때문이다.유연하게 크기를 지정하기 위해서는 fill 속성을 사용한다. 이는 조상 요소에 꽉차로독 채우는 것이다, 따라서 조상요소의 크기를 지정해주면 조금 더 유연하게 크기를 조정할 수 있다.비율을 유지하고 싶다면 Image 컴포넌트에 objectFit 속성을 적용해주면 된다.export default function Test() { return ( ..