πŸ“΄ AnoniChat FrontServer feat. Next.js

#ν”„λ‘œμ νŠΈ #개발 #ν”„λ‘ νŠΈ #React #Nextjs #Front #μ–Έμ–΄ #ν”„λ ˆμž„μ›Œν¬ #FRAMWORK

🍌 React와 Next.js μ°Έκ³ 

  • ν”„λ‘œμ νŠΈμ˜ 기본적인 골격은 λ‹€μŒκ³Ό κ°™λ‹€.

Pasted image 20250630173433.png

ν”„λ‘œμ νŠΈ ꡬ쑰

/
β”œβ”€β”€ app/               # νŽ˜μ΄μ§€μ™€ μ „μ—­ λ ˆμ΄μ•„μ›ƒ, μ „μ—­ CSS μœ„μΉ˜
β”‚   β”œβ”€β”€ favicon.ico
β”‚   β”œβ”€β”€ globals.css
β”‚   β”œβ”€β”€ layout.tsx
β”‚   └── page.tsx
β”œβ”€β”€ public/            # 정적 파일(이미지 λ“±)
β”‚   β”œβ”€β”€ file.svg
β”‚   β”œβ”€β”€ globe.svg
β”‚   β”œβ”€β”€ next.svg
β”‚   β”œβ”€β”€ vercel.svg
β”‚   └── window.svg
β”œβ”€β”€ .gitignore
β”œβ”€β”€ README.md
β”œβ”€β”€ package.json
β”œβ”€β”€ package-lock.json
β”œβ”€β”€ next.config.ts
β”œβ”€β”€ postcss.config.mjs
β”œβ”€β”€ tsconfig.json
└── eslint.config.mjs

2. 각 파일의 μ—­ν• 

package.json

  • Node ν”„λ‘œμ νŠΈμ˜ 핡심 μ„€μ • 파일이며, Maven/Gradle의 pom.xmlκ³Ό λΉ„μŠ·ν•œ 역할을 ν•œλ‹€.
  • 슀크립트 μ •μ˜(dev, build, start, lint)와 μ˜μ‘΄μ„±(react, next λ“±)을 κ΄€λ¦¬ν•œλ‹€.

next.config.ts

  • Next.js μ „μš© μ„€μ • 파일둜, Spring Boot의 application.properties/ymlκ³Ό μœ μ‚¬ν•œ ν™˜κ²½ 섀정을 λ‹΄λ‹Ήν•©λ‹ˆλ‹€.
  • ν˜„μž¬λŠ” κΈ°λ³Έ 골격만 μ‘΄μž¬ν•˜λ©°, nextConfig κ°μ²΄ μ•ˆμ— ν•„μš”ν•œ μ˜΅μ…˜μ„ μ±„μ›Œ 넣을 수 μžˆμŠ΅λ‹ˆλ‹€

tsconfig.json

  • TypeScript 컴파일러 μ„€μ • 파일둜, strict λͺ¨λ“œ μ—¬λΆ€, λͺ¨λ“ˆ 해석 방법 등을 μ •μ˜ν•©λ‹ˆλ‹€.
  • Next.js ν”„λ‘œμ νŠΈμ—μ„œ νƒ€μž… 체크와 경둜 별칭 등을 μ œμ–΄ν•©λ‹ˆλ‹€

postcss.config.mjs

  • CSS ν›„μ²˜λ¦¬λ₯Ό μœ„ν•œ PostCSS μ„€μ • νŒŒμΌμž…λ‹ˆλ‹€. μ—¬κΈ°μ„œλŠ” TailwindCSS ν”ŒλŸ¬κ·ΈμΈλ§Œ ν™œμ„±ν™”λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€

eslint.config.mjs

  • μ½”λ“œ ν’ˆμ§ˆ 관리λ₯Ό μœ„ν•œ ESLint μ„€μ • νŒŒμΌμž…λ‹ˆλ‹€. next/core-web-vitals와 next/typescript κ·œμΉ™μ„ μ‚¬μš©ν•΄ 기본적인 린트 κ·œμΉ™μ„ μ μš©ν•©λ‹ˆλ‹€

app/layout.tsx

  • λͺ¨λ“  νŽ˜μ΄μ§€μ— 곡톡 μ μš©λ˜λŠ” λ ˆμ΄μ•„μ›ƒ μ»΄ν¬λ„ŒνŠΈλ‘œ, μ „μ—­ CSSλ₯Ό 뢈러였며 <html> κ³Ό <body> νƒœκ·Έλ₯Ό μ •μ˜ν•©λ‹ˆλ‹€. Spring Bootμ—μ„œ 곡톡 λ ˆμ΄μ•„μ›ƒ(예: layout.jsp, layout.html)을 μ •μ˜ν•˜λŠ” 것과 λΉ„μŠ·ν•©λ‹ˆλ‹€

app/page.tsx

  • / κ²½λ‘œμ˜ κΈ°λ³Έ νŽ˜μ΄μ§€λ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€. κ°„λ‹¨νžˆ β€œHello AnoniChat” λ©”μ‹œμ§€λ₯Ό λ³΄μ—¬μ£ΌλŠ” μ»΄ν¬λ„ŒνŠΈκ°€ λ“€μ–΄ μžˆμŠ΅λ‹ˆλ‹€

app/globals.css

  • μ „μ—­ μŠ€νƒ€μΌμ„ μ •μ˜ν•˜λŠ” CSS νŒŒμΌμž…λ‹ˆλ‹€. TailwindCSSλ₯Ό μž„ν¬νŠΈν•˜κ³  닀크 λͺ¨λ“œ λ“± κΈ°λ³Έ λ³€μˆ˜λ₯Ό μ„€μ •ν•©λ‹ˆλ‹€

public/ 폴더

  • 이미지 λ“±μ˜ 정적 νŒŒμΌμ„ λ‘λŠ” 곳으둜, Spring Boot의 resources/static ν΄λ”와 μœ μ‚¬ν•©λ‹ˆλ‹€.

.gitignore

  • Git κ΄€λ¦¬μ—μ„œ μ œμ™Έν•  파일 λͺ©λ‘μ„ μ •μ˜ν•©λ‹ˆλ‹€. node_modules, .next κ²°κ³Όλ¬Ό λ“± 개발 μ‹œ λΆˆν•„μš”ν•œ νŒŒμΌμ„ λ¬΄μ‹œν•©λ‹ˆλ‹€
Table Of Contents
πŸ“΄ AnoniChat FrontServer feat. Next.js
🍌 React와 Next.js μ°Έκ³ 
2. 각 파일의 μ—­ν• 
package.json
next.config.ts
tsconfig.json
postcss.config.mjs
eslint.config.mjs
app/layout.tsx
app/page.tsx
app/globals.css
public/ 폴더
.gitignore