반응형
4. 프로젝트 설정 및 기본 구조
프로젝트 개요
이번 글에서는 JavaScript 프레임워크 프로젝트를 설정하고 기본 구조를 만드는 방법에 대해 알아보겠습니다. React, Vue.js, Angular의 각 프레임워크별로 프로젝트를 초기화하고 기본 구조를 설정하는 과정을 설명합니다.
React 프로젝트 설정 및 기본 구조
- React 프로젝트 생성
npx create-react-app my-react-app
cd my-react-app
- 프로젝트 폴더 구조
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
- 기본 컴포넌트 추가
// src/components/HelloWorld.js
import React from 'react';
function HelloWorld() {
return <h1>Hello, React!</h1>;
}
export default HelloWorld;
- 기본 컴포넌트를 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 프로젝트 설정 및 기본 구조
- Vue 프로젝트 생성
vue create my-vue-app
cd my-vue-app
- 프로젝트 폴더 구조
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
└── ...
- 기본 컴포넌트 추가
<!-- src/components/HelloWorld.vue -->
<template>
<h1>Hello, Vue!</h1>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
- 기본 컴포넌트를 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 프로젝트 설정 및 기본 구조
- Angular 프로젝트 생성
ng new my-angular-app
cd my-angular-app
- 프로젝트 폴더 구조
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
└── ...
- 기본 컴포넌트 추가
// 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 {}
- 기본 컴포넌트를 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 { }
- 기본 컴포넌트를 AppComponent에 추가
<!-- src/app/app.component.html -->
<div style="text-align:center">
<app-hello-world></app-hello-world>
</div>
결론
이번 글을 통해 React, Vue.js, Angular 프로젝트를 설정하고 기본 구조를 만드는 방법을 배웠습니다. 각 프레임워크의 특징과 설정 방법을 이해하고, 기본 컴포넌트를 추가하여 프로젝트를 시작할 수 있습니다.
다음 글에서는 상태 관리 (Redux, Vuex 등)에 대해 알아보겠습니다. 다음 글에서 만나요!
반응형
'JavaScript 프레임워크 시리즈' 카테고리의 다른 글
[JavaScript 프레임워크] 6일차: JavaScript 프레임워크에서 라우팅 설정하기 (0) | 2024.08.06 |
---|---|
[JavaScript 프레임워크] 5일차: JavaScript 상태 관리 이해하기: Redux와 Vuex (0) | 2024.08.05 |
[JavaScript 프레임워크] 3일차: Angular 기초 이해하기 (0) | 2024.08.03 |
[JavaScript 프레임워크] 2일차: Vue.js 기초 이해하기 (0) | 2024.08.02 |
[JavaScript 프레임워크] 1일차: React 기초 이해하기 (0) | 2024.08.01 |