왕가'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의 특색을 구현할 수 있기 때문에, 만약 리소스가 큰 페이지가 있거나,..

ESLint에 의해 발생한 에러입니다. 문제 useEffect(() => { if (!response) { return setLoading(false); } api(); ... } useEffect 훅에서 return setState를 줬더니 함수 자체에서 에러가 발생합니다. 공식 문서 찾아보니, 해당 문제의 발생원인은 아래와 같습니다 return 문은 종료하기 전에 실행되지 않습니다. (it does not execute a return statement before it exits) 값을 명시적으로 지정하지 않은 return문을 실행합니다. (it executes return which does not specify a value explicitly) 정의되지 않은 return을 실행합니다. (it ..

타입스크립트 사용하면서 발생한 에러입니다. 문제 {(response === 'A' && response !== 'B' ? !show : loading) && ( Thinking )} &&연사자를 사용해서 두 개의 조건을 걸었는데 제목과 같은 타입에러가 발생했습니다. 해결방안 {(response !== 'B' && response === 'A' ? !show : loading) && ( Thinking )} 단순히 순서의 차이로 보입니다. 저는 웹스톰을 사용하고 있는데, 거기서 나오는 해결방안으로 위와 같이 순서를 바꾸니깐 에러가 사라졌습니다. (vscode도 똑같을 꺼라고 생각합니다.) TypeScript에러라 사실 동작하는 데는 상관없지만, build 할 때 에러도 날 테고, TS사용하는데 규칙을 지키..

해당 에러는 ESLint 설정으로 인해 발생하는 에러입니다. (저는 Ariabnb를 사용했습니다.) 에러가 발견한 곳은 button 태그입니다. 문제 버튼태그 안에는 내용이 없고, className에 있는 이미지로 버튼을 대체하도록 만들었습니다. 이렇게 될 경우, 버튼에 대한 설명? 이 없기 때문에 발생하는 에러로 보입니다. 해결 방안 aria-label 속성을 추가해서 간단하게 어떤 버튼인지 넣어주면 됩니다. 아니면 아래 깃허브에서 제공하는 것처럼 eslint설정에 ignoreElements를 추가하시면 될 것 같습니다. https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/control-has-associated-label..

프로젝트 진행 중에 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..