전체 글 48

객체형태로 함수를 정의해서 사용하기 by gpt

응, 맞아! 한 컴포넌트 안에서 여러 개의 함수를 정의할 때, 객체를 활용해서 key-value 형태로 함수들을 저장하고 필요할 때 꺼내서 실행하는 방식으로 이해하면 돼.이 방법은 코드를 깔끔하게 정리하고 유지보수를 쉽게 만들 수 있는 패턴이야.예제 1: 함수들을 객체에 저장하고 호출하는 기본적인 패턴const MyComponent = () => { // 함수들을 key-value 형태의 객체로 정리 const handlers = { sayHello: () => console.log("Hello!"), sayGoodbye: () => console.log("Goodbye!"), alertMessage: (msg: string) => alert(msg), }; return ( ..

개발공부/React 2025.03.21

(Toss테크글) 자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기

https://toss.tech/article/frontend-tree-structure 자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기왜 토스증권 PC의 그리드 레이아웃을 왜 직접 구현하게 되었는지, 그리고 어떻게 만들어져 있는지를 이제부터 소개해 드릴게요.toss.tech  이진트리를 활용한 프론트엔트 UI설계봐도 완벽히 이해는 안되지만 너무 대단해 보여서 가져왔다..

개발공부/React 2025.03.21

정보처리기사 실기_흥달쌤 교재 목차

목차를 쓰면서 흐름을 파악해보자...! 1. 소프트웨어 구축2. 데이터베이스 구축3. 운영체제4. 네트워크5. 정보보안6. 신기술 용어7. 계산식 특강8. 데이터베이스 특강   Part1 소프트웨어 구축 chapter 01 소프트웨어 공학 개념  section1 소프트웨어 공학  section2 소프트웨어 개발 방법론  chapter 02 프로젝트 계획 및 분석  section1 프로젝트 계획  section2 요구사항 분석 chapter 03 소프트웨어 설계 section1 소프트웨어 설계의 기본 원칙 section2 소프트웨어 아키텍처 section3  UML  chapter 04 화면 설계  section1 UI 설계  section2 UI 구현  chapter 05 서버 프로그램 구현  secti..

국가공인 AICE Asso 합격후기

AICE Asso 시험에 합격했다.감사하게도 에이블스쿨에서 무료로 시험을 응시할 수 있는 기회를 줬다. 시험 내용은데이터전처리 머신러닝 딥러닝 모델 학습 및 예측하는 코드를 작성하는 문제들이 나왔다. 아무래도 에이블스쿨 기간동안 배웠던 내용들이고인터넷 검색이 허용됐기에 크게 어렵지 않게 합격할 수 있었다. 다만 데이터전처리, 모델링 코드 작성이 익숙치 않거나 중간에 코드오류가 발생하는 경우 당황하여 시간 내 문제를 풀 수 없을 수도 있겠다.전처리가 잘못되면 모델링까지도 망가지니 전처리부터 잘해야한다..! AICE사이트에서 예제문제를 풀어볼 수 있으며, AICE ASSO후기를 검색해서 문제 유형을 참고하면 좋을 듯 하다. AICE자격증이 국내 최초·유일 국가공인 AI 시험이라고 한다.AI가 낯선 분들은 자..

컨셉수업_세분화 타켓팅에 대해 인사이트를 주는 문구들

모든면에서 능한 사람은 컨셉을 쓰기 어렵다 모두를 기쁘게 하려고 노력하면 결국 아무도 기쁘게 하지 못할지도 모른다 누군가에게 온전히 사랑받기 위해서는 때로는 미움받을 각오를 해야한다 큰 사랑을 받으려면 미움받는 것을 두려워해서는 안된다    세분화 / 타겟팅에 대해 인사이트를 주는 문구들컨셉수업을 읽다가

#React_Key오류_Warning: Each child in a list should have a unique "key" prop.

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를 제대로 설..

개발공부/React 2024.07.25

#React_map함수 내에서 JSX를 반환할 때 괄호의 차이

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} ))};  암시적 반환 명시적 반환이란? 명시적반환과, 임시적 반환은 자바스..

개발공부/React 2024.07.11

Cors에러_미들웨어 코드 위치 문제

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..

개발공부/Errors 2024.06.04

#React 이미지 경로 문제

경로 설정방법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..

개발공부/React 2024.05.17