[Nodejs] 웹 개발 초보자가 알아야할 필수 정보들

저도 얼마 안된 입문자 이기 때문에

여러가지 알아가면서 계속 추가할 예정입니다.

 

 

 

 

글자 format

글자를 일일히 더하기엔 너무 귀찮음 "가"+"나"+"다"+"라"

물론 이런 포맷 방법도 있음 "{0} + {1} = {2}".format(4, 5, 9)

하지만 젤 편한건 역시, 템플릿 리터럴(₩₩, 백틱)을 이용한 방식.

const name = '가나'
const test = `

 ${name} hi~
 
 `

백틱(₩, 1옆에 있는거)을 이용해서 적으면

엔터를 위한 개행문자도 필요없고

변수로 대체하기 위해 ${}를 사용하면, 순서를 외우거나 ""쌍따옴표로 끊었다가 + 하고 변수 넣고 하는 귀찮은 작업이 없어짐.

 

 

 

 

 

소스코드상에 숨기고 싶은 데이터

process에 있는 env 영역을 이용해서 사용함.

이렇게 하기보단 dotenv 라이브러리를 설치하고

.env 파일로 관리함.

 

 

 

 

vscode에서 작업할때 디버깅 방법

./vscode/launch.json 파일안에 아래 처럼 configuration을 추가해야됨. 

env 파일까지 지정해줘야함.

{
    "version": "0.2.0",
    "configurations": [  
        {
            "type":"pwa-node",
            "request": "launch",
            "name":"Nodejs Debug !!",
            "program": "${workspaceFolder}/index.js",
            "envFile": "${workspaceFolder}/.env",
            "skipFiles":[
                "<node_internals>/**"
            ]
        }

    ]
}

 

 

 

http api를 호출할때 쓰는 라이브러리

request는 deprecated됨, 거기다 promise 지원 안함

node-fetch 아님, 이건 클라이언트에서 쓰는거,

axios 라이브러리가 request 상위 호환버전이라, 서버사이드&클라이언트사이드에서 많이씀

let qs = {
    broadcaster_id:`${streamer.user_id}`,
} 
    
const options = { 
    url:'https://api.twitch.tv/helix/channels/followers',
    method:'GET',  
    headers:headers,
    params:qs
};

const response = await axios(options)

if(response.statusCode != 200){
    return;
}

//data
const data = response.data

axios.get, axios.post 할필요없이 options으로 퉁치는게 젤 편함.

 

 

 

 

반복작업을 스케줄링할때

cron이라는 라이브러리를 이용해서 작업을 사용함.

일반적으로 * * * * * 별 5개를 이용해서, 분,시,일,월,년 을 지정해서 반복할 수 있고

초 단위까지 필요하다면 * * * * * * 별 6개를 이용하면 됨.

반복시키고 싶은 별 위치에 / 슬래쉬를 이용해서 반복 조건을 추가할 수 있음

착각 하는 포인트라면, 1시간 마다 반복하게 만들때, * */1 * * *  이게 아니고 0 */1 * * * 이다. 

여기 링크로 들어가면, 어떤 조건이 어떻게 반복되는 조건인지 미리 알 수 있음 https://crontab.guru/#0_*/1_*_*_*

 

 

 

 

 

 

좀비서버 & 핫-리로드

nodedemon 라이브러리를 이용해서 부팅함.

서버가 죽으면 다시 살려주고,

무엇보다 로컬에서 소스코드 파일이 변경되면 자동으로 hot-reload 해줌.

 

 

 

날짜 관련

기본 함수인 Date를 이용하지만, 날짜 계산에 무리가 있음

그래서 date-fns 라이브러리를 이용함.

 

 

 

UUID

universal unique id, 

직접 만드려면 너무 귀찮음.

옛날 방식이 인터넷에 너무 많아서 햇갈림.

uuidv4 라이브러리 추가하고

const { v4: uuidv4 } = require('uuid')
const key = uuidv4()

 

이런식으로 이용함.

 

 

 

CommonJS에서 ESM으로 변화중

#dotenv 경우.
require('dotenv').config() 
에서

import dotenv from 'dotenv'
dotenv.config()


#uuid 경우
import { v4 as uuidv4 } from 'uuid'
const { v4: uuidv4 } = require('uuid')

 

require가 아닌 from으로 변경. 

기타 등등이 많이 변화중.

 

 

 

 

Promise.all & 동시 실행 및 제한

promise가 모두 끝날때까지 기다려주는 함수.

하지만 너무 많은 promise가 동시에 실행될 경우, 컴퓨터 리소스 문제 및 nodejs문제가 발생됨.

그래서 제한을 시켜줘야 하는데, plimit이란 라이브러리를 쓰면 함수 형태로 감싸서 동시에 실행될 promise를 한정시켜줌.

import pLimit from 'p-limit';

const limit = pLimit(1);

const input = [
	limit(() => fetchSomething('foo')),
	limit(() => fetchSomething('bar')),
	limit(() => doSomething()),
    ...
];

// Only one promise is run at once
const result = await Promise.all(input);
console.log(result);

묘한건 limit함수안에 promise를 바로 넣지 않고, 함수형태로 다시 넣는다는 점.

 

 

 

 

 

이미지 로딩

어느 개발플랫폼이던 똑같지만 메모리 처리가 매우 까다롭고

그 중에서도 가장 많이 접하는 이미지 문제는 매번 겪는 문제..

 

웹에서는 이미지가 출력되는 태그가 사용자가 보는 화면에 노출될때

이미지 url 로딩해서 보여주는데, 이런 표현을 lazy loading 이라고 부른다.

 

그런 기능을 해주는 라이브러리로는 lazysizes가 좋아보임.

https://github.com/aFarkas/lazysizes

 

 

 

 

 

 

 

아이콘 제공 사이트

요즘엔 워낙 아이콘이 정형화 되고

정말 특이한 아이콘이 아니구서야 다 비슷한 아이콘을 쓰게 되는데

다들 쓰는걸 모아둔 사이트가 많은데. 

 

그중에서도 50만개 이상 아이콘을 제공하고 있음

svg나 png를 쉽게 받을 수 있는 사이트

https://www.svgrepo.com/

SVG Repo - Free SVG Vectors and Icons

이렇게 여러 옵션을 줄 수도 있어서 짱 조음.

 

 

heroicons도 만만치않게 깔끔하고 좋음. 

figma파일까지 줘서 디자인하기도 편함.

 

 

line을 Outline, Solid, Mini버전으로 간편하게 선택하고, 

SVG을 바로 Copy할 수 있어서 편함.

 

 

 

 

 

 

SVG 

svg는 벡터로 그리기 때문에

너무 많이 사용하게 되면 리소스가 많이 소모되서 사이트가 느려짐.

이건 윈도우도, 맥도, 아이폰도, 안드로이드도 모두 같음.

하지만 단순한 메뉴 아이콘 정도는 svg로 하는것도 나쁘지 않지만

svg가 사용자의 컴퓨터 환경에 따라 미리 빌드되는 OS 앱들과 다르게

웹에서는 미리 빌드되지 않기 때문에, static 사이트의 경우 매우 지저분한 svg.path가 포함될 수 있음. 

 

 

 

 

 

 

크롬 자동 번역창 띄우지 않기

(이 페이지를 번역하시겠습니까? 안뜨게하기)

 

 

영어 사이트에 들어가면 자동으로 번역창이 활성화 되는 경우가 있다.

물론 내가 만든 사이트도 그렇게 될 수가 있는데. 

header에 아래 코드를 추가하면 된다.

<meta name="google" content="notranslate">

 

 

 

 

 

 

 

 

애니메이션 구현시

 

부드러운 애니메이션 구현하려면,

timer(setInterval 또는 setTimeout)를 이용하지 않고

사용자가 보고 있는 화면의 주사율에 영향을 받지 않는 애니메이션 구현 방법 (fps(frame per sec)마다 코드를 호출하는 방식)

js의 지원 requestAnimationFrame() 함수를 이용하는것.

 

 

 

 

 

태그

웹주소를 카톡이나, 블로그에 URL을 넣게 되면 미리보기 화면이 보이는데요.

앗 이렇게 보니 프로필 설명을 바꿔야겠군요.

 

이런 화면 많이 보셨을꺼에요.

 

과거에는 웹에 있는 head 태그 부분에 title, description밖에 지원을 안했지만

페이스북이 만든 오픈그래프(Open Graph,og) 프로토콜 덕분에 페이스북(2010년)이 지원하면서

점차 다른 사이트에서도 도입하면서 지금은 정말 많은 업체에서 쓰고 있습니다.

특히나 공유 링크가 활발한 시대이고, 검색엔진의 크롤러에 의한 노출이 더 잘 되기 위해서는 무조건 해야되는 작업이 되버렸습니다.

 

title과 description은 텍스트만 지원하기 때문에, 썸네일 이미지를 보여주진 않습니다.

그래서 오픈그래프를 이용해야하며, 페이스북에 질 수 없다 생각한 트위터도 좀 더 다양한 기능을 지원하는 태그 지원을 발표했습니다.

다행히 더 많은 회사에서 내놓지는 않는 상태여서

개발자 입장에서는 og와 twitter만 지원하면 왠만하면 해결됩니다.

 

기본적인 og태그는 og:type, og:locale, og:site_name, og:title, og:url, og:image, og:description 7개 입니다.

이외에도 다양한 태그를 지원하니 한번 찾아보세요. 

<meta property="og:type" content="website"/>
<meta property="og:locale" content="ko_KR"/>
<meta property="og:site_name" content="달고나킷 달망이"/>
<meta property="og:title" content="dalgonakit" />
<meta property="og:url" content="https://dalgonakit.tistory.com" />
<meta property="og:image" content="%URL%/profile.png" />
<meta
      property="og:description"
      content="다양한 개발 경험을 업로드하고 있습니다."
/>

 

페이스북에서 제공하는 og 테스트 사이트 : https://developers.facebook.com/tools/debug/

 

 

카카오톡 미리보기 및 캐시 초기화 사이트 : https://developers.kakao.com/tool/clear/og

 

 

 

 

ngrok

localhost를 서버 업로드를 하지 않고도

외부dns를 부여받는 방법.

https://dalgonakit.tistory.com/264 여기참고.

[ngrok] localhost를 외부에서 접속할 수 있게 해주는 툴.