웹/React

각 페이지를 나타날 때 고화질 이미지를 사용한다. 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 값에 인증서를 추가하여 클라이언트에 전송한다..

Input 태그 file typeinput 태그의 type을 file로 설정해주면 이미지를 포함하여 로컬에 있는 파일들을 입력받을 수 있다. 보통 사진을 업로드하는 용도로 많이 사용한다. 그러나 기본 스타일의 경우다음과 같이 마구 커스텀해주고 싶게 생겼다. .....다양하게 커스텀해보자 ! 파일 선택 버튼만 변경file-selector-button 선택자를 사용하여 css 속성을 설정해주면 파일 선택 버튼의 스타일을 변경할 수 있다. &::file-selector-button{ background-color: #F8F9FC; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.06); width: 10rem; height: 5rem;};label 태..

tsconfig.json 파일tsconfig.json 은 타입스크립트 프로젝트 컴파일에 필요한 루트 파일과 컴파일러 옵션을 지정해주는 역할을 한다. 해당 파일은 루트 디렉토리에 위치하여 vscode 는 현재 프로젝트가 타입스크립트를 기반으로 진행되고 있음을 인식할 수 있다.  최상위 속성파일 내 가장 상위에 위치한 속성이다. compilerOptions컴파일에 관련된 설정을 할 수 있다. 옵션이 정말 많이 존재하기에... https://typescript-kr.github.io/pages/compiler-options.html TypeScript 한글 문서TypeScript 한글 번역 문서입니다typescript-kr.github.io해당 사이트에 정리가 잘 되어있다.  중요한 옵션들만 몇가지 살펴보면t..

https://vercel.com/ Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.comNext.js 개발사에서 만든 클라우드 플랫폼으로 웹 애플리케이션의 구축과 배포를 도와준다.  Vercel의 장점1. 간편하다 ! 소스 코드, 레포지토리를 연결하고 클릭만 하면 쉽게 배포를 할 수 있다. 2. 자동화된 배포 Github 브랜치에 push를 해줄 때마다, Vercel에..

홈페이지에서 많이 볼 수 있는 상단에 위치한 메뉴바이다. 이를 구현하기 위해 필요한 것들은 각 요소의 컴포넌트와 버튼 클릭 이벤트이다.  function MenuHeader() { const navigate = useNavigate(); const handleSearch = () => { alert('삐용'); //라우트 설정 완료되면 주석 해젷 사용하심 될 것 같습니다 ! //navigate('/search'); }; const handleCalendar = () => { navigate('/calendar'); }; const handleMyPage = () => { navigate('/myPage'); }; const handleMain = () => { ..