프로그램/react

초심으로 리셋.(2023.09.04 node 설치부터 react 샘플코딩 전까지)

대박당 2023. 9. 5. 17:57
728x90

또 오프라인 세상에 들어갔다 나오며 현타를 맞고 설치부터 해보려 합니다.

 

포멧하고 자바 1.8 만 깔았네요.

 

또 다른 오프라인 세상에 갈 것 같아 구버전만 설치하였지만, 리셋마라 ㅡ.ㅡ;;

 

일단 node LTS 버전 부터 확인해 봅시다.

 

현재 LTS는 18버전이고 20버전까지 나와있네요.

 

서비스 개발을 할꺼라면 18버전을 설치하면 되고 공부를 위한 것이라면 20버전을 설치하는 것이 좋을 것 같습니다.

 

버전별로 장단점을 현재 버전까지 보는 것이 좋기 때문입니다.

 

이전글

2022.06.14 - [프로그램/react] - 리액터 스타트(2022.06.14)

 

1. node.js 설치

더보기

node.js 설치

https://nodejs.org/ko/download

 

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

손은 생각보다 빠르네요... 생각은 20버전인데 18버전을 다운로드 하고 있군요... 

 

다시 20버전 다운로드... 흠음... 잠시 숨고르기... java 버전은 몇까지 필요할까요?

 

일단 node.js 설치하는데 패키지 관리자로 초콜리티라는 것이 보이네요.

 

예전에 있었는지 기억이 안나지만 일단 윈도우에서 패키지 관리자라고 하네요. npm이 바뀐것인지... 일단 읽어보고 정리들어갑니다.

 

node.js 설치본을 설치하면 chocolatey.org/packages/chocolatey와 파이썬, vs 관련 라이브러리를 초콜리티로 설치를 하네요.

 

작업스택에 있는 내용을 못찾는 다는 경고문구가 무섭게 느껴졌지만 종료하고 node --version 찍어보니 v20이 잘 나오네요.

 

다음에 설치한다면 LTS버전으로 설치해야 겠네요. 뭐 오프라인 세상 갔다오면 다시 포맷될 것이니 가볍게 넘어갑니다.

 

> npm -v
9.8.0

사용툴은 기본적으로 vscode 설치했어요

더보기

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

확장플러그인은... 일단 마구잡이로 설치 푸하하 일단 좋아보이는 것 설치해 봅시다.

선택하고 업데이트 일자를 확인하고 설치하는 것을 추천합니다.

Search node_modules

node-snippets

Node Essentials - intellicode, ESLint, GitLens

Babel JavaScript

Black Beauty

React-Beauty Remake!!!

JS JSX Snippets

ES7/React-Snippets    - Ctrl+P

ESLint

Prettier ESLint - CTRL + SHIFT + P

Reactjs code snippets

버전관리를 위해 Git 도 설치

부가 옵션 프로젝트에 추가하는 내용들은 다음과 같습니다. 이건 프로젝트에서 필요한 항목별로 선택설치하면 될것 같습니다. 

더보기

프로젝트에서 필요시 추가

 

필요시 부가설치

Adding Bootstrap

npm i bootstrap

npm i reactstrap react react-dom

------------------------------------------------------------------------------------------------------

npm i route

npm i react-router

------------------------------------------------------------------------------------------------------

npm i axios

axios

http request를 간편하게 만들어주는 모듈이다.

https://www.npmjs.com/package/axios

 

npm i classnames

classnames

조건부로 className이 변경될 경우 유용하게 사용할 수 있다.

예컨데, className={`${someCondition? 'positive': ''}`}를 classnames를 사용하면

className={classNames({positive: someCondition})} 처럼 쓸 수 있다.

 

조건부 className의 가짓수가 적을 때는 번거로워 보이지만 2~3개만 되어도 훨씬 편해진다.

https://www.npmjs.com/package/classnames

 

npm i moment

moment

Date관련 로직을 간소화해주는 라이브러리다.

js 내장 Date를 생으로 다루는 것 보다 훨씬 편하게 사용할 수 있다.

https://www.npmjs.com/package/moment

 

npm install class-validator --save

class-validator

문자열에 대해 다양한 포맷 검사를 도와준다.

 

가령 이메일 입력 칸에서 이메일 포맷인지를 검사할 수 있다.

https://www.npmjs.com/package/class-validator

 

npm install --save styled-components

styled-components

js내에서 style을 작성할 때 생기는 불편함을 해소해 준다.

https://styled-components.com/

 

상태관리

2022.07.16 - [프로그램/react] - React에 Recoil 상태 관리 라이브러리

 

React에 Recoil 상태 관리 라이브러리

import { v1 } from 'uuid'; const selTopMenuState = selector({ key: "selTopMenuState/${v1()}", get: ({ get }) => { const topMenuId = get(topMenuState); return topMenuId; }, }); 리액트 상태 관리는 라이프 사이클에 너무 영향을 받으며 정

jsi0.tistory.com

라우팅

2023.04.24 - [프로그램/react] - nextjs 13 검토 ( 2023.4 )

 

nextjs 13 검토 ( 2023.4 )

Next.js 13은 2022.10.26에 출시되었습니다. Next.js 12보다 속도가 빨라졌다고 하네요. 폴더 구조에도 변화가 있습니다. ※ Next.js 13버전과 12버전 주요 차이점( ChatGPT 답변 ) 더보기 1. 자동 이미지 최적화

jsi0.tistory.com

 

2022.07.18 - [프로그램/react] - next.js typescript 시작준비

 

이제 샘플 프로젝트는 만들어 보고 필요한 것을 추가해 봐야 하는데 ...

현재 프로젝트에서 사용하는 라이브러리를 조금 더 알아보고 현행화 해야 할것 같네요 일단 

 

728x90