전체 글

[Jenkins] Linux EC2에서 Jenkins 설치하기(Java 11버전 설치)

1. 개요 새로 ec2 인스턴스에 jenkins를 설치하려고 하니 java version 이슈가 있어서 설치가 곤란했었던 터라, EC2 인스턴스의 Linux 환경에서 Jenkins를 설치하는 과정을 정리해보려고 합니다. 2. Jenkins 구동 실패 jenkins.service - Jenkins Continuous Integration Server Loaded: loaded (/usr/lib/systemd/system/jenkins.service; disabled; vendor preset: disabled) Active: failed (Result: start-limit) since 목 2022-06-30 08:32:00 KST; 7s ago Process: 7079 ExecStart=/usr/bin/..

[React] 콜백에서의 useState, useEffect 사용 이슈

1. 개요 위 아래로 스크롤 할 때, 섹션별로 스크롤이 이동하는 기능을 구현하는 과정에서 scroll event를 사용하게 되었는데, 이때 event가 발생할 때 콜백으로 scroll section index 값을 변경하려고 했습니다. 이때, 스크롤 인덱스가 무조건 변경되는 것이 아니라, 인덱스가 특정 범위를 넘지 않도록 필터링을 하는 조건을 추가하였는데요. useEffect의 dependency로 등록한 scrollIndex의 console은 잘 찍히는 반면, 필터링하는 부분에서의 scrollIndex 값은 1로 고정이 되어 있었습니다. 사용된 코드 const outerDivRef = useRef(); const windowSize = useRef(getWindowDimensions()); const ..

[React] Redux Toolkit 에서의 비동기 처리(createAsyncThunk, extraReducers)

1. 개요 앞서서 Redux Toolkit의 상태관리를 위한 기본적인 사용법에서 알아보았는데요, createSlice()를 통해 Slice라는 것을 생성하며, 여기에 초기 default 값과 dispatch를 통해 호출할 reducer 함수를 지정했었습니다. 프로그램 개발을 하다보면, 전역에서 자주 사용되는 api를 호출하거나, api 호출한 결과를 여러 군데에서 사용해야 할 상황이 생기는데, 이와 같은 비동기 처리를 redux store에서는 자체적으로 하지 못하는 단점이 있습니다. 따라서 Redux를 사용할 때는 redux-thunk, redux-saga와 같은 미들웨어를 사용해서 비동기 처리를 진행했습니다. 하지만 위의 기능들 같은 경우 Redux와 같이 사용하기 위한 러닝커브가 조금 있기 때문에,..

[React] Redux Toolkit 사용법

1. 개요 React에서 상태관리 툴로 Redux를 사용하는데, Redux를 사용하기가 상당히 까다롭고 진입장벽이 높습니다. 액션 함수, 액션 생성 함수, 리듀서, 스토어... 또 타입스크립트를 쓰게 되면 해당 타입을 또 일일히 지정해주어야 하고 관리할 상태값이 1개가 생길 때마다 작성하는 코드도 많아집니다. 가독성도 안좋아지고요... 이러한 문제 때문에 상태관리를 도와주는 라이브러리가 등장하게 되었는데, 사실 Redux Toolkit보다 더 직관적이고 좋은 라이브러리는 많습니다. 다만 상태관리라는 개념에 대해 정확하게 알고 사용하는 것이 좋을 것이라고 생각이 되어 Redux를 먼저 사용해보고 그 Redux를 편리하게 만든 Redux Toolkit에 알아보려고 합니다! 2. 설치 공식사이트는 아래와 같습..

[CSS] 자주 쓰는 CSS 정리

1. img, video 등 오브젝트 요소에는 object-fit: cover 속성을 사용 내용의 크기가 요소의 크기와는 상관없이 기본 알고리즘에 의해 조정된다. 이 알고리즘은 원본의 크기에 가운데 정렬된 형태를 띈다. 2. 반응형 css 작업 우선순위 레이아웃을 작성할 때 반응형으로 작업하고 있고, 반응형을 나누는 기준이 min-width라면 모바일 크기부터 데스크탑으로, 작은 화면에서 큰 화면으로 우선순위를 맞춰서 작업한다. 3. display: flex 사용 되도록이면 flex를 사용하되 flex를 아무 이유 없이 남발하지 말것. flex 밑의 자식은 flex-item이 된다. flex-item이 1일 경우 flex: 1 1 0이 된다. grow: 늘어남 / shrink 줄어듬 flex-grow가 ..

[Typescript] 자주 쓰는 문법 정리

1. 배열 // default let list: number[] = [1,2,3]; // or let list: Array = [1,2,3]; // interface array interface EnumServiceItem { id: number; label: string; key: any } interface EnumServiceItemList extends Array{} // using var result: EnumServiceItem[] = [ { id: 0, label: 'CId', key: 'contentId' }, { id: 1, label: 'Modified By', key: 'modifiedBy' }, ]; 2. 인터페이스 상속이 가능하다. interface PeopleInterface {..

[ElasticSearch] Logstash No configuration found in the configured sources. [에러해결]

1. 개요ElasticSearch에 Logstash의 배치 스케쥴러를 사용하려고 했는데 configuration을 못찾는다는 오류가 발생했습니다.config폴더에 pipelines.yml과 logstash.conf 파일은 바꾼적이 없는데 말이죠.  2. 에러해결구글링을 해본 결과...<p data-k..

[Git] 변경된 내용 삭제(git reset)

1. 개요 서버에서 서비스 중인 프로그램에 대해 업데이트를 진행할 때, 우연찮게 서버 내부에서 수정사항이 발생하고, 이 수정사항에 대해 git에 반영하지 않고 변경된 내용을 삭제하고 단순하게 pull만 받고 싶을 때가 있습니다. 2. 코드 git reset git checkout . git clean -fdx 1번째 줄 : 모든 staged된 파일이 unstage됩니다(실수로 커밋했을 경우, 로컬에서 unstage) 2번째 줄 : 모든 변경 사항을 취소합니다. 3번째 줄 : 추적할 수 없는 모든 파일 제거(추적된 파일만 남습니다) 이후에 git pull로 변경된 내용을 받고 서비스를 진행하면 됩니다. 참고 https://extbrain.tistory.com/83 [git] 커밋되지 않았거나 저장되지 않은..

[ElasticSearch] logstash + mysql window 환경 연동

1. 개요 ElasticSearch에 RDB로 이용하고 있는 mysql 데이터를 적재하고 싶어서 찾아보다가, elk의 스택인 logstash를 이용해서 batch job 형태로 주기적으로 적재할 수 있는 방법을 찾게 되었습니다. 일단은 테스트 용도이기 때문에, 윈도우 환경에서 작업을 했고, 리눅스 환경에서의 예제는 많지만 윈도우 환경에서의 예제는 없는 것 같아 정리해보려고 합니다.(elk가 생각보다 상당히 리소스를 많이 차지합니다) 2. 준비물 1) ElasticSearch https://www.elastic.co/kr/downloads/elasticsearch Download Elasticsearch Download Elasticsearch or the complete Elastic Stack (for..

[ElasticSearch] Insert(생성), Search(조회) 기본적인 CRUD

1. 개요 RDB를 하다가 ElasticSearch를 찾아보는데, 개념 자체가 RDB랑은 많이 달라서 최대한 알기 쉽게끔 필요한 기능만 정리를 해보려고 이 글을 작성해봅니다. 클러스터, 샤드랑 노드, 인덱스, 다큐먼트 등 개념적인 부분은 이 글에서는 다루지 않겠고, 아래 가이드북 링크를 참고해주시길 바랍니다. https://esbook.kimjmin.net/03-cluster/3.2-index-and-shards ElasticSearch 버전은 7.0버전 이상의 버전으로 진행합니다. 7.0버전부터 type이 사라졌기 때문입니다. 2. 클러스터 관련 Rest API 1) 클러스터 상태 조회 # curl -XGET http://localhost:9200/_cluster/health?pretty=true * ..