Lo9

const React-Table getGroupedRowModel() 오류 = ( Param ) => {💻 return Result;// useReactTable Hook 선언const table = useReactTable({ ... getGroupedRowModel: getGroupedRowModel(), // getGroupedRowModel가 마지막으로 setPagination을 호출하기 때문에 콘솔창에 오류가 발생함 // 따라서 아래와 같이 setPagination을 호출하지 않도록 하면 오류가 사라짐 onPaginationChange: () => undefined, ...}); 출처: https://github.com/TanStack/table/issues/5..

const 빌드 후 환경변수 수정 = ( Param ) => {💻 return Result;env.js 파일 생성// public/env.js// 전역에 선언되기 때문에 window 객체를 통해 참조할 수 있음export const env = {    ...import.meta.env, // vite 환경변수 값    ...window["env"], // 전역에 저장된 이전 환경변수 값 // 필요 환경 변수 정의 BASE_URL: "http://localhost:3000"}; index.html에서 script 태그를 통해 env.js 선언  env.js의 환경변수 적용//App.jsximport env from "../public/env"...return ( {env.BASE_URL} {env...

const debounce 사용하기 = ( Param ) => {💻 return Result;import _ from "lodash";import React, { useMemo } from "react";// state에 의해 페이지가 다시 렌더링 되었을 때 debounce가 초기화 되므로 정상적인 동작 X// 따라서 Memoization 필요const debounceFunc = useMemo( () => _.debounce( () => { // debounce 처리할 함수 }, // 임계시간(ms): debounce 처리할 시간간격 300, ..

const preventUserScroll = ( scrollMarginProcessing ) => {💻 return Result;See the Pen Untitled by 구태 (@wbnnhjvf-the-lessful) on CodePen. 📝 console.log( history ) 회사 프로젝트 진행 중 사용자가 특정 요소를 클릭하면 입력폼으로 스크롤되도록 하는 페이지가 있었다. 구현 후 문제는 스크롤 도중에 멈추거나 정확한 위치로 이동하지 않는다는 것이었다. scrollIntoView 함수를 사용해서 스크롤을 구현하였는데 도중에 state가 바뀌거나 스크롤 이벤트가 일어나게 되면 진행되던 스크롤이 멈추는 문제가 있었다.  state에 의해 스크롤이 도중에 멈추는 문제는 해결했지만 사용자 스크..

많이 부족했지만 웹 애플리케이션 기능을 모두 구현한 후에 모바일에 대응하는 작업을 했습니다. 다른 일반적인 기능 페이지의 경우 미디어 쿼리를 사용하여 반응형으로 쉽게 구현할 수 있었습니다. 🤔 크기가 고정된 문서를 어떻게 한눈에 보여줄까? 문제는 다른 프로젝트에서 문서와 관련된 기능을 현재 프로젝트에 옮겨 사용 중에 있었는데 해당 문서는 크기가 cm로 지정되어 있어 모바일에서 보기엔 맞지 않는 큰 크기였습니다. 당장 떠오르는 해결방식은 크게 두 가지였습니다. 페이지 크기를 수정하여 적용하는 방식 문서의 스케일을 줄이는 방식 페이지 크기를 수정하는 방식은 이미 잘 구성되어 있는 문서를 각 부분 다시 크기를 수정하고 맞춰야 하기 때문에 시간상 불가능할 것이라 판단했습니다. 그래서 문서의 스케일을 줄이는 방식..

인턴 하게 되어 회사에서 프로젝트를 진행했습니다. 로그인, 회원가입 화면 구성 및 기능 구현하는 등 프로젝트의 일부분을 전담하면서 회사 일을 시작하게 되었습니다. 🤦‍♂️ 실무에서의 table 첫 대면, 오류 발생 그중에 일부 만들어진 기능을 현재 프로젝트로 옮겨야 하는 작업을 하게 되었습니다. 같은 React로 만들어진 기능이라 손쉽게 옮겨질 줄 알았는데 브라우저 콘솔창에 문제를 맞닥뜨리게 되었습니다. 사실 바닐라 js에선 문제없던 부분이기도 했고 React도 js이기 때문에 문제가 없을 거라고 생각했지만 다음과 같은 오류를 보게 되었을 때는 의아했습니다. 🤔 해당 오류는 왜 발생하나? 해당 오류는 태그나 태그가 태그 바로 밑에 오게 되면 생깁니다. 즉, React에서는 꼭 , 태그가 , 태그 내부에 ..

기존 emotion-diary 프로젝트를 적용해보려 했지만 TypeScript가 익숙하지 않고 완성된 프로젝트에 적용하기엔 힘들다고 판단하여 새로운 프로젝트를 만들며 처음부터 적용해보려 한다. 목차 0. TypeScript란 1. TypeScript 적용 2. TypeScript 사용하기 TypeScript란 // 예시 (코딩앙마 Typescript #1 영상 중) // 기존 javascript 실행시 function add(num1, num2){ console.log(num1 + num2); } add();// NaN add(1);// NaN add(1,2);// 3 add(3,4,5);// 7 add("hello", "world");// "helloworld" // typescript 적용 funct..

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 Index.html 파일 수정에 대한 내용을 정리한다. 목차 1. // 페이지마다 제목을 수정할 경우 각 페이지에서 아래와 같이 설정 useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = `페이지 제목`; }, []); Open Graph 설정하기 프로젝트의 링크를 입력했을 때 사이트에 대한 간략한 썸네일과 제목, 설명을 Open Graph를 통해 설정할 수 있다. Open Graph를 설정하거나 수정 후 반영되지 않을 때는 Open Graph 캐시를 초기화해야한다.ㅁ 프로젝트 마..