Frontend (22) 썸네일형 리스트형 ReactServerComponentsError Next로 작업을 하던 중에 localhost:3000에서는 Internal Server Error가 발생하였고, 위와 같은 에러가 발생하였다. 내가 시도하려고 했던 작업은 useState() 사용을 위해 react에서 { useState }를 import 해오려고 했던 것인데 에러가 발생했다. 알고보니 use Client를 추가해주어야 했다는 것. 'use client'; import Link from 'next/link'; import * as styles from './Header.module.css'; import { } from 'react'; import React, { useState } from 'react'; use client를 상단에 추가해주니 위의 에러가 없어졌다. NextJS가 v.. 숫자 범위 표현의 에러 기존에 이런 식으로 코드를 작성했었는데, 예외처리가 잘 되지 않았었다. 기존 코드 if (!keyword) { throw new NotFoundException('검색 결과가 없습니다'); } const tokenId = Number(keyword); if (!isNaN(tokenId)) { if (1 백엔드에서 내려준 api를 프론트엔드에서 확인하는법 백엔드에서 GET,POST,PUT,DELETE와 같은 메서드를 만들고 API를 배포한다. 배포된 API는 프론트엔드에서 어떻게 확인할까? 일단 백엔드에서 API 사이트 배포 (ex. api.dev.~.io)를 할것이다. 그러면 프론트엔드에서는 postman이나 insomnia를 이용하여 위의 주소와 백엔드 경로를 붙여 GET,POST,PUT,DELETE와 같은 API를 조회할 수 있다. Module not found: Can't resolve 'uuid' 프론트엔드에서 localhost:4100으로 접속하니 제목과 같은 에러가 발생하였다. 시도해본 방법은 다음과 같다. 1) yarn install 2) yarn install uuid -> 이건 안먹는듯 하다.. 3) yarn add uuid 4) dev 서버 껐다가 다시 켜기 위와 같은 방식으로 시도해보니 localhost:4100에서 서버가 잘 작동하였다. clearInterval, setInterval (with RabbitMQ) RabbitMQ 관련 설정 파일을 보다가 clearInterval, setInterval을 보게 되었다. 이 두 가지가 무엇인지 알아보자. setInterval(콜백함수,시간) -> 시간(ms)을 간격으로 콜백함수를 반복 호출 여기서 intervalID를 갖는데, 고유하게 interval을 식별하는 값이라고 생각하면 된다. clearInterval()은 고유 intervalID를 제거해서 반복 호출을 중단한다. setInterval 중단/재시작 방법 1. setInterval() 함수의 반환값을 변수에 할당하여 반복 시작 let(or const) 변수 = setInterval(콜백함수,시간); 2. clearInterval(변수)로 반복 중단 clearInterval(변수); 3. setInterval(.. SSR(Server Side Rendering)과 CSR(Client Side Rendering) 회의시간에 SSR과 CSR에 대해 다시금 보게 되었다. 원래 서버사이드렌더링과 클라이언트 사이드 렌더링 이정도만 알고있었지 둘의 차이점에 대해 크게 다가오지 않았었다. CSR : 클라이언트 내부에서 처리하기 때문에 서버의 영향이 없다. SSR : 이는 주로 검색엔진 최적화, 보안 측면에서 사용한다. 이 점이 아니면 굳이 SSR을 쓰지 않고도 CSR로 처리가 가능하다는.. 검색엔진의 최적화는 주로 쇼핑몰 같은데에서 쓰인다. 쇼핑몰에서 파생되는 개념인 NFT 마켓플레이스도 비슷한 개념이고. 근데 서비스를 사용하는 사용자 입장에서는 CSR과 SSR의 차이점에 대해 느낄 수 있는가?에 대해 궁금해서 질문하였다. CSR : 페이지가 흰 화면이 먼저 뜨고, 차차 서버에서 데이터를 받아온다. 이때 서버에서 데이터가 .. Serialize와 Deserialize의 차이점 (feat.Primitive Type, Reference Type) dSerialize와 Deserialize 이 둘이 계속 헷갈린다. 사실 이를 잘 안쓰기도 했고, JSON.stringify()를 보면 직렬화 하는구나~정도만 생각했지 직렬화가 뭔데?라고 설명하라고 하면 설명하지 못하는 상태였다. 다시금 보던 와중, https://blog.postman.com/when-and-how-to-use-json-serialization-in-postman/ 이 글을 보며 Serialize와 Deserialize에 대하여 다시 공부하게 되었다. Serializing : store & convert complex data 메모리로부터 데이터를 읽거나 쓸 때 사용한다. 흔한 data type 사용 시에는 multiple systems 사이에서 사용한다. complex data str.. 디렉토리 내 abi 파일이 없어 발생한 에러 해결 문제 상황 프론트엔드 repo를 열고 dev 실행을 했더니, 백엔드 repo에 존재하는 abi 파일이 없다며 아래와 같은 에러가 발생하였다. [plugin:vite:import-analysis] Failed to resolve import "없는 json파일(abi)" from "src/web3/abis/디렉토리이름/index.ts". Does the file exist? 해결 방법 이런 경우에는 백엔드 repo에서 해당 json 파일을 가져와 위에서 json 파일이 없다고 뜨는 경로에 json(abi) 파일을 추가해주면 된다. 그랬더니 에러가 사라졌다. yarn install시 cjs 버전 에러 발생 프론트엔드 repo를 clone 받아서 오픈하려고 하니, yarn install시 아래와 같은 에러가 발생하였다. Internal Error: Cannot find module '/Users/경로이름/프로젝트이름/프로젝트이름2/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs' 해결방법 아마도 yarn 패키지 버전에 버전 에러가 있는듯하니 rm -rf .yarn .yarnrc.yml 위의 명령어를 통해 .yarnrc.yml 파일을 삭제해주고, 다시 yarn install을 하니 제대로 설치가 되었다. package.json vs package.lock.json git에서 pull을 받거나 할때 package.lock.json 때문에 충돌이 나서 안되는 경우가 있다고 한다. 패키지 관리 package.json을 통해서 패키지 버전 관리를 한다. npm install을 하게 되면 package.json에 포함된 의존성 패키지들이 npm registry로부터 다운받아져 설치가 되고 node_modules 폴더에 저장이 된다. package.lock.json 파일이 필요한 이유 해당 프로젝트를 진행하는 모든 개발자가 동일한 package.json을 바라보고 있기 때문에 패키지를 설치하면 모두가 동일한 버전의 패키지를 설치하지 않을까?하지만 그렇지 않다. package.json에 명시한 버전들이 ~ (틸드), ^(캐럿)으로 인해 버전의 범위가 달라지기 때문이다. 예시 .. 이전 1 2 3 다음
