FRONTEND/기타

[yarn-package 배포] 나만의 boilerplate 만들기 (with inquirer)

사이드 프로젝트나 기업 과제를 수행할 때, 매번 새롭게 프로젝트 환경을 세팅해줘야 했는데, 프로젝트 기획에 맞춰서 달라지는 부분도 있지만, 거의 비슷하게 가져가는 스택은 그야말로 boilerplate였다. 그런 단순 반복 작업을 피하고자 이번에 날잡고 내 입맛대로 세팅한 '나만의 boilerplate'를 만들어보았다. 이 글은 제작 과정과 트러블슈팅에 대한 내용을 담고있다. workflows bolierplate 제작 1. 내 입맛대로 세팅한 boilerplate 제작 2. boilerplate github push yarn package 배포 1. 배포용 package 제작 2. yarn publish --access public 설치 테스트 1. 빈 폴더 생성 2. npx create-tangjin-..

[CI/CD] Docker-compose + github-actions + EC2 적용기

면접어때 프로젝트의 CI/CD를 적용하는 과정에서 생겼던 트러블 슈팅을 기록해보려고 한다. 목표 main 브랜치에 코드 변경이 일어나면 자동으로 EC2 서버에 배포된다. workflows feature-example -> main merge github-actions에서 감지 Docker Image build -> DockerHub push EC2 접속 및 docker-compose로 컨테이너 실행 배포 완료 CI/CD를 진행할 면접어때의 프로젝트 환경은 Next.js + Docker-compose + AWS EC2 + github-actions 이다. 필요한 중요 파일은 3가지로 다음과 같다. github-actions.yml docker-compose.yml DockerFile 먼저 해당 브랜치의 a..

Linux 폴더 권한 확인 + 권한 설정

이번에 폴더 권한 에러를 겪으면서 폴더 권한을 확인하고 새롭게 설정하는 Linux 명령어에 대해 정리해 보려고 한다. 폴더 권한 확인 명령어 ls -ld 폴더 결과 예시 : drwxr-xr-x 3 user group 4096 Jan 24 10:00 폴더 해당 결과를 나눠서 살펴보자. drwxr-xr-x d : 디렉토리를 나타낸다. 파일인 경우 ' - ' 로 표시된다. r : 읽기 권한 w : 쓰기 권한 x : 실행 권한 rwx를 한 묶음으로 왼쪽부터 소유자 권한, 소유 그룹 권한, 기타 사용자 권한 순으로 표시된다. 따라서 위 drwxr-xr-x의 뜻은 디렉토리이며, 소유자는 읽기,쓰기,실행 권한이 있고, 소유 그룹과 기타 사용자는 읽기와 실행 권한만 있다는 뜻이다. 3 링크 수 : 권한 표기 다음에 나..

테스팅 그게 뭐죠? (feat. Jest, react-testing-library)

이번에 리액트 컴포넌트 테스팅에 대해 공부하면서 알게된 내용들을 정리해보려 한다. 코드 테스트가 필요한 경우 코드 작성 후 원하는대로 동작하는지 확인할 때 버그 발생 시, 어떤 상황에서 버그가 발생하는지 알기위해 (ex array가 empty일때만 버그일경우) 코드 리팩토링 후 제대로 동작하는지 확인할 때 테스팅 장점 미연에 에러 방지 가능 TDD(Test Driven Development) 등의 방법론을 적용해서 생산성을 향상시킬수있음 무조건 실패하는 케이스를 미리 작성하고, 이걸 하나씩 success시켜가면서 완성시키는 코드 작성 방법 테스트가 늘어나면서 테스트 코드 자체가 구현 코드에 대한 문서가 됨 테스트가 용이하게 코드를 작성하므로써 코드 품질과 코드의 신뢰성을 높힌다.(단위별로 나눠 작성) -..