왕가's history

에러 발생 코드 type ? (ref.current.style.marginTop = '0vh') : (ref.current.style.marginTop = '4vh'); type 따라서 marginTop을 컨트롤하게 했는데, ESLint: Expected an assignment or function call and instead saw an expression 해당 에러가 발생하였습니다. 해결 코드 if (type) ref.current.style.marginTop = '0vh'; else ref.current.style.marginTop = '4vh'; 삼항연산자가 아닌 if문으로 해결하였습니다. 원래 위에 if문으로 조건이 추가로 있었는데, 아마 그거 때문에 발생한 에러이지 않을까 싶습니다.

명령어를 통해 프로젝트 생성하게 되면 사진과 같은 구조를 가지게 될 것입니다. 추가 옵션으로 사진과 같이 설정해 주었습니다. Next 13 버전부터 생긴 app router를 사용해보려고 합니다. (이전 버전 까지는 보통 pages를 활용하여 라우팅을 했습니다.) npx create-next-app@latest 이렇게 생성된 폴더 구조에서 생성된 파일을 보겠습니다. Layout.tsx 타입스크립트로 설치했기 때문에 tsx파일입니다. 해당 파일은 기본적이 프로젝트, 웹페이지의 골격이라고 보시면 됩니다. _app이랑 비슷한가? 싶습니다. import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/goo..

공홈을 보면서 하나씩 정리해 나가보려 합니다. 그 시작인 Next.js 설치부터 시작해 보겠습니다. https://nextjs.org/ 일단 제일 먼저 Node.js가 설치 되어있어야 합니다. React개발자면 당연히 설치 돼있을 것으로 생각 듭니다.(16.8 버전 이상이라고 안내되어 있네요) 자동설치 npx create-next-app@latest 위 명령어를 입력하면 제일 최신 버전의 Next.js가 설치됩니다. What is your project named? my-app Would you like to use TypeScript? No / Yes Would you like to use ESLint? No / Yes Would you like to use Tailwind CSS? No / Yes W..

next.js는 React 개발자라면 반드시 알아야 하는 프레임 워크입니다. 순수 React는 오히려 안 쓰고, React에 Next.js를 얹어서 주로 개발환경을 구성한다고 보시면 됩니다. 그러면 Next.js란 무엇인지부터 해서 같이 공부를 하려고 합니다. 이미 프로젝트 진행할 때 계속해서 사용하고는 있지만, 딱히 공부를 해서 알고서 사용하기보다는 그때그때 맞춰서 찾아보고 했던 터라 이번기회에 정리할 겸 공부할 겸 겸사겸사 하고 싶었습니다. Next.js란? React로 만든 서버 사이드 렌더링(SSR) 프레임 워크입니다. 정확히는 SSG에 구분될 것입니다. CSR인 React환경에서 SSR기능을 구사할 수 있게 해 줍니다. SSR의 특색을 구현할 수 있기 때문에, 만약 리소스가 큰 페이지가 있거나,..

프로젝트 진행 중에 BE 담당자가 swagger를 서버에 올려주지 않고, yaml 파일로 전달 줘서 불편함을 겪고 있었습니다. swagger홈페이지 열어서 yaml파일을 import해도 되지만, 따로 페이지를 작성하여 보고자하는 목적에 해당 라이브러리를 사용하게 됐습니다. https://www.npmjs.com/package/@types/swagger-ui-react 설치 npm i @types/swagger-ui-react 홈페이지 나와있는대로 npm 설치 사용법 import SwaggerUI from 'swagger-ui-react'; import 'swagger-ui-react/swagger-ui.css'; export default function Swagger() { const url = '폴더..

React에서 form태그 작성 후, button type을 submit을 주고 실행했는데 내가 작성한 로직대로 동작하지 않고, form태그 안에 input태그들의 값들은 초기화되고, 페이지는 그대로 있는 현상을 볼 수 있을 겁니다. 원인 form태그에서 submit이 작동하면, action속성에 지정된 url로 request 하여 해당 페이지로 이동하는 것이 기본 동작입니다. React 개발자(SPA)는 브라우저가 새로고침 되는 현상을 최소화하기 위해 직접 작성한 함수를 통해 로직이 동작하는 것을 원할 겁니다. 해결방법 위에서 설명한 submit기본동작은 필요 없음으로 event.preventDefault()를 줘서 request를 막으면 됩니다. 기본 submit 동작을 막았기 때문에 구현한 대로 동..

일반적인 pagenation은 간단히 설명하고, useSWRInfinite에 대해 소개하고자 합니다. https://swr.vercel.app/ko/docs/pagination Pagination 기본 pagination은 useSWRInfinite를 필요로 하지 않습니다. function Page ({ index }) { const { data } = useSWR(`/api/data?page=${index}`, fetcher); // ... 로딩 및 에러 상태를 처리 return data.map(item => {item.name}) } function App () { const [pageIndex, setPageIndex] = useState(0); return setPageIndex(pageIndex..

Mutate mutate는 원격 데이터 및 캐싱된 값을 변경, 갱신하기 위해 사용됩니다. 다른 곳에서 해당하는 키값에 데이터를 post나 delete, patch 등 작업이 일어났을 경우, 캐싱된 데이터를 갱신해야 될 때 사용된다고 보면 됩니다. (revalidation) Global과 Bound 두 가지로 나눠져 있습니다. Global Mutate useSWRConfig 또는 swr을 import 해서 사용하게 됩니다. import { useSWRConfig } from "swr" function App() { const { mutate } = useSWRConfig() mutate(key, data, options) } /////////////////////////////////////// impor..

2023.07.03 - [Front-End/Library] - Library] SWR 저번 게시글에 이어서 SWR 여러 개념? 기능? 들을 설명하려고 합니다. 전역설정 만약 SWR을 사용하는데 fetcher가 중복된다면 고려해서 사용하면 좋을 듯한 기능입니다. import useSWR, { SWRConfig } from 'swr' function Dashboard () { const { data: events } = useSWR('/api/events') const { data: projects } = useSWR('/api/projects') const { data: user } = useSWR('/api/user', { refreshInterval: 0 }) // 오버라이드 // ... } funct..

SWR(Stale-While-Revalidate) swr은 데이터를 가져오기 위한 React hook 라이브러리로 보시면 됩니다. 서버에 GET요청을 하고, 결과를 받아와 간편하게 사용할 수 있습니다. 단순히 axios만 사용하는 것보다 효율이 좋다고 보시면 됩니다. 대표적인 특징으로 빠르고, 가볍고, 재사용이 가능한 데이터를 가져온다. 내장된 캐시 및 요청 중복을 제거 실시간으로 동작 3가지를 볼 수 있을 듯합니다. (저는 캐시 데이터를 사용하고, 중복으로 요청을 안 한다는 게 큰 장점으로 생각합니다.) 공식 홈페이지는 아래와 같습니다. https://swr.vercel.app/ko 설치 npm i swr yarn add swr 기본 구성 const { data, error, isLoading, isV..