
생산 준비급 풀 스택 Node.js 프로젝트를 설정하는 것은 코드를 작성하는 것 이상의 작업이 필요합니다. 신중한 계획, 견고한 아키텍처 및 Best Practice 준수가 필요합니다. 이 안내서는 Node.js, Express 및 React를 사용하여 확장 가능하고 유지보수 가능하며 안전한 풀 스택 애플리케이션을 만드는 프로세스를 안내합니다.

제품 수준의 설정을 이해하려는 초보자이거나 프로젝트 구조를 정립하려는 경험 많은 개발자이든, 이 안내서는 전문가급 애플리케이션을 만드는 데 유용한 통찰력을 제공할 것입니다.

## Prerequisites

시작하기 전에 시스템에 다음이 설치되어 있는지 확인하세요:

<div class="content-ad"></div>

- Node.js (최신 LTS 버전)
- npm (Node Package Manager, Node.js와 함께 제공됨)
- Git (버전 관리를 위해)

![이미지](/assets/img/2024-08-19-HowtosetupaFullStackprojectwithExample_0.png)

## 1. 프로젝트 구조

유지보수 및 확장성을 위해서는 잘 구성된 프로젝트 구조가 중요합니다. 다음은 풀 스택 Node.js 프로젝트에 권장되는 구조입니다:

<div class="content-ad"></div>

```js
프로젝트 루트 디렉토리/
├── 서버/
│   ├── src/
│   │   ├── config/
│   │   ├── controllers/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── services/
│   │   ├── utils/
│   │   └── app.js
│   ├── tests/
│   ├── .env.example
│   └── package.json
├── 클라이언트/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── services/
│   │   ├── utils/
│   │   └── App.js
│   ├── .env.example
│   └── package.json
├── .gitignore
├── docker-compose.yml
└── README.md
```

설명:

- 서버 디렉토리에는 백엔드 관련 코드가 모두 포함되어 있습니다.
- 클라이언트 디렉토리는 프론트엔드 어플리케이션을 담고 있습니다.
- 백엔드에서 관심사를 분리함으로써(컨트롤러, 모델, 라우트) 모듈성을 증진시킵니다.
- .env.example 파일들은 환경 변수의 템플릿으로 사용됩니다.
- 도커 구성은 일관된 개발 및 배포 환경을 가능하게 합니다.

### 2. 백엔드 설정

<div class="content-ad"></div>

강력한 백엔드를 설정하는 것은 프로덕션 수준의 애플리케이션에 중요합니다. 다음은 단계별 안내서입니다:

- 프로젝트 초기화:

```js
mkdir server && cd server
npm init -y
```

- 필요한 종속 항목 설치:

<div class="content-ad"></div>

```js
npm i express mongoose dotenv helmet cors winston
npm i -D nodemon jest supertest
```

- 메인 애플리케이션 파일(src/app.js)을 생성하세요:

```js
const express = require("express");
const helmet = require("helmet");
const cors = require("cors");
const routes = require("./routes");
const errorHandler = require("./middleware/errorHandler");

const app = express();

app.use(helmet());
app.use(cors());
app.use(express.json());

app.use("/api", routes);

app.use(errorHandler);

module.exports = app;
```

해설: 해당 코드는 Express를 사용하여 웹 애플리케이션을 개발하는 방법을 보여줍니다. Express를 초기화하고 미들웨어를 추가하여 보안 헤더를 설정하고 CORS를 활성화할 수 있습니다. 또한 라우팅 및 에러 처리에 대한 설정도 포함되어 있습니다.

<div class="content-ad"></div>

- express는 웹 프레임워크로 사용됩니다.
- helmet은 보안 관련 HTTP 헤더를 추가합니다.
- cors는 Cross-Origin Resource Sharing을 가능하게 합니다.
- 라우트 및 에러 처리 모듈화는 코드 구성을 개선합니다.

### 3. 프론트엔드 설정

원활한 사용자 경험을 위해 잘 구조화된 프론트엔드가 필수적입니다:

- 새로운 React 애플리케이션을 생성하세요:

<div class="content-ad"></div>

```js
   npx create-react-app client
   cd client
```

- 추가 패키지 설치:

```js
   npm i axios react-router-dom
```

- API 서비스 설정하기 (src/services/api.js):

<div class="content-ad"></div>

```js
import axios from "axios";

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL || "http://localhost:5000/api",
});

export default api;
```

해설:

- Create React App을 사용하면 모범 사례를 기반으로 견고한 기반을 제공합니다.
- axios를 사용하면 API 호출을 간단히 할 수 있습니다.
- API 구성을 중앙 집중화하면 엔드포인트를 관리하기 쉬워집니다.

### 4. Docker 설정

<div class="content-ad"></div>

도커는 개발, 테스트 및 프로덕션 환경 간 일관성을 보장합니다.

프로젝트 루트에 docker-compose.yml을 생성하세요:

```js
version: '3.8'
services:
  server:
    build: ./server
    ports:
      - "5000:5000"
    environment:
      - NODE_ENV=production
      - MONGODB_URI=mongodb://mongo:27017/your_database
    depends_on:
      - mongo

  client:
    build: ./client
    ports:
      - "3000:3000"

  mongo:
    image: mongo
    volumes:
      - mongo-data:/data/db

volumes:
  mongo-data:
```

설명:

<div class="content-ad"></div>

- 백엔드, 프론트엔드, 데이터베이스를 위한 서비스를 정의합니다.
- 환경 변수를 구성에 사용합니다.
- 볼륨을 이용하여 데이터베이스 데이터를 지속합니다.

### 5. 테스트

신뢰성을 보장하기 위해 포괄적인 테스트를 구현합니다:

- 백엔드 테스트 (server/tests/app.test.js):

<div class="content-ad"></div>

```js
const request = require("supertest");
const app = require("../src/app");

describe("App", () => {
  it("should respond to health check", async () => {
    const res = await request(app).get("/api/health");
    expect(res.statusCode).toBe(200);
  });
});
```

- Frontend tests: 컴포넌트 테스트를 위해 React Testing Library를 활용합니다.

설명:

- 백엔드 테스트는 API 테스트를 위해 Jest와 Supertest를 사용합니다.
- 프론트엔드 테스트는 컴포넌트가 올바르게 렌더링되고 작동하는지 확인합니다.

<div class="content-ad"></div>

### 6. CI/CD 파이프라인

CI/CD 파이프라인으로 자동화된 테스팅 및 배포를 수행하세요. GitHub Actions를 활용한 예시는 다음과 같습니다:

```js
name: CI/CD

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14.x'
    - run: cd server && npm ci
    - run: cd server && npm test
    - run: cd client && npm ci
    - run: cd client && npm test

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
    - name: Deploy to production
      run: |
        # 배포 스크립트를 여기에 추가하세요
```

설명:

<div class="content-ad"></div>

- 푸시 및 풀 리퀘스트에서 자동으로 테스트를 실행합니다.
- 주 브랜치에서 성공적인 테스트 후에 프로덕션으로 배포됩니다.

### 7. 보안 최상의 실천 방안

- 안전한 HTTP 헤더를 설정하기 위해 헬멧 사용
- 속도 제한 구현
- 프로덕션 환경에서 HTTPS 사용
- 사용자 입력값 살균 처리
- 적절한 인증 및 권한 부여 구현

### 8. 성능 최적화

<div class="content-ad"></div>

압축 미들웨어 사용하기
캐싱 전략 구현하기
데이터베이스 쿼리 최적화하기
운영 환경에서 프로세스 관리를 위해 PM2 또는 유사한 것 사용하기

### 다음 단계

인증 구현하기 (JWT, OAuth)
데이터베이스 마이그레이션 설정하기
로깅 및 모니터링 구현하기
정적 자산을 위한 CDN 구성하기
에러 추적 설정하기 (예: Sentry)

API 키나 데이터베이스 자격 증명과 같은 민감한 정보를 절대 커밋하지 않도록 주의하십시오. 구성을 위해 환경 변수를 사용하십시오.

<div class="content-ad"></div>

## 결론

생산 수준의 풀 스택 Node.js 프로젝트를 설정하려면 세부 사항에 주의를 기울이고 최선의 방법을 준수해야 합니다. 이 안내서를 따르면 확장 가능하고 유지 관리 가능하며 안전한 응용 프로그램의 기밋을 다지게 됩니다. 이것은 시작점일 뿐이라는 것을 기억하세요. 프로젝트가 성장함에 따라 이러한 방법을 조정하고 확장하여 특정 요구 사항을 충족해야 할 수도 있습니다.

## 자주 묻는 질문

### 1. 개발에 Docker를 사용하는 이유는 무엇인가요?\*\*

<div class="content-ad"></div>

도커는 다양한 개발 환경에서 일관성을 유지하며, 새 팀원을 위한 설정을 간편하게 만들어주며, 프로덕션 환경을 밀접하게 모방합니다.

### 2. 환경 변수를 안전하게 다루려면 어떻게 해야 하나요?\*\*

로컬 개발에는 .env 파일을 사용하되, 버전 관리에는 절대 커밋하지 마세요. 프로덕션 환경에서는 호스팅 플랫폼에서 제공하는 환경 변수를 사용하세요.

### 3. 프론트엔드와 백엔드를 분리하는 장점은 무엇인가요?\*\*

<div class="content-ad"></div>

이 구분은 독립적인 확장, 더 쉬운 유지보수 및 스택 각 부분에 다른 기술을 사용할 수 있는 가능성을 제공합니다.

### 4. 내 애플리케이션이 안전한지 어떻게 확인할 수 있을까요?\*\*

인증 및 권한 부여 구현, HTTPS 사용, 사용자 입력값 검증, 종속성 업데이트 유지, 그리고 OWASP 보안 지침을 따릅니다.

### 5. 제품 환경에서 데이터베이스 성능을 고려해야 하는 사항은 무엇인가요?\*\*

<div class="content-ad"></div>

쿼리를 최적화하고 인덱싱을 효과적으로 사용하며 캐싱 전략을 구현하고, 고트래픽 애플리케이션을 위해 샤딩이나 읽기 복제와 같은 데이터베이스 확장 옵션을 고려하세요.

### 6. 프로덕션 환경에서 로깅을 어떻게 처리해야 하나요?\*\*

Winston과 같은 로깅 라이브러리를 사용하고, ELK 스택(Elasticsearch, Logstash, Kibana) 또는 클라우드 기반 솔루션을 사용하여 로그를 중앙 집중화하세요. 민감한 정보가 로깅되지 않도록 주의하세요.

### 7. 어떻게 애플리케이션이 확장 가능한지 보장할 수 있나요?

<div class="content-ad"></div>

프로덕션 애플리케이션에서 확장성은 매우 중요합니다. 로드 밸런서 사용, 캐싱 전략 구현, 데이터베이스 쿼리 최적화, 그리고 애플리케이션을 상태 없는(stateless) 형태로 설계하는 등을 고려해보세요. 대규모 애플리케이션을 위해 마이크로서비스 아키텍처도 고려해 볼 수 있습니다.

### 8. 내 Node.js 애플리케이션을 안전하게 유지하는 데 가장 좋은 방법은 무엇인가요?

보안이 가장 중요합니다. 적절한 인증 및 권한 부여 구현, HTTPS 사용, 의존성 업데이트 유지, 사용자 입력 값 검사 등 OWASP 보안 가이드라인을 따르세요. Helmet.js와 같은 보안 중심 미들웨어를 사용하거나 남용을 방지하기 위해 속도 제한을 구현하는 것도 고려해보세요.

### 9. 환경 변수와 구성을 어떻게 관리해야 하나요?

<div class="content-ad"></div>

로컬 개발에는 .env 파일을 사용하되, 이를 버전 관리 시스템에는 커밋하지 마세요. 프로덕션 환경에서는 호스팅 플랫폼에서 제공하는 환경 변수를 활용하세요. 복잡한 설정의 경우 구성 관리 도구를 고려해보세요.

### 10. 데이터베이스 성능을 최적화하는 방법은 무엇인가요?

쿼리 최적화, 색인을 효율적으로 활용, 캐싱 전략을 구현(예: Redis)하고, 고트래픽 애플리케이션의 경우 샤딩 또는 읽기 레플리카와 같은 데이터베이스 스케일링 옵션을 고려하세요. 정기적으로 데이터베이스 유지 보수와 최적화를 수행하세요.

### 11. 프로덕션 환경에서 오류와 예외 처리를 위한 최선의 접근 방식은 무엇인가요?

<div class="content-ad"></div>

Express에 전역 오류 처리 미들웨어를 구현해보세요. 오류를 철저히 기록하지만 클라이언트에게 민감한 정보가 노출되지 않도록 주의하세요. 실시간 오류 추적 및 알림에 Sentry와 같은 오류 모니터링 서비스를 사용하는 것을 고려해보세요.

### 12. 프론트엔드와 백엔드 모두 효과적인 테스트 전략을 구현하는 방법은 무엇인가요?

프론트엔드와 백엔드에서 Jest를 사용하여 단위 및 통합 테스트를 수행하세요. Cypress와 같은 도구로 엔드 투 엔드 테스트를 구현해보세요. 높은 테스트 커버리지를 목표로 하고 테스트를 CI/CD 파이프라인에 통합하세요.

### 13. API 버전 관리를 처리하는 가장 효율적인 방법은 무엇인가요?

<div class="content-ad"></div>

URL 버전 관리(예: /api/v1/) 또는 사용자 정의 요청 헤더를 사용하는 것을 고려해 보세요. 이전 API 버전을 위한 명확한 폐기 정책을 시행하고 변경 사항을 API 사용자에게 효과적으로 전달하세요.

### 14. 최소한의 다운타임으로 원활한 배포를 어떻게 보장할 수 있을까요?

블루-그린 배포 또는 롤링 업데이트를 시행하세요. 컨테이너화(Docker) 및 오케스트레이션 도구(Kubernetes)를 사용하여 쉬운 확장 및 배포를 가능하게 해주세요. 강력한 CI/CD 파이프라인으로 배포 프로세스를 자동화하세요.

### 15. 성능을 개선하기 위해 캐싱에 어떤 전략을 사용해야 하나요?

<div class="content-ad"></div>

여러 수준에서 캐싱을 구현해보세요: 브라우저 캐싱, 정적 자산을 위한 CDN 캐싱, 애플리케이션 수준 캐싱(예: Redis) 및 데이터베이스 쿼리 캐싱. 데이터 일관성을 보장하기 위해 캐시 무효화 전략을 신중하게 고려하세요.

### 16. SPA에 대해 안전한 인증을 어떻게 처리해야 하나요?

상태 정보를 유지하지 않는 JWT(JSON 웹 토큰)을 사용하여 안전한 인증을 고려해보세요. 안전한 토큰 저장(HTtponly 쿠키), 리프레시 토큰 사용 및 제3자 인증을 위해 OAuth2를 고려하세요. SPA의 경우 XSS 및 CSRF 보호에 주의하세요.

### 17. React 애플리케이션 성능을 최적화하는 방법은 무엇인가요?

<div class="content-ad"></div>

코드 분할과 지연 로딩을 구현하세요. React.memo와 useMemo를 사용하여 비용이 많이 드는 계산을 최적화하세요. React DevTools와 같은 도구를 사용하여 렌더링을 최적화하세요. 초기로드 시간을 개선하기 위해 서버 측 렌더링이나 정적 사이트 생성을 고려하세요.

### 18. 풀 스택 애플리케이션을 위한 호스팅 플랫폼을 선택할 때 고려해야 할 사항은 무엇인가요?

확장성, 가격, 배포 용이성, 제공되는 서비스(데이터베이스, 캐싱 등), 그리고 기술 스택 지원과 같은 요소를 고려해야 합니다. 인기 있는 옵션으로는 AWS, Google Cloud Platform, Heroku, DigitalOcean 등이 있습니다.

생산용 애플리케이션을 구축하는 것은 반복적인 과정입니다. 실제 사용 및 피드백을 기반으로 애플리케이션을 계속 모니터링하고 테스트하며 개선하세요.


Full Stack 프로젝트 설정 방법(코드 있음)


뉴스 사이트, 소셜 미디어, 은행 시스템 등을 방문하면 사용자와 상호작용할 수 있는 여러 요소가 화면에 제공됩니다.

하지만 여러분은 이 모든 것이 어떻게 구축되었는지에 대해 생각해 보셨나요?

웹사이트를 구축하는 데 관여하는 전문가 중 한 명은 프론트엔드 개발자입니다. 그들은 UX/UI 디자인 팀이 figma를 사용해 만든 레이아웃을 코드로 변환합니다.

기술적으로, 웹사이트는 다양한 기술을 사용하여 구축되며, 이 중 하나가 HTML입니다.

<div class="content-ad"></div>

이 글에서는 HTML이 무엇이며 어떻게 사용되는지 알아보겠습니다.

## HTML이란 무엇인가요?

웹사이트를 개발하는 데 사용되는 기술이기 때문에 HTML을 프로그래밍한다고 생각하기 쉽습니다. 중요한 점은 HTML이 프로그래밍 언어가 아니라 마크업 언어라는 것입니다.

프로그래밍 언어는 알고리즘을 작성하고 변수 및 데이터 구조를 조작하는 데 사용됩니다. HTML은 영어로 HyperText Markup Language의 약자로, 웹 페이지의 내용을 구조화하고 서식을 지정합니다.

<div class="content-ad"></div>

이 기술을 사용하여 프로젝트를 개발하려면 "html" 형식의 파일이 필요합니다. 그럼 웹 브라우저에서 이 파일을 열어 코드를 해석하여 화면에 요소를 표시할 수 있습니다.

## HTML 파일의 구조

HTML 파일의 구조는 트리로 이해할 수 있습니다.

우리는 뿌리 요소인 `<html>`을 가지고 있고, 이것을 기반으로 새로운 요소(가지와 같은 것)를 선언할 수 있습니다. 이들은 자식 요소로 해석될 수 있으며 따라서 부모 요소를 만드는 것도 가능합니다. 또한, 같은 뿌리에서 유래한 요소들은 형제라고 불릴 수 있습니다.

<div class="content-ad"></div>

## HTML 요소의 해부학

HTML 요소의 구조는 시작 태그로 이루어져 있습니다. 시작 태그는 꺽쇠 괄호로 둘러싸여 있습니다.

예를 들어, 단락 태그인 `<p>`는 보여질 내용 다음에 이어진 후, 동일한 이름의 닫는 태그로 닫힙니다. 닫는 태그는 열린 태그와 동일하지만 요소 이름 앞에 슬래시가 붙습니다.

<div class="content-ad"></div>

결과는 다음과 같습니다:

예시:

```js
<p> 나의 강아지 이름은 Retovem입니다. </p>
```

## HTML로 무엇을 만들 수 있나요?

<div class="content-ad"></div>

HTML을 사용하면 원하는 주제로 웹 페이지를 만들 수 있어요! 블로그, 가상 상점, 뉴스 페이지 등 다양한 요소를 만들 수 있답니다.

우리가 만들 수 있는 주요 요소 몇 가지를 살펴보면:

- 제목과 단락
- 링크와 버튼
- 이미지
- 목록과 표
- 폼
- 비디오와 오디오

이 마크업 언어는 많은 기능을 제공해요. 여기서 언급된 것 외에도 다양한 기능이 있어요. 이것들은 프로젝트의 필요에 맞게 활용할 수 있는데요.

<div class="content-ad"></div>

## HTML의 발전

팀 버너스-리는 CERN(CERN: 유럽 원자핵 연구 기구)에서 NeXTSTEP 개발 환경을 사용하여 HTML을 개발했습니다. 처음에는 연구 및 커뮤니케이션을 관리하기 위한 도구로 시작되었습니다.

인터넷의 발전과 함께 이 솔루션이 전 세계적인 주목을 받았습니다. 초기 버전들은 유연했고, 이는 이 분야의 초보자들을 돕았습니다.

시간이 지남에 따라 구조가 더 엄격해지고 있지만, 오늘날에도 브라우저들은 과거의 방식으로 만들어진 웹 페이지를 역호환성을 통해 해석할 수 있습니다.

<div class="content-ad"></div>

90년대에 명세가 정의되었습니다. 그 후 HTML이 발전을 시작했고, 1995년에 HTML 2.0 버전이 발표되었습니다.

1997년 말에 HTML 3.5 버전이 출시되었고, 이것과 함께 W3C의 작업 그룹이 2000년에 XHTML 개발에 초점을 맞추기 시작했습니다. 그리고 마침내 2014년에 HTML이 출시되었는데, 현재까지 사용되고 있습니다.

우리는 오늘날 사용하는 HTML 버전에 이르기까지 여러 버전의 HTML이 출시되었다는 것을 알았는데요, HTML과 HTML5의 차이는 무엇일까요?

## HTML과 HTML5의 차이

<div class="content-ad"></div>

이전 버전에서 콘텐츠 구조화는 주로 일반적인 요소로 이루어졌어요.


HTML 웹을 구축하는 핵심 요소, 그 중요성은 무엇인가


## 소개

안녕하세요, 여러분! 개발자 여러분, 반가워요! 최신 프로젝트인 클래식 틱택토 게임을 소개해 드리게 되어 기쁩니다. 이 프로젝트는 JavaScript 기술을 연습하기에 최적인 방법이죠, 특히 게임 로직 처리, DOM 조작 및 사용자 상호작용 부분이죠. JavaScript를 막 시작한 분이든 재미있는 도전을 찾고 계신 분이든, 틱택토 게임은 여러분의 기술을 향상시키기에 완벽한 프로젝트입니다.

## 프로젝트 개요

틱택토 게임은 인기 있는 두 명용 게임의 웹 기반 구현입니다. 이 프로젝트는 상호작용 요소를 생성하는 방법, 게임 상태 관리 및 간단한 AI 로직 구현을 보여줍니다. 게임은 완전히 반응형으로 설계되어 데스크톱 및 모바일 장치에서 플레이할 수 있도록 되어 있습니다.

<div class="content-ad"></div>

## 기능

- 두 명 플레이 모드: 동일한 장치에서 친구와 함께 플레이하세요.
- 게임 로직: 각 이동 후 승자 또는 무승부를 자동으로 확인합니다.
- 재설정 기능: 언제든지 게임을 쉽게 다시 시작할 수 있습니다.
- 반응형 디자인: 게임 레이아웃이 다양한 화면 크기에 맞춰져 모든 기기에서 일관된 경험을 제공합니다.

## 사용된 기술

- HTML: 게임 인터페이스를 구조화합니다.
- CSS: 게임 보드, 버튼 및 다른 UI 요소를 디자인합니다.
- JavaScript: 플레이어 턴, 승리 조건 및 게임 재설정을 포함한 게임 로직을 관리합니다.

<div class="content-ad"></div>

## 프로젝트 구조

프로젝트 구조를 간략히 살펴보겠습니다:

```js
Tic-Tac-Toe/
├── index.html
├── styles.css
└── script.js
```

- index.html: Tic-Tac-Toe 게임의 HTML 구조를 포함합니다.
- styles.css: 게임 보드 및 반응형 디자인을 위한 CSS 스타일을 포함합니다.
- script.js: 플레이어 턴 및 승리 조건을 포함한 게임 로직을 처리합니다.

<div class="content-ad"></div>

## 설치

프로젝트를 시작하려면 다음 단계를 따르세요:

- 저장소 복제:

```bash
git clone https://github.com/abhishekgurjar-in/Tic-Tac-Toe.git
```

- 프로젝트 디렉토리 열기:

```bash
cd Tic-Tac-Toe
```

- 프로젝트 실행:
  웹 브라우저에서 index.html 파일을 열어 Tic-Tac-Toe 게임을 시작하세요.

## 사용법

<div class="content-ad"></div>

- 웹 브라우저에서 웹 사이트를 엽니다.
- 그리드의 빈 셀을 클릭하여 게임을 시작합니다.
- 플레이어는 번갈아가며 셀에 자신의 표식(X 또는 O)을 놓습니다.
- 결과 확인: 게임은 승리 조합이 있는 경우 승자를 선언하거나 모든 셀이 채워진 경우 비긴 것으로 선언합니다.
- 게임 리셋: "게임 다시 시작" 버튼을 클릭하여 새 게임을 시작합니다.

## 코드 설명

### HTML

index.html 파일은 Tic-Tac-Toe 게임의 구조를 설정하며, 게임 보드 및 제어 버튼을 포함합니다. 다음은 일부 코드입니다:

<div class="content-ad"></div>

```js
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tic-Tac-Toe Game</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="msg-container hide">
      <p id="msg">Winner</p>
      <button id="new-btn">New Game</button>
    </div>
    <main>
      <h1>Tic Tac Toe</h1>
      <div class="container">
        <div class="game">
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
        </div>
      </div>
      <button id="reset-btn">Reset Game</button>
    </main>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>
```

### CSS

styles.css 파일은 Tic-Tac-Toe 게임의 모양을 결정합니다. 그리드 레이아웃, 버튼, 그리고 반응형 디자인이 포함되어 있습니다. 여기에 몇 가지 중요한 스타일이 있습니다:

```js
* {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: #548687;
    text-align: center;
  }

  .container {
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .game {
    height: 60vmin;
    width: 60vmin;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5vmin;
  }

  .box {
    height: 18vmin;
    width: 18vmin;
    border-radius: 1rem;
    border: none;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    font-size: 8vmin;
    color: #b0413e;
    background-color: #ffffc7;
  }

  #reset-btn {
    padding: 1rem;
    font-size: 1.25rem;
    background-color: #191913;
    color: #fff;
    border-radius: 1rem;
    border: none;
  }

  #new-btn {
    padding: 1rem;
    font-size: 1.25rem;
    background-color: #191913;
    color: #fff;
    border-radius: 1rem;
    border: none;
  }

  #msg {
    color: #ffffc7;
    font-size: 5vmin;
  }

  .msg-container {
    height: 100vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4rem;
  }

  .hide {
    display: none;
  }

  .footer {
    margin: 50px;
    text-align: center;
    color: white;
}
```

<div class="content-ad"></div>

### JavaScript

게임 로직을 관리하는 script.js 파일은 플레이어 턴 처리, 승자 확인 및 게임 재설정을 포함합니다. 여기에 스니펫이 있어요:

```js
let boxes = document.querySelectorAll(".box");
let resetBtn = document.querySelector("#reset-btn");
let newGameBtn = document.querySelector("#new-btn");
let msgContainer = document.querySelector(".msg-container");
let msg = document.querySelector("#msg");

let turnO = true; //playerX, playerO
let count = 0; //무승부 판단용

const winPatterns = [
  [0, 1, 2],
  [0, 3, 6],
  [0, 4, 8],
  [1, 4, 7],
  [2, 5, 8],
  [2, 4, 6],
  [3, 4, 5],
  [6, 7, 8],
];

const resetGame = () => {
  turnO = true;
  count = 0;
  enableBoxes();
  msgContainer.classList.add("hide");
};

boxes.forEach((box) => {
  box.addEventListener("click", () => {
    if (turnO) {
      //playerO
      box.innerText = "O";
      turnO = false;
    } else {
      //playerX
      box.innerText = "X";
      turnO = true;
    }
    box.disabled = true;
    count++;

    let isWinner = checkWinner();

    if (count === 9 && !isWinner) {
      gameDraw();
    }
  });
});

const gameDraw = () => {
  msg.innerText = `게임은 무승부입니다.`;
  msgContainer.classList.remove("hide");
  disableBoxes();
};

const disableBoxes = () => {
  for (let box of boxes) {
    box.disabled = true;
  }
};

const enableBoxes = () => {
  for (let box of boxes) {
    box.disabled = false;
    box.innerText = "";
  }
};

const showWinner = (winner) => {
  msg.innerText = `축하합니다, 승자는 ${winner} 입니다`;
  msgContainer.classList.remove("hide");
  disableBoxes();
};

const checkWinner = () => {
  for (let pattern of winPatterns) {
    let pos1Val = boxes[pattern[0]].innerText;
    let pos2Val = boxes[pattern[1]].innerText;
    let pos3Val = boxes[pattern[2]].innerText;

    if (pos1Val != "" && pos2Val != "" && pos3Val != "") {
      if (pos1Val === pos2Val && pos2Val === pos3Val) {
        showWinner(pos1Val);
        return true;
      }
    }
  }
};

newGameBtn.addEventListener("click", resetGame);
resetBtn.addEventListener("click", resetGame);
```

## 라이브 데모

<div class="content-ad"></div>

위의 텍스트를 친근한 톤으로 한국어로 번역해보겠습니다.

여기서 Tic-Tac-Toe 게임의 라이브 데모를 확인할 수 있어요.

## 결론

이 Tic-Tac-Toe 게임을 만드는 것은 JavaScript를 연습할 수 있는 즐거운 경험이었어요, 특히 상호작용 웹 애플리케이션을 만들 때입니다. 이 프로젝트가 여러분에게 자신만의 게임을 만들고 JavaScript의 가능성을 탐험하도록 영감을 줬으면 좋겠어요. 즐거운 코딩되세요!

## 크레딧

<div class="content-ad"></div>

이 프로젝트는 JavaScript 및 DOM 조작에 중점을 둔 웹 개발 기술을 향상시키기 위한 나의 지속적인 여정의 일환으로 개발되었습니다.

## 저자

- Abhishek Gurjar
  GitHub 프로필


HTML,CSS,JS로 틱택토 게임 웹사이트 만드는 방법


## 소개

안녕하세요, 개발자 여러분! 오늘은 최근에 완료한 프로젝트인 아날로그 시계를 공유할 기회가 너무 반가워요. 이 프로젝트는 전통적인 아날로그 시계 모습을 활용하여 시간을 표시하는 시각적으로 매력적이고 상호작용적인 방법입니다. 특히 애니메이션, DOM 조작 및 시간 기반 기능과 같은 JavaScript, CSS 및 HTML 기술을 연마하기에 탁월한 프로젝트입니다. 초보자이거나 클래식 시계 인터페이스를 만들고 싶어하는 경험 많은 개발자라면 이 프로젝트를 선택하는 것이 좋습니다.

## 프로젝트 개요

아날로그 시계는 전통적인 아날로그 시계의 외관과 기능을 모방하는 실시간 시계입니다. 시계는 매 초마다 동적으로 업데이트되며 시, 분, 초 단위의 바늘이 부드럽게 회전하여 현재 시간을 반영합니다. 이 프로젝트는 동적이고 시각적으로 매력적인 웹 애플리케이션을 구축하는 연습을 원하는 개발자들에게 이상적입니다.

<div class="content-ad"></div>

## 기능

- 실시간 시계: 시계는 매 초마다 업데이트되며, 움직이는 시, 분, 초 바늘로 현재 시간을 표시합니다.
- 부드러운 애니메이션: 시계 바늘이 부드럽게 회전하여 현실적인 아날로그 시계 효과를 만듭니다.
- 반응형 디자인: 시계는 반응형으로 디자인되어 다양한 기기와 화면 크기에서 멋지게 보이도록 제작되었습니다.
- 미니멀한 디자인: 기능성과 우아함에 중점을 두고 깔끔하고 간결한 디자인을 갖추고 있습니다.

## 사용된 기술

- HTML: 웹페이지와 시계 레이아웃을 구성하는 데 사용되었습니다.
- CSS: 시계를 스타일링하기 위해 적용되었으며, 바늘의 위치 조정 및 부드러운 애니메이션 추가에 사용되었습니다.
- JavaScript: 시계의 시간 계산을 처리하고 DOM을 업데이트하며 바늘의 회전을 관리하기 위해 구현되었습니다.

<div class="content-ad"></div>

## 프로젝트 구조

프로젝트 구조를 간단히 살펴보겠습니다:

```js
Analog-Clock/
├── index.html
├── style.css
└── script.js
```

- index.html: 웹페이지의 HTML 구조를 포함합니다.
- style.css: 애니메이션 및 반응형 디자인을 포함한 CSS 스타일을 관리합니다.
- script.js: 자바스크립트를 사용하여 시계의 동적 측면을 관리합니다.

<div class="content-ad"></div>

## 설치

프로젝트를 시작하려면 다음 단계를 따르세요:

- 저장소 복제:
  git clone https://github.com/abhishekgurjar-in/Analog-Clock.git
- 프로젝트 디렉토리 열기:
  cd Analog-Clock
- 프로젝트 실행:
  로컬 서버에서 실행하거나 웹 브라우저에서 index.html 파일을 열 수 있습니다.
- 로컬 서버에서 실행하거나 웹 브라우저에서 index.html 파일을 열 수 있습니다.

## 사용법

<div class="content-ad"></div>

- 웹 브라우저에서 웹 사이트를 열어주세요.
- 시계를 보며 시, 분, 초 침의 부드러운 애니메이션으로 현재 시간을 표시합니다.

## 코드 설명

### HTML

index.html 파일은 웹페이지의 구조를 설정하며, 시계 컨테이너와 헤더를 포함합니다. 아래는 HTML 코드 일부입니다:

<div class="content-ad"></div>

```js
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Analog Clock</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="header">
      <h1>Analog Clock</h1>
    </div>
    <div id="clockContainer">
      <div id="hour"></div>
      <div id="minute"></div>
      <div id="second"></div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>
```

### CSS

style.css 파일은 시계의 컨테이너와 시침을 스타일링하여 시간을 정확히 표시할 수 있도록 보장합니다. 주요 스타일은 다음과 같습니다:

```js
#clockContainer {
  position: relative;
  margin: auto;
  height: 30vw;
  width: 30vw;
  background: url(clock.png) no-repeat;
  background-size: 100%;
}

#hour,
#minute,
#second {
  position: absolute;
  background: black;
  border-radius: 10px;
  transform-origin: bottom;
}

#hour {
  width: 1.8%;
  height: 25%;
  top: 25%;
  left: 48.85%;
  opacity: 0.8;
}

#minute {
  width: 1.6%;
  height: 30%;
  top: 19%;
  left: 48.9%;
  opacity: 0.8;
}

#second {
  width: 1%;
  height: 40%;
  top: 9%;
  left: 49.25%;
  opacity: 0.8;
}

.header {
  margin: 80px;
  text-align: center;
}

.footer {
  margin: 50px;
  text-align: center;
}
```

<div class="content-ad"></div>

### JavaScript

스크립트.js 파일은 현재 시간을 계산하고 시계의 시침을 업데이트하는 역할을 합니다. 아래는 JavaScript 코드 일부입니다:

```js
setInterval(() => {
  const date = new Date();
  const hourTime = date.getHours();
  const minuteTime = date.getMinutes();
  const secondTime = date.getSeconds();

  const hourRotation = 30 * hourTime + minuteTime / 2;
  const minuteRotation = 6 * minuteTime;
  const secondRotation = 6 * secondTime;

  const hour = document.getElementById("hour");
  const minute = document.getElementById("minute");
  const second = document.getElementById("second");

  hour.style.transform = `rotate(${hourRotation}deg)`;
  minute.style.transform = `rotate(${minuteRotation}deg)`;
  second.style.transform = `rotate(${secondRotation}deg)`;
}, 1000);
```

## 라이브 데모

<div class="content-ad"></div>

이곳에서 아날로그 시계의 라이브 데모를 확인할 수 있어요.

## 결론

이 아날로그 시계를 구축하는 것은 JavaScript 애니메이션과 DOM 조작에 대해 더 심층적으로 파고들 수 있는 보람찬 경험이었습니다. 이 프로젝트가 여러분에게 자신만의 상호작용 및 시각적으로 매력적인 애플리케이션을 만들도록 영감을 줄 수 있기를 바라요. 코드를 탐험하고 원하는 대로 사용자 정의하며 자신의 프로젝트에 활용하는 것을 자유롭게 해보세요. 즐거운 코딩 되세요!

## 크레딧

<div class="content-ad"></div>

이 프로젝트는 아날로그 시계의 클래식 디자인에서 영감을 받았으며 간단한 실시간 시간 표시 도구가 필요한 경우를 고려하여 개발되었습니다.

## 저자

- Abhishek Gurjar
  GitHub 프로필
- GitHub 프로필


 HTML, CSS, JavaScript로 아날로그 시계 웹사이트 만들기


## 소개

안녕하세요, 개발자 여러분! 제가 최근에 개발한 '드럼 킷' 프로젝트를 공유할 기회가 있어 정말 기쁩니다. 이 프로젝트는 JavaScript를 연습하기에 재미있고 상호작용적인 방법을 제공합니다. 특히 사용자 입력 및 오디오 재생에 대해 다룹니다. JavaScript에 입문하려는 초보자이거나 음악과 코딩을 좋아하는 사람이라면 이 프로젝트가 딱입니다.

## 프로젝트 개요

'드럼 킷'은 드럼 세트를 시뮬레이션하는 상호작용적인 웹 애플리케이션입니다. 사용자는 드럼 버튼을 클릭하거나 키보드에서 해당 키를 눌러 소리를 연주할 수 있습니다. 이 프로젝트는 이벤트, 오디오 및 CSS 애니메이션을 어떻게 사용하여 반응성이 있고 매력적인 사용자 경험을 만드는지 보여줍니다.

<div class="content-ad"></div>

## 기능

- 상호 작용 드럼 버튼: 다른 드럼 소리를 재생하는 클릭 가능한 버튼입니다.
- 키보드 제어: 특정 키를 눌러 드럼 소리를 발생시킵니다.
- 시각적 피드백: 버튼을 누를 때 애니메이션이 표시되어 즉각적인 시각적 피드백을 제공합니다.
- 반응형 디자인: 레이아웃이 다른 화면 크기에 맞춰 조정되어 장치 간 일관된 경험을 보장합니다.

## 사용된 기술

- HTML: 드럼 킷 인터페이스의 구조를 제공합니다.
- CSS: 버튼 애니메이션 및 전반적인 레이아웃을 포함한 드럼 킷 디자인을 스타일링합니다.
- JavaScript: 사용자 상호 작용, 소리 재생 및 애니메이션을 처리합니다.

<div class="content-ad"></div>

## 프로젝트 구조

프로젝트 구조를 간단히 살펴보겠습니다:

```js
Drum-Kit/
├── index.html
├── styles.css
└── index.js
```

- index.html: 드럼 키트의 HTML 구조를 포함합니다.
- styles.css: 드럼 키트와 애니메이션을 위한 CSS 스타일이 포함됩니다.
- index.js: 사용자 상호작용, 사운드 효과 및 애니메이션을 관리합니다.

<div class="content-ad"></div>

## 설치

프로젝트를 시작하려면 다음 단계를 따라주세요:

- 저장소를 복제합니다:

```bash
git clone https://github.com/abhishekgurjar-in/Drum-Kit.git
```

- 프로젝트 디렉토리를 엽니다:

```bash
cd Drum-Kit
```

- 프로젝트를 실행합니다:
  웹 브라우저에서 index.html 파일을 열어 드럼 킷을 확인하세요.
- 인덱스.html 파일을 웹 브라우저에서 열어 드럼 킷을 확인하세요.

## 사용법

<div class="content-ad"></div>

- 웹 브라우저에서 웹 사이트를 열어주세요.
- 드럼 버튼을 클릭하거나 해당하는 키(w, a, s, d, j, k, l)를 눌러 다른 드럼 소리를 연주해보세요.
- 눌렀을 때 버튼 애니메이션을 확인하여 시각적 피드백을 받아보세요.

## 코드 설명

### HTML

index.html 파일은 드럼 킷의 구조를 설정하고, 각 드럼 소리를 연주하는 버튼 및 바닥글을 포함하고 있습니다. 아래는 일부 코드 예시입니다:

<div class="content-ad"></div>

```js
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Drum Kit</title>
    <link rel="stylesheet" href="styles.css" />
    <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet" />
  </head>
  <body>
    <h1 id="title">Drum 🥁 Kit</h1>
    <div class="set">
      <button class="w drum">w</button>
      <button class="a drum">a</button>
      <button class="s drum">s</button>
      <button class="d drum">d</button>
      <button class="j drum">j</button>
      <button class="k drum">k</button>
      <button class="l drum">l</button>
    </div>
    <script src="index.js" charset="utf-8"></script>
    <footer>Made with ❤️ by Abhishek Gurjar</footer>
  </body>
</html>
```

### CSS

The styles.css file styles the drum kit, including the drum buttons and animations. Here are some key styles:

```js
body {
  text-align: center;
  background-color: #283149;
}

h1 {
  font-size: 5rem;
  color: #DBEDF3;
  font-family: "Arvo", cursive;
  text-shadow: 3px 0 #DA0463;
}

footer {
  color: #DBEDF3;
  font-family: sans-serif;
}

.w { background-image: url("images/tom1.png"); }
.a { background-image: url("images/tom2.png"); }
.s { background-image: url("images/tom3.png"); }
.d { background-image: url("images/tom4.png"); }
.j { background-image: url("images/snare.png"); }
.k { background-image: url("images/crash.png"); }
.l { background-image: url("images/kick.png"); }

.set {
  margin: 10% auto;
}

.pressed {
  box-shadow: 0 3px 4px 0 #DBEDF3;
  opacity: 0.5;
}

.drum {
  outline: none;
  border: 10px solid #404B69;
  font-size: 5rem;
  font-family: 'Arvo', cursive;
  line-height: 2;
  font-weight: 900;
  color: #DA0463;
  text-shadow: 3px 0 #DBEDF3;
  border-radius: 15px;
  display: inline-block;
  width: 150px;
  height: 150px;
  text-align: center;
  margin: 10px;
  background-color: white;
}
```

<div class="content-ad"></div>

### JavaScript

index.js 파일은 드럼 키트의 기능을 제어하며, 소리 재생과 버튼 애니메이션을 포함합니다. 아래는 장표입니다:

```js
const numberOfDrumButtons = document.querySelectorAll(".drum").length;

for (let i = 0; i < numberOfDrumButtons; i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", function () {
    const buttonInnerHTML = this.innerHTML;

    makeSound(buttonInnerHTML);
    buttonAnimation(buttonInnerHTML);
  });
}

document.addEventListener("keypress", function (event) {
  makeSound(event.key);
  buttonAnimation(event.key);
});

function makeSound(key) {
  switch (key) {
    case "w":
      const tom1 = new Audio("sounds/tom-1.mp3");
      tom1.play();
      break;
    case "a":
      const tom2 = new Audio("sounds/tom-2.mp3");
      tom2.play();
      break;
    case "s":
      const tom3 = new Audio("sounds/tom-3.mp3");
      tom3.play();
      break;
    case "d":
      const tom4 = new Audio("sounds/tom-4.mp3");
      tom4.play();
      break;
    case "j":
      const snare = new Audio("sounds/snare.mp3");
      snare.play();
      break;
    case "k":
      const crash = new Audio("sounds/crash.mp3");
      crash.play();
      break;
    case "l":
      const kick = new Audio("sounds/kick-bass.mp3");
      kick.play();
      break;
    default:
      console.log(key);
  }
}

function buttonAnimation(currentKey) {
  const activeButton = document.querySelector("." + currentKey);
  activeButton.classList.add("pressed");

  setTimeout(function () {
    activeButton.classList.remove("pressed");
  }, 100);
}
```

## 데모 보기

<div class="content-ad"></div>

여기서 Drum Kit의 라이브 데모를 확인할 수 있어요.

## 결론

Drum Kit을 만들면서 JavaScript의 이벤트 처리와 오디오 기능에 몰두해 볼 수 있어서 정말 멋진 경험이었어요. 이 프로젝트가 여러분에게 상호작용하는 웹 애플리케이션을 시도하고 자신만의 재미있고 매력적인 프로젝트를 만들도록 영감을 줄 수 있기를 바라요. 코드를 탐험하고 원하면 사용자 정의하여 자신의 작업에 활용해보세요. 즐거운 코딩되세요!

## 크레딧

<div class="content-ad"></div>

이 프로젝트는 JavaScript의 상호 작용 웹 요소를 만드는 데 잠재력을 보여주기 위해 만들어졌어요.

## 저자

- Abhishek Gurjar
  GitHub 프로필
- GitHub 프로필


자바스크립트로 만드는 드럼 킷 웹사이트 만들기


반응형 웹 디자인의 멋진 세계에 오신 것을 환영합니다!

웹 개발에 처음이라면, "사이트를 반응형으로 만드는 게 무엇일까요?" 궁금할 수 있습니다. 이렇게 생각해보세요. 반응형 웹 디자인은 마치 모든 자리에 맞는 옷장을 가지고 있는 것과 같습니다. 캐주얼 브런치나 화려한 갈라에 입을 옷을 골라 입을 때처럼, 모든 기기(스마트폰, 태블릿, 데스크톱 모니터)에서 웹사이트가 멋지게 보이도록 하는 것을 뜻합니다.

당신의 사이트를 디지털 파티의 주인공으로 만들 준비가 되셨나요? 함께 공부해봅시다!

<img src="/assets/img/2024-08-19-ResponsiveWebDesignMakingYourSiteMobile-Friendly_0.png" />

<div class="content-ad"></div>

## 미디어 쿼리의 마법: 반응형 주문서

뷰어의 기기에 따라 웹사이트의 모습을 바꾸는 마법같은 두루마리가 있다고 상상해보세요. 바로 CSS의 미디어 쿼리가 하는 일입니다. 화면 너비, 방향, 해상도와 같은 요소에 따라 다른 스타일을 적용할 수 있습니다. 여기에서 첫 번째 반응형 주문을 부를 수 있는 방법을 보여드릴게요.

```js
/* 600px 보다 작은 화면용 */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}
```

이 코드 조각은 600px보다 작은 화면의 배경을 연한 파랑색으로 변경합니다. 모바일 기기를 위한 세련된 메이크오버를 한 것 같죠!

<div class="content-ad"></div>

## 유동 레이아웃: 웹 디자인의 신축성 있는 바지

신축성 있는 바지가 거의 모든 상황에 이상적인 것처럼, 유동 레이아웃은 웹사이트를 우아하게 확장하고 축소할 수 있게 해줍니다. 고정된 너비 대신 % (퍼센트)나 vw (뷰포트 너비) 단위를 사용하여 레이아웃을 다양한 화면 크기에 맞게 조정할 수 있습니다.

```css
.container {
  width: 80%; /* 뷰포트 너비의 80%를 차지합니다 */
  margin: 0 auto; /* 컨테이너를 가운데 정렬합니다 */
}
```

이렇게 하면 디바이스에 상관없이 컨테이너가 화면의 80%를 차지합니다. 웹사이트용 신축성 있는 바지 - 무엇이 좋지 않을까요?

<div class="content-ad"></div>

## 유연한 이미지: 사진이 원활하게 표시되도록하기

마치 맞지 않는 청바지를 강제로 입지 않는 것처럼, 웹 사이트의 이미지도 원활하게 조절되어야 합니다. 이미지가 컨테이너에 적합하게 조절되도록 하려면 최대 너비 속성을 사용하십시오.

```js
img {
    max-width: 100%;
    height: auto;
}
```

이 규칙을 사용하면 이미지가 필요에 따라 축소되지만 컨테이너의 너비를 초과하지 않습니다. 깨진 이미지나 어색한 줌인은 이제 그만하세요!

<div class="content-ad"></div>

## 뷰포트 메타 태그: 모바일 블리스의 관문

사이트가 모바일 기기에서 볼 때 브라우저에 적절히 확장하는 방법을 알려야 합니다. 뷰포트 메타 태그가 모바일 친화적인 마법의 열쇠입니다. 이것을 HTML `head`에 추가하세요.

```js
<meta name="viewport" content="width=device-width, initial-scale=1">
```

이 태그를 사용하면 사이트가 장치의 너비에 맞게 올바르게 확장되고 날카롭고 사용하기 쉽게 유지됩니다.

<div class="content-ad"></div>

## 반응형 타이포그래피: 적합한 글꼴을 찾아라

멋진 옷에는 적절한 액세서리가 필요하듯, 웹사이트도 최상의 모습을 위해 반응형 타이포그래피가 필요합니다. 텍스트가 적절하게 확장되도록 고정 크기가 아닌 em 또는 rem과 같은 상대적 단위를 사용하세요.

```js
h1 {
    font-size: 2rem; /* 사용자의 기본 글꼴 크기와 함께 확장됨 */
}
```

이렇게 하면 제목이 어떤 화면 크기에서도 멋지게 보이며, 독자가 당신의 멋진 콘텐츠를 읽기 위해 눈을 가늘게 뜨지 않아도 됩니다.

<div class="content-ad"></div>

## 테스트 중: 최종 드레스 리허설

세계에 사이트를 공개하기 전에 다양한 기기와 화면 크기에서 테스트해보세요. 에뮬레이터 및 반응형 디자인 테스트 도구를 사용하여 사이트가 다른 화면에서 어떻게 보이는지 확인할 수 있습니다. 큰 공연을 앞둔 듯한 느낌으로 생각해보세요.

## 마무리

반응형 웹 디자인은 모든 기기에서 훌륭하게 보이는 웹 사이트를 만들기 위한 최고의 열쇠입니다. 미디어 쿼리로부터의 마법과 유연한 레이아웃, 유연한 이미지를 통해 모바일, 태블릿 및 데스크탑 화면에서도 인상적인 사이트를 선보일 준비가 될 것입니다.

<div class="content-ad"></div>

요즘 디지털 시대에서는 누구나 사용하는 기기와 상관없이 웹을 즐길 자격이 있어요. 그래서 이제 반응형 웹 디자인을 위한 마법봉을 준비하고, 여러분의 사이트를 모바일 친화적으로 만들어보세요.

코딩 즐거운 시간 되세요!


반응형 웹 디자인 모바일 친화적인 사이트 만들기


![JavasDirtyLittleSecretWhy11but10001000MightSurpriseYou_0.png](/assets/img/2024-08-19-JavasDirtyLittleSecretWhy11but10001000MightSurpriseYou_0.png)

자바는 직관적이라고 알려져 있지만 가끔씩은 예기치 못한 상황이 발생할 때가 있습니다. 그 중 하나는 Integer 객체를 비교할 때 발생하는 문제입니다. 예를 들어, 1000 == 1000은 참이라고 생각할 수 있지만, 자바에서는 그렇지 않을 수도 있습니다. 그 이유를 알아보겠습니다.

# 기본 자료형 vs. 객체 비교

자바에서 두 개의 기본 자료형인 int a = 1; int b = 1;을 a == b로 비교하면 결과는 참이 됩니다. 이는 기본 자료형은 값으로 비교되기 때문에 간단하게 처리됩니다.

<div class="content-ad"></div>

이제 Integer 객체(정수의 래퍼 클래스)를 사용할 때 흥미로운 부분이 시작됩니다. ==를 사용하여 두 Integer 객체를 비교할 때, 그들의 값이 아닌 참조를 비교합니다. 이것이 혼란의 가능성이 들어오는 곳입니다.

# 특이점: Integer 캐싱

Java는 -128에서 127 범위 내에 있는 Integer 객체를 캐싱하여 메모리 사용량을 최적화합니다. 이 범위 내의 값을 가진 Integer를 생성하면, Java는 해당 값으로 이미 캐시에 존재하는 객체가 있는지 확인합니다. 만약 있다면, Java는 해당 객체를 재사용합니다.

아래는 설명을 위한 예시입니다:

<div class="content-ad"></div>

```java
Integer x = 1;
Integer y = 1;
System.out.println(x == y); // Output: true
```

이 경우 x와 y는 동일한 캐시된 객체를 가리키기 때문에 x == y는 true를 반환합니다.

그러나 캐시된 범위를 벗어나면 어떻게 될까요?

```java
Integer a = 1000;
Integer b = 1000;
System.out.println(a == b); // Output: false
```

<div class="content-ad"></div>

이제 a와 b는 동일한 객체를 가리키지 않습니다. 1000은 -128에서 127 범위 밖에 있기 때문에 Java는 매번 새 Integer 객체를 생성하며, a == b는 두 개의 다른 참조를 비교하여 false를 반환합니다.

비트 변환 설명:

더 깊이 파헤쳐서 1000이 이 캐시된 범위에 속하지 않는 이유를 이해해 봅시다:

- 이진수로 표현하면 1000은 1111101000으로 나타납니다.
- 이 이진 표현에는 10비트가 필요합니다.

<div class="content-ad"></div>

하지만, -128부터 127까지의 캐싱 범위는 8비트 내에서 표현할 수 있는 값에 해당합니다. 예를 들어:

- 127을 이진수로 나타내면 01111111이며, 이는 8비트 내에 들어갑니다.
- -128을 이진수로 나타내면 (2의 보수를 사용하여) 10000000이며, 이 또한 8비트 내에 들어갑니다.

그러나 1000은 8비트보다 많은 비트가 필요하므로 캐시 범위를 벗어나며, Java는 각 발생마다 캐시된 인스턴스를 사용하는 대신 새 Integer 객체를 생성합니다.

# 값 비교를 위해 .equals()를 사용하세요

<div class="content-ad"></div>

위험 요소를 피하기 위해 Integer 객체를 비교할 때 항상 .equals()를 사용하세요:

```js
System.out.println(a.equals(b)); // 결과: true
```

이 방법은 참조가 아닌 값들을 비교하기 때문에 직관적으로 예상하고 있는 결과를 제공합니다.

# Java는 왜 -128에서 127까지만 캐시하는 걸까요?

<div class="content-ad"></div>

자바가 -128부터 127까지의 값을 캐시하는 이유가 궁금할 수도 있겠죠? 그 이유는 효율성에 있습니다. 이 값들은 프로그래밍에서 흔히 사용되며, 이를 캐시함으로써 자주 사용되는 숫자에 대해 새 객체를 만드는 오버헤드를 줄일 수 있습니다. 이는 작지만 효과적인 최적화로 시간과 메모리를 절약할 수 있습니다.

# 요약

- 기본 데이터 타입(int)은 값으로 비교됩니다.
- 객체(Integer)는 ==를 사용할 때 참조로 비교됩니다.
- 정수 캐싱은 -128부터 127 범위에 적용됩니다.
- Integer 객체를 비교할 때는 항상 .equals()를 사용하여 값을 비교하세요.

자바에서 정수를 사용할 때 다음부터는 이를 생각해보세요. 가끔 1000 == 1000이 당신을 놀라게 할지도 몰라요!


자바의 오류 메시지 1 1이지만 1000 1000은 놀라울 수도 있어


<img src="/assets/img/2024-08-19-PipelineDesignpattern_0.png" />

파이프라인 디자인 패턴은 서로 다른 단계에서 순차적 데이터 처리를 허용하여 코드의 모듈성과 재사용성을 제공합니다.

우리가 호출해야 할 N개의 함수가 있고, 한 함수의 실행이 다른 함수의 출력에 의존하는 경우를 고려해봅시다. 이 구현을 간소화하기 위해, 각 함수를 일반화하여 입력과 출력이 있는 추상화로 전환하는 파이프라인 디자인 패턴을 사용할 수 있습니다.

장점:

<div class="content-ad"></div>

- 분리: 각 단계가 느슨하게 연결되어 유지 보수가 쉽습니다.
- 재사용성: 한 단계는 다른 파이프라인의 일부가 될 수 있습니다.
- 확장성: 새로운 단계를 추가할 때 기존 단계에 중요한 변경이 필요하지 않습니다.

![](/assets/img/2024-08-19-PipelineDesignpattern_1.png)

이 문서에서는 특수 문자, 밑줄 및 숫자가 포함된 문자열이 입력으로 주어지는 매우 간단한 파이프라인을 구현해 보겠습니다. 우리는 밑줄, 특수 문자 및 숫자를 차례대로 필터링하는 3가지 메서드를 만들 것입니다. 마지막에는 문자만 있는 문자열을 얻게 됩니다. 이 시나리오에는 훨씬 간단한 접근 방법이 있지만, 이 예제를 통해 이해를 쉽게 하기 위해 유지합니다.

제네릭 입력과 출력을 사용하는 메서드를 가진 인터페이스를 만드세요:

<div class="content-ad"></div>

```java
package com.example.pipeline_design_pattern_overview.pipeline;

public interface BaseFunction<I,O> {

    public String getFunctionName(); // 해당 기능을 구현하는 함수의 이름을 가져옵니다.
    public O apply(I input);
}
```

각 단계는 이 인터페이스를 구현하고 apply() 및 getFunctionName() 메서드를 구현합니다. 여기에는 이를 구현하는 3개의 클래스가 있습니다:

```java
public class RemoveSpecialChars implements BaseFunction<String, Object> {

    // apply()를 구현하여 String을 입력으로 받고 String을 출력합니다.
}

public class RemoveUnderScore implements BaseFunction<String, Object> {

    // apply()를 구현하여 String을 입력으로 받고 String을 출력합니다.
}

public class RemoveNumbers implements BaseFunction<String, Object> {

    // apply()를 구현하여 String을 입력으로 받고 char[]을 출력합니다.
}
```

BaseFunction 구현을 가져와 리스트에 저장하는 메서드를 포함하는 파이프라인 생성을위한 구성 요소를 생성하십시오.

<div class="content-ad"></div>

```java
package com.example.pipeline_design_pattern_overview.service;

import com.example.pipeline_design_pattern_overview.model.PipelineCreator;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class PipelineService {

    private final PipelineCreator pipelineCreator;

    @Autowired
    public PipelineService(PipelineCreator pipelineCreator) {
        this.pipelineCreator = pipelineCreator;
    }

    public Object executePipeline(String inputData) {
        return pipelineCreator.getHandlers().stream()
                .reduce(Function.identity(), BaseFunction::andThen)
                .apply(inputData);
    }
}
```

<div class="content-ad"></div>

```java
package com.example.pipeline_design_pattern_overview.service;

import com.example.pipeline_design_pattern_overview.model.PipelineCreator;
import com.example.pipeline_design_pattern_overview.pipeline.BaseFunction;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;

@Service
public class PipelineService {

    @Autowired
    PipelineCreator pipelineCreator;

    public char[] execute(String input) {
        List<BaseFunction<String, Object>> handlers = pipelineCreator.getHandlers();

        var interResult = (Object)input;
        for(int handler = 0; handler < handlers.size(); handler++) {
            interResult = handlers.get(handler).apply((String) interResult);
        }
        return (char[]) interResult;
    }

}
```

실행:

입력 값을 ab-(8)$9_UP+\_F로 해보죠.

```java
Input is: ab-(8)$9_UP+_F
밑줄 제거 전: ab-(8)$9_UP+_F
밑줄 제거 후: ab-(8)$9UP+F
특수 문자 제거 전: ab-(8)$9UP+F
특수 문자 제거 후: ab89UPF
숫자 제거 전: ab89UPF
숫자 제거 후: abUPF
```

<div class="content-ad"></div>

최종 결과는 → abUPF

여기에 사용한 예제는 여기에서 확인할 수 있어요.

읽어주셔서 감사합니다. 즐거운 탐험되세요!!!


파이프라인 디자인 패턴 정리


저는 개발자로써 항상 최소한의 노력과 최소한의 코드 라인을 사용하여 애플리케이션을 개발하고 싶어했습니다. 알다시피, 실패하지 않는 코드는 쓰지 않은 코드이며, 적을수록 좋아요...

이 글에서는 순수 자바를 사용하여 사용자 인터페이스(UI)를 쉽게 구축하는 방법을 소개하고 싶습니다.

# Mateu에 대해

Mateu는 순수 자바를 사용하여 웹 UI를 생성하기 위한 오픈 소스 라이브러리입니다. Mateu를 통해 핵심 로직에 집중할 수 있도록 최소한의 코드만 작성하는 것이 원칙이며, 이에는 많은 장점이 있습니다(예: 비즈니스 로직에 집중할 수 있는 기회가 생깁니다).

<div class="content-ad"></div>

또한 Mateu는 완전히 마이크로 프론트엔드 및 마이크로 서비스 친화적이므로 분산 UI를 구축하고 UI 코드를 비즈니스 로직이 있는 곳인 동일한 위치 (마이크로 서비스)에 작성할 수 있습니다. 이는 프론트엔드를 지원하기 위해 비용이 많이 드는 API를 구축하지 않아도 되며 각 팀이 자체 e2e 플로우를 관리할 수 있게 해줍니다.

또한, Mateu UI는 상태를 유지하지 않으므로 서버 측 세션에 데이터를 저장할 필요가 없습니다. 이는 트래픽이 여러 리플리카로 균형을 이루는 마이크로 서비스 환경에 특히 적합합니다.

또한, Mateu로 구축된 UI 컴포넌트를 어떤 웹 사이트에도 쉽게 포함시킬 수 있습니다. 워드프레스, 정적 html 사이트 또는 React, Vue 또는 Angular로 만든 Jamstack 애플리케이션인지 여부에 상관없이 가능합니다.

# 프로젝트 만들기

<div class="content-ad"></div>

오늘 기준으로 Mateu는 스프링 부트 Webflux만 지원합니다. 스프링 부트 이니셜 라이저를 사용하거나 IntelliJ Idea 내에서 프로젝트를 쉽게 만들 수 있습니다.

프로젝트를 만든 후에는 Mateu의 의존성을 추가해야 합니다. Mateu는 백엔드와 프론트엔드를 모두 포함하는 매우 유용한 아티팩트를 제공합니다.

```js
<dependency>
  <groupId>io.mateu</groupId>
  <artifactId>embedded-front</artifactId>
  <version>3.0-alpha.26</version>
</dependency>
```

Mateu의 의존성을 추가한 후에는 @MateuUI 주석을 사용하여 간단한 자바 클래스를 만들면 UI를 만들 수 있습니다:

<div class="content-ad"></div>

```java
package com.example.demo;

import io.mateu.core.domain.uidefinition.shared.annotations.MateuUI;

@MateuUI("")
public class HelloWorld {

}
```

Spring Boot 앱을 시작하면 http://localhost:8080으로 이동하여 다음 결과를 얻을 수 있습니다:

![UI](/assets/img/2024-08-19-WriteyournextUIusingplainjava_0.png)

쉽죠?

<div class="content-ad"></div>

# 폼 만들기

Mateu와 함께 양식을 만들기 쉽습니다. Java 클래스를 생성하고 필드를 추가하기만 하면 됩니다. 해당 필드에 getter를 추가하면 읽기 전용 필드가 되며 setter를 추가하면 편집 가능한 필드가 됩니다. @Action, @MainAction 또는 @Button으로 주석이 달린 메서드를 위한 버튼이 생성됩니다.

예를 들어, 이메일을 보내는 양식을 다음과 같이 만들 수 있습니다:

```java
package com.example.demo;

import io.mateu.core.domain.uidefinition.shared.annotations.MainAction;
import io.mateu.core.domain.uidefinition.shared.annotations.MateuUI;
import io.mateu.core.domain.uidefinition.shared.annotations.TextArea;
import lombok.Getter;
import lombok.Setter;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Service;

@MateuUI("/form")             // 이 URL을 설정합니다
@Service@Scope("prototype")   // 모든 사용자가 동일한 양식을 공유하고 싶지 않다면 프로토타입 범위를 사용하세요
@Getter@Setter                // 양식에서 필드를 보이게 하려면 필요합니다
public class SimpleForm {

    String email;

    String subject;

    @TextArea
    String body;

    @MainAction
    public void send() {
        // 이메일 보내기
    }

}
```

<div class="content-ad"></div>

이제 Spring Boot 애플리케이션을 시작하고 http://localhost:8080/form으로 이동하면 다음과 같은 것을 볼 수 있습니다:

![이미지](/assets/img/2024-08-19-WriteyournextUIusingplainjava_1.png)

값을 입력하고 Send를 클릭할 수 있습니다. 그렇게 하면 서버 측에 SimpleForm 객체가 생성되고 브라우저에서 입력한 값으로 채워집니다. 그런 다음 send() 메서드가 호출됩니다.

메서드의 반환 유형에 따라 다음 단계가 결정됩니다. void 메서드는 동일한 뷰에 머무르게 하고 자바 객체를 반환하면 그 객체를 사용하여 브라우저에 표시될 다음 뷰가 만들어집니다. Mateu에서 지원하는 다양한 UX 패턴이 있습니다. 이를 살펴보려면 https://demo.mateu.io/를 방문해 보세요.

<div class="content-ad"></div>

# CRUD(CREATE, READ, UPDATE, DELETE) 생성

양식 외에도, 내 앱에서 사용하는 다른 큰 구성요소는 CRUD(CREATE, READ, UPDATE, DELETE)입니다. Mateu와 함께 CRUD를 생성하는 것은 Crud 인터페이스를 구현하는 자바 클래스를 만드는 것만큼 간단합니다. 다음과 같은 코드 예시입니다:

```js
package com.example.demo;

import io.mateu.core.domain.uidefinition.core.interfaces.Crud;
import io.mateu.core.domain.uidefinition.shared.annotations.MateuUI;
import io.mateu.core.domain.uidefinition.core.interfaces.SortCriteria;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Component;

import java.util.List;

@MateuUI("/crud")
@Component@Scope("prototype")
public class SimpleCrud implements Crud<SearchForm, Row> {

    @Autowired
    SimpleCrudService service;

    @Override
    public Flux<Row> fetchRows(SearchForm filters, List<SortCriteria> sortOrders,
                               int offset, int limit) throws Throwable {
        return service.fetchRows(filters, sortOrders, offset, limit);
    }

    @Override
    public Mono<Long> fetchCount(SearchForm filters) throws Throwable {
        return service.fetchCount(filters);
    }

}
```

SimpleCrudService 클래스는 JPA 리포지토리에 액세스하거나 REST HTTP 요청을 보낼 수 있습니다. 여러분의 선택에 달려있습니다.

<div class="content-ad"></div>

두 가지 추가 클래스가 관련되어 있음을 알 수 있습니다: SearchForm과 Row입니다. SearchForm은 검색 양식을 만들 때 사용되며, 다음과 같은 형태를 가질 수 있습니다:

```js
package com.example.demo;

import lombok.Data;

@Data
public class SearchForm {

    String text;

}
```

한편, Row는 (당연하게도) 결과 열에 사용됩니다:

```js
package com.example.demo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data@AllArgsConstructor@NoArgsConstructor
public class Row {

    String id;

    String name;

    int age;

}
```

<div class="content-ad"></div>

이 세 가지 클래스를 사용하면 다음과 같은 결과가 나타납니다:

![UI 예시](/assets/img/2024-08-19-WriteyournextUIusingplainjava_2.png)

기존 레코드를 편집하거나 레코드를 삭제하거나 새로 생성하려면 CRUD에서 일부 메소드를 재정의하면 됩니다:

```java
@Override
public void delete(List<Row> selection) throws Throwable {
  // 선택한 행 삭제
}

@Override
public NewRecordForm getNewRecordForm() throws Throwable {
  // 새 레코드를 생성하는 양식의 인스턴스 반환
}

@Override
public DetailForm getDetail(Row row) throws Throwable {
  // 새 레코드를 생성하는 양식의 인스턴스 반환
}
```

<div class="content-ad"></div>

위의 방법을 재정의함으로써 Mateu는 사용자가 레코드를 삭제, 추가, 편집할 수 있도록 가능하게 됩니다. 이제 버튼들이 CRUD에서 볼 수 있게 됩니다.

전체 예시는 https://github.com/miguelperezcolom/mateu/blob/master/demo/src/main/java/com/example/demo/domain/programmingLanguages/ProgrammingLanguages.java에서 확인할 수 있습니다.

# 메뉴로 모두 통합하기

지금까지 서로 다른 경로에 폼과 CRUD를 만들었으며, 이제 이들을 모두 통합하고 사용자가 열고자 하는 뷰를 선택할 수 있는 메뉴를 추가하고 싶습니다. 이를 위해 우리는 UI 클래스에 몇 가지 필드를 추가하고 @MenuOption으로 주석을 달면 됩니다:

<div class="content-ad"></div>

```java
package com.example.demo;

import io.mateu.core.domain.uidefinition.core.interfaces.HasAppTitle;
import io.mateu.core.domain.uidefinition.shared.annotations.MateuUI;
import io.mateu.core.domain.uidefinition.shared.annotations.MenuOption;

@MateuUI("")
public class HelloWorld implements HasAppTitle {

    @MenuOption
    SimpleForm sendEmail;

    @MenuOption
    SimpleCrud crud;

    @Override
    public String getAppTitle() { // we want to set the title of our app
        return "My app";
    }
}
```

이렇게 하면 상단에 툴바가 있는 뷰가 생성되고 2개의 메뉴 옵션이 표시됩니다:

![UI 예시](/assets/img/2024-08-19-WriteyournextUIusingplainjava_3.png)

실제로 여러 수준의 메뉴를 만들 수 있습니다. 여기처럼 여러 메뉴 옵션이나 다른 하위 메뉴가 있는 클래스를 만들면 됩니다:

<div class="content-ad"></div>

```js
package com.example.mateuarticle1.ui;

import com.example.mateuarticle1.ui.crud.SimpleCrud;
import io.mateu.core.domain.uidefinition.shared.annotations.MenuOption;

public class SimpleMenu {

    @MenuOption
    SimpleForm sendEmail;

    @MenuOption
    SimpleCrud crud;

}
```

그리고 여기처럼 @Submenu로 주석이 달린 필드로 UI 클래스에 추가하세요:

```js
@MateuUI("")
public class HelloWorld {

    ...

    @Submenu
    SimpleMenu submenu;

    ...
}
```

이제 툴바에 서브메뉴가 나타납니다.

<div class="content-ad"></div>

<img src="/assets/img/2024-08-19-WriteyournextUIusingplainjava_4.png" />

# 결론

우리는 Mateu로 할 수 있는 일의 일부만 살짝 소개했지만, 오직 순수 자바만을 사용하여 전체 UI를 구축할 수 있다는 것을 알 수 있었습니다. 전체 데모는 https://demo.mateu.io/에서 확인할 수 있으며 사용자 매뉴얼은 https://github.com/miguelperezcolom/mateu/wiki에서 확인할 수 있습니다.

이 프로젝트를 좋아하신다면 https://github.com/miguelperezcolom/mateu를 방문하고 별을 눌러 평가해주세요 :)

<div class="content-ad"></div>

![이미지](/assets/img/2024-08-19-WriteyournextUIusingplainjava_5.png)

이 글의 코드는 https://github.com/miguelperezcolom/mateu-article-1 에서 확인할 수 있습니다.


자바로 UI 만드는 방법


# 우리가 논의할 것들:

- 여러 로그인 시 이전 토큰을 무효화하는 방법.
- JWT를 사용할 때 개별 장치/모든 장치에서 로그아웃을 처리하는 방법, 관련된 토큰을 무효화하는 방법.

# 조금의 배경 정보:

먼저 JWT가 stateless임을 이해해야 합니다. 한 번 생성되고 사용자에게 전송된 후에는 서버가 제어할 수 없습니다.

<div class="content-ad"></div>

멀티 로그인시나 사용자가 로그아웃할 때 JWT를 강제로 무효화할 수는 없습니다. 이 JWT들은 만료 시간에 도달할 때만 무효화될 수 있습니다.

그러나 이에는 많은 문제가 있습니다. 사용자에 대해 여러 유효한 JWT를 발급하고 이를 강제로 만료시킬 방법이 없습니다. 유효한 토큰이 많아질수록 위험이 커집니다.

![HandlingJWTsonmultipleloginsandimplementinglogout](/assets/img/2024-08-19-HandlingJWTsonmultipleloginsandimplementinglogout_0.png)

# 해결책 🤷‍♂️

<div class="content-ad"></div>

그래서 이 문제를 해결하고 로그아웃 기능을 구현하기 위해서는 어떻게든 서버 측에서 이 토큰들의 상태를 유지해야 합니다.

토큰을 지속시키는 가장 좋은 방법은 무엇인가요?

맞추셨네요. 사용자 토큰을 저장할 테이블을 생성하는 거죠.

무서우세요? 네, 확실히 그렇습니다. 모든 토큰을 한곳에 저장하는 것은 확실히 좋지 않은 아이디어입니다. 하지만 로그아웃을 구현하고 여러 로그인에서 이전 토큰을 무효화하려면 다른 선택이 없습니다.

<div class="content-ad"></div>

저희 서비스를 안전하게 보호하기 위해서 제3자 보안 금고를 사용하여 이러한 토큰들을 저장하고, 최상의 보안 관행을 적용하고 그 외 다양한 조치를 취할 수 있습니다.

# 구현을 시작해봅시다.

먼저, 토큰 테이블을 생성해야 합니다. 이 테이블에는 토큰들과 몇 가지 다른 필드들을 저장할 것입니다:

![tokens table](/assets/img/2024-08-19-HandlingJWTsonmultipleloginsandimplementinglogout_1.png)

<div class="content-ad"></div>

이 토큰 테이블을 다루어야 할 장소는 다음과 같습니다:

- 사용자 로그인 또는 가입(이전 토큰 무효화 및 새 항목 생성)
- 필터 수준에서 JWT 유효성 확인하는 동안
- 사용자 로그아웃

하나씩 살펴봅시다.

Token.java

<div class="content-ad"></div>

```java
package com.auth.jwtauthentication.entity;

import com.auth.jwtauthentication.domain.types.TokenType;
import jakarta.persistence.*;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
@Entity
@Table(name = "token")
public class Token {

    @Id
    @GeneratedValue // Default value is auto
    private Integer id;

    private String token;

    @Enumerated(EnumType.STRING)
    private TokenType tokenType;

    private boolean isRevoked;

    private boolean isExpired;

    @ManyToOne
    @JoinColumn(name = "user_id")
    private User user;
}
```

TokenRepository.java

```java
package com.auth.jwtauthentication.repository;

import com.auth.jwtauthentication.entity.Token;
import jakarta.transaction.Transactional;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;

import java.util.Optional;

@Transactional
public interface TokenRepository extends JpaRepository<Token, Integer> {

    Optional<Token> findByToken(String token);

    @Modifying
    @Query("update Token set isRevoked = true where isRevoked = false and user.id = :userId")
    void revokeOldTokens(Integer userId);
}
```

# 사용자 로그인 또는 회원 가입

<div class="content-ad"></div>

```java
package com.auth.jwtauthentication.service;

import ...

@Service
public class AuthService {

    private final UserRepository userRepository;
    private final TokenRepository tokenRepository;
    private final PasswordEncoder passwordEncoder;
    private final JwtService jwtService;
    private final AuthenticationManager authenticationManager;

    @Autowired
    public AuthService(
            UserRepository userRepository,
            TokenRepository tokenRepository,
            PasswordEncoder passwordEncoder,
            JwtService jwtService,
            AuthenticationManager authenticationManager) {
        this.userRepository = userRepository;
        this.tokenRepository = tokenRepository;
        this.passwordEncoder = passwordEncoder;
        this.jwtService = jwtService;
        this.authenticationManager = authenticationManager;
    }

    public AuthenticationResponse register(RegisterRequest request) {
        final User USER = User.builder()
                .firstName(request.getFirstName())
                .lastName(request.getLastName())
                .email(request.getEmail())
                .password(passwordEncoder.encode(request.getPassword()))
                .role(Role.USER)
                .build();

        final User SAVED_USER = userRepository.save(USER);
        final String JWT_TOKEN = jwtService.generateToken(SAVED_USER);

        final String SAVED_JWT_TOKEN = saveNewToken(SAVED_USER, JWT_TOKEN);

        return AuthenticationResponse.builder()
                .token(SAVED_JWT_TOKEN)
                .build();
    }

    public AuthenticationResponse authenticate(AuthenticationRequest request) {
        authenticationManager.authenticate(
                new UsernamePasswordAuthenticationToken(
                        request.getEmail(),
                        request.getPassword()
                )
        );

        final User SAVED_USER = userRepository.findByEmail(request.getEmail())
                .orElseThrow();
        final String JWT_TOKEN = jwtService.generateToken(SAVED_USER);

        final String SAVED_JWT_TOKEN = saveNewToken(SAVED_USER, JWT_TOKEN);

        return AuthenticationResponse.builder()
                .token(SAVED_JWT_TOKEN)
                .build();
    }

    private String saveNewToken(final User SAVED_USER, final String JWT_TOKEN) {
        Token token = Token.builder()
                .token(JWT_TOKEN)
                .user(SAVED_USER)
                .tokenType(TokenType.BEARER)
                .isRevoked(false)
                .isExpired(false)
                .build();

        // Invalidate old tokens
        tokenRepository.revokeOldTokens(SAVED_USER.getId());

        // Save new token
        final Token SAVED_TOKEN = tokenRepository.save(token);
        return SAVED_TOKEN.getToken();
    }
}
```

# JWT 유효성을 필터 수준에서 확인하는 동안

```java
public boolean isTokenValid(final String TOKEN, final UserDetails USER) {
    Optional<Token> SAVED_TOKEN = tokenRepository.findByToken(TOKEN);
    if(SAVED_TOKEN.isEmpty()) return false;

    final String TOKEN_FROM_DB = SAVED_TOKEN.get().getToken();

    // 사용자명 검증
    final String USERNAME = extractUsername(TOKEN_FROM_DB);
    if(!USERNAME.equals(USER.getUsername())) return false;

    // 토큰 만료 검증
    final Date CURRENT_TIME = new Date(System.currentTimeMillis());
    final Date EXPIRY_TIME = extractClaims(TOKEN_FROM_DB, Claims::getExpiration);
    if(EXPIRY_TIME.before(CURRENT_TIME)) {
        // DB 업데이트 후 false 반환
        SAVED_TOKEN.get().setExpired(true);
        tokenRepository.save(SAVED_TOKEN.get());
        return false;
    }

    // 폐기된 또는 만료된 토큰 확인
    if(SAVED_TOKEN.get().isExpired() || SAVED_TOKEN.get().isRevoked()) return false;

    return true;
}
```

# 로그아웃 핸들러

<div class="content-ad"></div>

```java
package com.auth.jwtauthentication.service;

import com.auth.jwtauthentication.entity.Token;
import com.auth.jwtauthentication.repository.TokenRepository;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.Authentication;
import org.springframework.security.web.authentication.logout.LogoutHandler;
import org.springframework.stereotype.Service;

import java.util.Optional;

@Service
public class LogoutService implements LogoutHandler {

    private final TokenRepository tokenRepository;

    @Autowired
    public LogoutService(TokenRepository tokenRepository) {
        this.tokenRepository = tokenRepository;
    }

    @Override
    public void logout(
            HttpServletRequest request,
            HttpServletResponse response,
            Authentication authentication
    ) {
        final String AUTH_HEADER = request.getHeader("Authorization");
        final String USER_SENT_JWT, USER_EMAIL;

        if (null == AUTH_HEADER || !AUTH_HEADER.startsWith("Bearer ")) {
            return;
        }

        USER_SENT_JWT = AUTH_HEADER.substring(7);

        Optional<Token> SAVED_TOKEN = tokenRepository.findByToken(USER_SENT_JWT);
        if (SAVED_TOKEN.isPresent()) {
            SAVED_TOKEN.get().setExpired(true);
            SAVED_TOKEN.get().setRevoked(true);
            tokenRepository.save(SAVED_TOKEN.get());
        }
    }
}
```

전체 소스는 다음 주소에서 확인할 수 있습니다 — https://github.com/Shashwat-Joshi/Project-Gotham/tree/main/1-Authentication/1.3-JWTAuthentication

# 추가 정보 ✨

장치 수준에서 로그아웃을 수행하려면 사용자가 사용하는 장치를 나타내는 고유한 ID를 저장해야 합니다. mac 주소나 장치마다 달라지는 다른 고유한 값일 수 있습니다.

<div class="content-ad"></div>

그 경우, 로그아웃을 할 때 이 특정 기기의 모든 토큰을 무효화하도록 지정할 수 있습니다.

독자 여러분, 읽어 주셔서 감사합니다 ❤️ 궁금한 점이 있으면 언제든지 연락해 주세요. 저의 연락처는 아래에 남겨 두겠습니다.

LinkedIN: https://www.linkedin.com/in/shashwatjoshi23/
메일: shashwat2002joshi@gmail.com


Posts