React? Solid Js? Solid JS는 무엇인가요?
Solid.js는 빠르고 반응성(reactive)을 기반으로 한 프론트엔드 JavaScript 라이브러리로, UI를 선언적 방식으로 작성할 수 있게 해줍니다. React와 비슷한 방식으로 컴포넌트를 사용하지만, 내부적으로 훨씬 더 효율적인 반응성 시스템을 사용하여 상태 변화를 처리하고 DOM을 업데이트합니다. Solid.js는 컴파일 타임에 DOM 갱신 최적화를 수행하며, 불필요한 렌더링을 최소화하여 성능을 극대화합니다.
Solid js 공식 사이트
https://www.solidjs.com/guides/getting-started
https://www.solidjs.com/guides/getting-started
www.solidjs.com
아직 경쟁력이 약한 라이브러리긴 하나 확장성이나 활용성은 React보다 뛰어나다는 평이 많습니다. 그래서 요즘 간간히 Solid js가 프로젝트에서 많이 보입니다.
오늘은 Solid js 웹사이트를 빌드하는 기초가이드를 소개하겠습니다.
Solid JS 웹사이트를 만들기 위해서 일단 간단하게 몇가지를 설치할 것입니다.
1. pnpm 설치(선택)
2. solid js 설치
우선 정말로 웹사이트 개발이 없으신 초보자분들이라면, 첫번째로 하실 것은 Visual Studio Code 다운로드와 node js를 다운로드 받는 것입니다.
나중에 한번 초보자용 가이드를 만들어야겠네요.
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
https://nodejs.org/en/download/package-manager
Node.js — Download Node.js®
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
그럼 시작하겠습니다.
pnpm이 무엇인가요?
pnpm은 러시아 출신의 소프트웨어 엔지니어 Zoltan Kochan이 개발한 패키지 관리자입니다. Kochan은 npm 사용의 비효용성을 해결하고자 pnpm을 개발했습니다. 지금도 오픈 소스로서 깃허브에서 꾸준히 발전해나가고 있습니다. Zoltan은 npm이 사용하는 디크 공간 문제를 해결하기 위해 그로벌 스토리지와 링크시스템을 활용한 패키지 관리 방식을 도입했고, 그 결과 pnpm은 npm과 대비해 빠르고 공간 효율적인 패키지 관리 도구가 되었습니다.
간단하게 npm과 pnpm의 차이를 요약할게요.
| npm | pnpm | |
| 저장방식 | npm은 프로젝트마다 개별적으로 node_modules 폴더를 생성 -> 패키지가 중복으로 저장 동일한 패키지가 반복해서 저장되어 디스크 공간을 많이 차지하게 됨 |
pnpm은 모든 패키지를 전역저장소라는 하나의 중앙 위치 저장 -> 하나의 패키지를 여러 프로젝트에서 공유 같은 프로젝트 크기 대비 디스크 공간 절약. 또한 pnpm은 이 저장을 하는 과정에서 하드링크를 사용해 각 패키지의 node modules에서 필요한 패키지 파일을 실제 파일처럼 취급하되 중복저장되지 않도록 함. |
| 의존성 격리 | npm은 node_modules에 있는 패키지들을 트리 구조로 저장하기 때문에, 서로 다른 의존성 버전을 가진 패키지들이 중첩 가능 이로 인해 의존성 충돌이 생길 수 있음 |
pnpm은 의존성 격이가 엄격함. 패키지가 명시된 의존성만 접근하도록 제한함. 각 패키지의 의존성은 해당 패키지에 한정되어 관리되기 때문에 충돌이나 문제를 줄이고 일관성을 유지하는데 유리 |
요약하자면 호환성도 좋고, npm보다는 pnpm이 설치 속도도 빠르고, 저장 공간도 절약할 수 있어서 pnpm 설치할 겁니다.
npm으로 시작한 명령어가 pnpm으로 변경할 뿐, 그닥 차이점도 없고 웬만해서 다 npm에서 저장할 수 있는 기능들과 호환되기때문에 pnpm이 좋아요. 하지만 이건 설치하실지 말지는 선택입니다.
설치는 간단해요.
Installation | pnpm
Prerequisites
pnpm.io
여기 사이트에 들어가셔서 다운로드 하면 됩니다.
아래 방법중 하나를 선택하시면 됩니다.
윈도우 powershell 설치 명령어
Invoke-WebRequest https://get.pnpm.io/install.ps1 -UseBasicParsing | Invoke-Expression
npm 설치 명령어
npm install -g pnpm
위 방법들을 실행했는데 pnpm이 안된다면 공식 사이트로 들어가셔서 다른 설치방법을 하는게 제일 빠릅니다.
설치를 다했으면 solid js 설치로 넘어갈게요.
Solid Js Bare Template
Solid Js를 설치하려면 일단 비주얼 스튜디오 코드에서 터미널을 열어야합니다.
상단 terminal 메뉴에서 찾아서 열거나 단축키 ctrl + `를 눌러보세요.
만일 ctrl ` 로 안된다면 ctrl shift + 로 여시면 됩니다.
Solid 탬플릿 명령어입니다. 아래 터미널에서 이걸 입력하고 엔터를 눌러주세요.
pnpm create solid@latest
만약 npm이면 아래 명령어를 입력하면 됩니다.
npm create solid@latest
엔터를 치면 프로젝트 네임을 입력하라는 칸이 나올겁니다.
저는 모의투자 사이트를 만들거기 때문에 이름을 Simulate Investment Website라고 지었습니다.
만일 다른 이름이 있다면, 다른 영문이름으로 지으시면 됩니다.
그 다음에 엔터치면 아래 화면처럼 글이 나올겁니다. 그러면 여기에서 bare를 선택해주시면 됩니다.
위 아래 방향키 키보드로 조정하시면 됩니다.
solid 타입스크립트 이용하신다면 yes, 아니면 no 로 해주세요.
저는 타입스크립트를 이용할 거기 때문에 yes 해줬습니다.
다 하셨으면 아래 명령어를 그대로 연속으로 따라 치시고 엔터 눌러주시면 됩니다.
아래 화면말고, 본인 비주얼 스튜디오 코드에 있는 터미널에 아래화면처럼 나온 코드를 따라치시면 됩니다.
이렇게 순서대로 치고 모듈을 다 다운 받으면 끝납니다.
pnpm dev를 쳐서 나온 링크를 ctrl 클릭을 하면 solid templete 기본 웹사이트가 나옵니다.
이제 자유롭게 커스텀마이징을 하면서 웹사이트를 빌드하시면 됩니다.