General

DNS, DNS 레코드

1. 개념 1.1. DNS란? DNS는 Domain Name System의 줄임말이다. 1.2. Domain Name Domain Name(도메인 네임)은 서버의 주소를 나타내는 고유한 문자열을 의미한다. google.com, naver.com, daum.net 같은 문자열이 대표적이다. 브라우저를 통해 google.com에 접속하는 것은 사실 구글 서버에 접속하는 것과 같다. 특정 서버에 접속하기 위해서는 서버의 ip주소를 이용해야 되는데, 단순한 숫자의 나열보다는 문자열을 이용하는 것이 사람 입장에서 기억하기도 쉽고 사용하기도 편리하기 때문에 ip주소를 문자열로 치환하는 과정이 등장하게 되었다. 즉 웹 브라우저에서 142.250.76.142를 굳이 입력하지 않아도, google.com 입력을 통해 g..

웹 폰트 표시에 대해 (font-display)

1. 웹 폰트에서 발생할 수 있는 문제 특정 웹 페이지에 들어갔을 때, 페이지의 글자가 늦게 뜨거나 글꼴이 갑자기 변하는 경우를 경험할 수 있었다. 대표적인 경우가 내 개인 프로젝트였다. 이처럼 개발자의 의도대로 글자가 제대로 표현되지 않는 이유는, 웹 페이지에 적용할 폰트가 완전히 로드되지 않았기 때문이다. 참고로 위의 페이지에서는 'Neo 둥근모꼴' 웹 폰트를 적용하였다. 웹 폰트 표시에 관한 이슈는 아래의 경우에서도 볼 수 있다. 2016년 미국의 상원 의원인 Mitt Romney에 관한 기사에서, 웹 폰트가 로드되기 전과 로드된 이후의 화면을 비교한 사진이다. 단순한 강조를 위해 Not에 웹 폰트를 적용하였지만, 제대로 로드되지 않아 Not이 보이지 않게 되었고, 그 결과 기사의 제목은 완전히 다..

Globs

1. 소개 매턴 매칭 문법이다. 정규표현식을 떠올리면 쉽다. 다만 정규표현식은 다양한 용도에서 범용적으로 사용할 수 있지만, Globs는 주로 파일 시스템 검색 용도로 사용한다. 또한 둘 사이에 적용되는 문법도 약간 차이가 있다. 2. 기호 2.1. ? 정확히 한 글자와 매칭된다. (정규표현식에서 가장 비슷한 역할은 . 기호이다) 예를 들어 a? 라면 aa, ab, ac, ad 등등의 문자열과 매칭된다. 이때 ?는 한 글자와 매칭되기 때문에 a?는 abb acc add와는 매칭되지 않는다. 연속으로도 사용할 수 있다. 예를 들어 e?? 라면 egg, ear, era, ego, end 등등이 매칭된다. 결과적으로 다음과 같다. # 패턴 src/e??.txt # 매칭되는 경우 src/egg.txt, src/..

CRP (Critical Rendering Path)

1. 개념 html, css, JavaScript를 브라우저 화면에 표시하는 일련의 단계를 의미한다. -MDN- 2. 전반적인 과정 브라우저에 url을 입력하여, 서버에 HTML 데이터를 요청한 뒤 응답으로 받아옴. html을 파싱 하며 DOM 트리 생성. CSS를 로드하는 태그를 만난 경우, html의 파싱이 중단되고 css를 파싱 하여 CSSOM 트리 생성. JavaScript를 불러오는 하지만 html 문서가 JavaScript 코드에 의존적이라면, 이 방법도 UX에 좋지 않을 수 있다. 텍스트나 요소가 표시만 될 뿐, JavaScript가 완전히 실행되기 전까지는 JavaScript를 이용한 웹 페이지의 기능이 동작하지 않기 때문이다. 3.3. 병렬 처리 태그에 async나 defer 옵션을 줄 ..

husky로 commit lint 사용하기

1. husky 사용이유 git으로 무언가를 명령할 때 (commit, push 등), 명령이 수행되기 전 특정 작업이 먼저 진행되게끔 하고싶을 때 사용한다. 대표적으로 commit 메시지를 작성했을 때, commit을 수행하기 전 작성한 메시지가 컨벤션에 맞는지 맞춤법 검사를 수행하는 경우가 있을 수 있고, 혹은 push를 하기 전 test를 돌리는 경우도 있다. 이처럼 git 명령이 수행되기 전에 이를 가로채서(hooking, 후킹) 특정 작업을 먼저 실행시킨 이후에 git 명령이 수행되게끔 해주는 라이브러리가 바로 husky이다. husky가 수행할 작업을 따로 정의하여 저장한다면, git을 이용하여 협업하는 모든 사람들이 같은 정책을 따를 수 있기 때문에 코드 품질 뿐만 아니라 git log의 품..

Semantic Version (SemVer)

1. 개념 맥락을 고려하여 버전을 부여하는 것을 의미한다. 버전을 표기할 때 일관된 규칙을 적용하면 개발자 입장에서는 프로그램의 버전을 관리하는데 매우 용이해진다. 또한 오픈소스를 사용하는 개발자의 입장에서도 해당 오픈소스의 버전 변화에 따른 대응을 하기 더욱 수월해진다. 2. 규칙 이전 버전과 호환이 되지 않을 정도의 큰 변화가 있다면 major를 올린다. 새로운 기능이 추가되었으며, 이전 버전과 호환이 될 때는 minor를 올린다. 자잘한 버그가 수정되었을 때는 patch를 올린다. (물론 이전 버전과 호환되어야 한다) 3. 버전 범위 표현에 관한 문법 (npm) 3.1. 쓰는 이유 package.json이나 package-lock.json을 보면 몇몇 dependency의 버전 앞에 특수한 기호가 ..

REPL

1. 의미 Read Eval Print Loop(읽기 평가 출력 반복)의 줄임말 쉽게 생각해서, 코드를 입력하면 그 결과가 바로바로 출력되는 환경을 의미한다. 2. 상세 1. Read 코드를 읽는다. 2. Eval evaluation의 줄임말로, 코드를 해석(평가)하고 실행한다. 3. Print 코드 실행결과를 출력한다. 4. Loop 위의 3단계를 반복한다. 3. 참고 REPL을 가장 많이 접할 수 있는 경우는, 브라우저의 콘솔에서 JavaScript를 실행하는 경우와, 터미널에서 Python을 실행하는 경우이다.

SEO(Search Engine Optimization)

1. 개념 Search Engine Optimization (검색엔진 최적화) 개인 신상정보와는 다르게, 서비스하고자 하는 사이트는 검색 엔진(Google, Naver 등)에 잘 노출되어야 한다. 노출이 잘 된다는 것의 의미는, 특정 키워드를 검색했을 때, 검색 결과에 내 사이트가 최대한 상단에 나타나는 것을 뜻한다. 특정 사이트에 접속할 때, 북마크를 해놓거나 혹은 직접 사이트 주소를 입력해서 접속할 수도 있지만, 웬만해서는 검색을 통해 접속하는 경우가 많기 때문이다. 서비스하고 있는 사이트의 유입 인원이 많을 수록, 광고 수익이나 사이트가 제공하고 있는 비즈니스 모델을 통한 수익을 얻을 확률이 높아지기 때문에, 사이트가 잘 노출되도록 작업하는 과정은 필수에 가깝다. 2. SEO 과정 2.1. 내부 설..

chmod

1. 개념 change mode의 축약어로, 파일이나 디렉토리의 권한을 변경하는데 사용하는 명령어이다. 1.1. 사용자 구분 총 3개의 파트로 구분할 수 있으며, 순서대로 '소유자', '속한 그룹', '그 외 유저'로 나눌 수 있다. 1.2. 권한 구분 읽기 권한(r), 쓰기 권한(w), 실행권한(x)로 구분할 수 있다. 또한 각 권한은 숫자가 부여되어 있는데, 아래 표와 같다. 권한 종류 숫자 읽기 권한(r) 4 쓰기 권한(w) 2 실행 권한(x) 1 1.3. 예시 첫 번째 줄 파일의 권한은 다음과 같다. (소유자-읽기/쓰기 가능, 그룹-권한없음, 그 외-권한없음) 두 번째 줄 파일의 권한은 다음과 같다. (소유자-읽기/쓰기 가능, 그룹-읽기 가능, 그 외-읽기 가능) 2. 권한 부여 방법 앞서 설명한..

LF (CRLF)

1. 개념 개행을 수행할 때의 방식을 의미한다. 타자기에서 유래한 용어이다. 1.1. LF (Line Feed) 타자기에서 용지를 한 칸 위로 올리는 작업을 뜻한다. 코드 에디터에서는 new line을 생성하는 작업을 의미한다. (\n) 1.2. CR (Carriage Return) 타자기에서 용지를 맨 끝으로 이동시키는 작업을 뜻한다. 코드 에디터에서는 커서를 현재 라인의 맨 앞으로 이동시키는 작업을 의미한다. (\r) 2. 상세 과거의 타자기는 개행 처리를 하기 위해서 CRLF를 해야 했다. 종이를 한 칸 올린 다음(LF), 종이를 끝으로 이동시켜야(CR) 개행한 것과 같기 때문이다. (위 짤의 종이를 잘 보면 CRLF가 일어나는 것을 볼 수 있다) 컴퓨터가 개행을 하는 방식은 운영체제별로 조금 상이..