Next.js, Typescript 환경에서 라이브러리 “모듈에 대한 선언 파일을 찾을 수 없습니다” 에러

Next.js와 Typescript 환경에서 “모듈에 대한 선언 파일을 찾을 수 없습니다” 라는 에러가 발생하였습니다. 그리고 이 문제를 해결하는 방법을 소개하려고 합니다. 1️⃣ 사용하고자 하는 해당 라이브러리가 TS를 지원하는지 확인하자 우선적으로 살펴봐야 하는 것입니다. 옛날 라이브러리 같은 경우 pure esm.js파일만 가지고 있고 타입설정을 따로 해놓지 않는 경우가 있을 수 있습니다. 이런 경우에는 @node_modules/@types//index.d.ts 파일을 생성하여 직접 작성해주어야 합니다. 제가 사용하고자 하는 use-sound는 업데이트 한지 꽤 되긴 했지만, TS를 지원하는 라이브러리입니다. 2️⃣ TS를 지원한다면 npm의 @types/ 를 확인하자 npm i -D @types/..

• format_list_bulleted 개발관련/Next
• · 2023. 12. 7.
• textsms

[React] Context를 이용하여 전역에서 사용하는 상태 만들기

이번 시간에는 React의 Context를 익히는 시간을 가지려고 합니다. ❓언제 Context를 사용할 수 있을까요? Context는 전역에 상태를 저장할 수 있습니다. 이는 일일이 컴포넌트에 props를 넘겨주지 않게 해줍니다. export default function App() { const [prop, setProp] = useState() return ( ); } export default function Box({prop}) { console.log(prop) // App 부모 요소에서 전달받은 prop 값 return ... props을 넘겨주는 예시입니다. Constext를 사용함으로써 props를 넘겨주지 않아도 됨으로써, 의존성을 없앨 수 있고, drilling을 없애 가독성을 향상시..

• format_list_bulleted 카테고리 없음
• · 2023. 12. 3.
• textsms

[하루 30분 러닝 타입스크립트] 타입 시스템

✨ 타입의 종류 타입이란 typeof 연산자가 설명하는 형태를 다루는 값 타입 시스템 코드를 읽고 모든 타입과 값을 이해 각 값이 초기 선언에서 가질 수 있는 타입을 확인 각 값이 추후 코드에서 어떻게 사용 될 수 있는지 확인 값의 사용법이 타입과 일치하지 않으면 오류를 표시 오류 종류 구문 오류 : TS → JS 로 컴파일 되는 것을 차단 타입 오류 : 타입 검사기에서 일치하지 않는 타입 확인 타입 오류는 JS로 변환되는 것을 막지 않는다. ✨ 할당 가능성 함수 호출이나 변수에 값을 제공할 수 있는지 여부를 확인하는 것을 할당 가능성이라 한다. ✨ 타입 애너테이션 때로 변수에 초기값이 없는 경우, 나중 타입을 파악하려고 하지 않는다. 암묵적인 any 타입으로 간주한다. 이 때의 any를 진화하는 any..

• format_list_bulleted 개발관련/하루 30분 러닝 타입스크립트
• · 2023. 11. 30.
• textsms

[React] React Query와 SWR의 차이?

저번 시간 SWR에 대해서 배워봤는데요, 많은 분들이 SWR대신 React Qeury를 사용하더라구요. 분명 더 좋다는 이야기가 많기는 한데, 구체적으로 어떤 차이인지 알아보기 위해서 공식문서를 뒤져가며 그 차이점을 알아보기 위해 노력했습니다. 이전 SWR에 대한 내용은 아래를 참고해주세요! [React] SWR이 무엇인가요? 우선 SWR을 알아보기 앞서 캐시에 대해서 알아보겠습니다. ❓캐시란 무엇인가 캐시는 데이터를 일시적으로 저장하는 메모리를 가리키는 용어입니다. 한 번의 요청에 비용이 큰 경우, 여러 번 요 lurgi.tistory.com 그리고 몇 일간 React Query와 SWR의 차이에 대해서 명확히 하고자 했지만, 제 지식의 한계로는 그 차이를 인지할 수 없었고, 간단한 코드를 작성하는 것..

• format_list_bulleted 개발관련/React
• · 2023. 11. 29.
• textsms

[React] SWR이 무엇인가요?

우선 SWR을 알아보기 앞서 캐시에 대해서 알아보겠습니다. ❓캐시란 무엇인가 캐시는 데이터를 일시적으로 저장하는 메모리를 가리키는 용어입니다. 한 번의 요청에 비용이 큰 경우, 여러 번 요청을 하는 것 보다, 한 번의 요청 이후 캐시에 저장하여 재사용 하기 위한 전략입니다. ❓SWR이 무엇인가 SWR은 Stale-While-Revalidate의 약자로 HTTP 캐시 무효 전략을 뜻합니다. SWR은 우선적으로 캐시로 부터 데이터를 반환한 후, fetch 요청(Revalidate)이 필요한지 확인하고 요청을 합니다. 즉 캐시에 있는 데이터로 처리할 수 있다면, 굳이 요청을 하지 않는 것이죠. 그리고 반대로 사용자가 원하는 순간에 요청을 보내 새로 데이터를 받을 수 있습니다. 이를 통해 컴포넌트는 지속적으로 ..

• format_list_bulleted 개발관련/React
• · 2023. 11. 24.
• textsms

[개발 상식] 쿠키, 세션, 토큰 어떤 차이일까?

이번 글은, 세션과 토큰의 차이점을 공부하며 정리한 글입니다. 세션과 토큰의 차이점을 알고, 적시에 사용할 수 있는 프로그래머가 되어 봅시다! 우선 세션과 토큰을 설명하기 앞서, 쿠키라는 개념을 짚고 넘어가 봅시다. 🍪쿠키(Cookie)? 쿠키는 브라우저에 데이터를 저장하는 것을 말합니다. 모든 브라우저는 ‘요청’ 을 보내고, ‘응답’을 받게 되는데요, 이 때 브라우저가 요청을 보낼 때 보내야할 데이터가 있다면 함께 보낼 수 있게 됩니다. 요청 시 쿠키 데이터를 함께 보낼 수 있게 되는 것이죠. 이렇게 쿠키에 저장된 값 덕분에 인증은 물론, 다양한 정보를 저장할 수 있어 페이지가 이동되거나, 브라우저를 닫고 열어도 데이터를 기억할 수 있다는 것이죠. 일반적으로 쿠키는 유효기간을 가지고 있으며, 개발 환경..

• format_list_bulleted 개발관련/개발 상식
• · 2023. 11. 23.
• textsms