localhost 브라우저 접속 시 문제가 발생합니다

 첫번째 코드에서 localhost:8080으로 접속했을때는 " Cannot GET / " 이 출력되었고 /product에 접속했을때는 상품 정보가 잘 출력되었다 하셨죠? 질문자님의 코드에서는 아주 정상적인 출력입니다. 두 번째 코드에서는 express 대신 http 모듈을 사용하셔서 서버를 작성하셨는데 출력이 정상적인 이유는 클라이언트 쪽에서 웹사이트에 접속 할 떄에는 해당 웹사이트의 서버로 'GET'요청을 필수적으로 보내게 됩니다. 두 번째 코드에서 http 모듈로 서버를 만든 후 서버에 접속 했을때는 조건문으로 메서드와 URL(주소)를 지정해주지 않는 한 GET "메서드" 로 / "URL"에 접속한 상황이 됩니다.

  http 모듈로 만든 서버가 돌아가고 있을 때 클라이언트가 URL이 localhost:8080인 웹사이트에 접속했다고 가정할 때 질문자님께서 만드신 index.js 안에 코드를 보시면 아래와 같습니다.

const server = http.createServer(function (req, res) {
  const path = req.url;
  const method = req.method;
  if (path === "/products") {
    if (method === "GET") {
      res.writeHead(200, { "Content-Type": "application/json" });
      const products = JSON.stringify([
        {
          name: "농구공",
          price: 5000,
        },
      ]);
      res.end(products);
    } else if (method === "POST") {
      res.end("생성됨");
    }
  } else {
    res.end("hello Client!");
  }
});

  조건문 부터 천천히 봅시다. path가 "/products"라면 그 다음 조건인 method가 "GET"인 조건을 찾습니다. 만약 localhost:8080에 접속해서 URL에 "/products"를 입력하면 위에 조건이 성사되게 됩니다. else if를 보시면 method가 "POST"인 조건을 찾는데 이는 저희가 웹브라우저로 주소를 입력한다고 사용할 수 있는 메서드가 아닙니다. 만약 "POST" 요청을 어떻게 보내는지 궁금하시다면 

https://testmanager.tistory.com/342

위에 주소에 들어가서 확인해보세요.

 else에 경우를 봅시다. 이는 위에 조건과 아무것도 성사 되지 않을 때 사용하는 예약어(키워드)입니다. 만약 저희가 localhost:8080에 접속했다면 else부분이 바로 실행되게 될 것입니다. index.js에서 만든 코드에 조건에 해당하는게 없기 때문이죠. 이런식으로 조건문 분기를 통해서 서버를 작성하는게 여간 까다로운게 아닙니다. 그래서 node.js에서 제공하는 express라는 모듈을 사용 할 수 있습니다.  express로 작성된 server.js를 같이 봅시다.

const express = require("express");
const cors = require("cors");
const app = express();
const port = 8080;

app.use(express.json());
app.use(cors());

app.get("/products", (req, res) => {
  res.send({
    products: [
      {
        id: 1,
        name: "농구공",
        price: 100000,
        seller: "조던",
        imageUrl: "images/images/products/basketball1.jpeg",
      },
      {
        id: 2,
        name: "축구공",
        price: 50000,
        seller: "메시",
        imageUrl: "images/images/products/soccerball1.jpg",
      },
      {
        id: 3,
        name: "키보드",
        price: 10000,
        seller: "그랩",
        imageUrl: "images/images/products/keyboard1.jpg",
      },
    ],
  });
});

app.post("/products", (req, res) => {
  res.send("상품이 등록됨");
});

app.listen(port, () => {
  console.log("쇼핑몰 서버가 돌아간다");
});

 전체를 다 설명해드리기 보단 질문자님께서 궁금하신 내용인 왜 localhost에 접속했는데 "Cannot Get / "이 나오는가에 대해서만 설명드리겠습니다. express의 장점은 미들웨어(app.use(), app.get()등등)를 사용해서 서버에 필요한 코드를 작성하기 쉽다는 것입니다. 특정 URL에 원하는 메서드를 보내고 싶다한다면 

app.get("/products", (req, res) ...) 이런식으로 사용할 수 있다는 것이죠. 근데 여기서 코드가 실행되고 서버에 접속했을 떄 "Cannot Get / "이 왜나오고 "/products"를 입력하면 상품정보는 잘만나오는가에 대해서 살펴봅시다. "/products"만 잘나오는 이유는 미들웨어로 app.get("/products")를 작성하셨기 때문입니다. 이는 지금 서버가 잘 돌아가고 있음을 알려줍니다. "Cannot Get /"을 해석해보면 "/"으로 GET 할수 없다 입니다. 저희가 브라우저로 웹에 접속한다면 예를 들어 구글에 접속해 본다고 가정해 봅시다. URL이 www.google.com인 것을 확인해 볼수 있을겁니다. 그런데 여기에는 사실 "/"이 생략되어 있습니다. 따라서 얼래 URL은 www.google.com/인 것이죠 server.js 에서도 GET메서드로 "/"에 접속한다는 미들웨어를 만들어 주신다면 해결되는 문제입니다. 예를 들면 아래처럼 만들 수 있습니다.

 이런식으로 만드시고 서버를 다시 실행 후 localhost:8080(index.js에서 만든 port번호, port번호는 본인이 원하는 숫자를 입력할 수 있습니다.)로 접속하신다면 이제 더이상 Cannot get / 이 나오지 않게 될 것입니다. 코드 전체를 다시 올려드리겠습니다.

두 번째 질문에서 localhost:3000에 접속했을 때 화면이 아무것도 나오지 않으셨다 했는데 포트번호를 3000으로 설정하지 않으시면 나오지 않는게 정상입니다. 포트는 작성하신 코드에서 port변수를 원하는 숫자로 해주시면 될 거 같습니다.

답변이 너무 길어서 죄송하지만 질문자님께 최대한 도움 드리고자  말이 두서없이 길어진 거 같습니다. 너무 직설적인 답변은 답변을 이해하는데 어려움이 있을까 해서 길게 적게되었습니다. 도움이 되셨으면 좋겠네요.

localhost:3000은 웹 서버의 URL 입니다! 말씀하신 1번 내용을 봤을 때 API 서버(8080)에서는 정상적으로 데이터를 제공해주는 것 같아요.

따라서 웹에서 이슈가 있는 것 같습니다. 제대로 된 API 서버로 요청을 하고 있는지 먼저 확인해보면 좋을 것 같아요. 개발자도구를 열어서 Console에 무슨 로그가 보이는지 확인해보면 좋을 것 같아요. 또한 웹 소스코드에 문제가 없는지도 보면 좋을 것 같아요