본문 바로가기
728x90
반응형

전체 글416

[CSS] linear-gradient에 transition 적용하기 안녕하세요. J4J입니다. 이번 포스팅은 linear-gradient에 transition 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 일반적인 경우 linear-gradient에 transition을 적용한 결과물을 만들기 위해 일반적으로 다음과 같은 형태의 코드를 작성할 것입니다. See the Pen linearGradientTransition-problem by 김 성찬 (@ksccmp) on CodePen. 위의 코드는 버튼을 클릭할 때마다 배경색을 입혀주는 코드입니다. 배경색은 linear-gradient로 입혀주고 transition을 적용했기 때문에 일반적으로 위의 코드에서 결과물이 transition에 적용된 시간 동안 천천히 배경색이 입혀지는 것을 생각할 수 있습니다. 하지.. 2023. 1. 2.
[SpringBoot] encodeURIComponent, decodeURIComponent 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 encodeURIComponent, decodeURIComponent 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 정확히 일치해서 사용하기 먼저 encodeURIComponent와 decodeURIComponent는 자바스크립트에서 문자를 인코딩, 디코딩하기 위해 사용되는 함수로 URI를 구성할 때 일부 문자에 의해 발생되는 문제들을 해결할 때 주로 사용합니다. 그리고 이런 목적으로 사용되는 두 함수와 동일한 결과가 나오는 것을 스프링에서도 사용하고자 하는 상황들이 가끔씩 발생할 수 있습니다. 이런 목적을 달성하기 위해 자바에서는 URLEncoder와 URLDecoder를 제공합니다. 하지만 문제점은 URLEncoder의 결괏값은 encodeURICo.. 2022. 12. 29.
[SpringBoot] AWS Lambda로 배치 만들기 (3) - GitLab으로 자동배포하기 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambda 배치 만들기 마지막인 GitLab으로 자동 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [SpringBoot] AWS Lambda로 배치 만들기 (1) - Spring 세팅 및 로컬 테스트 [SpringBoot] AWS Lambda로 배치 만들기 (2) - Lambda 생성해서 배포하기 IAM 설정 [ 1. IAM 접속 ] [ 2. 사용자 추가 ] 좌측에서 사용자 메뉴를 선택한 뒤 우측에 있는 사용자 추가 버튼을 클릭합니다. [ 3. 사용자 정보 설정 - 세부 정보 및 액세스 유형 설정 ] 세부 정보 설정에서는 사용하실 사용자 이름을 자유롭게 입력해주면 됩니다. 액세스 유형에서는 액세스 키를 선택해주면 됩니다. [ 4. 사.. 2022. 12. 15.
[SpringBoot] AWS Lambda로 배치 만들기 (2) - Lambda 생성해서 배포하기 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambda로 배치 만들기 두 번째인 Lambda 생성해서 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [SpringBoot] AWS Lambda로 배치 만들기 (1) - Spring 세팅 및 로컬 테스트 Spring 세팅 이전 글을 참고하면 DB에 로그 데이터를 쌓는 기본적인 비즈니스 로직 구성이 완료되어 있습니다. 이번엔 구성되어 있는 비즈니스 로직들이 Lambda에 배포했을 때 정상적으로 동작될 수 있는 추가 설정들을 해보도록 하겠습니다. [ 1. 의존성 추가 ] org.springframework.cloud spring-cloud-function-adapter-aws 3.2.8 com.amazonaws aws-lambda-jav.. 2022. 12. 12.
[SpringBoot] AWS Lambda로 배치 만들기 (1) - Spring 세팅 및 로컬 테스트 안녕하세요. J4J입니다. 이번 포스팅은 AWS Lambad로 배치 만들기 첫 번째인 Spring 세팅 및 로컬 테스트에 대해 적어보는 시간을 가져보려고 합니다. DB 세팅 이번에 Lambda를 이용해 만들어보려고 하는 것은 배치를 돌려 주기적으로 DB에 로그 데이터를 적재하는 것입니다. 그러므로 로그 데이터 적재를 위해 사용될 테이블을 생성하도록 하겠습니다. 테이블을 생성하기에 앞서 Lambda에 작업한 코드를 배포하기 때문에 로컬에서 사용하는 DB로 해주시면 안 됩니다. [AWS] RDS로 MySQL 사용 환경 구성과 같은 글들을 참고하여 로컬이 아닌 서버에서 DB를 생성해주시면 됩니다. 데이터 적재를 위해 사용될 DB 스키마는 다음과 같습니다. create table lambda_log ( no b.. 2022. 12. 5.
[AWS] ECS 사용하기 (4) - ECS 수정하기 안녕하세요. J4J입니다. 이번 포스팅은 ECS 사용하기 네 번째인 ECS 수정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [AWS] ECS 사용하기 (1) - GitLab으로 ECR에 이미지 push하기 [AWS] ECS 사용하기 (2) - ECS 생성하여 배포하기 (with. EC2) [AWS] ECS 사용하기 (3) - GitLab으로 ECS 인스턴스에 배포하기 ECS 수정하는 방법 ECS를 수정하기 위해 ECS 클러스터에 접속을 했을 때 수정을 위한 기능이 따로 보이지 않는 것을 확인할 수 있습니다. 그리고 ECS를 처음 생성할 때 CloudFormation 이란 것이 함께 생성되는 것도 확인할 수 있습니다. 즉, ECS 클러스터 정보 수정을 위해서는 CloudFormation을.. 2022. 12. 5.
[AWS] ECS 사용하기 (5) - ECS 외부 인스턴스 추가하기 안녕하세요. J4J입니다. 이번 포스팅은 ECS 사용하기 마지막인 ECS 외부 인스턴스 추가하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [AWS] ECS 사용하기 (1) - GitLab으로 ECR에 이미지 push하기 [AWS] ECS 사용하기 (2) - ECS 생성하여 배포하기 (with. EC2) [AWS] ECS 사용하기 (3) - GitLab으로 ECS 인스턴스에 배포하기 [AWS] ECS 사용하기 (4) - ECS 수정하기 ECS 외부 인스턴스 추가하는 방법 [ 1. EC2 접속 ] [ 2. 인스턴스 시작 ] 왼쪽에 있는 인스턴스 메뉴를 선택한 뒤 오른쪽에 있는 인스턴스 시작 버튼을 클릭해줍니다. [ 3. 인스턴스 정보 입력 - 이름 및 태그 ] 먼저 다음과 같이 사용하고자 하.. 2022. 11. 29.
[AWS] ECS 사용하기 (3) - GitLab으로 ECS 인스턴스에 배포하기 안녕하세요. J4J입니다. 이번 포스팅은 ECS 사용하기 세 번째인 GitLab으로 ECS 인스턴스에 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [AWS] ECS 사용하기 (1) - GitLab으로 ECR에 이미지 push하기 [AWS] ECS 사용하기 (2) - ECS 생성하여 배포하기 (with. EC2) GitLab으로 ECS 인스턴스에 배포하는 방법 (1) - IAM 설정 [AWS] ECS 사용하기 (1) - GitLab으로 ECR에 이미지 push하기를 참고하시면 GitLab으로 ECR에 이미지 push하기 위해 기본적은 IAM 설정과 GitLab 설정들이 이루어져 있습니다. 이번 글은 위의 링크 설정에서 이어지는 추가 설정을 할 예정이니 글을 읽을 때 참고 부탁드립니다... 2022. 11. 18.
[AWS] ECS 사용하기 (2) - ECS 생성하여 배포하기 (with. EC2) 안녕하세요. J4J입니다. 이번 포스팅은 ECS 사용하기 두 번째인 ECS 생성하여 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [AWS] ECS 사용하기 (1) - GitLab으로 ECR에 이미지 push하기 ECS란? ECS는 Elastic Container Service의 약어로 AWS에서 제공하는 완전 관리형 컨테이너 오케스트레이션 서비스입니다. ECS는 컨테이너화된 서비스를 간편하게 배포 및 관리할 수 있도록 도와주기 때문에 ECS를 사용한다면 단순하게 EC2 인스턴스를 각각 생성해서 사용하는 것보다 더 효율적으로 서버 관리를 할 수 있습니다. ECS를 사용할 땐 다음과 같이 크게 2가지로 구분하여 사용할 수 있습니다. EC2 인스턴스 Fargate EC2 인스턴스는 다들 .. 2022. 11. 9.
[AWS] ECS 사용하기 (1) - GitLab으로 ECR에 이미지 push하기 안녕하세요. J4J입니다. 이번 포스팅은 ECS 사용하기 첫 번째인 GitLab으로 ECR에 이미지 push하는 방법에 대해 적어보는 시간을 가져보려고 합니다. ECR이란? ECR은 Elastic Container Registry의 약어로 AWS에서 제공하는 Docker 이미지 저장소입니다. Docker 이미지 저장소로 보통 자주 사용되는 것은 Docker Hub가 있습니다. ECR은 Docker Hub와 유사하기 때문에 Docker 컨테이너에 사용될 Docker 이미지들을 관리, 저장, 배포할 수 있도록 도와줍니다. GitLab으로 ECR에 이미지 push하는 방법 (1) - IAM 설정 [ 1. IAM 접속 ] [ 2. ECR 접근 사용자 추가 ] 좌측 메뉴에서 사용자를 선택한 뒤 오른쪽에 있는 사용.. 2022. 11. 5.
[AWS] unable to start container process: container init was OOM-killed - ECS Task Container 에러 안녕하세요. J4J입니다. ECS Cluster를 생성한 뒤 Task를 정의하여 서비스에 등록하는 작업을 하다가 다음과 같은 에러를 마주했습니다. CannotStartContainerError: Error response from daemon: failed to create shim task: OCI runtime create failed: runc create failed: unable to start container process: container init was OOM-killed (memory limit too low?): unknown 로그를 확인해보면 메모리 문제라는 걸 명확하게 알 수 있었고, Amazon 공식문서를 확인해보면 다음과 같은 얘기를 확인할 수 있었습니다. 실행 중인 컨테이너.. 2022. 11. 2.
[AWS] Bastion 호스트로 SSH 접속하기 안녕하세요. J4J입니다. 이번 포스팅은 Bastion 호스트로 SSH 접속하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Bastion 호스트 사용 이유 Bastion 호스트는 내부 네트워크 영역과 외부 네트워크 영역을 서로 연결할 수 있도록 도와주는 호스트 서버입니다. Bastion 호스트를 활용하는 대표적인 케이스가 AWS에서 Private Subnet을 사용하는 경우입니다. Private Subnet을 사용하면 Subnet 네트워크 영역을 외부와 구분하여 보안 위협을 줄여주지만 반대로 개발 PC에서 인스턴스 서버에 SSH로 접근할 수 없는 등의 문제점도 발생시킵니다. 이런 경우 Bastion 호스트를 생성하여 Private Subnet과 외부 영역을 서로 연결함으로 써 Private Subn.. 2022. 10. 31.
[AWS] Private Subnet과 NAT Gateway 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Private Subnet과 NAT Gateway 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Private Subnet 사용 이유 Private Subnet은 외부에서 해당 Subnet영역에 속한 호스트들에 접근하지 못하도록 도와주는 네트워크 영역입니다. 즉, 동일 VPC 내부에 있는 호스트들끼리만 서로 접근이 가능합니다. 그렇기 때문에 Private Subnet을 사용하게 되면 작업하는 PC에서 서버의 SSH 접속조차 허용되지 않습니다. 이처럼 Private Subnet을 사용하면 발생되는 여러 불편한 점들이 있겠지만 그래도 Private Subnet을 사용하는 가장 큰 이유는 보안 때문입니다. VPC 외부에 있는 모든 네트워크 영역에서 Priva.. 2022. 10. 31.
[AWS] CloudWatch의 경보를 Slack으로 전달받기 안녕하세요. J4J입니다. 이번 포스팅은 CloudWatch의 경보를 Slack으로 전달받는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서... 서버가 특정 조건에 대한 기준점을 넘었을 때 경보를 발생시키기 때문에 사용 중인 EC2 인스턴스가 있어야 합니다. 인스턴스를 새롭게 만드시려는 분은 다음 글들을 참고 부탁드립니다. [AWS] EC2 인스턴스 생성하기 [AWS] EC2 고정 IP 사용하기 경보를 Slack으로 전달받는 이유 먼저 CloudWatch에서 경보를 등록해두는 이유는 서버에 특정 문제가 발생되기 전에 어떤 문제가 발생될 수 있는지에 대해 확인하기 위함입니다. 대표적인 케이스가 다음과 같이 있습니다. CPU 사용률이 특정 기준을 넘어갔는지 서버가 전달받는 요청 양이 특정 .. 2022. 10. 22.
[AWS] JMeter를 이용하여 EC2 부하 테스트하기 안녕하세요. J4J입니다. 이번 포스팅은 JMeter를 이용하여 EC2 부하 테스트하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서... EC2 부하테스트를 하는 것이기 때문에 당연히 사용 가능한 EC2 인스턴스가 하나 이상이 있어야 합니다. 인스턴스를 새롭게 만드려고 하시는 분은 다음 글들을 참고 부탁드립니다. [AWS] EC2 인스턴스 생성하기 [AWS] EC2 고정 IP 사용하기 또한 브라우저로 서버에 접속했을 때 특정 페이지가 뜨는 것이 필요합니다. 저는 간단하게 nginx 초기화면이 나오도록 설정했고, 저와 같이 설정하길 원하시는 분은 다음 글들을 참고 부탁드립니다. [Docker] Docker 설치하기 (Ubuntu 20.04) [Docker] Nginx 환경 구축 JMet.. 2022. 10. 19.
[React] 브라우저에서 암호화를 사용할 경우 발생하는 문제점 안녕하세요. J4J입니다. 이번 포스팅은 브라우저에서 암호화를 사용할 경우 발생하는 문제점에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서... 아래 글에서 사용될 암호화는 대표적으로 많이 사용되는 aes를 사용하려고 합니다. aes 암호화와 복호화를 위한 코드는 아래와 같고 자세한 설정 사항은 [React] AES256 암호화 (with. Java)를 참고해주시길 바랍니다. import cryptoJs from 'crypto-js'; const secretKey = '12345678901234567890123456789012'; // 32자리 비밀키 const iv = 'abcdefghijklmnop'; // 16자리 iv // 암호화 export const encrypt = (text: s.. 2022. 10. 17.
[React] webpack을 이용하여 sourceMap 제거하기 안녕하세요. J4J입니다. 이번 포스팅은 webpack을 이용하여 sourceMap 제거하는 방법에 대해 적어보는 시간을 가져보려고 합니다. sourceMap이란? sourceMap을 제거하기에 앞서 sourceMap이 무엇이기에 제거해야 되는지에 대해 먼저 알아보겠습니다. sourceMap은 빌드된 파일과 실제 개발할 때 사용된 파일을 연결 시켜주기 위해 사용됩니다. 일반적으로 배포를 하기위해 빌드를 하면 최적화 작업을 위해 사용되고 있는 HTML, CSS, JS 등이 난독화가 이루어지며 압축이 이루어집니다. 그렇기 때문에 에러가 발생되었을 때 빌드가 이루어진 파일로 확인하기가 쉽지 않은데, 이를 쉽게 확인하기 위해 원본 파일과 매칭 하여 에러난 부분이 어딘지를 확인할 수 있도록 도와주는 것이 sour.. 2022. 10. 12.
[React] 뒤로 가기 막기 안녕하세요. J4J입니다. 이번 포스팅은 뒤로 가기 막는 방법에 대해 적어보는 시간을 가져보려고 합니다. 뒤로 가기 막는 방법 리액트를 이용해 여러 UI/UX를 제공하다 보면 상황에 따라 뒤로 가기를 눌렀을 때 기존에 우리가 알던 방식처럼 이전 URL로 넘어가는 것이 아니라 특정 액션이 취해지는 결과를 만드실 필요가 있을 수도 있습니다. 흔히 사용되는 케이스는 아닐 것으로 생각되지만, 혹시나 필요하신 분들을 위해 제가 알고 있는 방법에 대해 간단히 적어보도록 하겠습니다. 먼저 다음과 같은 코드를 보겠습니다. import React, { useEffect, useState } from 'react'; const App = () => { const [toggle, setToggle] = useState(fa.. 2022. 10. 10.
728x90
반응형

티스토리툴바