Framework23 [React] Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. 이슈 1 router element를 컴포넌트로 호출안해서 생긴 이슈입니다. import React from "react"; import Home from "pages/Home"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; const router = createBrowserRouter([ { path: "/", element: Home, }, ]); function App() { return ( ); } export default App; 해결 방안 import React from "react"; import Home from "pages/Home"; import { createBrowserRouter, RouterPr.. 2023. 9. 17. Warning Received 'true' for non-boolean attribute react-dom.development.js:84 Warning: Received `true` for a non-boolean attribute `{속성이름}`. If you want to write it to the DOM, pass a string instead: {속성이름}="true" or {속성이름}={value.toString()}. style-componets에서 속성에 맞지 않는 값을 넣으면 나타나는 경고 문구입니다. 올바른 속성 값을 넣으면 더이상 표기안되는 걸 확인하실 수 있습니다. 2023. 9. 1. [React] React 새로운 Root Document 생성하기 React 18.2.0 기준으로 작성 된 글입니다. 필자에 경우 react-force-graph를 사용해서 3D 차트를 구현하던 중 싱글 페이지로 구현이 되어있어 여러개의 차트를 그릴 경우 아래와 같이 타입에러가 발생했습니다. Cannot read properties of undefined (reading 'children') TypeError: Cannot read properties of undefined (reading 'children') at emptyObject (http://localhost:3000/static/js/bundle.js:663004:14) at _objectSpread2.objBindAttr (http://localhost:3000/static/js/bundle.js:6630.. 2023. 8. 8. [React] Uncaught ReferenceError: Buffer is not defined in React 리액트 17 버전에서 18 버전으로 변경하면서 아래와 같은 오류가 나와서 해결한 내용을 정리합니다. Uncaught ReferenceError: Buffer is not defined in React 해결방안 buffer 설치 npm npm install --save buffer yarn yarn add buffer --save App.js 추가 import React from "react"; ... import { Buffer } from "buffer"; Buffer.from("anything", "base64"); window.Buffer = window.Buffer || require("buffer").Buffer; const App = () => { ... }; export default App.. 2023. 8. 1. [React] ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis How to Upgrade to React 18 – React The library for web and native user interfaces react.dev React 17 버전에서 18 버전으로 변경 했을 시 생기는 이슈.. 2023. 8. 1. [Spring] 엑셀 데이터 검증 ( Excel Data Validation ) DataValidationConstraint 10건 이상 오류시 시트1 첫번째 행에 시트2 참조해서 유효성 검사하는 Java 코드 샘플입니다. gradle dependencies dependencies { implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.apache.poi:poi:5.0.0' implementation 'org.apache.poi:poi-ooxml:5.0.0' } Java Source 예제 import org.apache.poi.ss.usermodel.*; import org.apache.poi.ss.util.CellRangeAddressList; import org.apache.po.. 2023. 6. 15. Executing an update/delete query; nested exception is javax.persistence.TransactionRequiredException org.springframework.dao.InvalidDataAccessApiUsageException: Executing an update/delete query; nested exception is javax.persistence.TransactionRequiredException: Executing an update/delete query @Transactional 추가해주시면 해결됩니다. 예시 import org.springframework.transaction.annotation.Transactional; ... @Transactional public void update(User user) { userRepository.save(user); } 2023. 6. 12. [Spring] MySQL 연동 (JPA, application.properties) # Spring DataSource (MySQL) spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost:3306/데이터베이스명?useSSL=false&characterEncoding=UTF-8&serverTimezone=UTC spring.datasource.username=아이디 spring.datasource.password=비밀번호 # Spring JPA spring.jpa.database=mysql spring.jpa.database-platform=org.hibernate.dialect.MySQL8Dialect spring.jpa.hibernate.ddl-aut.. 2023. 6. 2. [Spring] org.thymeleaf.exceptions.TemplateInputException org.thymeleaf.exceptions.TemplateInputException: Error resolving template [/page/test], template might not exist or might not be accessible by any of the configured Template Resolvers 내용 IntelliJ에서 개발할 때는 문제가 없었지만 실제 서버에 배포 후 TemplateInputException이 발생이 있었습니다. 관련해서 찾아보니 내부 Spring Boot Server를 사용하거나 Tomcat을 사용할 때는 발생하지 않지만 다르게 배포를 하는 경우 ( 필자에 경우 jar 배포였음 ) 문제가 생길 수 있어서 해결방안을 공유합니다. 해결방안 기존 return.. 2023. 5. 25. [Spring] Web Project 시작하기 STEP 1 이 글은 Spring 개발을 공부하시는 초심자용으로 만들어졌습니다. 프로젝트 IDEA: IntelliJ Java Version: openjdk version 1.8.0_292 spring-boot-starter-parent: 2.7.11 인텔리제이 신규 프로젝트 생성 ( IntelliJ New Project ) 스프링 이니셜라이즈 설정 ( Spring Initializr ) Spring Initializr를 선택합니다. 설정 내용 Name 프로젝트 이름 임의 Location 프로젝트 경로 임의 Language 개발 언어 Java Type 패키지 관리 타입 Maven Group 그룹 임의 Artifact 아티팩트 자동설정 Package name 패키지 이름 자동설정 JDK Java Development .. 2023. 5. 15. [Spring] 트랜잭션 전파 규칙 (Transaction Propagation Behaviors) @Transactional Spring에서 해당 메서드(method)를 하나의 트랜잭션(Transaction)으로 진행하는 애노테이션(Annotation)입니다. 전파 규칙 (Propagation Behaviors) 총 7가지 전파 규칙이 있고 여기서 기존 트랜잭션이 있거나 없는 경우 다 다르게 작동합니다. 전파 규칙 설명 MANDATORY 현재 트랜잭션을 지원하고, 존재하지 않으면 예외를 발생시킵니다. NESTED 현재 트랜잭션이 있는 경우 중첩된 트랜잭션 내에서 실행하고 REQUIRED그렇지 않은 경우와 같이 동작합니다. NEVER 트랜잭션이 아닌 방식으로 실행하고 트랜잭션이 있으면 예외를 발생시킵니다. NOT_SUPPORTED 트랜잭션이 아닌 방식으로 실행하고 현재 트랜잭션이 있는 경우 일시 중단합.. 2023. 4. 21. [NestJS] 시작하기 소개 Nest(NestJS)는 효율적이고 확장 가능한 Node.js 서버 측 애플리케이션을 구축하기 위한 프레임워크입니다 . TypeScript로 구축되어 완벽하게 지원하며 (JavaScript로 코딩할 수 있습니다.) 내부적으로 Express (기본값) 사용하며 선택적으로 Fastify 도 사용하도록 구성할 수 있습니다. 설치 NestJs를 시작하려면 먼저 NestJS 커맨드라인 인터페이스(cli: Command-line Iterface)를 설치해야합니다. npm i -g @nestjs/cli 결과 설치하고 나면 이제 nest라는 명령어를 사용하실 수 있습니다. 프로젝트 생성 nest new [프로젝트 이름] 어떤 package manager를 선택하겠습니까? 저는 yarn을 선택했습니다. 결과 실행 .. 2023. 4. 19. 이전 1 2 다음
