React

우연한 기회에 sentry를 접하게 되어 글을 정리하고자 한다. 이 글에 대한 내용은 더 추가될 예정이며, 글이 길어질 경우에 나눠서 글을 쓰고자 한다. 글을 접했을 때는 내가 웹 사이트를 배포하고 아무것도 모르는 상태에서 사용자가 늘어나고, 그에 대해 오류가 일어났었다. 그런데 스타트업의 특성상 사수가 없다보니 물어볼 사람이 없어서 혼자 삽질을 엄청했다… 그래서 배포를 할 때 너무 무서웠고, 곧 react 배포할 때 똑같은 상황을 겪지 않기 위해 열심히 공부중이다. 프론트엔드 모니터링 프론트엔드 모니터링은 웹 사이트 또는 앱의 성능을 추적하는 데 사용되는 일련의 프로세스 및 도구를 말한다. 프론트엔드 모니터링은 주로 사용자가 최종적으로 보는 부분에 중점을 둔다. 아래와 같은 문제를 모니터링에서 기준으로..

: Incremental Static regeneration의 request는 page가 re-generate되도록 한다. revalidate 속성은 얼마동안에 한번 regeneration이 일어날지를 설정한다. 공식문서를 보다가 revalidate를 보고 궁금하게 생겨서 정리하게 되었다. revalidate는 말 그대로 재검증한다는 말이다. 개념을 보니 초를 줘서 이 초시간이 지나면 페이지가 업데이트가 된다는 말이었다. 그런데 초마다 업데이트가 된다면 과부하되지 않을까라고 생각했다. 그런데 참고사이트에서 해답을 얻게 되었다. 1) 자동 업데이트되는가? → 화면 요청이 없는 경우에는 rebuild가 되지 않는다. 2) 사용자가 validate초 이상을 페이지에 머물러야 업데이트되는가? → 기준이 buil..

1. 필요한 패키지 설치하기 npx create-react-app {app 이름} 새로운 react app을 생성하도록 한다. npm install --save styled-components npm install --save styled-reset npm install --save react-router-dom npm install react-icons styled-components : createGlobalStyle를 사용하기 위해 설치해준다. createGlobalStyle : 글로벌 스타일 적용을 도와주는 styled-components내장 메서드이다. styled-reset : styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.j..

💡 https://velog.io/@yiyb0603/React에서-무한스크롤-구현하기-8rdmbhtj 위의 사이트를 따라하며 쓴 글입니다. 1. 파일 생성 및 코드 작성하기 임의의 폴더를 만들어 파일을 생성한다. InfiniteScroll.js을 만들어준다. InfiniteScroll.js import React, { useState, useCallback, useEffect } from 'react'; import { getPostList } from './postList'; const InfiniteScroll = () => { const [page, setPage] = useState(1); const [posts, setPosts] = useState(getPostList(1)); return (..

지금 작성하는 Scroll Progressbar는 아래의 사이트를 따라하여 만들었습니다. 💡 https://velog.io/@yiyb0603/React에서-Scroll-Progressbar-만들어보기 1. 컴포넌트 생성하기 components라는 폴더를 만들어, ScrollProgress파일을 만들어 이곳에서 progressbar를 만들어줄 것이다. 그에 대한 style을 css파일 넣어 따로 관리해준다. 2. 기본 셋팅하기 1) components/ScrollProgress.js import React, { useState, useCallback, useEffect, useRef, MouseEvent, } from "react"; import "./ScrollProgress.css"; const Scr..

검색 기능은 한번도 구현해본 적이 없는데 우연히 어떤 글을 보다가 따라하게 되었다. 색깔 배열 우선은 검색 기능을 구현하려면 검색할 대상이 있어야 하기 때문에 배열을 만들어 색깔 목록을 만들어주었다. const colorList = ["red", "orange", "yellow", "green", "blue", "purple"]; 색깔 목록을 만들어서 div태그로 보여주고자 한다. 컬러 목록 보여주기 ColorData.js import React, { useState } from "react"; function ColorData() { const colorList = ["red", "orange", "yellow", "green", "blue", "purple"]; return ( {colorList.m..

🤔 문제 발생 console.log(data); 위와 같은 코드를 쳤을 때 콘솔에 두개로 출력이 되었다. 😶‍🌫️ 문제 해결 이러한 현상은 StrictMode 때문이다. React로 만든 파일에 들어가면 index.js 파일이 존재한다. 아래는 index.js 파일이다. // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); roo..

글을 쓰다가 글의 길이 길어져 활용하는 부분은 다른 페이지로 만들어 작성하고자 한다. SWR 활용하기 우선은 파일을 새로 만든다. 아래의 코드를 작성하여 새로운 react 파일을 만든다. npx crate-react-app {생성하고자 하는 파일 이름} 폴더 셋팅 위와 같이 폴더를 셋팅하였다. pages/Main.js import React from "react"; const Main = () => { return Main; }; export default Main; pages/Detail.js import React from "react"; const **Detail** = () => { return **Detail**; }; export default **Detail**; pages/index.js ..