Etc
TIL | testing-library, Jest-Dom eslint 설정하기
Testing Library, Jest-DOM eslint 설정하기 plugin 설치 yarn add -D eslint-plugin-jest-dom eslint-plugin-testing-library eslint-plugin-jest-dom: jest-dom 체크를 위한 eslint 플러그인 eslint-plugin-testing-library: testing-library 체크를 위한 eslint 플러그인 package.json "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, 기존 package.json의 eslintConfig 부분 지워주기 eslintrc.json { "extends": [ "react-app", "react-a..
TIL | Atomic design pattern 간단 정리
Atomic Design 최근 사이드 프로젝트나, 개인적으로 atomic design을 접해볼 기회가 있었기에 간단하게 정리해보았다. Atomic Design이란? Atomic Design은 보다 신중하고 계층적인 방식으로 설계 시스템을 만들기 위해서, 함께 작용하는 5개의 단계로 이루어진 방법론이다. 5개의 단계는 Atoms, Molecules, Organisms, Templates, Pages가 존재한다. Atomic Design 5 stages 1. Atoms atoms는 atomic design에서 UI를 이루는데 필요한 기본적인 구성 요소 역할을 한다. label, inputs, buttons 등 기본적인 HTML 요소들이 포함되어 있다. 각각의 atom들은 고유한 속성들을 갖고 있다. 패턴 라..
TIL | Docker-compose 세팅 및 적용하기
Docker-compose Docker compose란? 다수의 컨테이너 운용을 용이하게 하기 위한 툴이다. yaml 파일 형태로 작성되며, 다수의 컨테이너 실행 관리를 가능케 한다. 일일이 커맨드를 입력하는 것이 아닌, 파일 하나로 docker 사용을 간편케 한다. 간단하게 정리하자면, dockerfile로 컨테이너의 세팅환경을 만들어준 후 docker-compose.yml 파일로 컨테이너들을 관리해준다. Docker-compose 세팅 docker-compose.yml 파일 세팅 # docker-compose.yml version: "3" # 도커 컴포즈 버전 services: # 실행하려는 컨테이너들을 정의 docker_compose_test: # 컨테이너 이름 build: # build 옵션(이미..
TIL | AWS EC2, pm2, nginx(reverse proxy) 사용하여 개발서버 외부 모니터링 환경 구축하기
AWS EC2, pm2, nginx(reverse proxy) 사용하여 개발서버 외부 모니터링 환경 구축하기 디자이너와 협업을 하는 과정에 있어서, 개발 프로젝트를 실시간으로 확인하고 피드백을 받을 수 있도록 pm2와 nginx을 사용하여 작업물을 공유할 수 있는 환경을 구성 및 정리해봤다. (개인 AWS EC2를 통해 구현한, 간단한 예제입니다.) nginx 설정 /etc/nginx/sites-available/default 파일 설정 server { listen 80; location / { proxy_pass http://127.0.0.1:3000; } } 내가 소유하고 있는 인스턴스 외부 IP로 접속하고자 할 경우, (http로 접속하며 기본 포트는 80번이다.) yarn start를 통해 SPA..
TIL | Docker CRA Dockerizing, 컨테이너 생성
Docker CRA Dockerizing, 컨테이너 생성 프로젝트 root 경로에 Dockerfile, Dockerignore 파일 설정하기 1. Dockerfile # node 베이스 이미지(v17이 최신 버전이고 v16이 LTS 버전인데, 17로 사용할 경우 오류가 발생하므로 v16.x로 이용하자 ) FROM node:16-alpine3.13 # 임시 컨테이너 내에 파일들이 위치할 디렉토리(WORKDIR을 설정하지 않아도 라이징은 가능하지만, 기존에 존재하던 파일을 오버라이딩하거나 디렉토리의 구조가 깔끔하지 않을 수 있기 때문에 지정해주는 것이 좋다.) WORKDIR /src/app # 임시 컨테이너 안에는 package.json 파일이 없기 때문에 이후에 실행될 RUN yarn가 정상적으로 제기능을..
TIL | Docker 컨테이너 쉘환경 접근 및 이미지 생성
Docker 컨테이너 쉘 환경 접근 및 이미지 생성하기 Docker 컨테이너 쉘 접속 sudo docker exec -it 'container id 혹은 names' sh exec: 컨테이너 외부에서, 실행중인 컨테이너에게 명령어를 전달할 수 있게 하는 명령어이다. it: 컨테이너를 종료하지 않고 터미널에 입력된 명령어를 전달하기 위해 사용한다.(exec과 많이 사용한다) sh: 쉘로 들어갈 수 있는 명령어 (해당 컨테이너에서 빠져나오고자 할때는 exit 혹은 Ctrl + d를 통해 종료한다.) Docker 이미지 생성하기(alpine baseimage 기준) 1. Docker file 작성 Docker 이미지를 만들기 위한 config 파일이다. 컨테이너가 어떻게 행동할 지에 대한 설정을 정의한다. 2..