설치 환경 및 버전 Version CentOS CentOS Linux release 7.9.2009 (Core) d ElasticSearch 다운로드 페이지 에서 나온 대로, 설치를 진행한다. 텍스트 편집기로 elasticsearch.repo를 만들고, 아래 내용을 복사한다. $ vi /etc/yum.repos.d/elasticsearch.repo [elasticsearch] name=Elasticsearch repository for 8.x packages baseurl=https://artifacts.elastic.co/packages/8.x/yum gpgcheck=1 gpgkey=https://artifacts.elastic.co/GPG-KEY-elasticsearch enabled=0 autore..
ElasticSearch란? 루신 기반의 오픈 소스 검색 엔진이다. Elasticsearch의 특징 1. 준 실시간 검색 엔진이다. ElasticSearch는, 실시간이라고 생각할 만큼 색인된 데이터가 매우 빠르게 검색된다. 이 때, refresh_interval이라는 파라미터의 영향을 받는데, 이를 조절하면 특정 시간 이후에 검색할 수 있게 해 준다. 2. 클러스터 구성이 가능하다. 한대 이상의 노드를 클러스터로 구성하여 높은 수준의 안정성을 이루고 부하를 분산할 수 있다. 클러스터를 구성하고 있는 모든 노드는 메시 형태로 요청을 주고받기 때문에 어떤 노드에서도 색인/검색 작업을 처리할 수 있게 된다. 3. 스키마리스. Mysql, Maria DB 등의 RDBMS들은 테이블을 만들고 테이블에 입력할 데..
서론 지금껏 Docker를 개인 NAS 에 서버 올리는 용도로 간단히 공부하여 잘 쓰고 있었다. 그러나 그는 CentOS 이미지를 올렸을 때 나오는 D-Bus문제에 직면했고... 어떻게든 해결은 하였으나 이렇게 된 김에 처음부터 다시 공부해보기로 하는데.. 클라우드란 무엇인가? 클라우드란, 인프라에 사용되는 서버, 저장소, 데이터베이스, 네트워크, 소프트웨어, 데이터 분석 등을 포함해 사용자가 언제든지 인터넷과 모바일 등을 통해 IT서비스를 제공받을 수 있도록 하는 컴퓨팅 기술이다. 클라우드의 주요 기능으로는 클러스터, 가상화, 분할, 프로비저닝, 자율 컴퓨팅, 그리드 컴퓨팅 등이 있다. 이름 설명 그리드 컴퓨팅 가상 네트워크를 이용하여 분산된 컴퓨터 자원을 공유하도록 하는 기술 방식. (인터넷의 유휴 ..
CRA(Create React App)로 만든 Application에서 저장소에 커밋하고 내려받을 때 /node_modules/.bin 파일들의 심볼릭 링크가 사라져서, react-script가 실행되지 않는 오류가 발생했다. 그래서, 직접 경로를 지정해 주었다. // package.json { "scripts": { "start": "export PORT=8080 && node_modules/react-scripts/bin/react-scripts.js start", ... } } 하지만 조치해주었음에도 불구하고 아래와 같이 xdg-open 에러가 발생했다. $ npm start Starting the development server... node:events:505 throw er; // Unhan..
이미지 사이즈 최적화 웹 개발에는 많은 이미지들이 사용되는데, 사이즈가 너무 크면 느려지고 너무 작으면 화질이 저하되는 문제가 있다. 어떤 이미지 사이즈가 적절할까? F12의 Lighthouse 탭을 이용하여, Opportunities 섹션 중 Properly Size Images 를 클릭해서 확인하면, 적절한 사이즈를 사용하도록 제안한다. 그리고 실제 해당 이미지를 사용하는 곳에 가서 커서를 올려 놓으면 아래와 같이 실제로는 120 * 120px로 렌더링되지만, 1200 * 1200px사이즈 이미지를 가져왔음을 알 수 있다. (여기서 권장되는 사이즈는, 실제 렌더링되는 사이즈의 *2 정도라고 한다.) 우리가 해당 이미지를 가지고 있다면 직접 툴로 수정할 수 있지만, API 호출 등으로 불러오는 경우 이..
먼저 Front-end 웹 성능은 크게 로딩 성능과, 렌더링 성능으로 결정된다. 로딩 성능 서버에 있는 웹 페이지와 웹 페이지에 필요한 기타 리소스를 다운로드할 때의 성능 ex. 고화질 이미지 등이 포함되어 있을 때 느린 인터넷 환경에서 늦게 표시되는 것. 로딩 성능을 개선하는 가장 좋은 방법은, 다운로드해야 하는 리소스 수를 줄이거나 크기를 줄이는 방법이 있다. 렌더링 성능 다운로드한 리소스를 가지고 화면을 그릴 때의 성능 코드를 실행하여 화면에 보여주는 과정. 렌더링 성능에 가장 크게 영향을 주는 것은 Javascript 코드로, JS 코드를 얼마나 효율적으로 작성했는지에 따라 화면이 그려지는 속도와, 사용자 인터랙션의 자연스러운 정도가 달라진다. 개발자 도구 탭 종류 분석 툴은 크롬의 개발자 도구(..
이번엔 React에서 적용해 보았다. 예제 프로젝트 생성 $ npx create-react-app tdd_test_react $ cd tdd_test_react My-Button.js const MyButton = ({ onClick, disabled, children }) => ( {children} ); export default MyButton; 간단한 Button 컴포넌트를 제작한다. My-Button.test.js import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import MyButton from './My-B..
JS에서 테스트 자동화를 사용할 때 사용하는 도구는 아래와 같다. 이름 간단 설명 Jest Facebook에서 만든 프레임워크로, JS를 위한 강력하고 사용하기 쉬운 테스트 도구 Mocha 유연하고 확장성이 높은 프레임워크로, 다양한 플러그인과 어설션 라이브러리를 지원 Cypress 최근 웹 어플리케이션을 위한 end-to-end를 위한 도구로, 자동화된 브라우저에서 테스트를 실행할 수 있다. Puppeteer Google에서 만든 Node.js용 웹 스크래핑 및 자동화 라이브러리로, 웹 어플리케이션의 UI 테스트와 end-to-end 테스트에 적합하다. 순위는 아래와 같다. 이외에도 다양한 종류의 도구들이 있지만, 공부해볼 도구는 가장 많이 사용되고 있는 Jest에 대해 알아보려고 한다. 먼저 자바스크..
우선 TDD의 정의는, 아래와 같다. 테스트 주도 개발은 Test-Driven Development의 약자로, 테스트가 코드 작성을 주도하는 개발 방법이다. 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현한다. TDD 진행 단계 테스트 코드 작성: 먼저 작성할 기능에 대한 테스트 코드를 작성한다. 이때, 실패할 것으로 예상되는 테스트를 작성한다. 테스트 실행: 작성한 테스트 코드를 실행하고, 테스트가 실패하게 된다. 기능 구현: 테스트가 성공하도록 기능을 구현한다. 리팩토링: 구현한 코드를 리팩토링하여, 테스트가 성공하는지 확인한다. TDD 사용 시 장점 안정성 증가: TDD는 테스트를 먼저 작성하므로, 코드가 기대한 대로 작동하는지 항상 확인할 수 있다. 이는 ..
Redux-Saga를 공부하면서 Generator이라는 문법을 알게 되었는데, 이에 대해 확인해 보려고 한다. 개요 A generator is a process that can be paused and resumed and can yield multiple values. (Generator는, 일시 정지 및 다시 시작할 수 있고 여러 값을 생성할 수 있는 프로세스다.) 직접 해보기 Generator은 함수와 비슷하게 생겼는데, 동작 방식이 다르다. // function 뒤에 *가 붙는다. function* myGenerator() { console.log('시작!'); yield 1; console.log('hello!'); yield 2; console.log('world!'); return 3; } ..
