[JavaScript 프레임워크] 4일차: JavaScript 프레임워크 프로젝트 설정 및 기본 구조

4. 프로젝트 설정 및 기본 구조

프로젝트 개요

이번 글에서는 JavaScript 프레임워크 프로젝트를 설정하고 기본 구조를 만드는 방법에 대해 알아보겠습니다. React, Vue.js, Angular의 각 프레임워크별로 프로젝트를 초기화하고 기본 구조를 설정하는 과정을 설명합니다.

React 프로젝트 설정 및 기본 구조

1. React 프로젝트 생성

npx create-react-app my-react-app
cd my-react-app

 

2. 프로젝트 폴더 구조

my-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.js
│   ├── views/
│   │   └── Home.js
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── reportWebVitals.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

 

3. 기본 컴포넌트 추가

// src/components/HelloWorld.js
import React from 'react';

function HelloWorld() {
  return <h1>Hello, React!</h1>;
}

export default HelloWorld;

 

4. 기본 컴포넌트를 App.js에 추가

// src/App.js
import React from 'react';
import './App.css';
import HelloWorld from './components/HelloWorld';

function App() {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;

 

Vue.js 프로젝트 설정 및 기본 구조

1. Vue 프로젝트 생성

vue create my-vue-app
cd my-vue-app

 

2. 프로젝트 폴더 구조

my-vue-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   └── ...
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── ...

 

3. 기본 컴포넌트 추가

<!-- src/components/HelloWorld.vue -->
<template>
  <h1>Hello, Vue!</h1>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

 

4. 기본 컴포넌트를 App.vue에 추가

<!-- src/App.vue -->
<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
/* 스타일 추가 */
</style>

 

Angular 프로젝트 설정 및 기본 구조

1. Angular 프로젝트 생성

ng new my-angular-app
cd my-angular-app

 

2. 프로젝트 폴더 구조

my-angular-app/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── ...
│   ├── assets/
│   ├── environments/
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── ...
├── angular.json
├── package.json
├── README.md
└── ...

 

3. 기본 컴포넌트 추가

// src/app/hello-world/hello-world.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: '<h1>Hello, Angular!</h1>',
  styles: ['h1 { color: #42b983; }']
})
export class HelloWorldComponent {}

 

4. 기본 컴포넌트를 AppModule에 추가

// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

5. 기본 컴포넌트를 AppComponent에 추가

<!-- src/app/app.component.html -->
<div style="text-align:center">
  <app-hello-world></app-hello-world>
</div>

 

결론

이번 글을 통해 React, Vue.js, Angular 프로젝트를 설정하고 기본 구조를 만드는 방법을 배웠습니다. 각 프레임워크의 특징과 설정 방법을 이해하고, 기본 컴포넌트를 추가하여 프로젝트를 시작할 수 있습니다.

 

다음 글에서는 상태 관리 (Redux, Vuex 등)에 대해 알아보겠습니다. 다음 글에서 만나요!