express 로 서버를 만들어 보자

글쓰기에 앞서 한가지 밝히는데 이건 정답이 아니고 나의 개발 과정이며 실시간으로 코드작성과 글작성을 같이하고 있다

이글에 끝에가서 재대로 작동이 될지 안될지는 아직 모르니 자신의 문제와 비슷하여 코드 복사 붙여넣기를 하려고 이글을 읽고 있다면 도움이 되지는 않을것 같다

 

지금 낚시 관련 web을 제작중인데 이걸 나 혼자서라도 실사용 하려면 서버가 필요하다

근데 백엔드는 전혀 모르는 나.......

관련 유튜브를 보면서 같이 한번 해보자

 

https://www.youtube.com/watch?v=d6suykcsNeY

 

먼저 express를 제일 많이 쓰는거 같으니 express를 써보려고 한다

설치는 다 알다시피 npm i express

그리고 npm에 들어가서 샘플코드를 보자

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

음 이즈 굳

그대로 넣어주자 필자는 server폴더를 생성 하위로 app.js 를 만들고 해당 코드를 붙여 넣었다

그후 터미널에서 서버 폴더로 들어가 node app.js를 실행하고 localhost:3000에 들어가면

실행되고 있다

근데 터미널에 아무 표시가 안나니 이게 되는지 마는지 잘 모르겠다

코드를 조금 추가해주자

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(4000, () => {
    console.log("server start!")
})

크게 바꾼건 없다 포트를 4000으로 바꾸고 (지금 사용하고 있는 react가 3000을 쓰고 있어서 이걸 바꿧다)

서버를 실행하게 되면 콘솔에 server start!를 띄우도록 했다 결과는 잘 되고 있다

 

서버가 동작하는것을 확인했으니 추가하고 싶은것을 추가해보자

const express = require('express')
const app = express()
const cors = require('cors')

app.use(cors());

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

let id = 2;
const fish = [{
    id:1,
    position: 1.1 ,
    setPosition: 1.1
}];

app.get('/api/fish', (req, res) => {
    res.json(fish);
})

app.post('api/fish', (req, res) => {
    const { position, setPosition } = req.body;
    fish.push({
        id: id++,        
        position,
        setPosition
    });
    return res.send('success');
})

app.listen(4000, () => {
    console.log("server start!")
})

참고한 유튜브는 todolist를 만들지만 난 내 지도 app에 위치 정보를 저장해야 하니 position으로 바꿔 넣었다

 

이제 프론트 쪽 react로 돌아가 필요한 코드를 넣어보자

//import { response } from "express";
import { useEffect, useState } from "react";
import MarkerEvent from "./components/MarkerEvent";

function App() {
  const [position, setPosition] = useState(null);

  useEffect(() => {
    fetch('http://localhost:4000/api/fish').
    then((response) => response.json()).then((data) => setPosition(data));
  }, []);

  return (
    <div>
      <MarkerEvent></MarkerEvent>
      {position.map((fish) => {
        <div key= {fish.id}>
          <div>{fish.id}</div>
          <div>{fish.position}</div>
          <div>{fish.setPosition}</div>
        </div>
      })}
      
    </div>
  );
}

export default App;

여기서 새로 추가된건 const [ position, setPosition } = useState(null); 과

fetch 부분인데 이부분이 backend와 소통하는 부분이다

이제 react를 실행시키면

서버에 설정해 둿던 배열이 들어왔다

아까 서버의 코드를 기억하는가?

const fish = [{
    id:1,
    position: 1.1 ,
    setPosition: 1.1
}];

를 적어 뒀고 성공적으로 들어왔다

이제 문제는 위치 정보를 주고 받을 수 있어야 한다

 

이럴때 어떻게 해야 하느냐

내가 알고있는 방법은 하나

consol.log를 찍어보자 그리고 그거에 맞게 데이터를 변경해줄 계획이다

바로 ㄱ

import React, { useState } from 'react';
import { Map, MapMarker } from "react-kakao-maps-sdk";

function MarkerEvent(){
  const Main = () => {
    const [position, setPosition] = useState()
    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 33.450701,
            lng: 126.570667,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
          onClick={(_t, mouseEvent) => setPosition({
            lat: mouseEvent.latLng.getLat(),
            lng: mouseEvent.latLng.getLng(),
            //바로 아랫부분에 콘솔로그를 넣어줬다
          },console.log(position))}
          
          
        >
          {position && <MapMarker position={position} />}
        </Map>
        {position && <p>{'클릭한 위치의 위도는 ' + position.lat + ' 이고, 경도는 ' + position.lng + ' 입니다'}</p>}
      </>
    )
  }
  return (<Main/>)
}
export default MarkerEvent;

로그로 position을 찍어봤는데

lat, lng 정보가 나온다 이게 위도와 경도인데 이것만 넣으면 되나?? 싶다

 

일단 해보자

 

const express = require('express')
const app = express()
const cors = require('cors')

app.use(cors());

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

let id = 2;
const fish = [{
    id:1,
    lat: 1.1 ,
    lng: 1.1
}];

app.get('/api/fish', (req, res) => {
    res.json(fish);
})

app.post('api/fish', (req, res) => {
    const { lat, lng } = req.body;
    fish.push({
        id: id++,        
        lat,
        lng
    });
    return res.send('success');
})

app.listen(4000, () => {
    console.log("server start!")
})

처음에 position과 setPosition 이엇던부분을 lat, lng으로 바꿔주고 아이디는 일단 그대로 둿다

import { useEffect, useState } from "react";
import MarkerEvent from "./components/MarkerEvent";
import axios from "axios";
//import { response } from "express";

const SERVER_URL = 'http://localhost:4000/api/fish';

function App() {
  //const [FishList, lat, lng] = useState(null);

  const fetchData = async () => {
    axios.get(SERVER_URL);
    //lat(response.data);
  }

  useEffect(() => {
    fetchData();
  }, []);

  const onSubmitHandler = async (e) => {
    e.preventDefault();
    const lat = e.target.lat.value;
    const lng = e.target.lng.value;
    await axios.post(SERVER_URL, { lat, lng });
    fetchData();
  }

  return (
    <div>
      <MarkerEvent onclik={onSubmitHandler}></MarkerEvent>
       
    </div>
  );
}

export default App;

서버 연결부분을 axios로 바꾸고 진행해 봤는데 훨씬 보기 편하다 에러가나는부분은 일단 주석처리 해주고 결과를 보니

배열에서 객채형식으로 바뀌어서 넘어오고 있다

뭐지????

흠........

지금 해결해야 할것은

넘어온 객채내부의 좌표를 마커로 바꿔 등록해야 한다

 글이 길어지는거 같으니 다음글에서 마저 작성하겟다