본문 바로가기

FrontEnd84

[React] React.ReactElement 와 React.ReactNode React.ReactElement와 React.ReactNode은 React에서 사용되는 두 가지 다른 타입입니다. React.ReactElement: React.ReactElement는 React 컴포넌트의 인스턴스를 나타내는 타입입니다. React 컴포넌트를 JSX로 작성할 때 생성되는 엘리먼트입니다.(jsx 요소만을 허용) React.ReactElement는 컴포넌트의 타입, 속성(props), 자식 엘리먼트 등을 포함합니다. 일반적으로 JSX를 사용하여 컴포넌트를 작성하면 React.ReactElement가 생성됩니다. (JSX.Element와 차이 없음) 예: React.ReactNode: React.ReactNode은 React 컴포넌트가 렌더링할 수 있는 모든 타입을 나타내는 타입입니다. R.. 2023. 7. 13.
Parsing error: Cannot find module 'next/babel'Require stack: eslint-parser에 의해 발생. babel에 처리하는 형식으로 변환되지 않아서 발생 프로젝트 루트 경로에 .babelrc 파일 생성 후 아래 코드 작성 { "presets": ["next/babel"], "plugins": [] } 이 후 루트 경로에 있는 .eslintrc.json 파일을 열어 아래 코드로 수정 { "extends": ["next/core-web-vitals", "next/babel"] } 2023. 7. 12.
[Tailwind Css] hover와 focus를 한 번에 //tailwind.config.js const plugin = require('tailwindcss/plugin') module.exports = { plugins: [ plugin(function({ addVariant }) { addVariant('hocus', ['&:hover', '&:focus']) }) ], } 2023. 7. 5.
[자바스크립트] 이터러블 개념과 FE에서의 사용처 이터러블은 순회 가능한 객체를 의미 이러한 객체는 Sysyem.iterator 라는 특별한 메서드롤 가지고 있으면 이것을 통해 이터레이터를 반환함 이터레이터는 순회할 수 있는 값의 시퀀스를 나타내는 next() 메서드를 가짐 const iterable = [1, 2, 3]; const iterator = iterable[Symbol.iterator](); console.log(iterator.next()); // { value: 1, done: false } console.log(iterator.next()); // { value: 2, done: false } console.log(iterator.next()); // { value: 3, done: false } console.log(iterator... 2023. 6. 24.
[자바스크립트] map 메서드와 Map 객체의 차이 1. map 메서드 js에서 map 함수는 배열에서 사용되는 메서드 배열의 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성함. 배열의 각 용소를 변형 / 추출하여 새로운 배열을 만들 때 사용 const nums = [1,2,3,4,5] const doubleNums = nums.map((n)=>n*2) //[2,4,6,8,10] 2. Map 객체 js의 내장 객체로 키- 값 쌍을 저장하는 자료구조 일반적인 객체와 다르게 키 - 값의 연결을 유지하며 순서가 보장 됨 기본적으로 삽입(set), 조회(get), 삭제(clear,delete) 가 있음 문자열 아닌 값도 키로 사용 가능 const mp = new Map() mp.set(1,3) mp.set("asd","asdasd") console.l.. 2023. 6. 24.
[React] 컴포넌트가 데이터를 다루는 3가지 방법 Props, State, Context (참고 사이트) 1. Props 부모 컴포넌트에서 자식으로 전달 되는 데이터 부모에서 받으므로 자식에서 변경x const Text = ({text}) => { return {text} } const App = () => { return } Hello world! 라는 문자열 데이터를 전달 2. State 한 컴포넌트에서 동적 데이터를 다룰 때 사용 컴포넌트 안에서 데이터 변경 가능 import React, { useState } from 'react'; const Text = ({text}) => { return {text} } const App = () => { const [count, setCount] = useState(0); return setCount(co.. 2023. 6. 21.
[React] 데이터를 실시간으로 갱신하기(useSWR, setInterval,useQuery) setInterval() 과 useSWR() 은 모두 데이터를 실시간으로 가져오는 방법이지만, 동작 방식과 목적이 다르다. setInterval() setInterval()은 매번 데이터를 가져오기 위해 API에 요청을 보내는 방식이다. 즉, 호출 횟수가 늘어날수록 서버에 부하가 증가한다. 또한 호출 간격을 지정하더라도 정확히 유지하지 못할 수 있고, 데이터를 가져오다 문제가 발생하면 예외가 발생한다. useSWR() useSWR은 데이터를 캐싱하고, 필요에 따라 API에 요청을 보내 데이터를 가져오는 방식이다. 이 방법은 API 요청 횟수가 줄어들고, 가져온 데이터를 캐싱하여 다음 요청시 캐시된 데이터를 리턴함. 호출 실패시에 적절한 에러 처리 가능함 setInterval() && useSWR() =>.. 2023. 3. 19.
[TS] Cannot find module '' or its corresponding type declarations.ts(2307) TS에서 특정 라이브러리를 사용할 때, dependencies에 설치해도 제목과 같은 에러가 나는 경우가 있다. TS는 라이브러리 타입을 읽을 때, index.d.ts를 먼저 찾는다. 이 파일은 라이브러리마다 있을 수도, 없을 수도 있다. 대표적으로 axios 같은 경우 node_module 내부에 index.d.ts가 미리 정의되어 있어서 TS에서 자동으로 타입 추론 가능 그러나 없을 경우 개발자가 추가로 처리해줘야 함. @types/xxx 설치 외부 라이브러리 type 만들기 1. @types/xxx 설치 node_module 내부에 index.d.ts를 정의하지 않은 라이브러리는 @types/xxx 에서 따로 정의한 경우가 있다. 예를 들어 chart.js를 install 했다고 가정했을 시, 아래.. 2023. 2. 26.
[나 혼자 볼거] 소셜로그인을 위한 API 키 받기(feat. kakao, naver, google) https://cpro95.tistory.com/516 카카오 로그인 구현 React(리액트) Nextjs NextAuth kakao login 안녕하세요? 지난 시간에는 NextJS와 MongoDB로 유저 로그인 세션 구현하기에 도전해 봤는데요. 최근에는 직접 유저 가입과 그 정보를 DB에 저장하는 거는 굉장히 위험한 일입니다. 그래서 각 대표 cpro95.tistory.com 2023. 1. 23.

티스토리툴바