그 서버에 빌드한 파일을 올리는 방법으로 호스팅해주었다. 과정은 간단한데 로컬에서 파일을 빌드하고 닷홈서버의 html폴더에 빌드한 파일을 넣어주기만 하면되는거라서 간단하게 자동화가 가능할것같았다. 그래서 github action을 이용해서 업데이트 자동화를 해보기로 했다.
이제 이파일에 필요한 동작들을 작성해주면 코드가 푸쉬됐을때 깃허브에서 띄워주는 가상의 컴퓨터에서 입력한 동작들을 수행해준다
내가작성한 코드를 올려줄테니 참고해서 닷홈에 자동화로 올리는 걸 많이 시도해봤으면 좋겠다.
name: CI/CD Pipeline
on:
push:
branches:
- main # 메인 브랜치가 푸쉬될때 동작
jobs:
build:
runs-on: ubuntu-latest # 사용할 os 버전
steps:
- name: Check out code
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '18' # 사용할 Node.js 버전을 설정합니다.
- name: Install dependencies
run: npm install # 프로젝트의 의존성 설치
- name: Build project
run: npx vite build # 프로젝트 빌드 명령어를 실행합니다.
- name: List dist directory contents
run: ls -al dist # 빌드된 파일의 폴더로 이동
- name: Install LFTP
run: |
sudo apt-get update
sudo apt-get install -y lftp # ftp 프로그램 설치
- name: Transfer files via SCP
env:
SERVER_HOST: ${{ secrets.SERVER_HOST }}
SERVER_USERNAME: ${{ secrets.SERVER_USERNAME }}
SERVER_PASSWORD: ${{ secrets.SERVER_PASSWORD }}
run:
lftp -u ${{ secrets.SERVER_USERNAME }},${{ secrets.SERVER_PASSWORD }} ftp://${{ secrets.SERVER_HOST }}:21 -e "
mirror -R dist /html;
bye
"
이렇게 설정하면 원격컴퓨터에서 노드를 설치하고 파일의 의존성을 설치한다음 빌드 하고 해당 파일을 원격지의 닷홈서버로 ftp프로토콜로 전송하게되는 코드이다.
vite를 사용해서 dist 폴더에 저장되는것같은데 build명령어나 의존성을 설치하는명령어는 사용하는 패키지 매니저나 명령어에 따라서 다르기때문에 자신의 환경에 맞춰서 써주면 될것같다. yarn을 이용하는사람은 yarn 명령어를 사용해야할테고..
닷홈은 ssh 를 열어놓지않기때문에 수작업으로 할때는 빌드한 파일을 파일질라로 닷홈서버에 옮겼는데 이렇게하면 메인 브랜치에 코드가 푸쉬될때 자동으로 빌드한파일을 닷홈의 /html폴더로 이동시켜서 코드만올려도 자동으로 업데이트 되는 효과를 볼수있다. 프로젝트가 복잡해지면 다른 추가적인 과정도 필요하게 될수도있지만 현재로서는 잘 동작하는듯하다.
next.js 를 만들고 vercel 을 만드는 곳에서 개발한 AI툴인데 프롬프트에 필요한 디자인을 입력하면 해당 컴포넌트와 필요한부분들이 모두 코딩되어서 코드수준으로 만들어준다.
우선 내가 필요한 페이지를 정리해 보았다.
가장 먼저 보여지는 index 페이지는 베스트 셀러나 추천하는 상품과 배너가들어갈수있는 페이지로 구성하고
각각 페이지들은 상품의 카테고리로 들어갈수있는 전형적인 쇼핑몰 형태의 페이지로 구성한다
추가적으로 관리자 페이지가 필요한데 관리자의 index페이지는 세일즈코스트나 잘 팔리는 상품들을 그래프로 조회할수있는 패널형태의 페이지로 구성하고 각각 페이지에 관리자에게 필요한 기능을 넣은 페이지로구현하려고 한다.
관리자에게 필요한기능은 구현하면서 계속 추가될것같지만 우선적으로 필요한기능은
1. 매출액 조회 (월단위 , 일단위 , 지정한 시작 종료일 기준)
2. 상품등록 , 삭제 , 수정
3. 회원관리
4. 재고관리
5. 할인또는 프로모션의 관리
6. 공지 기능
벌써 꽤 머리가 아플것같은 기능들이있는데 아마 진행하면서 더 늘어날수도있을것같다. 한 번에 다 구현은 할수없으니 하나씩 천천히 구현 해봐야할것같다. 현재로써는 상품에 댓글 기능은 포함하지않는 기획이라 댓글이나 답글은 없어도될듯하다. 사실 최초 기획단계에서 필요한 요소를 모두 정의하고 들어가면 좋겠지만 코딩을 공부하는 입장에서 그렇게까지하면 코드를 공부하는 시간보다 기획에 시간을 너무 쏟게 될것같아서 기능이 추가될수있다는 점만 염두에두고 확장성을 고려하여 코드작업을 해보도록 하겠다. 그쪽이 더 공부가 될것같고... 이전 기획과 새로운 기획에서 충돌이 났을떄의 해결도 좋은 경험이 될것같다.
나는 꼭 vite + typesciript + react 연습을하기 위해서 v0.dev로 만들고 react 만 사용하는 환경으로 옮기느라 고생을좀했지만 next.js프레임워크를 사용한다면 v0.dev가 만든 코드를 그대로 프로젝트로 생성해서 사용할수있어서 더 편하게 이용할수있다 .
해당 페이지는 빌드해서 호스팅사이트에 올려놓았다. 무료 호스팅이라 비용없이 간단하게 이용할수있어서 좋은것같다
모듈이 여러 개일 때는 리듀서가 여러 개이기 때문에 리듀서들을 하나로 합쳐서 store를 만들 때 사용한다.
modules/index.js
import { combineReducers } from "redux";
import counter from "./counter";
const rootReducer = combineReducers({ counter })
export default rootReducer
3. 스토어 만들기 , 전역에 스토어 사용하기
만들어진 rootreducer를 이용해서 스토어를 만들고 스토어를 사용할 수 있게 하위컴포넌트들을 묶어준다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { legacy_createStore as createStore } from 'redux';
import rootReducer from './modules';
import { Provider } from 'react-redux';
//스토어 만들기.
const store = createStore(rootReducer)
console.log(store.getState()) //상태값 조회
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
// 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();
useSelector로 counter의 상태값을 number로 받아서 Counter컴포넌트에 props로 보내준다.
useDispatch로 dispatch함수를 받아와서 디스패치를 실행하는 함수를 만들었다 onIncrease ,onDecrease
dispatch에 액션객체로는 액션생성 함수를 넣어줬다.
이렇게 만들어준 함수를 Counter컴포넌트에 props로 넘겨준다.
이제 이 컨테이너 컴포넌트를 app.js에 넣어서 렌더링만 해주면 된다.
이제 여기에 미들웨어를 하나 만들어서 값이 리듀서로 가기 전에 작업을 할 수 있게 해 주겠다.
*리덕스 미들웨어 미들웨어는 함수를 연달아서 두 번 리턴하는 함수.
const middleware = store => next => action =>{
//하고싶은작업..
}
function middleware(store){
return function(next){
return function(action){
//하고싶은작업..
}
}
}
위와 같은 구조가 미들웨어의 구조이다 store는 파라미터로 들어가고 함수를 두번 리턴해준다.
각 함수에서 받아오는 파라미터 -store 리덕스 스토어 store dispatch( ) / getState( ) / subscribe( ) 내장함수 들어있음 -next 액션을 다음 미들웨어에 전달하는 함수 ex) next(action) -action 은 현재 처리하고 있는 액션객체
-next(action)을 해주지 않으면 action이 reducer나 다음 미들웨어로 넘어가지 않아서 에러가 생긴다.
middlewares/myLogger.js
const myLogger = store => next =>action=>{
//액션 출력하기
console.log(action)
//next는 다음미들웨어 또는 리듀서 에게 액션을 전달.
const result = next(action); //다음 미들웨어가 없어서 리듀서가호출되고 상태값이 변함
// 업데이트 이후의 상태를 출력
console.log(store.getState());
//여기에서 반환하는 result값은 dispatch(action)의 결과물.
return result
}
export default myLogger;
지금 보내주는 액션을 콘솔에 출력해 주고 action을 다음미들웨어로 넘겨준다.
미들웨어로 action이 넘어간 다음 바뀐 상태값을 출력해 준다.
이제 만들어진 이 미들웨어를 사용해 보자
store를 만들 때 미들웨어를 같이 넣어주면 된다.
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { applyMiddleware , legacy_createStore as createStore } from "redux";
import { Provider } from "react-redux";
import App from "./App";
import rootReducer from "./modules";
import myLogger from './middlewares/myLogger';
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
const store = createStore(rootReducer,applyMiddleware(myLogger));
console.log(store.getState());
root.render(
<StrictMode>
<Provider store={store}>
<App />
</Provider>
</StrictMode>
);
applyMiddleware를 import 해서 createstore안에 넣어주고 사용할 미들웨어를 파라미터로 넣어준다.
콘솔을 확인해 보면 어떤 액션이 들어가고 상태값이 어떻게 변하는지 미들웨어에서 출력을 해준다
이렇게 리듀서로 들어가는 자료들을 중간에서 받아서 출력해 줄 수도 있고 변경해서 다시 보내줄 수도 있는 게 미들웨어의 역할이다.
만들어진 미들웨어 써보기
redux-logger
npm install --save react-redux
redux-logger는 만들어져 있는 미들웨어이며 이전상태값과 액션 다음상태값을 출력해준다.
원래 저기에 이전상태값이랑 action객체 다음 상태값이 다 떠야되는데 왜 안뜨는건지...
logger콘솔화면
원래는 이렇게 상태값과 액션객체가 뜬다.
피드백
사실 미들웨어는 저번주 금요일에 배웠던 개념인데 이해가 너무안되서 정리를 좀더 해보고 오늘 학원에서도 다시해보고 thunk를 배우면서 어느정도 개념에 대해서 받아들여진것같다. 역시 코딩은 안되면 일단 반복하면 되는구나..
다음 포스팅은 thunk에 대해서 할것같은데 이것도 아직 제대로 알아먹은건아니라서 두루뭉술하게 될지도. 일단 인강이나 이런거 찾아보고 내 뇌속의 개념을 조금더 보충해서 알아보기쉬운 포스팅을 쓸려고 하고있다. 그냥 코드만 따라하는건 아무나 하는거고 코드를 보고 이해할수있는게 중요한것같다. 이제 포트폴리오 준비도 해야되고 정신도 없지만 . 배우는 개념들은 모두 놓치지않고 이해하고싶다.
액션 타입 - 다른 리덕스 모듈과 겹치지 않게 하기 위해 컴포넌트 이름의 접두사를 앞에 붙여줘야 한다
counter/SET_DIFF
액션 생성함수 -액션객체를 리턴해주는 함수. (export로 내보내기)
리듀서 - 컴포넌트 이름으로 만들어지며 state 파라미터에 디폴트 초기값을 지정합니다.
(export default로 내보내기)
state=initialState
모듈들을 관리해 줄 modules폴더를 만들고 그 안에 모듈들을 만들어준다.
modules/counter.js
//액션 : 타입 만들기
const SET_DIFF = "counter/SET_DIFF";
const INCREMENT = "counter/INCREMENT";
const DECREMENT = "counter/DECREMENT";
//액션 생성 함수 만들기
export const setDIFF = (diff)=>({type:SET_DIFF,diff});
export const increase = () =>({type:INCREMENT});
export const decrease = () =>({type:DECREMENT});
//초기 상태 선언
const initialState = {
number: 0 ,
diff: 1
}
//리듀서 선언
export default function counter(state=initialState , action){
switch(action.type){
case SET_DIFF:
return{
...state,
diff:action.diff
}
case INCREMENT:
return{
...state,
number:state.number + state.diff
}
case DECREMENT:
return{
...state,
number:state.number - state.diff
}
default:
return state;
}
}
modules/todos.js
//액션타입선언
const ADD_TODO = 'todos/ADD_TODO';
const TOGGLE_TODO = 'todos/TOGGLE_TODO';
//액션 생성 함수
let nextId = 1
export const addTodo = (text) =>({
type:ADD_TODO,
todo:{id:nextId,text: text,done:false}
})
export const toggleTodo = (id)=>({
type:TOGGLE_TODO,
id:id
})
//초기상태값
//초기 상태는 배열이어도 되고,원시타입(숫자,불린,문자열) 객체도 가능하다.
const initialState = [
// {
// id:1,
// text:"해야할일",
// done:false
// }
]
//리듀서
export default function todos(state=initialState,action){
switch(action.type){
case ADD_TODO:
return[
...state,
action.todo
]
case TOGGLE_TODO:
return state.map(todo => todo.id === action.id ? {...todo, done:!todo.done} : todo )
default:
return state
}
}
modules/index.js rootreducer 만들기
import { combineReducers } from "redux";
import counter from "./counter";
import todos from "./todos";
//한프로젝트에 리듀서가 여러개일때 하나로 합쳐서 사용 => rootreducer 루트리듀서
//combinereducers( )
const rootReducer = combineReducers(
{
counter:counter,
todos:todos
}
)
export default rootReducer
스토어 생성하기
src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { legacy_createStore as createStore } from 'redux';
import rootReducer from './modules';
import { Provider } from 'react-redux';
import { devToolsEnhancer } from '@redux-devtools/extension'; // 크롬확장 redux devtools
//스토어 만들기
const store = createStore(rootReducer,devToolsEnhancer());
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
// 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();
store를 만들고 Provider로 묶어줘야 하위 컴포넌트에서 store요소를 불러서 사용할 수 있다.
이제 이 값들을 불러서 화면을 구성하고 상태값을 변경해 줄 컴포넌트를 만들어주면 된다.
컴포넌트 만들기
1. 프레젠테이셔널 컴포넌트
실제 보이는 태그들을 만들어주는 컴포넌트, redux스토어에 직접 접근하지 않음 필요한 값은 props로 받아와서 사용하는 컴포넌트, 주로 UI를 선언하는 것에 집중
2. 컨테이너 컴포넌트
프레젠테이셔널 컴포넌트를 감싸고 store에 접근해서 값을 props로 프레젠테이셔널로 전달. 리덕스 스토어의 상태를 조회하거나, 액션을 디스패치 할 수 있는 컴포넌트. 프리젠테이셔널 컴포넌트를 불러와서 사용
꼭 이렇게 만들어줄 필요는 없지만 기능적으로 분리해 주면 나중에 에러가 났을 때 찾기 편하다
화면을 구성해 주는 요소들이 들어있고 필요한 값들은 props로 컨테이너 컴포넌트한테서 받아온다.
2. 컨테이너 컴포넌트
containers/CounterContainer.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Counter from '../components/Counter';
import { decrease, increase,setDIFF } from '../modules/counter';
const CounterContainer = () => {
//useSelector() 는 리덕스스토어의 상태를 조회하는 hook이다
const { number,diff } = useSelector(state=>state.counter);
const dispatch = useDispatch();
// 각 액션들을 디스패치 하는 함수
const onIncrease = ()=> dispatch(increase());
const onDecrease = ()=>dispatch(decrease());
const onsetDIFF = (diff) => dispatch(setDIFF(diff));
return (
<Counter number={number} diff={diff} onIncrease={onIncrease} onDecrease={onDecrease} onsetDIFF={onsetDIFF}/>
);
};
export default CounterContainer;
컨테이너 컴포넌트에서 Counter컴포넌트를 불러서 사용하고 Props로
함수=dispatch(액션생성함수)와 상태값을 보내주고 있다.
App.js에서 CounterContainer 컴포넌트를 불러서 사용하면 끝
redux자체는 그렇게 되게 어렵지는 않은데 이번에 redux를 배우면서 새로운 개념들을 같이 배워서 이해하기가 정말 너무 힘들었다. 모듈을 다 나눠서 만들고 합쳐서 하나로 만들고 액션객체도 일일이 만들어줬었는데 이번에는 액션객체를 만드는 함수를 만들어서 사용하니 갑자기 연결된 애들이 많아져서 뭐가 어디서 불러서 쓰고 어디에 들어간게 맞는건지 구분을 못해서 수업시간에 좀 힘들었다.. 그래도 redux는 많이 사용하고 있다고하니 연습해서 꼭 잘 쓰고싶다.. 포기하지말자.. 수료 2달남았다.. ㅠㅠ
//diskstorage()--> 파일을 저장할때에 모든 제어 기능을 제공
const storage = multer.diskStorage({
destination:(req,file,cb)=>{
cb(null,'upload/');
},
filename:(req,file,cb)=>{
const newFilename = file.originalname;
cb(null,newFilename);
}
})
이제 upload경로로 Post요청을 보내면 upload객체가 실행되면서 파일을 받아서 서버에서 저장해 준다.
클라이언트에서 파일을 올리면 서버로 보내져서 upload폴더에 저장되고 서버에서 응답으로 이미지의 이름을 보내주게 되고 클라이언트는 받은 이름으로 클라이언트자신의 images폴더에 접근해서 해당하는 이미지를 띄워준다.
일단은 테스트기 때문에 css도 없고 사실 파일도 클라이언트의 img폴더가 아니라 클라이언트가 이미지도 보내줘야하는 게 아닌가 싶긴한데 내일 학원가면 이어서 마저 가르쳐주실테니 일단 여기서 만족한다 multer를 쓰는방법은 링크의 공식문서를 읽어보면 있으니 찾아서 하면될것같고 요즘 하면서 점점느끼는게 외우는 걸 포기하게 되는거다.. ㅋㅋㅋ 어떻게 다외우나 싶어서 선생님께 여쭤봤더니 외우면서 하는게 아니라 그때그때 잘 찾아서 써야 한다고 한다. 이제 외우려고 노력하지 말고 열심히 블로그에 기록하고 다른 블로그에 좋은 포스팅이 있으면 저장해 뒀다가 잘 베껴서 써야겠다 코딩은 정말 엄청 두꺼운 책으로 오픈북 시험을 치는 느낌이다.. ㅠ
upload페이지로 이동하는 주소는 Header에서 <Linkto='/upload'> 제품등록 </Link>으로 주고 있다.
App.js
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import MainPage from './main';
import ProductPage from './product';
import { Routes,Route } from 'react-router-dom';
import UploadPage from './upload';
function App() {
return (
<div className="App">
<Header/>
<Routes>
<Route path='/' element={<MainPage/>}/>
<Route path='/detailView/:p_id' element={<ProductPage/>}/>
<Route path='/upload' element={<UploadPage></UploadPage>}/>
</Routes>
<Footer/>
</div>
);
}
export default App;
App에서 일치하는 경로에 따라 Route들을 렌더링 해주고 있다.
데이터를 서버에서 받아오기
서버코드
//express 서버 만들기
const express = require("express");//import express
const cors = require("cors");
//mysql부르기
const mysql = require("mysql");
//서버 생성 --> express( )호출
const app = express();
//프로세서의 주소 포트번호 지정
const port = 8080;
// JSON형식의 데이터를 처리할수 있도록 설정
app.use(express.json());
// 브라우저의 CORS 이슈를 막기 위해 사용하는 코드
app.use(cors());
//sql 연결선 만들기
const conn = mysql.createConnection({
host:"localhost",
port:'3306',
user:"root",
password:"1234",
database:"shopping"
})
//sql 연결하기
conn.connect();
// get요청시 응답 app.get(경로,콜백함수)
app.get('/products',(req,res)=>{
conn.query('select * from products',function(error,result,fields){
res.send(result);
});
})
//서버구동
app.listen(port,()=>{
console.log("서버가 돌아가고있습니다.")
})
(서버실행방법: 터미널에 node 서버이름.js 입력)
서버에서 로컬에 있는 데이터베이스에 접근해서 데이터를 가져와서 응답으로 보내준다.
서버에서 보내주는 값은 사이트에서 axios로 받아온다
커스텀훅
useAsync.js
import React, { useEffect, useReducer } from 'react';
//1.상태초기화
const initialState = {
loading:false,
data:null,
error:null,
}
//2.리듀서 함수구현
//로딩중일때 상태
//데이터를 성공적으로 받았을때 상태
//에러일때 상태
function reducer(state,action){
switch(action.type){
case "LOADING":
return{
loading:true,
data:null,
error:null,
}
case "SUCCESS":
return{
loading:false,
data:action.data,
error:null,
}
case "ERROR":
return{
loading:false,
data:null,
error:action.error,
}
default:
return state;
}
}
const useAsync = (callback,deps=[]) => {
const [state,dispatch] = useReducer(reducer,initialState);
//데이터 요청 함수
const fetchData = async ()=>{
//로딩의 value를 true로 업데이트
dispatch({
type:"LOADING"
});
// try catch 에러 처리 구문 ,,데이터를 요청하는 과정은 에러발생할 확률이 높음
try{
//axios에서 받는 함수가 들어감 useAsync를 사용하는 컴포넌트에서 각각 다른 주소를 넣어서 보내줌
const data = await callback();
dispatch({
type:"SUCCESS",
data //data : data 인데 같으니까 생략가능함
})
}
catch(e){
dispatch({
type:"ERROR",
error:e
})
}
}
useEffect(()=>{
fetchData();
},deps)
return state;
};
export default useAsync;
데이터를 받았을 때 상태를 바꿔주는 커스텀 훅을 만들어주고
main.js
import axios from 'axios';
import React from 'react';
import { Link } from 'react-router-dom';
import ProductList from '../components/ProductList';
import useAsync from '../customHook/useAsync'
import './index.css';
async function productFetch(){
const response = await axios.get("http://localhost:8080/products");
return response.data
}
const MainPage = () => {
const state = useAsync(productFetch,[])
const{loading,error,data}=state;
if (loading) return <div>로딩중</div>
if (error) return <div>에러발생</div>
if (!data) return null
console.log(data)
return (
<div className='main'>
<div className='visual'>
<img src ="images/banner1.jpg" alt="배너이미지1"/>
</div>
<div className='product'>
<h2>신상품</h2>
<ul>
{data.map(pro=>
<ProductList key={pro.p_id} p_id={pro.p_id} p_name={pro.p_name} p_price={pro.p_price}/>)}
</ul>
</div>
</div>
);
};
export default MainPage;
메인화면에서 useAsync를 import 해서 사용 useAsync에 파라미터로 입력한 주소의 데이터를 얻어서
리턴해주는 함수와 빈 배열을 넣어준다. 이렇게 넣어주면 useAsync의 콜백함수로 들어가서
주소에서 받아온 데이터가 data상태값에 들어가게 되고 useAsync에서 반환해 주는 state값을
