[Web] SEO 와 metadata
·
Web
Search Engine Optimization 검색 엔진 최적화는 인터넷 브라우저에 검색시 검색의 정확도와 연관성을 높이는 기술이다. 보통 HTML 페이지는 tag 를 갖는데 여기에 다음과 같은 메타데이터를 포함한다. metadata tag title charset name content title 북마크 설정 또는 검색 결과에 쓰인다. charset ex) utf-8, 브라우저가 해당 웹 페이지를 해석하는 방식을 결정한다. name 과 content name 이 key, content 가 value 라고 보면된다. 보통 아래와같이 `author` , `description` 과 같은 값이 사용된다. description 은 검색시 해당 페이지 링크 밑에 설명으로 띄워지는 부분이다. `MDN Docs`..
URL vs URI
·
Web
URL vs URI URL URI 설명 Uniform Resource Locator 웹 주소, 네트워크 상에서 리소스가 어디있는지 알려주기 위한 규약. Unifrom Resource Identifier 논리적, 물리적 리소스를 식별하는 고유한 문자열 시퀀스 예시 https//192.168.0.1/index.html https//192.168.0.1/index 차이 특정 위치를 딱 집어줌 실제로 index라는 파일(자원)을 정확히 가리킴. 식별자로써 특정 위치를 가리키지는 못함. 실제로는 index라는 파일이 존재하지 않지만, 서버 내부에서 별도 처리하여 특정 파일 (리소스)를 가리키게함. URI는 URL의 수퍼셋으로, 모든 URL은 URI기도 하다. URL은 파일(리소스) 확장자까지 명시하여 재해석할 필..
Why should we use Short URL
·
Web
긴 메시지를 그대로 보내게 되면 160 Bytes 제한에 걸려 MMS로 전환되어 추가 요금이 발생할 뿐더러, 가독성도 좋지않다. 인스타그램의 긴 URL 데스크탑 웹 브라우저로 보면 이 정도면 길지 않다고 생각할 수 있지만, 모바일 환경에선 길어보인다. share Link https://www.instagram.com/p/CaMbMnJhhUJ/?utm_source=ig_web_button_share_sheet copy link https://www.instagram.com/p/CaMbMnJhhUJ/?utm_source=ig_web_copy_link embed code 어마어마 하게 긴 코드가 나온다. View this post on Instagram A post shared by 조수민 (@simya_do..
Node.js process 종료 이벤트 감지
·
Web/Nodejs
🎯 Goals Node.js 프로세스 종료시 이벤트를 발생, 감지한다. 자주 쓰이는 process event 의 용례와 주의사항을 알아본다. process.exit When to use? 프로세스 종료 이벤트를 감지거나 추가 작업을 하고 싶을 때 ex) 로깅 When this occur? exit 이벤트가 emit 되는 상황은 다음과 같다. 콜스택, 콜백큐, 잡큐가 모두 비워져서 더 이상 할 일이 없을 때 == 정상 종료 (exit code 0) process.exit(N) 로 직접 종료 이벤트 전달(emit). Exception 발생시 exit code 1 (단, process.on('uncaughtException') 미등록시) 등록했을 경우 exit code 0으로 종료 👉🏻 당연한 것이, 하나의 ..
node_modules 와 package.json
·
Web/Nodejs
🎯 Goals node_modules 한 프로젝트 내에 여러개 있으면 좋을까? package.json 한 프로젝트 내에 여러개 있으면 좋을까? 각 파일(모듈)이 패키지를 찾아가는 원리를 파악한다. node_modules 실제 라이브러리가 설치되는 디렉토리 모듈이 경로를 명시하지 않고 패키지 이름만 덩그러니 명시하면 이 파일 내에서 불러온다. // orchestration.ts // [CASE I] 패키지명만 명시 import axios from 'axios'; // [CASE II] 상대경로 지정 import requestConfig from '../../config/axiosRequestConfig.json'; // (생략) CASE I 현재 파일의 한 단계 상위디렉토리(src/node_modules)..
Webpack
·
Web
Concept .js, .css, .sass, .png 등 각종 리소스를 하나의 파일로 번들링하는 도구. Why to use? Resolve cross-browser issue Reduce amount of network load by integrating all files to bundling one. HTTP 1.1 까지는 한 번에 하나의 파일만 요청 - 응답하여 받기 때문에 웹 페이지의 구성파일이 총 100개라고 치면 100번 요청해야한다. 얼마나 비효율적인가? Configure webpack.config.js || webpack.config.ts Node.js + Typescript 기반의 프로젝트라면 다음과 같이 설정해볼 수 있다. 모르겠으면 그냥 복붙하자. 공식 문서를 참조한 주석을 상세히 달..