본문 바로가기

Etc26

TIL | git 폴더명 대소문자 이슈 git 파일 및 폴더명 대소문자 오류 최근 프로젝트를 진행하면서 컴포넌트의 폴더 구조 및 이름을 수정하던 도중, 폴더 명의 대소문자를 변경했음에도 불구하고 해당 변경 사항이 반영되지 않은 채 dev에 merge 되어 빌드 오류가 지속적으로 났다. 확인해보니 git config core.ignorecase에 대한 이슈였다. git config core.ignorecase Internal variable which enables various workarounds to enable Git to work better on filesystems that are not case sensitive, like APFS, HFS+, FAT, NTFS, etc. For example, if a directory list.. 2022. 1. 29.
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.. 2022. 1. 15.
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들은 고유한 속성들을 갖고 있다. 패턴 라.. 2022. 1. 10.
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 옵션(이미.. 2021. 12. 5.
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.. 2021. 12. 3.
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가 정상적으로 제기능을.. 2021. 11. 26.