히앤님의 개발 세상

1. mamp

먼저 mamp설치함

https://www.mamp.info/en/downloads/ 

MAMP는 설치 후 프로젝트 폴더로 경로를 설정하고 start한다.

PHP 서버라고 함.

우리는 특이하게 php 서버를 함께 세팅해놓고 만든다.

나는 그냥 무식하게 루트에 해놨따....옘병

그 후 gitlab에서 프로젝트 링크 복사 후 원하는 경로에서 프로젝트를 clone해준다.

로컬에서 프로젝트할 때 백엔드 언어와 같은 공간에서 환경을 구성하는건 흔치 않다.

요즘은 그렇게 안함. FE 개발자가 전문화되고, 개발환경(빌드툴) 성능이 향상되었기 때문.

(node로 가상 서버를 띄워서 백엔드 서버 도움 없이 개발이 가능해짐.)

문제는 이 방식의 단점은 소규모 개발에서는 js 개발을 위해 백엔드 개발을 다 끝내놓고 해야함. 수정을 하면 또 dev서버에 반영한 뒤에 테스트가 가능하기 때문에 번거롭다.

따라서 우리가 이렇게 한 이유는 편의성을 위해 의도적으로 개별로 서버에 접근할 수 있게  구축해놓은 것. 이러면 php폴더에 있는 백엔드 코드를 바로바로 바꿔가면서 테스트가 가능하다.

이를 위해 mamp를 설치해서 서버도 구축해놓은 거다.

API가 하나씩 나오면 그에 맞게 js를 짜도록 하고 우선 마크업 완성, 그 후에  PHP 짤 예정

2. n

n이란게 있는데, node와 관련이 있다.

node는 버전에 따라 사용할 수 있는 메소드? 로직?이 달라지는데 개발자들이 한 PC로 여러 프로젝트를 개발할 수 있으므로 버전이 고정되어있으면 번거롭다.

이 때 n이라는 것을 사용하면 node.js의 버전을 쉽게 넘나들 수 있다.

전역명령어라서 그냥 터미널 어디 위치던지 간에 인식한다.

++추가) windows 환경에서는 설치가 안됨! node.js가 이미 설치가 되어있어야 한다.

윈도우에서 node 버전을 변경하려면 NVM을 사용해야 한다.(참고 링크)

▼ NVM으로 n처럼 node 버전 관리하는 방법

더보기

해당 exe 파일을 잘 다운로드 받고 https://github.com/coreybutler/nvm-windows/releasesl

  

    
    
    
    Copy
  
node -v
nvm list available
nvm install 17.3.0 (nvm install 원하는 버전)
nvm list
nvm use 17.3.0
node -v

필요한 버전을 다운로드해서 바꿔준다.

현재 node.js 버전 확인

  

    
    
    
    Copy
  
node -v

혹시나 캐시가 남아 있는 경우, 에러가 날 수 있어서 설치 전  캐시 삭제

  

    
    
    
    Copy
  
sudo npm cache clean -f

설치

  

    
    
    
    Copy
  
sudo npm install -g n

사용법

우리는 14로 진행할 예정. 즉, 내 node 버전은 14.21.3

버전 추가는 아래처럼 쓰면 14버전 설치됨. 구체적인 상세 버전을 다운로드 할 수도 있다.

  

    
    
    
    Copy
  
sudo n 14

내 node 위치를 알려면 터미널에서 아래를 입력해보면 된다.

  

    
    
    
    Copy
  
which -a node

/usr/local/bin/node 난 여기 있다고 함.

대충 기억나는건 local 폴더까지 들어가서 mkdir로 n 폴더 만들어줬었다.

sudo mkdir -p /usr/local/n

3. 프로젝트 실행

터미널 어렵다..

한마디로, 내 프로젝트 경로로 들어가서 node_modules가 설치되어있는 곳에서 run해주면 실행된다.

cd   경로이동

ls.   폴더 안에 뭐있는지 보여줌

clear 지저분한거 지워

history 내가 지금까지 쓴 명령어들

/      루트...

  

    
    
    
    Copy
  
//내 ROOT는 kimhaein@gimhaein-ui-MacBookPro ~ 이다. 물결임...

cd pureapp
cd apps
cd pureapp
npm run dev //실행

초록색 나오면 켜진겨.

그리고 MAMP도 start 해주면 서버도 켜진거다.

http://local.pu.re.kr:8888/

이 주소로 접속한다. 왜 localhost가 아니라 도메인이냐면, hosts에 들어가서 127.0.0.1를 local.pu.re.kr로 설정해줬기 때문이다.

이렇게 설정하면 브라우저에 저 링크를 입력해도 검색이 되는게 아니라 우리의 프로젝트 화면이 나오게 된다.

  

    
    
    
    Copy
  
sudo vi /etc/hosts

vi 편집기로 hosts 파일 열어서 수정했다....vi 오랜만에 하려니까 모르겠음...;;

i 입력모드

w 작성(write)

q 나감(quit)

! 강제로 하겠다는 말

즉, wq!는 저장하고 나간다는 말. 편집 후 :q!는 뒤로가기가 되시겠다.

4. 기타 다음주까지 개발 : 마크업

일단 php와 public 무시하고 src에 있는 기본 article 페이지 만든거 보고 마크업을 해보자.

템플릿을 정했으니 App.js에 연결해놓은 개별 페이지 + 개별 페이지의 css들을 하나둘 화면도 좀 만들어보면 됨.

사실 익숙해지는게 우선이기 때문에 구조에 익숙해지고 MAC 자체에 좀 익숙해져야겠다 생각함.

도리언니는 기획 후 화면을 만들어본다고 하고, 나는 일단 가장 익숙한 리스트부터 만들어보겠다고 함.

따라만드는 예제 출처 : https://binaryjourney.tistory.com/8

▼ node.js와 npm와 CRA이란?

  

    
    
    
    Copy
  
$ node- v

  

    
    
    
    Copy
  
$ npm-v

  

    
    
    
    Copy
  
npx create-react-app 프로젝트명

1.Node.js 최신 버전 설치

▼ Node.js 사이트에서 버전에 맞게 다운로드

터미널에서 버전 확인

  

    
    
    
    Copy
  
C:\Users\User>node -v
v10.24.0

난 v10.24.0 버전이군.

node 입력 시 노드 테스트도 가능하다.

노드 모드에서 나가기는 Ctrl + C 두 번 사용하거나 .exit 입력

2. vsCode로 React 프로젝트 생성

C:\study\react 경로로 폴더를 생성해서 이쪽에서 작업하겠음.

폴더 만들고 우클릭 > Code로 열기

터미널에서 npx로 react App을 만들자.

오류 수정 참고.

내가 엄청 옛날 버전을 쓰나보다. node와 npm 둘 다 업데이트하자.

window라서 홈페이지에서 msi로 다운받아줌. 위 링크에서 다운받은 버전은 18.12.1이다.

혹시나  npx가 설치가 안되어있으면 npm install npx -g 로 터미널에서 설치하면 된다.

  

    
    
    
    Copy
  
npx create-react-app thepureprj

드디어 만들기 시작하구요....

3. React 프로젝트 둘러보기

모듈은 볼 필요 없고, src가 소스코드 보관함임

• node_modules : 라이브러리 모음 폴더
• public : 이미지 파일과 같은 static 파일 보관함. 빌드 시에 압축되지 않음.
• src : 소스 코드 보관함
• src 폴더 안에 있는 App.js : 메인페이지에 들어갈 HTML을 작성하는 곳
• public 폴더 안에 index.html : 메인페이지 (코드 상으로는 아무것도 없다. 왜냐하면 App.js에 있는 것들을 index.js에 의해 index.html 안에서 보여주기 때문이다.)
• package.json : 설치한 라이브러리 목록

4. React 프로젝트 실행

터미널에서 폴더 이동은 cd 이다.

터미널에서 리액트를 실행한다.

  

    
    
    
    Copy
  
cd thepureprj
npm start

5. yarn 설치

  

    
    
    
    Copy
  
npm install -g yarn

yarn 으로 필요한 패키지를 설치한다.

  

    
    
    
    Copy
  
yarn add redux react-redux react-router-dom redux-saga @reduxjs/toolkit antd

[ 설치한 패키지 설명 ]

상태 관리를 위한 redux와 react-redux, redux-toolkit

router 사용을 위한 react-router-dom

비동기 처리로서 사용할 middleware로 redux-saga

스타일링을 위한 antd

6. 기본 구조 설정하기

BoardPage.js에 설정한 내용을 화면에 띄워보자.

0)  설치하면 좋을 확장 프로그램

vsCode 에서 ES6와 ES7 관련된 뭘 설치한다. 마켓플레이스에서 설치하면 개발할 때 단축기 사용 가능함.

rfce를 하면 자동으로

  

    
    
    
    Copy
  
import React from 'react'

function BoardPage() {
  return (
    <div>
      
    </div>
  )
}

export default BoardPage

이게 생성됨.  java 기본 템플릿 생성과 비슷한듯.

1) 폴더 생성

요만큼을 생성해준다. BoardPage를 만들어서  App.js 에 띄워줄거임.

App.js 위치를 components 폴더 안에 넣는다. 이제 다 여기서 관리해줄꺼임.

2) BoardPage.js  작성

여기가 메인페이지 내용이 들어가는 곳이다.

rfce를 해서 템플릿 만들고 div 태그와 h1 태그를 이용해서 내용을 간단히 써주자.

  

    
    
    
    Copy
  
import React from 'react'

function BoardPage() {
    return (
    <div>
        <h1>일단 띄웠으니까 감격부터 하고 시작합시다! </h1>
        <h2>github 정리하며 연결중입니다. 마스터가 되어보겠어!</h2>
    </div>
    )
}
 
export default BoardPage;

3) index.js  작성

/src/index.js 에 react router dom의 BrowserRouter 를 import 하고 App 컴포넌트를 감싸준다.

  

    
    
    
    Copy
  
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App'; // 링크 수정해서 우리꺼 컴포넌트 안에 있는 App.js를 향하게 함
import { BrowserRouter } from "react-router-dom"; //추가
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <BrowserRouter> //React.StrictMode를 지우고 추가
    <App />
    </BrowserRouter>,
    document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

4) App.js  작성

components > App.js 에 아래 내용을 써준다.

BoardPage에 작성한 내용을 여기에 연결해줄꺼니까 import 해줘야 함.

  

    
    
    
    Copy
  
import React from 'react';
import {Route, Switch} from "react-router-dom";
import BoardPage from './views/BoardPage/BoardPage';


function App() {
  return (
    <div>
      <Switch>
        <Route exact path="/" component={BoardPage} />
      </Switch>
    </div>
  )
}

export default App;

에러 발생함!

ㅎㅎ... 왜 안되나 했더니 v5에서 v6가 되면서 switch -> Routes로,  component -> element로 바뀌었다고 한다.

  

    
    
    
    Copy
  
//v5 버전
<Switch>
 <Route exact path="/" component={Home} />
 <Route path="/report" component={Report} />
 <Route path="/passenger" component={Passenger} />
</Switch>

//v6 버전
<Routes>
 <Route path="/" element={<Home />} />
 <Route path="/report" element={<Report />} />
 <Route path="/passenger" element={<Passenger />} />
</Routes>

꺽쇠도 넣어줘야 함.... v6이 현재 사용하는 버전이기 때문에 예제를 잘 보고 진행할 것.

  

    
    
    
    Copy
  
import React from 'react';
import {Route, Routes} from "react-router-dom";
import BoardPage from './views/BoardPage/BoardPage';


function App() {
  return (
    <div>
      <Routes>
        <Route exact path="/" element={<BoardPage />} />
      </Routes>
    </div>
  )
}

export default App;

5) 결과창

index.js에 설정했던  document.getElementById("root") 값에 따라 id값이 root  인 div 태그에  BoardPage.js에 설정한 내용이 들어간다.

아...여기서부터 따라서 해보려고 했으나... v5로 만든것들을 내가 따라서 v6로 그때그떄 만들기도 어려웠고... 사실 잘 모르겠다. 그냥 하나씩 내가 아는 부분들을 검색해서 만들어보기로 함.

결국 게시판에서 가장 큰 3가지는

1. DB데이터 불러오기

2. DB 데이터 넣기

3. DB 데이터 수정/삭제하기

이거밖에 없으니까 대충 페이지 구조만 세우면 냅다 DB 연결해서 거기 있는 데이터 가져오는것부터 시도해보기로 했음

7. BoardPage 아래에 BoardList 내용을 보여주기

BoardPage => 메인페이지

BoardList => 메인페이지 안에 추가하고 싶은 div(iframe처럼 안에 넣어주고 싶음)

메인페이지 글씨를 띄우는 것은 성공했으니 그 아래에 여러 컴포넌트를 넣는 연습을 해보자.

BoardList라는 js를 따로 만들어서 여기에 작성한 내용을 BoardPage에서 볼  수 있게  import해줘보자.

1) BoardPage > Sections > BoardList.js 생성

  

    
    
    
    Copy
  
//BoardList.js
import React from 'react';

function BoardList() {
    return (
    <div>
        <h1>BoardList</h1>
    </div>
    )
}
 
export default BoardList;

2) BoardPage에 import하기

BoardList를 BoardPage에 띄우기 위해 import 해준다.

  

    
    
    
    Copy
  
//BoardPage.js
import React from 'react';
import BoardList from './Sections/BoardList';


function BoardPage() {
    return (
    <div>
        <div>
            <h1>Board Title</h1>
        </div>
        <div>
            <button>New Post</button>
        </div>
        <div>
            <BoardList />
        </div>
    </div>
    )
}
 
export default BoardPage;

위에 import 해준 후에, <BoardList /> 라는 이름으로 해당 페이지를 저기에 불러온다.

그러면 title 아래 버튼 아래에 BoardList 가 div 형태로 붙여넣어지게 된다.

8. Route 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기

페이지를 총 3개를 만든다.

BoardPage => 메인페이지

ArticlePage => 기사페이지

RegisterPage => 등록페이지

각각의 페이지는 URL 주소 입력을 통해서도 이동 가능하게 만들어보자.

출처  : https://velog.io/@velopert/react-router-v6-tutorial

1) 라우팅이란?

웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다. 여러개의 페이지가 있다면 각 페이지 별로 컴포넌트를 분리해가면서 개발하겠지? 분리된 컴포넌트들을 관리하기 위해 필요한 것이 바로 라우팅 시스템이다. 쉽게 말해서 공유기이다.

리액트에서는 이 라우트 시스템을 구축하기 위해 크게 두가지가 있다. 리액트 라우터(React Router)와 Next.js가 있다.

일단 리액트 라우터(React Router)를 사용해서 해볼 것이다. 

리액트 라우터(React Router) 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있다. 이 라이브러리는 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있다.

2) 싱글 페이지 애플리케이션(SPA)이란?

한 개의 페이지로 이루어진 애플리케이션이다. 리액트 라우터를 사용하면 여러페이지로 구성된 프로젝트를 한개의 페이지 안에서 필요한 부분만 자바스크립트를 사용해서 업데이트하는 구조로 만들 수 있다.

이전에 사용했던 멀티 페이지 애플리케이션은 사용자가 다른 페이지로 이동할 때마다 해당 페이지의 html, CSS, JS, 이미지 등을 받아왔다. 사용자 인터랙션이 별로 없는 정적인 페이지라면 기존 방식이 적합하지만, 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션은 멀티 페이지 애플리케이션을 사용하면 트래픽도 많이 나오고 속도도 느려진다. 

따라서  React같은 라이브러리를 사용해서 싱글 페이지로 구성하면 뷰 랜더링(화면에 그리는 것)은 사용자의 브라우저가 해주고, 웹 어플리케이션을 사용자 브라우저가 실행하면, 사용자가 원하는 정보가 있을 때(=인터랙션 발생) 필요한 부분만 자바스크립트로 불러온다. 그러면 불러온 화면(HTML)은 한개인데 사용자 브라우저에 실행된 웹 어플리케이션이 알아서 데이터를 변경해줘서 여러페이지를 표현할 수 있게 된다.

3) 프로젝트에 리액트 라우터 적용

리액트 라우터는 설치 후에 index.js에서 import 해줘야 한다.

BrowserRouter라는 컴포넌트를 사용할 것이다.

  

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

싱글 페이지이기 때문에 리액트에서는 페이지가 단 한 개 뿐이다. 따라서 정보에 맞게 화면 일부분이 바뀐다. 그렇다면 주소도 똑같이 한개씩일까? ㄴㄴ,그렇지 않다. 주소는 바뀐다. 우리는 실질적으로 페이지가 이동하지는 않았지만, 바뀐 정보에 맞게 주소가 변경되어야 한다.

BrowserRouter는 html5의 history API를 사용해서 UI를 업데이트한다. Link  태그를 함께 쓰는데 해당 URL로 이동하면서 페이지를 불러오는게 아니라, 단순히 주소만 바꿔주며 컴포넌트들을 랜더링하는 역할을 한다.

웹 애플리케이션에 페이지를 새로 안불러오고도 주소 변경하고 현재 주소에 관련된 정보를 리액트 컴포넌트가 사용해서 페이지에 정보가 바뀌게 된다. 

추가로 HashRouter라는 것도 있는데, 해시(#)를 사용하여 <a href="#"> 처럼 모든 경로앞에 #를 붙여서 서버요청을 보내지 않게하고 SPA를 수행하게 해준다. 정적인 페이지에서 많이 쓰인다. 

보통 Request와 Response로 이루어져 있는 동적인 페이지를 제작하기 때문에 BrowserRouter를 주로 쓴다.

4) Route 컴포넌트를 사용해서 경로 설정

사용자의 브라우저 주소 경로에 따라 우리가 원하는 컴포넌트를 보여주기 위해서 Route 라는 컴포넌트를 통해 라우트 설정을 해주어야 한다.

Route  컴포넌트는 다음과 같이 사용한다.

그리고, Route 컴포넌트는 Routes 컴포넌트 내부에서 사용되어야 한다.

  

    
    
    
    Copy
  
<Routes>
<Route path="주소규칙" element={보여 줄 컴포넌트 JSX} />
</Routes>

exact란?

exact는 path 속성에 넣은 경로값이 정확히 URL의 경로값과 일치할 때만 렌더링되도록 돕는다.

exact는 값으로 true, false를 줄 수 있다. 만약 true일 경우 exact={true} 대신 축약해서 exact만 작성하면 된다.

만일 exact를 사용하지 않으면 path="/" 인 라우터는 /article 경로나 /register 경로에서도 반응하게 된다. 왜냐하면 exact가 없을 경우 localhost:3000/register 라는 주소 내에 BoardPage 컴포넌트가 렌더링되어야 하는 주소인 localhost:3000/ 주소가 포함되어 있기 때문이다.

주소 뒤에 붙는 것들까지 개별적으로 구분해주려면  exact 속성이 반드시 필요하다.

  

    
    
    
    Copy
  
//App.js
import React from 'react';
import {Route, Routes} from "react-router-dom";
import BoardPage from './views/BoardPage/BoardPage';
import ArticlePage from './views/ArticlePage/ArticlePage';
import RegisterPage from './views/RegisterPage/RegisterPage';


function App() {
  return (
    <div>
      <Routes>
        <Route exact path="/" element={<BoardPage />} />
        <Route exact path="/article/:articleId" element={<ArticlePage />} />
        <Route exact path="/register" element={<RegisterPage />} />
      </Routes>
    </div>
  )
}

export default App;

각각 설정한 주소에 따라 내용이 바뀐다. URL에 따라 페이지가 바뀐 것 같지만 사실 그렇지 않다는 점!

9. Link 컴포넌트를 사용하여 다른 페이지로 이동하는 링크 보여주기

보통 웹 페이지에서 링크를 통해 이동하는 것은 <a> 태그를 쓴다.

하지만 리액트 라우터를 사용하는 프로젝트에서는 <a>태그는 사용하면 안된다. <a> 태그는 브라우저가 페이지를 새로 불러와서 페이지를 이동하기 때문이다. 우리는 싱글 페이지 애플리케이션이기 때문에 페이지를 새로 불러서는 안된다.

Link 컴포넌트는 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.

Link 컴포넌트는 다음과 같이 사용한다.

  

    
    
    
    Copy
  
<Link to="경로">링크 이름</Link>

BoardPage에서 버튼을 누르면 register 페이지로 이동하게끔 주소를 변경해줘보자.

  

    
    
    
    Copy
  
//BoardPage.js
import React from 'react';
import { Link } from 'react-router-dom';
import BoardList from './Sections/BoardList';


function BoardPage() {
    return (
    <div>
        <div>
            <h1>Board Title</h1>
        </div>
        <div>
            <Link to="/register">
                <button>New Post</button>
            </Link>
        </div>
        <div>
            <BoardList />
        </div>
    </div>
    )
}
 
export default BoardPage;

App.js에서 라우터 설정해줬듯이, /register에 연결된 RegisterPage로 이동한다.

물론 링크만 바뀔뿐 페이지를 새로 로딩하는것은 아니다!