쉿 코딩중

1. Props란 무엇인가요?props는 부모 컴포넌트가 자식 컴포넌트로 데이터를 전달하기 위한 객체입니다. React에서 컴포넌트는 재사용 가능한 단위로 이루어져 있으며, props를 사용하면 동적인 데이터와 UI를 구현할 수 있습니다.props는 읽기 전용으로, 자식 컴포넌트는 props를 변경할 수 없습니다. 데이터를 전달하고 렌더링할 때 매우 유용합니다. 2. Props 사용 기본 예제부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기아래는 부모 컴포넌트가 자식 컴포넌트로 **이름(name)**과 **나이(age)**를 전달하는 예제입니다. // ParentComponent.jsimport React from 'react';import ChildComponent from './ChildCompone..

according to tld or attribute directive in tag file attribute value does not accept any expressions   Jstl 사용하여 #,### 숫자 콤마 찍기 도중 위 에러발생 ㅜㅜ.... 원인은 value 값을 el태그를 사용하여 동적인 값으로 넣었을 경우 발생해결하기 위해 Gpt 검색하니 아래처럼 답변해줌  해결 방법:태그 속성 확인: 사용된 태그의 TLD 파일에서 해당 속성에 표현식이 허용되는지 확인하세요. rtexprvalue="false"로 설정되어 있으면 표현식 사용이 제한됩니다.정적 값 사용: 표현식 대신 정적 값을 사용하거나 태그 라이브러리의 설정을 변경해야 합니다.  TLD 파일의 위치는 이클립스 에서 컨트롤 키 누른 상..

**JSX (JavaScript XML)**는 React에서 UI를 만들 때 사용되는 독특한 문법입니다. 자바스크립트 내에서 HTML과 비슷한 구문을 사용해 UI 컴포넌트를 더욱 직관적이고 효율적으로 작성할 수 있게 도와줍니다. 이번 글에서는 JSX의 개념, 사용법, 그리고 그 장점에 대해 자세히 알아보겠습니다.1. JSX란?JSX는 JavaScript의 확장 문법으로, HTML과 유사한 코드를 작성할 수 있도록 도와줍니다. 그러나, JSX는 단순한 HTML이 아닌 자바스크립트 코드의 일부분이며, 최종적으로는 브라우저가 이해할 수 있는 순수한 JavaScript로 변환됩니다. 이 덕분에 우리는 UI를 구축할 때 직관적이고 읽기 쉬운 코드를 작성할 수 있습니다.다음은 기본적인 JSX 코드의 예입니다: co..

Cross-Origin Resource Sharing(CORS)은 웹 브라우저에서 다른 도메인 간에 리소스를 요청하고 제공하는 방법을 정의하는 표준입니다. 보안상의 이유로, 브라우저는 스크립트가 원본(origin)을 초과하여 다른 도메인의 리소스에 접근하는 것을 제한합니다. 예를 들어, 한 도메인에서 로드된 웹 페이지가 다른 도메인에 있는 API에 요청을 보내고 데이터를 받아오는 경우가 이에 해당합니다. CORS의 기본 개념Same-Origin Policy (동일 출처 정책)동일 출처 정책은 웹 브라우저가 처음 요청을 보낸 출처와 동일한 출처로부터만 리소스를 가져올 수 있도록 하는 보안 정책입니다.출처는 세 부분으로 구성됩니다: 프로토콜(예: http, https), 호스트(예: example.com),..

Spring Boot와 React를 사용하여 간단한 웹 애플리케이션을 구축하는 방법을 소개하겠습니다.백엔드는 Kotlin으로 구현하고, 프론트엔드는 React로 구성합니다. 프로젝트 구조 demo/├── backend/│ ├── src/│ │ ├── main/│ │ │ ├── kotlin/│ │ │ │ └── com/│ │ │ │ └── example/│ │ │ │ └── demo/│ │ │ │ ├── DemoApplication.kt│ │ │ │ └── controllers/│ │ │ │ └── Examp..

[ Redis ] Redis는 오픈 소스 기반의 인메모리 데이터베이스입니다. "REmote DIctionary Server"의 약자로, 메모리에 데이터를 저장하고 조회하는 데 특화되어 있습니다. Redis는 메모리 기반 데이터베이스로 데이터를 디스크에 저장하지 않고 메모리에 직접 저장하여 빠른 속도를 제공합니다. 이로 인해 높은 처리량과 낮은 지연 시간을 가지며, 대규모 데이터 작업에 효과적입니다. 글쓴이는 docker를 사용하여 redis를 사용하겠습니다. 터미널에서 해당 명령어를 입력하여 줍니다. docker run -d -p 6379:6379 --name my-redis redis 아래 명령어로 설치를 확인하여 줍니다. docker ps build.gradle 에서 dependencies를 설정하여..

[batch_fetch_size] JPA(Java Persistence API)는 데이터베이스 조회 성능을 향상시키기 위해 다양한 설정을 제공합니다. 그 중 하나인 batch_fetch_size 설정은 한 번의 쿼리로 여러 개의 엔티티를 한꺼번에 가져오는 방식을 지원하여 성능 개선을 도모합니다. 일반적으로 JPA는 연관된 엔티티를 필요할 때마다 지연 로딩(Lazy Loading) 방식을 사용합니다. 이는 연관된 엔티티가 실제로 필요한 시점에 데이터베이스에서 조회되는 방식입니다. 그러나 지연 로딩은 여러 번의 쿼리 호출을 필요로 하기 때문에 성능에 영향을 줄 수 있습니다. 이때 batch_fetch_size 설정을 사용하면 한 번의 쿼리로 여러 개의 연관된 엔티티를 가져올 수 있으므로, 쿼리 호출 횟수를 ..

firstOrNull() Kotlin 언어에서는 다양한 유용한 함수를 제공합니다. 그 중 하나인 firstOrNull() 함수는 리스트나 배열과 같은 컬렉션에서 첫 번째 요소를 반환하거나, 컬렉션이 비어있을 경우 null을 반환합니다. 아래는 firstOrNull() 함수의 사용 예시입니다 val numbers = listOf(1, 2, 3, 4, 5) val firstEvenNumber = numbers.firstOrNull { it % 2 == 0 } println(firstEvenNumber) // 출력: 2 위 예제에서는 numbers 리스트에서 첫 번째로 짝수인 숫자를 찾아 firstOrNull() 함수를 사용했습니다. 리스트에는 2가 첫 번째로 나오는 짝수이므로 2가 출력됩니다. 만약 리스트가..

Elastic Beanstalk : Amazon Elastic Beanstalk은 AWS에서 제공하는 서비스 중 하나로, 개발자가 애플리케이션을 간편하게 배포하고 관리할 수 있는 플랫폼입니다. Elastic Beanstalk는 배포, 운영, 확장을 단순화하며, 애플리케이션 코드에 집중할 수 있도록 도와줍니다. 아래는 Elastic Beanstalk의 주요 특징과 개념에 대한 간략한 설명입니다: 플랫폼 및 런타임 지원: Elastic Beanstalk는 여러 프로그래밍 언어 및 런타임 환경을 지원합니다. Java,. NET, PHP, Node.js, Python, Ruby, Go 등의 다양한 언어를 사용할 수 있습니다. 환경(Environment): Elastic Beanstalk에서는 애플리케이션을 실행..

macOS에 Docker 설치: Docker Desktop을 다운로드하고 설치합니다. https://www.docker.com/products/docker-desktop/ 다운로드한 파일을 실행하여 Docker Desktop을 설치합니다. Windows에 Docker 설치: Docker Desktop을 다운로드하고 설치합니다. https://www.docker.com/products/docker-desktop/ 다운로드한 파일을 실행하여 Docker Desktop을 설치합니다. 설치 중에 Hyper-V를 활성화하라는 메시지가 표시되면 수락합니다. Docker 설치 확인: 터미널 에서 docker --version 으로 설치상태를 확인 합니다. MySql 설치: docker run --name mysql-..