Til
TIL | 간단한 custom hook 만들어보기 1
간단한 custom hook 만들어보기 1 이 글은, 노마드코더의 실전형 강의를 참고하여 공부한 내용을 바탕으로 정리하였습니다. useInput (input을 위한 hook) useInput.ts import { useState } from "react"; const useInput = ( // 초기 상탯값 및 벨리데이터 함수(원하는 조건을 리턴하는 함수) 인자로 받음 initialValue: string, validator: (value: string) => boolean ) => { // 인자로 받은 값을 기준으로 useState 지정 const [value, setValue] = useState(initialValue); // validator 타입이 함수가 아닐시, early return if (..
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 | NEXTjs Build indicator 대신 Loading spinner로 변경하기
NEXTjs Build indicator 대신 Loading spinner로 변경하기 Nextjs에서 페이지 이동시 혹은 페이지 진입시 build 과정 동안 우측 하단에 나타나는 Build indicator 대신 페이지의 Loading Spinner 를 띄우기 위해 공식 문서를 참조하여 적용해보았다. Build Activity deActivate // next.config.js module.exports = { devIndicators: { buildActivity: false, }, }; build indicator를 비활성화하기 위해 next.config.js에서 위와 같이 설정해주었다. Loading spinner import React, { useState, useEffect } from "rea..
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 | CRA 없이 React 세팅하기
CRA 없이 React 개발 환경 구축하기 일반적으로 CRA(Create React App)을 사용하게 되면, 개발환경 세팅 시간을 단축시켜 빠르게 프로젝트를 시작할 수 있다. 하지만 추가적으로 웹팩과 바벨 설정 및 변경하며 커스텀할때 어려움이 발생할 수 있다. 또한 리액트 개발자로서, 관련 툴을 직접 사용하여 CRA 환경을 세팅할 줄 알아야한다고 생각했기에 처음부터 세팅을 직접 해보았다. 초기 세팅 ├── dist ├── public │ └── index.html ├── src └── index.tsx 위와 같이, 폴더 구조를 먼저 만들어준다. (CRA를 통해 프로젝트를 생성할 시 보게 되는 비슷한 구조이다.) dist: 빌드 파일이 위치할 경로 public: static 파일이 위치할 경로 src: ..