전체 글 (77) 썸네일형 리스트형 API란? api 개념API 이란? API(Application Programming Interface)는 둘 이상의 컴퓨터 프로그램이 서로 통신하는 방법이자 컴퓨터 사이에 있는 중계 계층을 의미합니다.EX) 프로토콜, 메서드, 데이터타입 등이 정의된 중계계층참고로 api는 과거부터 발전되어온 용어로 라이브러리 및 프레임워크를 설명하는 명세서, 웹상에서 web api, web socket api등을 가리키는데 현재를 기준으로 api라고 할 때 보통 web api를 기준으로 설명합니다.Interface란? 인터페이스는 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면입니다. 이를 통해 해당 컴퓨터의 내부서버가 어떻게 구현되어있는지는 상관없이 인터페이스를 통해 통신 등이 가능합니.. [Chart.js] Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID 'myChart' can be reused. 에러 상황React 프로젝트에서 Chart.js를 사용해 API 데이터를 시각화하던 중, 🚨 Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID 'myChart' can be reused. 에러 메시지가 발생했습니다. 이 에러는 Chart.js가 동일한 canvas 요소에서 여러 번 초기화되면서 발생하는 문제입니다. 특히 React의 useEffect 훅 내에서 Chart.js를 사용할 때, 컴포넌트가 리렌더링되거나 useEffect가 다시 실행될 때마다 차트가 중복으로 생성되어 이러한 에러가 발생하게 됩니다.문제 해결을 위한 접근 방법이 문제를 해결하기 위해, 먼저 새로운 차트를 생성하기 전에 기.. .gitignore가 작동하지 않을때 .gitignore가 제대로 작동되지 않아서 ignore처리된 파일이 자꾸 changes에 나올때가 있는데git의 캐시가 문제가 되는거라 아래 명령어로 캐시 내용을 전부 삭제후 다시 add All해서 커밋하면 된다!git rm -r --cached .git add .git commit -m "fixed untracked files" TypeError: Cannot read properties of undefined (reading 'length') 에러 발생react-table을 사용하던 중 TypeError가 발생했다. 처음엔 옵셔널 체이닝(프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근)을 시도해봤는데 그래도 동일한 에러가 발생했다. 그래서 뭔가 배열로 들어오지 않아서 length가 없다고 하는건가 싶어서 컬럼을 살펴보았는데 배열로 return 하고 있었다.그럼 이제 data를 주는 클라이언트 측 코드를 살펴보았다. data를 잘 전달해주고 있는데 usememo(기존에 매 렌더링마다 실행되었던 복잡한 계산을 방지)를 사용해 한번 더 캐싱을 해줘야되나 싶어서 적용해주었다. 하지만 그래서 동일한 에러가 발생해서 data 값이 잘 나오고 있는지 console.log에 작성했고, 역시나 제일 큰 문제는 data가 undefined 때문에 발생한 .. [Next.js] Nextjs에 Clerk 적용 2 이 전 문서는 클록을 설치하고 세팅하는 방법에 대해서 다뤄봤습니다. 이번엔 페이지에 관련해서 작성해보겠습니다. 5. 회원가입(sign-up) 페이지 만들기// /app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsximport { SignUp } from "@clerk/nextjs";export default function Page() {/* 아래에 SignUp 컴포넌트는 아까 Clerk 사이트에서 Clerk Application 만들 때선택했던 UI 기반으로 컴포넌트를 만든 것입니다.*/ return ; } 6. 로그인(sign-in) 페이지 만들기// /app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsximport { .. [Next.js] Nextjs에 Clerk 적용 1 안녕하세요.오늘은 Clerk을 사용해서 간단한 회원가입/로그인을 해보려고 합니다. 먼저 사이트에 접속 후 왼쪽에서 필요한 부분을 활성화 해주고 Create Application를 해준다.Application 을 만들면 대시보드 페이지로 이동하게 됩니다.이제 아래 표시된 순서에 따라 우리 프로젝트에 Clerk 을 붙여보겠습니다. 1. Clerk 설치npm install @clerk/nextjs2. .env 파일에 환경변수 입력3. Middleware 생성 및 설정// /middleware.tsimport { clerkMiddleware } from "@clerk/nextjs/server";export default clerkMiddleware();export const config = { matcher:.. CORS Error를 만나다 CORS란?CORS (Cross-Origin Resource Sharing)는 웹 어플리케이션에서 다른 도메인의 리소스에 접근할 때 발생하는 보안 이슈를 해결하기 위한 표준 방법이다. CORS는 브라우저 단에서 작동하며, 웹 서버가 특정한 HTTP 헤더를 반환함으로써 웹 브라우저가 자원에 대한 권한을 부여하도록 한다. 이 헤더는 서버에게 특정한 도메인, 프로토콜, 포트에서만 요청을 허용하도록 지시할 수 있다. CORS는 웹 어플리케이션에서 다른 도메인으로부터 리소스를 요청하는 데에 있어서 발생하는 보안 문제를 해결한다. 이전에는 같은 도메인에서만 요청할 수 있었기 때문에, 다른 도메인으로 요청을 보내는 경우 보안 문제가 발생할 수 있었다. 그러나 CORS를 사용하면 다른 도메인에서도 자원에 접근할 수 있.. Button 무한 클릭 시 api 호출 막기 문제상황버튼 클릭 시 네트워크 탭에서 확인해봤을때 불필요한 요청이 여러번 가고 있었던 상황이다.해결과정debounce / throttle 의 한계debounce 는 정해진 시간동안 발생한 여러 이벤트 중, 앞(leading) 혹은 뒤(trailing)에 하나의 이벤트만 트리거 시키는 방법입니다.Debounce를 react 에 적용한 코드입니다. debounce 는 import debounce from "lodash.debounce 를 가지고 왔습니다. Button 컴포넌트의 click handler에 debounce를 래핑한 컴포넌트 입니다. debounce 의 속성 중, leading 을 사용합니다. 사용자의 반응에 즉각적으로 이벤트를 발생시키기 위함입니다. import debounce from "lo.. 이전 1 ··· 5 6 7 8 9 10 다음 목록 더보기
