📚 1. 사전 지식 React 렌더링 성능 최적화 방법 참고 : 렌더링 성능 최적화하는 7가지 방법, React.memo()로 최적화 1. useMemo : 함수에서 리턴되는 값을 메모이제이션 const average = useMemo(() => { console.log("calculate average. It takes long time !!"); return users.reduce((acc, cur) => { return acc + cur.score / users.length; }, 0); }, [users]); 2. React.memo : 컴포넌트 메모이제이션 순수 함수 컴포넌트와 렌더링 성능을 향상하는 기능. React.memo로 감싸진 함수의 결괏값은 메모리에 저장되는데, 같은 인풋값으로 해당 ..
📚 1. 사전 지식 참고 : 웹 접근성이란?, 웹 접근성 개선하는 법, Next.js의 _document와 _app에 대하여 웹 접근성 : 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 웹 접근성 개선하는 법 1. 대체 텍스트 포함하기 이미지, 로고, 그림 등의 그래픽에 대체 텍스트를 사용하세요. 2. 높은 색상 대비 선택 3. 정보가 있는 링크 텍스트 사용 4. 텍스트 크기 및 정렬 확인 5. 서식 지원 텍스트 사용 6. 번호 매기기 및 글머리기호 목록 사용 _app : 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃 역할 Component 속성값은 서버에 요청..
😡 에러 상황 Next.js의 getStaticProps메소드를 사용하여 서버로부터 데이터를 미리 받아오는 코드 구현하던 중, 에러 발생 // pages/test.tsx import Layout from '@components/common/Layout'; import React from 'react'; import instance from '@apis/_axios/instance'; const Test = ({ data }) => { console.log(data); return ; }; export const getStaticProps = async () => { const data = await instance.get('/members/me'); return { props: { data: data...
🧐 1. 주제 Vite란? 참고 : vite Vite? Vite가 뭔데 이렇게 뜨는 걸까. Vite가 뜰 거다라고 몇 개월 전에 듣고 흘린 적이 있는데, 며칠 전에 들은 강의에서 강사님이 'Vite 꼭 쓰세요'라는 말을 듣고 'Vite가 이 정도인가?'라는 생각과 함께 Vite에 대해 큰 흥미를 불러일으켰다. 'Vite'는 프랑스어로 '빠르다'를 의미한다. 아래와 같은 두 가지 콘셉트를 중심으로 하고 있다. 1. 개발 시, Native ES Module을 넘어 더욱 다양한 기능 제공 : HMR(Hot Module Replace) 2. 번들링 시, Rollup 기반의 다양한 빌드 커맨드 사용 이 두가지 특징들로 인해 개발자들이 더욱 빠르고 쉽게 애플리케이션을 개발할 수 있도록 돕는다. Vite와 Next...
😡 에러 상황 Vite를 vercel을 이용하여 배포하려고 Vite공식 문서를 따라하고 있었다. $ npm i -g vercel로 전역으로 vercel을 설치하려는데 에러가 발생한 것이다. 이번에 교체한 맥 OS의 문제라고 한다. 🧐 대응한 방법 혹시나 하는 마음에 이 코드를 복사해서 chatGPT에게 물어보았다. 👏 해결 방법 global로 설치를 하려니 권한이 없어서 발생한 에러라고 한다. 에러 원인과 함께 $sudo npm i -g vercel을 입력해보라고 조언해주었다. 입력해보니! 시원하게 해결이 되었다. 🤔 느낀점 Wow.. 에러 메시지가 길어서 구글을 통해서 해결했으면 검색하는데 상당히 걸렸을 것이다. chatGPT에 검색하니 1초만에 답을 내주었다. 최근에 온보딩 프론트엔드 강연에서 들은 ..
📚 1. 사전 지식 참고 링크 : React Query, Custom Hook, React-query에 Typescript 적용하기 React Query란? React Query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는 데 사용된다. React Query의 장점으로는, 아래의 구현하기 귀찮은 일들을 대신 수행한다. 캐싱 get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들면 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get 하는 api를 자동으로 실행 ) 데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries) 동일 데이터 여러번 요청하면 한 번만 요청한다. ..
📚 1. 사전 지식 JWT란? JWT(Json Web Token) : Json 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 Web Token 토큰 자체를 정보로 사용하는 Self-Contained 방식으로 정보를 안전하게 전달 주로 회원 인증이나 정보 전달에 사용되는 JWT는 아래의 로직을 따라서 처리 애플리케이션이 실행될 때, JWT를 static변수와 localStorage에 저장한다. static변수에 저장하는 이유는 HTTP통신을 할 때마다 JWT를 HTTP헤더에 담아서 보내야 하는데, localStorage에서 계속 불러오면 overhead가 발생하기 때문이다. 클라이언트에서 JWT를 포함해 요청을 보내면 서버는 허가된 JWT를 검사한다. 또한, 로그아웃을 할 경우 local..
Intersection Observer란 무엇일까? 참고 Intersection Observer란, JS의 브라우저 뷰포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 안되는지(즉, 사용자 화면에서 보이는 지 안 보이는 지) 구별하는 기능을 말한다. 비동기적으로 실행되기에, scroll같은 이벤트 기반의 요소 관찰에서 발생하는 렌더링 성능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있다. 1. Intersection Observer 생성 가장 처음으로 Intersection Observer를 통해 관찰하려는 대상을 연결합니다. 특정 DOM에 접근할 수 있도록 useRef를 사용하여 target인 div 태그를 선택합니다. import { useRef } from 'react'; e..
