범데이의 개발노트 📄

1. 실행중인 서비스를 죽이기 1.1 서비스 kill 일반적으로 실행중인 서비스를 죽이기 위해서는 다음 명령어를 사용한다. $kill -9 [PID] [사용법] PID는 process의 id를 뜻하며, -9 옵션은 프로세스를 강제 종료한다는 의미이다. (default는 -15이며, 정상종료를 뜻함) 실행중인 서비스를 죽이기 위해서는, 서비스의 PID를 알아야 하는데, 이를 위해선 다음 명령어를 사용한다. 1.2 서비스 PID 검색 $ps -ef | grep [regex] [사용법] 실행 중인 모든 프로세스 중 regex가 포함된 프로세스를 찾아서 목록으로 출력한다. 2. 실행중인 서비스를 죽이는 스크립트 생성 해당 스크립트를 작성하기 위해서는 다음과 같은 명령어를 .sh파일에 작성한다. $ps -ef |..

1. 개요 때는 웹사이트를 개발할 때의 일이였다. Tistory 블로그에 작성한 글을 크롤링하여서 웹사이트에 뿌려주고 싶은데, CORS에러가 발생하게 되었다. (CORS에 대해 알고자 한다면, 지난포스팅 참조) 웹사이트 상에서 직접적으로 axios 라이브러리를 통해 Tistory 게시글을 fetch하려고 하니, 당연하게도 origin이 달라서 브라우저에서 막는 것이었다. 그래서 해결하기 위한 방법 중 일종의 우회 서버를 두는 방식으로 해결을 하고자 하였고, 이에대해 오늘 포스팅 할 예정이다. 2. 서버 우회 환경 구축 아래 그림 중 서버 우회 환경을 구축하기 전의 흐름도는 아래의 좌측과 같고, 우회 서버를 거치는 방식은 우측과 같다. 좌측 방식은 Tistory글을 직접적으로 가져오려고 했지만, 우측 방식..

1. 개요 create-react-app을 통해 만든 React App의 경우 기본으로 3000번 포트를 사용해서 구동된다. 그러나 해당 3000번 포트가 겹치는 등의 사유로 따로 포트를 지정해줘야 할 상황이 생길 수 있다. 이와 같은 경우 포트를 변경해서 사용하는 대표적인 방법 세 가지를 정리해보고자 한다. (아래 내용들은 3001 포트로 변경한다고 가정한다.) 2. 포트 변경 방법 2.1 명령어로 포트 설정하기 - React 프로젝트 폴더에서 아래와 같은 명령어를 사용해 React 앱을 실행시킨다. (명령어를 통해 구동 시 한 번만 적용된다.) PORT=3001 npm start 2.2 package.json파일 설정 수정하기 - React 프로젝트 폴더에 ".package.json" 파일을 찾아 아..

1. Prettier 설치 Prettier는 독단적인 코드 포맷터입니다. 코드를 구문 분석하고 최대 줄 길이를 고려하는 자체 규칙으로 다시 인쇄하여 일관된 스타일을 적용하고 필요할 때 코드를 래핑합니다. (출처: Prettier 공식 설명 문서) VSCode의 사이드 탭에서 확장(Extension)탭을 클릭 후, prettier를 검색하여 설치해준다. 2. Prettier 적용 방법 Prettier를 프로젝트에 적용하는 방법은 세 가지가 있다. .prettier 설정 파일 적용(자주 사용됌) VSCode 전역 설정 파일 사용 Prettier 패키지 설치 후 CLI 사용(거의 사용하지 않는 방법) Prettier 적용하기 - .prettierrc파일 prettier는 기본적으로 프로젝트의 root에 있는 ..

1. 개요 때는 웹사이트를 개발할 때였다. 데스크탑 환경에서는 잘 보이던 글씨가, 모바일 환경에서는 너무 크게 보이는 문제가 있었다. 이를 해결하기 위해 font-size의 단위를 vw로 바꾸어주었더니, 글씨가 다음과 같이 보여지게 되었다. 당연하게도, 고정값을 지정하는 em단위를 상대적 크기 단위인 vw로 지정하니, 위와 같이 작아진 mobile해상도에서는 글씨가 알맞게 작게 보여지게 되었다. 그렇다면 오늘은 크기를 지정하는 단위 중 vw, wh가 무엇인지 알아보자. 2. vw와 vh vw = viewport width vh = viewport height viewport란 화면 Display상의 표시 영역을 뜻한다. 즉, vw와 vh는 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다. 100..

반응형 웹디자인이 대두되면서 점점 많은 웹사이트들이 em과 rem라고 불리는 CSS단위를 이용해서 스타일링이 되고 있다. 이번 포스팅에서는 상대 단위가 뭔지, em과 rem단위가 실제로 브라우저에서 어떻게 동작하는지 정확히 알고 좀 더 적재적소에 사용하는 방법에 대해 알아보고자 한다. 1. 상대 단위란? 상대(relative)단위란 고정되지 않고 어떤 기준에 따라 유동적으로 바뀔 수 있는 길이를 나타내는 단위이다. 본 포스팅에서 다룰 em, rem을 포함해 %, vw, vh등이 대표적인 CSS의 상대 단위이다. 반면 절대(absolute)단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위이다. 대표적으로 예전부터 현재까지 많이 사용되는 px와 pt를 들 수 있고, cm나 in와 같은 실생활에서 많이..

1. 개요 Javascript에서 변수 선언 방식에는 const, var, let이 있다. const는 값을 재할당 하지 않는 변수를 선언하기 위해 사용하는데, 특히 let과 var의 차이는 무엇일까? 이 둘의 개념을 알기 전에 호이스팅이라는 개념을 알아야 한다. 2. 호이스팅이란? 호이스팅이란 변수가 사용되기 전에 선언된 함수와 변수들을 메모리가 미리 기억할 수 있게 범위의 최 상단으로 끌어올리는 것을 의미한다. console.log(a) var a = 1 console.log(a) // undefined // 1 a변수가 선언되기 전의 라인에서 a를 사용할때에, 에러가 나오는 대신 undefined를 출력한다. 이는 아직 a가 할당되기 전 이라는 의미를 갖는다. 이는 바로 호이스팅때문인데, 자바스크립..

NodeSource에 의해 관리되는 PPA에서 원하는 버전의 NodeJS를 설치해 보자. 게시물 작성 일자 기준 LTS 버전은 16.15.0, Latest 버전은 18.1.0인데, 14버전으로 설치해본다. 설치 스크립트를 다운로드 한다. 설치 버전을 바꾸려면 setup_14 부분을 setup_10 으로 바꾸는 식으로 하면 된다. $curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_14_setup.sh 그 다음 다운로드한 스크립트를 실행시킨다. $sudo bash nodesource_setup.sh 실행이 끝나면, 다음 명령으로 PPA가 등록된 것을 확인해볼 수 있다. $apt policy 확인한 뒤에 apt로 설치하면 된다. $sudo apt i..

1. 전제사항 Docker가 설치되어 있음 NodeJS프로젝트가 준비되어 있음 포스팅하는데 사용한 프로젝트는 NodeJS express 웹 앱이며, 실행시 웹서버가 3000번 포트로 띄어져 REST API 요청 받아 처리 및 리턴해주는 역할을 해준다. 2. Dockerfile 생성 Docker를 사용하여 NodeJS 웹 앱을 도커라이징하면 모든 의존성을 소프트웨어 개발에서 컨테이너라고 부르는 표준화된 단위로 패키징할 수 있다. Dockerfile이라는 빈 파일을 생성한다. $touch Dockerfile 선호하는 텍스트 에디터로 Dockerfile을 연다. 처음으로 해야할 것은 어떤 이미지를 사용하여 빌드할 것인지를 정의하는 것이다. 이 포스트에서는 Docker Hub에 있는 node의 14버전을 사용할..

1. 개요 웹페이지를 개발하다보면 table을 그리면서 스크롤을 구현할 때가 있다. 다음 예제를 보며 따라해보자. HTML 삽입 미리보기할 수 없는 소스 한 테이블이 있고, 행의 수가 5개이다. 가령 이 테이블이 들어갈 공간이 매우 협소하여 150px높이 내에 이 테이블을 그려줘야 한다고 가정해보자. 그렇다면 열머리의 높이는 고정이나, 테이블의 행 수에 따라 tbody는 늘어날 것이기 때문에 높이값을 제한해줘야 한다. 2. 스크롤 적용 다음과 같이 table의 tbody의 max-height값을 지정해 주고, overflow-y를 scroll로 지정해주어 넘는 높이는 스크롤로 볼수있게 해준다. table tbody { display: block; max-height: 100px; overflow-y: s..