범데이의 개발노트 📄

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..

1. TOC란? Table of Contents, 목차이다. 내가 작성한 글의 markdown 소스에서 헤더 태그를 목차로 엮어 보기 쉽게 제공한다. 아래는 적용 결과이다. 티스토리 글 작성시 "제목1", "제목2" 서식과 같이 마크다운을 적용한 제목들을 간추려서 사이드에 목차로 보여지고, 이를 클릭하면 글에서 해당 제목 부분으로 이동한다. 2. 적용 방법 티스토리의 HTML과 CSS를 편집하여 적용할 수 있다. tocbot에서 제공하는 API를 사용하고자 한다. 1. HTML 편집 진입 블로그 관리 > 스킨 편집 > HTML 편집으로 이동한다. 2. CDN 추가 1. 아래는 실제로 추가한 사진이다. 2. 바로 위 부분에 스크립트 추가 로 끝나는 바로 위 부분에 다음의 script 코드를 추가한다. 스크..

1. Dockerfile이란? 도커 명령어로 컨테이너를 구성하기 위해서는 컨테이너 생성, 컨테이너 안에서 OS설정, 미들웨어 설치, 파라미터 설정 등은 모두 직접 수행해야 한다. 이러한 일련의 작업을 자동으로 수행하도록 스크립트로 만든 것이 Dockerfile이다. 이러한 Dockerfile은 필요한 환경설정이 모두 세팅된 image를 만드는 데 목적이 있으며, 또한 자동화로써 사용할 수 있고 스크립트이므로 변경해서 재사용할 수도 있다. Dockerfile의 내용은 아래와 같은 정보들을 기술한다: 베이스가 될 도커 이미지 도커 컨테이너 안에서의 수행할 명령, 조작 등 환경변수 등의 설정 도커 컨테이너 안에서 작동시킬 데몬 실행 2. Dockerfile의 기본 구문 Dockerfile은 텍스트 형식이며 확..

0. 서론 (서론을 읽는건 생략해도 된다.) 회사의 A사원과 B사원이 같이 협업하여 웹사이트 개발을 진행하는데, 서로의 호스트에 설치한 Angular의 버전이 달라서 한쪽에서 빌드가 되는데 한쪽에서 에러가 나는 상황이 발생하였다. 이에 따라 Docker에 대해 알아보고 구축한 후 개발을 재개하게 되었고, 위와 같이 각기 다른 호스트의 로컬 환경이 달라서 발생하는 이슈 문제는 없어지게 되었다. 1. Docker란? Docker는 애플리케이션을 신속하게 구축, 테스트 및 배포할 수 있는 소프트웨어 플랫폼이다. Docker는 소프트웨어를 컨테이너라는 표준화된 유닛으로 패키징하며, 이 컨테이너에는 라이브러리, 시스템 도구, 코드, 런타임 등 소프트웨어를 실행하는 데 필요한 모든 것이 포함되어 있다. Docker..