React key 오류 Warning: Each child in a list should have a unique "key" prop.key값 설정은 최상위 태그에서 이뤄져야 하는데 아래와 같이 잘못 설정하여 오류가 발생했다. key오류가 발생시 확인해야할 것들 with GPT 1. 리스트 요소의 key 중복문제: key 속성이 중복되거나 고유하지 않아서 문제가 발생할 수 있습니다. 이 경우, key 속성이 설정된 모든 요소가 서로 다른 값을 가져야 합니다. 2. 리스트가 중첩된 경우 => import된 컴포넌트에 key값이 설정되어 있는지 확인문제: 중첩된 리스트에서 key를 설정하지 않거나, key가 중복될 때 문제가 발생할 수 있습니다. 특히, 리스트를 생성하는 컴포넌트가 key를 제대로 설..
map함수 내에서 중괄호를 사용하면 그 안의 코드는 블록스코프를 가지는 코드블록으로 간주됩니다.즉, 함수의 본문으로 해석되기 떄문에 명시적으로 return을 사용해야 합니다.{someArray.map((ele:{ a:string; b:string; c:string; })) => { return( {ele.b} {ele.c} )}}; map함수 내에서 JSX를 반환할 때 소괄호를 사용하면 암시적 반환을 하여 표현식을 바로 반환합니다.{someArray.map((ele:{ a:string; b:string; c:string; })) => ( {ele.b} {ele.c} ))}; 암시적 반환 명시적 반환이란? 명시적반환과, 임시적 반환은 자바스..
CORS 미들웨어 위치 확인CORS 미들웨어는 다른 모든 라우터와 미들웨어보다 먼저 정의되어야 합니다. 기존 코드를 다시 확인하고, CORS 설정이 가장 먼저 적용되는지 확인해보세요. cors에러가 발생한 코드(cors 미들웨어 설정이 밑에 작성되어 있음)import express, { Express, Request, Response } from "express";import cors from "cors";import { Pool } from "pg";import cookieParser from "cookie-parser";import userRouter from "./routes/users";const app: Express = express();const port = 5000;// 라우터 임포트app..
경로 설정방법1. public- process.env.PUBLIC_URL2. src-import-requrie('경로').default 참고사이트https://bokjiho.medium.com/react-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-public-src-%EB%94%94%EB%A0%89%ED%86%A0%EB%A6%AC-%EC%B0%A8%EC%9D%B4-fddb4f455c2a [React] 리액트에서 이미지 경로 설정하기 (public, src 디렉토리 차이)public 디렉토리 VS. src 디렉토리bok..
Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > @tailwind base; | @tailwind components; | @tailwind utilities; postcss-loadercss-loaderstyle-loader 셋 다 설치했는데 도대체 왜 안되는 것이냐... 진도가 안나가잖아...
SQL = Structured Query Language 데이터베이스, 주로 관계형 데이터베이스에서 데이터를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어이다. 데이터베이스 시스템에서 데이터를 쿼리하고* 수정하는 데 사용된다. 대부분 관계형 데이터베이스관리시스템(RDBMS)에서 지원된다. *쿼리한다(?) : 데이터를 조작하거나 검색하도록 명령하는 것. (삽입,삭제,수정,검색) SQL문 종류 상암DMC를 생각하고 앞 뒤로 DL을 붙인다. (유튜버 홍달쌤 팁) DDL (Data Definition Language) : 데이터 정의어 - 데이터베이스 구조를 정의한다. ex) 테이블 생성, 테이블 삭제 - CREATE, ALTER, DROP => CAD외우기 DML (Data Manipulation Lang..
이벤트 루프는 비동기 함수를 태스크 큐로 보내고 콜스택이 비워지면 태스크큐에서 콜스택으로 이동한다고 한다. 콜스택에 먼저 스택이된 함수부터 실행이 되고 그 이후에 비동기 함수들이 실행된다는 뜻이다. 함수 실행순서를 1. 비동기 함수 2. 일반 함수 3. 일반 함수 로 실행해도 2->3->1 순으로 실행이 된다. // 지연시키는 함수 function delay(n){ for (let i = 0; i < n; i++) { console.log('delaying...'); } } // 콜스택 함수(일반함수) function a() { delay(1000) console.log('a is activated!'); } // 콜스택 함수(일반함수) function b() { console.log('b is acti..
나는 아직도 함수가 어렵다.. 함수의 호출방식에 따른 차이를 알아보자. a() , b() 함수가 있을 때, 함수의 호출방식에 따라 모두 다른 결과가 나오게 된다. 1. a(b) b가 전달된다, b함수 자체가 a()함수의 인자로 전달된다. a()함수 내에서 b함수가 필요한 시점에 호출해서 사용할 수 있다. // 결과화면 // I say a // undefined : a함수가 반환값이 없기 때문에 undefined가 출력된다. function a(){ console.log("I say a") } function b(){ console.log("You say b") } a(b) // 결과화면 // I say a // You say b : a함수의 결과값으로 b함수를 호출했기에, You say b가 나오게 된다..
- Total
- Today
- Yesterday
- JSX
- .catch()
- cors위치
- 대괄호표기법
- 객체리터럴
- 태스크큐
- Props
- 배열내특정요소찾기
- null과 undefined
- 전역변수
- 상속
- 함수형코딩
- 문자열
- 프로토타입 체이닝
- 조대곤교수님
- 비동기
- unique "key" prop.
- universal rendering
- unexpected character
- 함수
- promise
- 미들웨어위치
- 에이블스쿨2일차
- 머리아프다..
- react
- 객체속성 추가 삭제
- .finally()
- .then()
- 리액트 이미지경로
- 동등비교연산자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |