웹사이트 제작,디자인

[javascript] React - Apache에 배포하기

2026-01-25T15:48:31+09:00

[javascript] React - Apache에 배포하기

1. Build

"create-react-app ." 명령으로 react app 생성 후 배포를 위해서는 아래의 명령으로 buid 합니다.

npm run build

이렇게 하면 build 폴더가 생성되는데 필요한 파일을 서버가 작동하는 폴더에 위치시키면 됩니다.

2. httpd.conf 항목 추가

매번 build된 파일을 apache가 서비스하는 폴더로 옮기는 작업은 번거롭습니다. 현재 작업중인 폴더를 직접 서비스하도록 추가하고 싶다면, httpd.conf파일에 아래의 항목을 추가해줍니다.

Alias /react "D:/05_Program_dev/03_web/04_react_hello/build"

"D:/05_Program_dev/03_web/04_react_hello/build">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted

이렇게 하면 'localhost/react'로 접속 시도시 해당 폴더에 접속하게 됩니다. 따라서 작업한 파일을 보려면

'localhost/react/index.html'로 시도하면 됩니다.

3. package.json homepage 수정

아직 apache 설정이 익숙치 않아서 이것저것 건드려봅니다. 어떤 앱은 2번까지만 수행해도 되고, 또다른 경우에는 여전히 흰 화면만 나오고 있습니다. 이것이 정답인지 알기는 힘들지만, 이럴땐 homepage속성에 접근하고자 하는 url을 입력했더니 수행 가능해졌습니다.

4. .htaccess 파일 추가??

.htaccess 파일을 생성하는 방법이 있습니다. 배포 폴더 내에 또는 Build하기 전 /publish 폴더 내에 .htaccess 파일을 추가하여 아래와 같이 작성해줍니다.

<.htaccess>

Options -MultiViews 
RewriteEngine On 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule ^ index.html [QSA,L]

이 방법을 쓰려면 httpd.conf 파일의 AllowOverride 부분을 AllowOverride All로 해야합니다. 그래야 .htaccess의 접근을 허용해줍니다. 그러나 이 방법 성능 및 보안의 문제가 있다고 하여 사용을 권장하지는 않는 것 같습니다. (참고자료)

또..어떤 분은 아래와 같이 속성을 지정한다고 했는데 이건 저도 안해봤습니다. 이래저래 안될경우 따라해보려고 소스만 남겨놓습니다. 상황에 맞게 시도해보시기 바랍니다.

FallbackResource ./index.html

[출처] https://streamls.tistory.com/entry/React-Apache%EC%97%90-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0#google_vignette

[nest.js] [NestJS] NestJS 구조 이해를 위한 필수 개념 정리 - Node.js/TypeScript/Express 비교 포함

2025-12-12T18:45:08+09:00

[nest.js] [NestJS] NestJS 구조 이해를 위한 필수 개념 정리 - Node.js/TypeScript/Express 비교 포함

0. 시작하며

https://bradbeighton.medium.com/nestjs-the-pros-and-cons-aff714607b07

NestJS는 백엔드 프레임워크입니다. 하지만 이걸 배우기 위해서는 먼저 다음 세 가지를 이해해야 합니다.

Node.js: 왜 자바스크립트로 서버를 만들 수 있을까?
TypeScript: 자바스크립트보다 안정적인 이유는 뭘까?
Express: Nest의 기반이 되는 웹 프레임워크

이해한 뒤에야 Nest가 왜 등장했는지, 무엇이 좋은지 알 수 있습니다.

1) Node.js란?

Node.js는 자바스크립트를 브라우저가 아닌 서버 환경에서도 실행할 수 있도록 만든 런타임입니다. Chrome의 V8 자바스크립트 엔진을 기반으로 하며, 비동기 처리와 이벤트 기반 구조 덕분에 빠르고 가볍게 동작합니다. 이로 인해 자바스크립트만으로도 백엔드 서버를 개발할 수 있게 되었습니다.

특징

브라우저 밖에서도 자바스크립트 실행 가능
이벤트 기반, 비동기 처리 방식
서버 개발에 적합한 경량 구조

요약: 자바스크립트로 서버를 만들 수 있게 해주는 플랫폼

2) TypeScript란?

TypeScript는 Microsoft에서 만든 자바스크립트의 상위 언어로, 자바스크립트에 정적 타입 기능을 추가한 언어입니다. 변수와 함수에 명확한 타입을 지정할 수 있어 코드의 안정성이 높아지고, 컴파일 시점에 오류를 미리 확인할 수 있습니다. NestJS는 이 TypeScript를 기본 언어로 채택하여 타입 기반 설계를 권장합니다.

특징

자바스크립트에 타입 시스템 추가
컴파일 타임 오류 탐지
유지보수가 쉬운 구조 작성 가능

요약: 타입이 있는 자바스크립트 = 더 안정적인 개발

3) Express란?

Express는 Node.js 기반의 대표적인 웹 프레임워크입니다. 요청을 받고, 처리하고, 응답을 반환하는 구조를 단순하게 구현할 수 있어서 빠르게 웹 서버를 구축할 수 있습니다. 다만, 구조에 대한 강제성이 없기 때문에 소규모 프로젝트에는 유리하지만, 규모가 커질수록 관리가 어려워질 수 있습니다.

특징

간결하고 직관적인 라우팅 처리
설정이 자유롭고 유연한 구조
다양한 미들웨어와 풍부한 생태계 보유

요약: 간단한 웹 서버를 빠르게 만들 수 있는 도구

1. NestJS란 무엇인가요?

NestJS는 Node.js 위에서 동작하는 TypeScript 기반 백엔드 프레임워크입니다.
Angular에서 영향을 받아 모듈화, 데코레이터 기반 구조, 의존성 주입(DI) 등 현대적인 아키텍처를 제공합니다.

JavaScript로 작성된 Express의 자유도 높은 구조와 달리, NestJS는 구조화된 코드를 쉽게 작성할 수 있도록 도와주기 때문에 중·대형 프로젝트에 적합합니다.

2. 왜 NestJS를 사용할까요?

장점	설명
구조적 설계	모듈 단위로 코드를 나누어 유지보수에 유리
TypeScript 기반	정적 타입으로 컴파일 타임에 오류 방지
강력한 DI 시스템	객체 간 의존성을 효율적으로 관리 가능
Express/Fastify 통합 가능	기존 Node 생태계 그대로 활용 가능
테스트 친화적	유닛/통합 테스트를 쉽게 작성 가능
확장성 높은 아키텍처	WebSocket, GraphQL, gRPC 등 다양한 기술과 통합 용이

3. 주요 구성 요소

3.1 Module

애플리케이션을 논리적으로 분리하는 단위입니다. 각 모듈은 컨트롤러, 서비스, 프로바이더를 포함할 수 있습니다. Nest앱은 최소 하나의 AppModule을 가져야합니다.

@Module({
  controllers: [UserController],
  providers: [UserService],
})
export class UserModule {}

3.2 Controller

클라이언트 요청을 처리하는 라우터 역할을 합니다. 사용자의 요청(GET, POST 등)을 받아 어떤 로직을 실행할지 결정하는 입구

@Controller('user')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Get()
  getAll() {
    return this.userService.findAll();
  }
}

3.3 Service

실제 비즈니스 로직을 구현하는 부분입니다.

@Injectable()
export class UserService {
  findAll() {
    return ['User1', 'User2'];
  }
}

3.4 Decorator

클래스나 메서드에 메타데이터를 부여합니다. NestJS의 핵심 문법 요소입니다. 자바의 어노테이션이랑 거의 같다고 볼 수 있

예시: @Controller, @Injectable, @Get, @Post, @Param, @Body 등

@Get(':id')
findOne(@Param('id') id: string) {
  return `User ${id}`;
}

3.5 Dependency Injection (DI)

NestJS의 핵심 철학 중 하나는 의존성 주입입니다. 서비스나 클래스 내에서 직접 객체를 생성하는 대신, Nest의 DI 컨테이너를 통해 필요한 객체를 주입받습니다. 이를 통해 테스트가 용이하고, 코드의 확장성과 유지보수성이 높아집니다.

@Injectable()
export class UserService {
  constructor(private readonly userRepository: UserRepository) {}
}

UserRepository를 직접 생성하지 않고, Nest가 알아서 주입해줍니다.

// 자바일 경우
@Service
public class UserService {
    private final UserRepository userRepository;

    @Autowired
    public UserService(UserRepository userRepository) {
        this.userRepository = userRepository;
    }
}

3.6 Pipe

Pipe는 클라이언트로부터 받은 데이터를 검증하거나 변환할 때 사용됩니다. 예를 들어, string으로 들어온 값을 number로 바꾸거나, DTO의 유효성을 검사할 수 있습니다. class-validator와 함께 자주 사용되며, Nest에서 제공하는 ValidationPipe가 대표적입니다.

// 숫자 변환
@Get(':id')
getUser(@Param('id', ParseIntPipe) id: number) {
  return `User ID is ${id}`;
}

// Dto 유효성 검사
@Post()
create(@Body(new ValidationPipe()) dto: CreateUserDto) {
  return this.userService.create(dto);
}

# 파이프 동작 흐름

[요청]
  ↓
Middleware: 토큰 파싱 등
  ↓
Guard: 로그인 했는지? 권한 있나?
  ↓
Pipe: 요청값 검증/변환
  ↓
Controller
  ↓
Service
  ↓
(예외 발생 시 → Exception Filter가 응답 처리)

3.7 Guard

Guard는 요청을 처리하기 전에 인증이나 권한 확인을 담당합니다. 예를 들어, 로그인하지 않은 사용자의 요청을 차단하거나, 특정 권한이 있는 사용자만 요청을 허용할 수 있습니다. Nest는 Passport를 기반으로 한 다양한 Guard 전략도 제공합니다.

@UseGuards(AuthGuard('jwt'))
@Get('profile')
getProfile(@Request() req) {
  return req.user;
}

3.8 Interceptor

Interceptor는 요청/응답 흐름 사이에서 동작하며, 공통 응답 포맷 처리, 로깅, 캐싱, 실행 시간 측정 등 다양한 작업에 활용됩니다.

@Injectable()
export class LoggingInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    console.log('Before request...');
    return next.handle().pipe(
      tap(() => console.log('After response...')),
    );
  }
}

3.9 Exception Filter

NestJS는 기본적으로 예외를 처리하지만, 특정 예외 상황에 대해 커스텀 필터를 만들면 더 정교한 응답 처리가 가능합니다.
HTTP 상태 코드, 메시지 포맷, 로깅 등을 일관되게 처리할 수 있습니다.

@Catch(HttpException)
export class HttpExceptionFilter implements ExceptionFilter {
  catch(exception: HttpException, host: ArgumentsHost) {
    const response = host.switchToHttp().getResponse();
    response.status(exception.getStatus()).json({
      message: exception.message,
    });
  }
}

3.10 Middleware

Middleware는 라우팅 전에 동작하며, 요청 객체를 조작하거나 공통 로직(예: 로깅, 토큰 유효성 확인)을 삽입할 때 사용합니다.
Express의 app.use()와 유사한 방식입니다.

export function logger(req: Request, res: Response, next: NextFunction) {
  console.log(`Request... ${req.method} ${req.url}`);
  next();
}

이를 AppModule 또는 특정 모듈에서 등록하여 사용할 수 있습니다.

????마지막 요약

구성 요소	설명	예시
Module	기능 단위로 묶는 기본 단위. 컨트롤러, 서비스 등을 포함	@Module({ controllers: [], providers: [] })
Controller	HTTP 요청을 받아 라우팅 처리	@Controller('user'), @Get()
Service	비즈니스 로직 담당. Controller와 분리	@Injectable() 사용
Decorator	클래스/메서드에 메타데이터를 부여	@Get(), @Param(), @Body() 등
Dependency Injection (DI)	의존 객체를 직접 생성하지 않고 자동 주입	생성자에 의존성 선언만으로 주입됨
Pipe	요청 데이터의 검증 및 변환	ValidationPipe, ParseIntPipe 등
Guard	요청 차단 또는 허용 (인증/권한 검사)	@UseGuards(AuthGuard('jwt'))
Interceptor	요청/응답을 가로채어 공통 처리 (로깅, 캐싱 등)	NestInterceptor 구현
Exception Filter	예외 발생 시 커스텀 응답 처리	@Catch(HttpException)
Middleware	요청 전 처리 로직 (로그, 인증 등)	Express 스타일 req, res, next 사용

4. NestJS 시작하기

해당 관련한 글은 이미 이전에 작성한 포스트에 정리해 두었으니 설치를 하실 분은 아래 포스트로 접속해주세요!

2025.06.05 - [NestJS] - NestJS 백엔드 시작하기– PostgreSQL 연동 & Docker 설정까지 완전 정복

5. 기본 프로젝트 구조 설명

src/
 ┣ app.controller.ts   # 요청 처리 라우터
 ┣ app.service.ts      # 비즈니스 로직
 ┣ app.module.ts       # 루트 모듈
 ┗ main.ts             # 앱 시작점

NestJS는 이러한 구조를 기본으로 제공하며, 기능이 늘어날수록 모듈 단위로 분리하여 확장할 수 있습니다.

6. Express와의 비교

항목	NestJS	Express
언어	TypeScript	JavaScript
구조	모듈 기반	자유로운 구조
테스트 지원	기본 제공	수동 설정 필요
학습 난이도	중간	낮음
확장성	높음	제한적

???? 핵심 차이 요약

NestJS는 Express보다 더 구조적인 개발을 유도합니다.
Express는 유연하지만, 규모가 커질수록 유지보수가 어려워집니다. 반면 Nest는 모듈화, DI, 테스트 코드, 데코레이터 기반 설계 등으로 대규모 프로젝트에 최적화되어 있습니다.
NestJS는 선택이 아닌 '설계 강제력'을 제공합니다.
Express에서는 아키텍처를 직접 설계해야 하지만, Nest는 프레임워크 차원에서 표준적인 구조를 강제하기 때문에 팀 단위 개발에 유리합니다.
NestJS는 테스트와 확장을 위한 기반이 이미 갖춰져 있습니다.
예를 들어, Swagger 문서화, TypeORM/Prisma 연동, JWT 인증, WebSocket 사용 등을 위한 패키지가 공식적으로 지원됩니다. Express에서는 대부분 별도 설정이 필요합니다.

???? 언제 Express가 더 나을까?

매우 간단한 REST API
빠르게 프로토타입을 만들고 싶을 때
구조 설계보다 빠른 결과물이 필요한 상황

???? 언제 NestJS가 더 유리할까?

팀 프로젝트 또는 규모가 큰 백엔드 시스템
여러 모듈/기능이 복잡하게 얽힌 경우
테스트, 보안, 확장성까지 고려하는 환경
Angular 또는 Spring 개발자에게 친숙한 구조

7. 자바와의 비교

NestJS	Java	설명
@Controller()	@RestController	HTTP 요청을 처리하는 클래스
@Get(), @Post()	@GetMapping, @PostMapping	라우팅 메서드
Pipe + DTO + ValidationPipe	@Valid + @RequestBody + Validator	요청 유효성 검사
Exception Filter	@ControllerAdvice + @ExceptionHandler	예외 처리 핸들러
Middleware	Filter, Interceptor	요청 전 공통 처리
Guard	Spring Security Filter, @PreAuthorize	인증/인가 처리
Interceptor	HandlerInterceptor	요청 전/후 가로채기
@Injectable()	@Service, @Component	DI 대상 등록용 클래스
DI (의존성 주입)	@Autowired, 생성자 주입	객체를 직접 생성하지 않고 주입

✨ 마무리하며

NestJS는 단순히 Express 위에 만들어진 프레임워크가 아니라, 대규모 백엔드 개발에 필요한 아키텍처와 철학이 담긴 프레임워크입니다. 초기에는 익숙하지 않을 수 있지만, 구조에 익숙해질수록 유지보수성과 생산성에서 큰 장점을 느낄 수 있습니다. 이 포스트를 통해 NestJS의 기반 개념부터 Express와의 차이까지 이해하고, 자신의 프로젝트에 어떤 프레임워크가 적합할지 판단하는 데 도움이 되었기를 바랍니다.

출처: https://devjapan.tistory.com/17 [도쿄사는 신입 개발자:티스토리]

[프론트앤드] 리액트(React) 간단 문법 정리

2025-11-19T00:30:16+09:00

[프론트앤드] 리액트(React) 간단 문법 정리

리액트란?

리액트는 자바스크립트를 편하게사용할수있도록 만들어진 자바스크립트 라이브러리다.

굳이 리액트를 안쓰고도 js로 개발 가능하지만 규모가 커질수록 불편하기때문에 편하게 사용하기 위함.

여러개의 라이브러리가 존재.

angular.js
react.js
vue.js
backbone

리액트는 컴포넌트의 모음이다.

리액트는 바뀐뷰을 기존방식처럼 업데이트 해주지않고 바뀐뷰만 삭제하고 다시 만들어버린다.

성능적으로 문제가 있을것같지만 virtual DOM을 활용하여 바뀐부분만 찾아서 바꿔줌.

리액트는 컴포넌트로 여러가지 파일을 분리 저장.

일반 자바스크립트가 아닌 JSX라는 문법으로 작성.

(그냥 쉽게 자바스크립트안에서 html문법을 쓸수있게 지원해준게 JSX라고 생각하면 편함)

리액트 설치

리액트는 jQuery 같이 단순히