본문 바로가기
728x90
반응형

전체 글416

[SpringBoot] QueryDSL에서 DB Function 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 QueryDSL에서 DB Function 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서... 이번 글에서 제가 사용할 DB는 MySQL입니다. 그리고 테스트를 위한 MySQL Function을 다음과 같이 생성해뒀습니다. CREATE DEFINER=`root`@`localhost` FUNCTION `get_function_test`(p_name varchar(100), p_age int) RETURNS varchar(200) CHARSET utf8 BEGIN declare p_return_value varchar(100); select concat('이름은 ', p_name, '이고 나이는 ', p_age, '입니다.') into p_r.. 2022. 9. 29.
[SpringBoot] QueryDSL에서 상수값 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 QueryDSL에서 상수값 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 상수값 사용 방법 QueryDSL에서 상수값을 사용하기 위해서는 Expressions를 활용해주면 됩니다. 긴 말 필요 없이 다음 코드를 확인해보시면 됩니다. package com.querydsl.repository; import static com.querydsl.entity.QStudent.student; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import com.querydsl.core.types.Projection.. 2022. 9. 26.
[CSS] radio 커스텀하기 안녕하세요. J4J입니다. 이번 포스팅은 radio 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서... UI를 구성하면서 많이 사용되는 것 중 하나가 radio 버튼입니다. 하지만 우리가 늘 해왔던것처럼 input [type="radio"]를 사용하다 보면 알 수 있는 것 중 하나가 radio의 버튼 이미지를 input 자체에 style을 줌으로써 변경할 수 없다는 것입니다. 결국 이를 해결하기 위해서는 input에 style을 주는 방식이 아닌 다른 방식을 통해 radio를 구성해야 합니다. 여러 방법들이 있겠지만 그 중 제가 느끼기에 간편하다고 생각되는 방법에 대해 소개해드리겠습니다. radio 버튼의 아이콘들은 다음의 이미지를 사용하겠습니다. radio 커스텀 See t.. 2022. 9. 19.
[CSS] checkbox 커스텀하기 안녕하세요. J4J입니다. 이번 포스팅은 checkbox 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서... UI를 구성하면서 디자인을 많이 입혀야 하는 것들 중 하나라고 생각되는 것이 checkbox입니다. 하지만 checkbox의 문제점은 기존에 많이 사용되는 input [type="checkbox"]만 활용했을 때 checkbox의 체크 표시를 커스텀할 수가 없습니다. 그러므로 checkbox와 동일한 기능을 수행하며 또한 체크 표시를 커스텀할 수 있도록 추가적인 작업을 진행해줘야 합니다. 이번 글에서는 다음의 체크 박스 아이콘들을 사용할 예정입니다. 선택되지 않았을 땐 위에 있는 아이콘이 표시되도록 하고 선택했을 경우엔 아래 있는 아이콘이 표시되도록 하겠습니다. UI를.. 2022. 9. 13.
[CSS] display: none이 transition으로 적용되지 않을 경우 안녕하세요. J4J입니다. 이번 포스팅은 display: none이 transition으로 적용되지 않을 경우 해결하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 발생되었던 상황 적용하고자 했던 css는 버튼을 클릭할 때 div 안에 포함되어 있는 모든 요소가 자연스럽게 화면에 보이지 않는 애니메이션을 적용하려고 했습니다. 간단하게 예시를 들어보면 다음과 같습니다. See the Pen displayNoneTransition-problem by 김 성찬 (@ksccmp) on CodePen. 위에서 toggle 버튼을 클릭하면 문구가 자연스럽게 사라지는 것을 확인할 수 있습니다. 하지만 문구가 있던 곳에 마우스를 가져다 대면 cursor: pointer을 적용했던 부분이 그대로 마우스에 표현되는 것.. 2022. 8. 29.
[React] react-router 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 react-router 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 환경 설정 [ 1. 패키지 설치 ] $ npm install react-router react-router-dom $ npm install -D @types/react-router @types/react-router-dom (typescript 사용하는 분만 설치) [ 2. BrowserRouter로 App 감싸기 ] import * as React from 'react'; import ReactDom from 'react-dom'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; ReactDom.r.. 2022. 8. 22.
[React] Import에도 ESLint 적용하기 안녕하세요. J4J입니다. 이번 포스팅은 Import에도 ESLint 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 해당 글은 ESLint 기본 설정 방법에 대한 설명은 따로 없습니다. ESLint 설정이 되어 있지 않으신 분들은 [React] 타입 스크립트 환경에서 ESLint / Prettier 설정하기를 참고해서 기본 설정을 해주시면 됩니다. 설정 방법 [ 1. 패키지 설치 ] $ npm install -D eslint-plugin-import [ 2. eslint 설정 파일 수정 (.eslintrc) ] { "plugins": [ "import" ], "rules": { "import/order": [ "error", {} ] } } 위와 같이만 설정해도 default .. 2022. 8. 20.
[React] react-hook-form register 등록 방법 커스텀하기 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form register 등록 커스텀하는 방법에 대해 적어보는 시간을 가져보려고 합니다. register를 props로 넘기기 첫 번째 방법은 register를 props로 넘기는 방법입니다. 개발을 하다 보면 디자인을 입히기 위해 input, select 등의 다양한 스타일 컴포넌트를 생성하게 됩니다. 그러다 보면 유효성 검증을 위해 register를 등록할 때 기존에 마크업 요소들에 적용하던 방식인 다음과 같은 방식을 사용할 수 없게 됩니다. const App = () => { return ( ); }; export default App; 이런 경우에 해결할 수 있는 방법 중 하나가 등록할 register값을 props로 넘겨주는 겁니다. .. 2022. 8. 16.
[React] 사용해본 yup 조건절 정리 안녕하세요. J4J입니다. 이번 포스팅은 제가 사용해본 yup 조건절들을 정리해보는 시간을 가져보려고 합니다. 들어가기에 앞서 yup과 함께 react-hook-form을 이용하여 코드가 작성되어 있다는 점 참고 부탁드립니다. Base - 1 먼저 가장 기본이 되는 조건절입니다. 간단한 예시로 다음과 같은 코드를 작성할 수 있습니다. import * as React from 'react'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; interface Iform { displayYn: string; displayContent:.. 2022. 8. 11.
[React] react-hook-form과 yup으로 동적 배열 유효성 검증하기 안녕하세요. J4J입니다. 이번 포스팅은 react-hook-form과 yup을 이용하여 동적 배열 유효성 검증하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 기본적인 방법 긴말 없이 바로 코드부터 보도록 하겠습니다. 동적 배열 유효성 검증 테스트를 위해 다음과 같이 코드를 작성할 수 있었습니다. import * as React from 'react'; import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; import { useForm } from 'react-hook-form'; // obj interface interface Iobj { name: string; age: number; } // form.. 2022. 8. 9.
[AWS] ALB(Application Load Balancer) 사용하기 (Feat, SSL 설정) 안녕하세요. J4J입니다. 이번 포스팅은 ALB 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. ALB란? ALB는 Application Load Balancer라는 뜻으로 어플리케이션에서 사용되는 여러 대의 서버들의 트래픽을 분산시켜주는 역할을 수행합니다. 정말 단순한 서비스라고 한다면 한 대의 서버만 scale-up하여 사용해도 문제없이 운영할 수 있습니다. 하지만 사용자의 접속이 많고 그에 따라 트래픽이 방대하게 증가하게 되면 한 대의 서버를 계속해서 scale-up을 하는 것은 점점 더 많은 비용 발생과, 트래픽 처리를 위해서도 좋지 않은 방향입니다. 그렇기 때문에 트래픽 처리를 하나의 서버가 모두 부담하지 않고 여러 대의 서버들을 생성하여 분산시키는 scale-out 방식을 많이 채택합.. 2022. 8. 8.
[SpringBoot] Oracle과 동일한 AES 암호화하기 안녕하세요. J4J입니다. 이번 포스팅은 Oracle과 동일한 AES 암호화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Oracle AES 암호화 먼저 Oracle에서 AES 암호화하는 Function을 만들어주겠습니다. 암호화해주는 Function은 다음과 같이 작성해서 생성해줍니다. create or replace FUNCTION AES_ENCRYPTION (text IN VARCHAR2) RETURN VARCHAR2 IS secret_key VARCHAR(32) := '12345678901234567890123456789012'; -- 비밀키 encrypted_raw RAW (2000); key_bytes_raw RAW (32); encryption_type PLS_INTEGER := DB.. 2022. 7. 30.
[SpringBoot] MySQL과 동일한 AES 암호화하기 안녕하세요. J4J입니다. 이번 포스팅은 MySQL과 동일한 AES 암호화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. MySQL AES 암호화 MySQL에서 AES 암호화를 도와주는 Function을 만들려고 합니다. 아래와 같이 MySQL에서 제공해주는 aes_encrypt를 활용하여 암호화를 해주는 aes_encryption Function을 만들어줄 수 있습니다. CREATE FUNCTION `aes_encryption`(p_text varchar(100)) RETURNS varchar(100) CHARSET utf8 BEGIN declare v_encrypted_text varchar(100); select hex(aes_encrypt(p_text, '1234567890')) into v.. 2022. 7. 25.
[AWS] Cafe24 도메인 AWS EC2에 연결하기 (Feat. Route53) 안녕하세요. J4J입니다. 이번 포스팅은 Cafe24에서 구매한 도메인을 AWS EC2에 연결하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서... 들어가기에 앞서 다음과 같이 필요한 사항이 2가지가 있습니다. 동작하고 있는 EC2 인스턴스 Cafe24에서 구매한 도메인 당연한 부분이긴 하지만 위의 2가지 사항들은 준비가 되어 있어야 아래 순서대로 진행이 가능합니다. 또한 저는 EC2에서 IP를 입력했을 때 아래와 같이 Nginx 기본 화면이 나오도록 구성해놨습니다. 설정을 통해 구매한 도메인을 입력했을 때 동일한 결과가 나오도록 해보겠습니다. AWS 설정 [ 1. Route53 접속 ] [ 2. 호스팅 영역 접속 ] 좌측 메뉴에 있는 호스팅 영역에 접속해주시면 됩니다. [ 3. 호스.. 2022. 7. 18.
[React] 아토믹 디자인(Atomic Design) 을 이용한 컴포넌트 개발 안녕하세요. J4J입니다. 이번 포스팅은 Atomic Design에 대해 적어보는 시간을 가져보려고 합니다. Atomic Design이란? Atomic Design은 최근 React를 이용하여 컴포넌트 개발할 때 떠오르고 있는 디자인 기법 중 하나로 효율적인 인터페이스 디자인 시스템을 만들어내기 위해 사용됩니다. Atomic Design은 다음과 같이 크게 5가지로 구성됩니다. Atom (원자) Molecule (분자) Organism (유기체) Template (템플릿) Page (페이지) Atom Atom은 디자인 할 수 있는 요소 중 가장 작은 구성단위를 의미합니다. 대표적으로 기본 마크업 구성 요소들인 input, button 등이 여기에 해당되고 마크업 요소들뿐만 아니라 color, font s.. 2022. 7. 13.
[SpringBoot] QueryDSL Projections로 결과값 핸들링하기 안녕하세요. J4J입니다. 이번 포스팅은 QueryDSL Projections 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Projections 사용 이유 제가 Projections을 사용하는 이유는 Repository 내부에서 데이터를 조회할 때 Entity 외의 값 (ex, DTO)으로 편리하게 리턴 받아 사용할 수 있도록 하기 위해서입니다. 일반적으로 Proejctions을 사용하지 않는다면 다음과 같이 select의 return값으로 Tuple을 전달받은 뒤 DTO 등으로 변환하여 리턴하는 방식도 있습니다. package com.spring.querydsl.repository; import java.util.ArrayList; import java.util.List; import or.. 2022. 7. 9.
[React] AES256 암호화 (with. Java) 안녕하세요. J4J입니다. 이번 포스팅은 AES256 암호화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. React에서 암호화 방법 [ 1. 패키지 설치 ] $ npm install crypto-js $ npm install -D @types/crypto-js // 타입 스크립트 사용 시 추가 설치 [ 2. 암복호화 코드 작성 ] import cryptoJs from 'crypto-js'; const secretKey = '12345678901234567890123456789012' // 32자리 비밀키 const iv = 'abcdefghijklmnop' // 16자리 iv // 암호화 export const encrypt = (text: string) => { const cipher = cry.. 2022. 7. 4.
[Next] 하위 경로 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 하위 경로 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 하위 경로 사용 방법 React에서 하위 경로를 사용할 땐 Router에 /board/:no와 같이 등록하여 사용하곤 합니다. 만약 Next에서도 위와 같은 경로를 사용하고 싶다면 파일 구조를 활용해야 되고 다음과 같은 파일 구조를 구성하면 위와 같은 경로를 사용하는 것과 동일한 결과를 만들어냅니다. 또한 위의 예시에서 필요한 사항은 no로 넘어온 값을 확인할 수 있어야 합니다. no 값을 확인하기 위해서는 [no].tsx 파일 안에서 useRouter를 이용하여 다음과 같이 query값을 조회해보면 됩니다. import { useRouter } from 'next/router'; import *.. 2022. 6. 27.
728x90
반응형

티스토리툴바