📚금일 학습 내용

SSR과 Next.js소개, 마지막 과제 ON

---

🚀프로젝트 세팅

지난 프로젝트들을 해보면서 느낀 점은 주변 환경 세팅이 굉장히 중요하다는 것이다. eslint, prettier는 말 할 것도 없고 여러 config파일 세팅을 해서 프로젝트를 진행하는 데에 더 효율적이고 강력한 원동력을 얻을 수 있다고 판단했다.

그리고 지난 프로젝트들을 하면서 파일을 구조화하고 나누는 것에 아쉬움을 겪었는데, 이번에는 그런 아쉬움들이 남지 않게 하려고 설계 단계에서 충분히 공을 들이고 프로젝트를 시작하고자 하였다.

🛰️종속성 패키지 목록

라이브러리 명	버전	설명	사용 이유
react	18.2.0	javascript library(framework..?)	SPA
react-dom	18.2.0	React package for working with the DOM	SPA
styled-components	6.1.1	Visual primitives for the component	css in js

🛰️개발 종속성 패키지 목록

라이브러리 명	버전	설명	사용 이유
@types/node	20.10.4	type definitions for node	types for node
@types/react	18.2.43	TypeScript definitions for React	types for react
@types/react-dom	18.2.17	TypeScript definitions for react-dom	types for react-dom
@types/styled-components	5.1.34	TypeScript definitions for styled-components	types for styled-components
@typescript-eslint/eslint-plugin	6.14.0	TypeScript plugin for ESLint	for typescript and eslint
@typescript-eslint/parser	6.14.0	An ESLint custom parser which leverages TypeScript ESTree	for typescript and eslint
@vitejs/plugin-react-swc	3.5.0	Speed up Vite dev server with SWC	for build and dev server
cypress	13.6.1	front end testing tool built for the modern web	for test
eslint	8.55.0	AST-based pattern checker for JavaScript.	for code convention
eslint-plugin-cypress	2.15.1	ESLint plugin for projects using Cypress	eslint for cypress
eslint-plugin-react-hooks	4.6.0	ESLint rules for React Hooks	eslint for react-hook
eslint-plugin-react-refresh	0.4.5	Validate that components can safely be updated with fast refresh.	for dev server
typescript	5.3.2	language for application scale JavaScript development	types check
vite	5.0.8	web dev build tool	for build and dev server

💡E2E테스트를 위한 cypress 패키지 설치

cypress, eslint-plugin-cypress 패키지들을 개발 종속성 패키지로 설치

"cy:open": "cypress open" 명령어를 통해서 cypress 설정 오픈

cypress/e2e/customTests/url-traverse.cy.js 파일을 통해 기초 렌더링 테스트

관련 레퍼런스들

다나와 기술블로그
티스토리
블로그
공식 문서
공식 문서-디테일

❕localhost:5173 | 127.0.0.1:5173의 주소로 cypress에서 접근이 안되는 문제 발생

관련 스택오버플로우 답변
Vite Docs

2번째 해결 방법인 "dev": "vite --host",를 통해서 Local이 아닌 Network 주소 형태로 뿌려주어 내.외부 IP 주소로 접속할 수 있도록 에러 해결

하지만 위 방식은 엄청난 문제가 하나 발생했는데 외부 네트워크에서 IP주소를 통해서 접속이 가능하다는.. 심각한 문제가 발생해서 다른 방법 강구

위 답변 링크의 1번째 방식으로 해결, 오류가 났었던 원인은 dns를 import하는 과정에서 dns에 대한 타입 정의가 없었기 때문에 @types/node를 설치하거나 했어야하는데 간단하게 vite를 js파일로 선언하는 방식으로 오류 해결, 이제는 외부에서 연결 시 timeout으로 접근 불가

❕경로 별칭 설정

경로별칭을 지정할 때 항상 2가지 파일을 확인해야한다. tsconfig에 명시해주지 않아, TS가 읽지 못하는 에러가 있었고 해당 부분에 대한 이해도 부족으로 인해 오랜 시간을 투자해서 해결하였다.

// vite.config.ts
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@pages": path.resolve(__dirname, "./src/pages"),
      "@hooks": path.resolve(__dirname, "./src/hooks"),
      "@components": path.resolve(__dirname, "./src/components"),
    },
  },

// tsconfig.json
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@assets/*": ["src/assets/*"],
      "@pages/*": ["src/pages/*"],
      "@hooks/*": ["src/hooks/*"],
      "@components/*": ["src/components/*"]
    }

이외에 아이디어 구상을 진행했다. 이번 아이디어는 외부 유출 불가이므로 기술 X

---

📖소회

천원 넣으려다가 만원 넣어버린 칼팍... 덕분에 오랜만에 목이 나갔다. 근데 약간 화룡정점 느낌으로 모든 스트레스가 다 풀린 느낌이다. 이제 인지적 에너지를 어느정도 잘 회복했으니 다시 잘 달려봐야지. 마지막 과제 프로젝트를 끝으로 이제는 진짜 팀 프로젝트의 시작이다. 기대반 걱정반이긴 한데 잘 되었으면 좋겠다!

내일도 달려봅시다🔥🔥🔥
TIL 작성 소요시간 약 30분