- 라이브러리
-
npm
JS 라이브러리 관리가 쉬워진다.
⇒ JS 라이브러리 쉽게 설치, 수정, 삭제할 수 있다.
// terminal 창 npm install 라이브러리명 // npm 설치 npm update 라이브러리명 // npm 업데이트 npm uninstall 라이브러리명 // npm 삭제 -
bundling tool
JS 파일들을 하나로 합쳐준다. 이렇게 하면 나중에 배포가 쉬워진다.
JS 파일 안에서 안쓰는 함수 변수는 전부 제거해준다. (용량축소)
.ts .vue .jsx 등으로 개발한 것들을 .js로 변환해준다.
최신 문법을 호환성 좋게 바꿔준다.
(가장 쓰기 쉬운 툴은 ‘vite’)
// terminal 창 npm create vite@latest // vite 셋팅완료된 프로젝트를 만들려고 할때 입력. // 그후 기본 셋팅할 라이브러리 선택해주면 된다. // 그리고 명령어가 나오는데 차례로 입력하면 셋팅 끝! -
Node.js
JS 코드는 원래 웹브라우저 안에서만 실행이 가능하다.
하지만 Node.js를 사용하면 브라우저를 켜지 않고도 PC 아무곳에서나 JS 파일을 실행할 수 있도록 해준다.
(구글에서 검색후 설치 가능.)
// terminal 창 node 자바스크립트 파일명 // JS 파일을 바로 실행해줄 수 있다. -
build
개발이 끝나서 여러파일들을 번들링하고 싶다면(하나로 합치고 싶다면)
//terminal 창 npm run build // 빌드 작업. 번들링툴을 이용해서 js파일 하나로 합치기 -
SPA 라이브러리
Vue, Svelte , React, Angular⇒ 자바스크립트로 html 조작이 편리해진다.
⇒ Single Page Application 만들 때 사용한다.
(모바일 앱처럼 새로고침 없이도 부드럽게 동작하는 사이트 만들 수 있다.)
이렇게 html 생성과 조작을 js로 하는 것을 client side rendering이라고 한다.
-
state management
SPA 라이브러리 단점
수많은 변수관리가 어렵다. 따라서 SPA에서 사용중인 변수들을 관리하는 행위를 ‘state management’라고 한다.
이걸 쉽게 도와주는 외부 라이브러리는
redux, recoil, mobx, zustand, jotai등이 있다.
-
server side rendering
SPA의 매우 큰 단점
구글검색 결과에 노출시키는 것이 매우 어렵다.
첫 페이지 로딩 시간이 너무 길다.
위와 같은 단점이 싫다면 ‘server side rendering’을 하면된다.
이는 html을 서버에서 만들어서 보내주는 것이다.
-
meta-framework
리액트와 비슷한 문법을 써서 server side rendering을 하고 싶다면 Next.js, Nuxt.js, Remix, SvelteKit 등의 라이브러리를 사용하면 된다.
-
TypeScript
JS는 타입 틀려도 봐준다. 하지만 이런 것들을 방지하고 싶다면 타입기능이 업그레이드 된 자바스크립트인 ‘TypeScript’를 사용하면 된다.
//.ts로 파일을 만들어주면 된다. let age : number = 20; let firstName : string = 'park';- 이처럼 문법은 js와 똑같은데 타입만 추가된다.
- .ts 파일은 브라우저에서 해석할 수 없기 때문에 번들링 툴을 이용해서 .js로 변환해주면 된다.
-
serverless
서버 역할을 대신 해주는 서비스이다.
Firebase, supabase, AWS lambda, PocketBase가 있다.회원인증, DB입출력, 기타 서버기능을 알아서 해주지만
비싸다.
출처. 코딩애플
