TypeScript
-
[ CS한컷 ] Next.js와 Nest.js 차이CS/CS한컷 2023. 7. 7. 10:16
1. Next.js & Nest.js Next.js와 Nest.js는 둘 다 JavaScript 기반의 웹 프레임워크입니다. 하지만 서로 다른 목적과 특징을 가지고 있습니다. ▶ Next.js Next.js는 React 기반의 프론트엔드 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(Static Site Generation, SSG)을 지원합니다. React를 기반으로 하기 때문에 React 생태계의 컴포넌트 기반 개발 방식과 관련 기술들을 활용할 수 있으며, 페이지 기반 라우팅을 제공하여 간편하게 페이지 간 전환을 구현할 수 있습니다. 또한, 다양한 데이터 페칭 방법을 지원하고, 코드 스플리팅과 프리페칭을 통해 성능을 최적화할 수 있습니다. 장점 빠른 개발과 배포가 가능 React 컴포..
-
[ 환경설정 ] next.js/ typescript / tailwindCSS / mongoDB 세팅마이블로그 2023. 7. 2. 20:57
next.js와 typescript와 tailwindCSS는 CRA(create react app)으로 설치하였다. cmd 창에 다음과 같이 적어주면 typescript와 tailwindCSS를 사용할 것인지 묻는 질문을 한다. npx create-next-app my-app 사용하려면 yes를 방향키로 움직인 후 enter! 알아서 버전도 맞춰서 설치해 준다!!!!!! 그렇게 next.js 설치 완료 후 'npm install mongodb' 설치해 준다. 여기서부터가 이제 시작이다. 폴더 구조는 이렇게 생겼다. util 폴더를 만든 후 database.js 파일을 만들어서 mongoDB와 연결할 준비를 한다. 하.. 연결하기 위해 정말 많은 사이트를 참고했다. 나는 mongoDB에서 무료로 제공해 주..
-
[ eslint-prettier ] react & typescript 설정마이블로그 2023. 6. 11. 23:41
1. package.json { "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.4", "@mui/styles": "^5.13.2", "eslint-config-prettier": "^8.8.0", "eslint-plugin-prettier": "^4.2.1", "react": "^17.0.0", "react-dom": "^17.0.0", "react-router-dom": "^6.10.0", "react-scr..
-
[ 마이블로그 - react와 node.js ] react와 node.js로 개인 웹 애플리케이션 만들기!마이블로그 2023. 6. 5. 01:34
* 프로젝트명 : 마이블로그 * 사용할 기술스택 Publish Front-end Back-end DB HTML CSS tailwinds React Typescript Node.js Express MongoDB * tailwidns 선택 이유 → bootstrap, vuetify, thymeleaf 등을 사용해 보았지만 테일윈즈는 아직 사용해보지 않아서 개인 프로젝트를 진행하며 실 업무에서 사용하지 않을 것 같지만 핫한 기술을 사용해보고 싶었다. 또한 아주 잠깐 vue3를 배울 때 사용해본 결과 class로 세세하게 css를 지정할 수 있는 것처럼 느껴져서 사용해보고 싶었다. * React 선택 이유 → Vue3를 배우면서 서버/클라이언트 렌더링에 대해서도 알게 되고, js파일로 화면을 구축하는 것의 편리..