본문 바로가기
728x90
반응형

전체 글416

[SpringBoot] Found shared references to a collection 에러 안녕하세요. J4J입니다. 에러 원인 JPA를 이용하여 개발하다가 다음과 유사한 에러를 마주했던 적이 있습니다. org.springframework.orm.jpa.JpaSystemException: Found shared references to a collection: com.spring.error.entity.Board.firstFileList; nested exception is org.hibernate.HibernateException: Found shared references to a collection: com.spring.error.entity.Board.firstFileList at org.springframework.orm.jpa.vendor.HibernateJpaDialect.conv.. 2022. 6. 13.
[React] Nivo 차트 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Nivo 차트 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Nivo 차트란? Nivo 차트는 리액트를 이용하여 개발할 때 사용할 수 있는 차트 라이브러리 중 하나입니다. 대표적으로 많이 사용되는 Bar, Pie 차트 등을 기본으로 제공하며 그 외에도 Line과 Github 잔디밭을 만들 수 있게 도와주는 Calendar 차트까지도 제공을 해줍니다. Nivo 차트 선택 이유 최근 회사에서 프로젝트를 하면서 차트를 사용해야 된다는 얘기를 전달받았습니다. 지금까지 리액트를 사용하면서 차트를 사용해본적이 없기 때문에 리액트에서 많이 사용된다는 여러 가지 차트들을 확인했고 결국 저의 선택은 Nivo 차트였습니다. Nivo 차트를 선택한 첫 번째 이유는 리액트스.. 2022. 6. 4.
[React] 카카오 주소 검색 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 카카오 주소 검색 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 주소 검색 사용 방법 [ 1. 패키지 설치 ] $ npm install react-daum-postcode [ 2. 주소 컴포넌트 작성 ] import * as React from 'react'; import DaumPostcode from 'react-daum-postcode'; const App = (): JSX.Element => { /** * useState */ const [openPostcode, setOpenPostcode] = React.useState(false); /** * handler */ const handle = { // 버튼 클릭 이벤트 clickButton: (.. 2022. 5. 28.
[React] Dayjs로 간편하게 날짜 처리하기 안녕하세요. J4J입니다. 이번 포스팅은 Dayjs로 날짜 처리하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Dayjs란? Dayjs는 날짜 처리를 간편하게 할 수 있도록 도와주는 라이브러리입니다. 일반적인 포매팅부터 시작하여 날짜를 어느 기준만큼 더하고 빼는 등의 산술 연산과 같은 날짜와 관련된 다양한 기능을 제공해줍니다. Dayjs와 유사하게 사용되는 대표적인 날짜 라이브러리로 Momentjs가 있습니다. Dayjs와 Momentjs 둘다 많은 개발자분들이 필요로 하는 여러 기능들을 대부분 제공해줍니다. 하지만 이 둘의 차이점은 라이브러리 크기에서 명확히 보여집니다. Dayjs는 Momentjs와 비교했을 때 많은 경량화를 보인다고 합니다. 실제로 Dayjs와 Momentjs를 각각 설치해봤을.. 2022. 5. 16.
[React] Storybook으로 컴포넌트 문서화하기 안녕하세요. J4J입니다. 이번 포스팅은 Storybook으로 컴포넌트 문서화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Storybook이란? Storybook은 제목에서 보이듯이 개발할 때 사용되는 여러 컴포넌트들을 문서화할 수 있는 오픈 소스 도구입니다. 여러 협업되는 과정에서 사용될 수 있는 공통 컴포넌트들부터 시작하여 페이지들도 독립적으로 구축할 수 있기 때문에 개발자들이 개발된 컴포넌트 코드들을 사용하고자 할 때 Storybook을 참고하여 더 편리하게 사용할 수 있게 도와줍니다. 또한 일반 문서들처럼 단순히 Storybook에 등록할 때 설정한 값에 맞게만 보이는 것이 아니고 radio, text 등을 이용해 각 컴포넌트에서 전달받을 수 있는 props도 실시간으로 변경도 할 수 있.. 2022. 5. 14.
[React] react-hook-form과 React.forwardRef() 에러 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form과 React.forwardRef() 에러에 대해 적어보는 시간을 가져보려고 합니다. React.forewardRef() 에러 react-hook-form을 이용하여 개발하면서 공통 컴포넌트에 validation을 적용시키려는 분들이 많으실 겁니다. 하지만 register를 이용하여 validation을 적용할 경우 디버깅 단계에서는 문제가 발생되지 않지만 런타임 단계에서 다음과 같은 에러를 확인하며 react-hook-form이 정상 동작되지 않으셨을 겁니다. 해당 에러가 발생되는 이유는 ref를 props로 전달하려고 하기 때문에 발생됩니다. 일반적으로 register를 사용할 경우 다음과 같이 사용을 하실 겁니다. 하지만 공식 문서.. 2022. 5. 7.
[React] react-hook-form을 이용하여 validation (유효성) 처리하기 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form을 이용하여 validation 처리하는 방법에 대해 적어보는 시간을 가져보려고 합니다. react-hook-form 이란? react-hook-form은 react를 이용하여 개발할 때 유효성을 체크할 수 있게 도와주는 모듈입니다. react에서는 유효성을 체크해주는 모듈로써 사용되는 게 react-hook-form과 formilk 라는 것이 대표적으로 있는 것으로 보입니다. formilk를 사용해본적이 없기 때문에 차이점에 대해서 언급하기는 힘들지만 공식 문서를 참고했을 때 react-hook-form의 이점들은 다음과 같은 것이 있는 것으로 확인됩니다. 적은 코드로 더 좋은 퍼포먼스를 보여줌 효율적인 re-rendering을 제공 .. 2022. 5. 2.
[CSS] 2단 메뉴 드롭다운 CSS 안녕하세요. J4J입니다. 이번 포스팅은 2단 메뉴 드롭다운 CSS에 대해 적어보는 시간을 가져보려고 합니다. 산출물 2단 메뉴 드롭다운되는 방식은 어떻게 구성하고자 하냐에 따라 다른 결과물들이 나올 수 있습니다. 이번 글에서 산출되는 2단 메뉴 드롭다운의 형태는 다음과 같으니 해당 메뉴 구성이 필요하신 분만 참고하시면 될 것 같습니다. 2단 메뉴 구성 (1) - 1단 메뉴바 먼저 가장 기본적인 토대가 구성되어야 하는 1단 메뉴바를 만들어보겠습니다. 1단 메뉴를 구성할 때 저는 table을 사용합니다. 하지만 태그를 table를 사용하지는 않고 ul, li를 이용하지만 ul, li의 display를 각각 변경하여 table처럼 사용하고는 합니다. 간단하게 구현해보면 다음과 같이 구현될 수 있습니다. Se.. 2022. 4. 30.
[SpringBoot] JPA에서 QueryDSL 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 JPA에서 QueryDSL 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. QueryDSL이란? QueryDSL은 자바 코드를 이용하여 데이터베이스 query를 작성할 수 있게 도와줍니다. 일반적으로 JPA를 사용하여 개발하면 JPARepository를 상속받은 인터페이스 파일을 만들어 활용하고는 합니다. 하지만 JPARepository가 가지는 한계가 있기 때문에 상황에 따라 JPQL문을 직접 작성하기도 합니다. 여기서 문제점은 JPQL을 작성을 했지만 에러가 발생될 수 있는 코드임에도 불구하고 디버깅 단계 때 확인이 불가합니다. 결국 런타임까지 넘어갔을 때 에러가 발생될 것이고 그때서야 잘못된 코드임을 확인하여 수정작업이 이루어집니다. 게다가 개인적으.. 2022. 4. 24.
[SpringBoot] AWS S3에 파일 업로드하기 안녕하세요. J4J입니다. 이번 포스팅은 AWS S3에 파일 업로드하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 Controller에서 파일 데이터를 받을 수 있기 위해 multipartfile을 사용할 예정입니다. 또한 AWS S3 버켓​ 생성하는 방법은 [AWS] 이미지 저장을 위한 S3 버킷 생성하기를 참고해주시길 바랍니다. S3에 접근할 IAM 계정 생성 가장 먼저 S3에 접근할 수 있는 IAM 계정 생성을 해줘야 합니다. 계정 생성이 완료되면 해당 계정 정보를 SpringBoot에 입력해줄 것이고 이를 기반으로 S3에 접근할 수 있는 사용자인지를 판단할 수 있게 도와줍니다. ​​​[ 1. IAM 서비스 접근 ] [ 2. 사용자 추가 클릭 ] [ 3. 사용자 정보 입력 ] .. 2022. 4. 23.
[AWS] 이미지 저장을 위한 S3 버킷 생성하기 안녕하세요. J4J입니다. 이번 포스팅은 이미지 저장을 위한 S3 버킷 생성하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 버킷 생성하기 [ 1. S3 서비스 접근 ] [ 2. 버킷 만들기 클릭 ] [ 3. 버킷 생성 정보 입력 - 일반 구성 ] 일반 구성에서는 버킷 이름과 AWS 리전을 선택해주면 됩니다. 아무래도 AWS 리전 같은 경우는 더 빠른 속도로 사용되기 위해 버킷이 많이 사용될 지역을 선택해주시면 됩니다. [ 4. 버킷 생성 정보 입력 - 객체 소유권 ] 객체 소유권에서는 ACL 활성화 여부를 선택해줍니다. 기본적으로 이렇게 만들어진 S3 버킷은 서버 쪽 소스코드를 이용하여 업로드 및 조회가 이루어지는데 해당 처리를 할 때 IAM 계정을 생성하여 버킷에 접근하기 때문에 ACL 활성화로 .. 2022. 4. 17.
[Next] 환경 변수(.env) 타입을 설정하여 자동 완성 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 환경 변수(.env) 타입을 설정하여 자동 완성 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 해당 방법은 TypeScript를 사용할 때만 적용이 가능하기에 참고 부탁드립니다. 자동 완성 설정 방법 [Next] 환경 변수(.env) 사용하기를 참고하시면 Next에서 환경 변수 사용 방법을 확인할 수 있습니다. 그리고 .env나 next.config.js에 설정한 변수를 사용하기 위해 코드를 작성하고자 하면 자동 완성이 되지 않기에 자연스럽게 입력한 변수 값의 이름을 Copy & Paste를 하는 자기 자신을 확인할 수 있습니다. 이런 불편함을 제거하기 위해 환경 변수를 위한 타입을 설정하여 자동 완성할 수 있도록 해보겠습니다. [ 1... 2022. 4. 16.
[Next] Production에서 Console 출력 제거하기 안녕하세요. J4J입니다. 이번 포스팅은 production에서 console 출력 제거하는 방법에 대해 적어보는 시간을 가져보려고 합니다. console 출력 제거 방법 [ 1. 패키지 설치 ] $ npm install babel-plugin-transform-remove-console [ 2. babel 설정 ] root경로에 .babelrc 파일을 생성한 뒤 다음 내용을 입력해주면 됩니다. { "presets": ["next/babel"], "env": { "production": { "plugins": ["transform-remove-console"] // console 출력 제거 } } } 테스트 테스트를 위해 index.tsx 파일을 다음과 같이 간단하게 작성해봤습니다. import * as.. 2022. 4. 10.
[JPA] 자동으로 Datetime 설정하기 안녕하세요. J4J입니다. 이번 포스팅은 자동으로 Datetime 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. LocalDateTime 이용하기 [ 1. DB 스키마 구성 ] create table jpadatetime ( id int auto_increment primary key, name varchar(100), create_id varchar(50), create_at datetime, update_id varchar(50), update_at datetime ); [ 2. Datetime 설정 클래스 생성 ] package com.spring.datetime.entity; import java.time.LocalDateTime; import javax.persistence.Mappe.. 2022. 4. 7.
[AWS] RDS로 MySQL 사용 환경 구성 안녕하세요. J4J입니다. 이번 포스팅은 RDS로 MySQL 사용 환경 구성하는 방법에 대해 적어보는 시간을 가져보려고 합니다. RDS란? RDS는 AWS에서 제공해주는 관계형 데이터베이스 서비스입니다. 일반적으로 데이터베이스 서버를 구축한다고 하면 EC2 인스턴스를 생성하여 그 내부에 데이터베이스를 설치하여 사용하는 것을 생각할 수 있습니다. 그리고 설치된 데이터베이스의 관리를 직접 커스텀하여 사용하게 됩니다. 하지만 RDS는 AWS에서 모든 것을 관리해줍니다. 원하는 데이터베이스 엔진을 선택하면 데이터베이스를 위한 인스턴스를 생성해주고 선택한 엔진에 맞는 사용 환경을 스스로 마련해줍니다. 여기서 선택할 수 있는 엔진은 총 6개이며 Amazon Aurora, MySQL, MariaDB, PostgreS.. 2022. 4. 6.
[Next] AG Grid 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 AG Grid 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 AG Grid에서 제공해주는 여러 기능들 중 기본적인 기능들만 다뤄보려고 합니다. 추가적인 상세 내용이 필요하신 분들은 공식 문서를 참고하시면 좋을 것 같습니다. 기본 설정 [ 1. 패키지 설치 ] $ npm install ag-grid-react ag-grid-community [ 2. 기본 코드 작성 ] 기본적인 구조를 가지는 코드를 base.tsx 파일을 생성하여 작성해보겠습니다. import * as React from 'react'; import { NextPage } from 'next'; import 'ag-grid-community/dist/styles/ag-gr.. 2022. 4. 3.
[SpringBoot] 환경 변수 파일 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 환경 변수 파일 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 사용 방법 [ 1. 변수 파일 생성 ] src/main/resources 경로에 properties라는 폴더를 생성한 뒤 그 안에 변수 값을 담아둘 env.properties 파일을 생성해보겠습니다. env.properties 파일 안에는 Java 파일과 properties 파일에서 테스트할 데이터를 다음과 같이 각각 넣어보겠습니다. # Java 파일에서 테스트 java.file.test=Hello, World!! # properties 파일에서 테스트 properties.file.port=8080 [ 2. 변수 설정 파일 생성 ] 생성한 properties 파일을 개발을 하는 여러 파일들에.. 2022. 3. 28.
[React] 타입 스크립트(TypeScript) 환경에서 절대 경로 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트(TypeScript) 환경에서 절대 경로 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 절대 경로 사용 이유 절대 경로를 사용하는 이유는 프로젝트의 규모가 커질수록 복잡해지는 경로지정을 더 편리하게 관리하기 위해서입니다. 예를 들어 다음과 같은 경로가 있다고 가정하겠습니다. folder A ㄴ folder B ㄴ folder C ㄴ folder D ㄴ folder E ㄴ file 1 folder F ㄴ file 2 이런 파일 구조에서 만약 file 1에서 file 2를 로드하여 사용할 때 상대 경로를 이용하면 "../../../../../folder F/file 2"와 같이 경로 설정을 할겁니다. 하지만 절대 경로를 사용하게 되면 "/fo.. 2022. 3. 27.
728x90
반응형

티스토리툴바