개요

JS 언어를 사용해서 홈페이지 만들기.
홈페이지의 목적성을 떠나서 최대한 많은 기능들을 구현하고. 로컬 환경에서 사용 가능한 최신 기술에 대하여 조사하고 공부하는 목적을 띄고있다.

환경구축

React

React란?

React는 JS 언어를 사용하는 FrameWork이다.
UI를 구축하기 위해 사용된다.
큰 특징으로는
SPA(single page application)
Virtual Dom이 있다.

React 환경구축

코드환경에서 terminal 창에서

npx create-react-app project .

를 입력해서 React 설치해준다.

설치가 완료되면 터미널에 Happy hacking! 이라는 문구와함께 폴더들이 생성되면 완료됐습니다.

SRC 폴더안에 Components 폴더를 만들고 작업하고자 하는 파일을 만든다. 확장자는 .jsx이다 이 때 파일명은 반드시 대문자로 시작해야한다.


rafce를 입력하면 React에서 자동으로 import, const, export를 해주고 환경구축이 완료된다.

React 내부 필수 작업

index.js

npm install react-router-dom

(install 대신 i 를 입력해도 작동하지만 지극히 개인적인 취향이다.) 이 react-router-dom을 설치하고 src폴더 내의 index.js로 들어간다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

초기 코드는 이러한 형태이다. 여기서 수정해 줘야 하는 부분은 을 감싸고있는 <React.StrictMode>이다.
설치한 react-router-dom에서 BrowserRouter를 import 해주고 을 기존의 <React.StrictMode>를 지워주고 로 감싸준다.

import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

App.js

App.js는 React에서 핵심이 되는 파일이다. React는 여러 화면 처럼 보이지만, 실제로는 SPA(Single Page Application) 하나의 화면에서 각기 다른 페이지를 갈아끼워가며 보여주는 형식이다. 이 때, Single Page가 바로 App.js이다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

처음의 App.js 는 하나의 화면을 보여주는 코드가 적혀있다. 이것은 React에서 제공하는 기본코드이다. (실행방법은 터미널창에서 'npm start')
하지만, 이런식으로 하나의 화면만 들어가있다면 페이지가 몇번을 이동하든 처음의 화면만 보여준다. 그렇기에 App.js를 수정해준다.

과감하게 다 지운다.

import './App.css';
import { Routes } from 'react-router-dom'


function App() {
return (
  <Routes>

  </Routes>
);
}

export default App;

Routes는 추후에 만들어지는 jsx파일들의 경로가 들어갈 공간이다.
이렇게 React의 기본적인 환경구축이 완료된다. 당연하게 작업이 이어지면 새로운 라이브러리들과 변경해야 하는 사항들이 존재한다. 이는 작업을 진행하며 수정하겠다.

Node.js

Node.js 란?

JS 언어를 이용하여 서버를 구축하게 해주는 런타임 환경이다.
frontend에서 필수 언어인 JS를 이용하여 backend까지 작성할 수 있다는 장점이있다.
코드가 상대적으로 쉽다는 것도 장점으로 작용한다. 상대적으로 쉬운 코드 대비 성능 또한 우수하다. 하지만, 높은 연산력을 필요로 하게 되는 경우 연산에 대한 성능은 매우 떨어진다고 할 수 있다.
여담으로 Node는 Frame Work처럼 보이지만, 아니다. 이는, node.js 홈페이지에 명시되어있는 사실이다.

Node.js 환경구축

터미널 창에서 'npm i express' 한번이면 node의 환경을 구축 할 수 있다.

단, node는 React와는 다르게 필수적인 폴더들을 직접 만들어야 하는데

이는 각각 config, public, routes, views 각각의 폴더의 역할은 새로운 헤더로 정리하겠다.

마지막으로 server.js 폴더까지 생성해주면 표면적인 환경구축은 끝났다고 볼 수 있다. 추가적인 부분들은 페이지를 만들어가면서 수정하거나 참고하겠다.

Node.js 내부 필수 작업

server.js

server.js(이름은 달라도 상관없다.) 는 서버의 중심이 된다고 볼 수 있다. 경로와 각 경로에서 실행할 함수는 기본적으로는 routes에서 혹은, function을 만들어줘서 함수를 따로 관리하는 방법을 사용한다. 하지만, 모든 라우터는 결국 server.js 를 통해 실행되기 때문에 이 파일 내에는 port 번호나 데이터를 주고 받을때의 형태, 환경설정 등이 들어간다.

const express = require('express');
const app = express();
const cors = require("cors") // npm i cors

// routes 경로에 있는 파일 호출

app.use(cors()); // cors 사용하기 -> 보안문제기 때문에 필수적이다.



app.set('port',process.env.PORT || 8000); // 설정된 포트 혹은 8000번 연결(axios와 동일한 port로)
app.listen(app.get('port'), ()=>{
    console.log(`Server is running on ${app.get('port')}` );
})

당연하게 작업이 진행되면서 수정해야하는 사항들이 있다. 지금은 최소한의 설정이다.

nodemon

대부분의 서버가 그러하듯 node 역시 수정사항이 바로바로 적용이 안되기 때문에 코드를 수정하는 때마다 서버를 다시 실행시켜줘야 하는 번거로움이 있다. 이러한 문제를 해결해주는 것이
'nodemon'이다. nodemon은 코드 수정을 감지하고 자동으로 재시작을 해준다.
설치 방법은 간단하다.

npm install nodemon

하지만, 이는 현재 파일에 제한하여 설치하는 방법이다.당연하게 대부분은 이러한 기존의 방식으로 사용하는게 맞지만 nodemon은 node작업 자체에 영향을 주지 않으면서 편리성을 더하는 도구이기에 전역적으로 설치하기도 한다. 전역적인 설치는 한 번 설치해두면 새로운 환경을 구축하더라도 추가적인 설치가 필요없다.

npm install -g nodemon