게시판 웹페이지를 만들면서 로그인/회원가입 기능도 구현하고 있다. 여기에 간편 로그인도 할 수 있으면 좋을 것 같다는 생각이 들어 카카오 로그인을 넣어보았다.

1. 준비 단계

먼저 카카오 developers에 들어가 내 애플리케이션을 클릭해준다. 그러면 애플리케이션을 추가할 수 있다.

대충 이름이나 이런거 정해서 저장해주면 애플리케이션이 생긴다.

해당 애플리케이션을 눌러 다음과 같은 화면을 볼 수 있는데 그 중에서 카카오 로그인 상태를 ON해줘야한다.

바로 밑에 Redirect URL도 있으니까 이것도 설정해준다. 이게 뭐냐면 페이지에서 로그인을 요청하게 되면 카카오의 로그인 페이지로 이동한다. 그리고 사용자가 로그인에 성공하면 다시 해당 웹페이지로 돌아가야 되는데 그 돌아갈 주소를 말하는 것이다. 즉!! 사진에 있는 주소를 따라하지 않아도 된다는 소리다.

자 이제 동의 항목에서 내가 가져오고 싶은 정보를 선택해보자... 엇...??

닉네임은 있는데 이름, 전화번호, 이메일이.. 권한이 없다...(두둥) 이럴수가... 어떻게 할 방법이 없는지 찾아보니까 비즈 앱으로 전환하면 된다고 한다. (휴.. 못하는 줄 알고 놀랐네)

앱 아이콘을 등록해주고

사업자 정보 등록을 눌러 개인 개발자 비즈 앱 전환을 클릭해주었다.

그런 다음!!! 테스트앱 생성을 해주면~

해당 앱에서 내가 원하던 동의항목을 설정할 수 있다.

그럼 이제 vsCode로 넘어와서 앱 설정 > 앱 키에 REST API 키랑 제품설정 > 보안에 Client Secret을 .env파일에 잘 넣어둔다. 다른 사람한테 보여주면 안되는 키이기 때문에 .env파일에 넣고 .gitignore해주면 된다.

불러올 땐 이런 식으로~

process.env.env파일에 적은 변수명

app.js에

const snsRouter = require("./routes/snsRouter");
app.use('/auth', snsRouter);

라우터를 /auth로 연결해준다.

그리고 사용자가 카카오톡 로그인을 클릭할 수 있도록 /auth/kakao로 get요청을 보내는 a태그를 하나 만들어 놓는다.

 <a id="kakao" href="/auth/kakao" class="btn">카카오톡 로그인</a>

이제 라우터 파일에 카카오 로그인 페이지로 이동하여 콜백 처리를 해줄 것이다.

const express = require("express");
const router = express.Router();
const axios = require("axios");
const db = require("../models");
const loginModel = db.users; // user 모델 사용
const jwt = require("jsonwebtoken");
const secretKey = process.env.JWT_SECRET; // JWT 시크릿 키

// 카카오 로그인 API
const KAKAO_ID = process.env.KAKAO_ID;
const kakaoredirectURI = encodeURI("http://localhost:3000/auth/kakao/callback");
const kakao_secret = process.env.KAKAO_SECRET;
let kakaoAPI_URL = "";

// 카카오 로그인 페이지로 이동 (url 생성)
router.get("/kakao", (req, res) => {
  kakaoAPI_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO_ID}&redirect_uri=${kakaoredirectURI}`;
  res.redirect(kakaoAPI_URL);
});

// 카카오 로그인 콜백 처리
router.get("/kakao/callback", async (req, res) => {
  const { code } = req.query;
  kakaoAPI_URL = "https://kauth.kakao.com/oauth/token";
  try {
    // 접근 토큰 요청
    const tokenAxios = await axios({
      method: "get",
      url: kakaoAPI_URL,
      params: {
        grant_type: "authorization_code",
        client_id: KAKAO_ID,
        redirect_uri: kakaoredirectURI,
        code: code,
        client_secret: kakao_secret,
      },
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
      },
    });
    const accessToken = tokenAxios.data.access_token;

    // 사용자 프로필 정보 요청
    const profileRes = await axios({
      method: "get",
      url: "https://kapi.kakao.com/v2/user/me",
      headers: { Authorization: `Bearer ${accessToken}` },
    });

    const { email, name, phone_number } = profileRes.data.kakao_account;
    const { nickname } = profileRes.data.kakao_account.profile;
    const phone = phone_number.replace("+82 ", 0);

    // DB에서 기존 회원 여부 확인
    let user = await loginModel.findOne({ where: { email } });
    if (!user) {
      // 없으면 신규 회원 가입
      user = await loginModel.create({
        email,
        username: name,
        nickname: nickname,
        phone,
        provider: "kakao",
      });
    }

    // JWT 토큰 발급
    const token = jwt.sign({ id: user.id }, secretKey, { expiresIn: "7d" });

    // 쿠키에 토큰 저장
    res.cookie("token", token, { httpOnly: true });
    res.redirect("/");
  } catch (error) {
    console.error("카카오 로그인 실패:", error);
  }
});

module.exports = router;

아까 설정한 redirectURI와 API키로 카카오 로그인 페이지로 이동시켜준다. 그리고 로그인했을때 접근 토큰을 요청해서 해당 사용자의 프로필 정보를 요청해준다. 만약 DB에 없는 사용자라면 신규 회원가입을 위해 DB에 추가해준다. 후에 JWT 토큰을 발급해주고 메인 페이지로 돌아간다.

해당 사용법은 카카오 API 공식 문서에 잘 나와있으니 확인해보면 될 것이다. https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

우왕 이제 DB에 저장된다~~ 했는데!!!!!

뭐야... 분명히 로그인 누르면 로그인이 되어서 db에 저장이 되는데... 로그인 창이.. 안 뜬다...? 분명히 떴는데...????????

그래서 계속 검색해보고 잘 썼는지 확인하고, 키 확인하고 별 짓 다하다가 네이버와 카카오는 기존 로그인 상태를 유지하는 기능이 있어서 이미 로그인한 상태라면 창을 띄우지 않고 바로 인증을 진행한다고 한다...

엣... 반신반의하면서 브라우저 시크릿 모드에서 로그인을 해보니까...

된다!!! 미친.... 시간을 얼마나 날린거야... 그래도 되니까 좋다!!!

아 그리고 추가로 알게된 건데

kakaoAPI_URL = https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${KAKAO_ID}&redirect_uri=${kakaoredirectURI}&prompt=login;

이런 식으로 URL뒤에 prompt=login을 추가하면, 기존 로그인 여부와 상관없이 무조건 로그인 창을 띄운다고 한다.

그렇게 로그인 창을 항상 뜨게 만들어놨다 ㅎㅎ

끝끝~!! 이제 나머지 구현해야지...

마지막에 잘못 구현한줄 알고 삽질한게 너무 어이가 없어가지고 벨로그를 켜버렸다.

이제 다시.. 간다.. bye

Fetch도 마찬가지로 Promise 기반이다.

그렇다면!! Promise가 무엇인가?

Promise 객체란?

어떤 작업에 관한 상태 정보를 갖고 있는 객체를 말함 -> 결과가 promise에 저장되기 때문에 작업이 성공했는지 알 수 있음

Promise 3가지 상태

1. fulfilled 상태(성공): 작업이 성공적으로 완료했음을 의미 -> promise객체는 성공 결과도 함께 가짐
2. rejected 상태(실패): 작업이 실패했음을 의미 -> promise객체는 실패 이유에 관한 정보도 함께 가짐
3. pending 상태(진행중): 작업이 진행 중임을 의미

pending 상태에서 한번 성공이나 실패 상태가 되면 다시 다른 상태를 가질 수 없음

Promise 핸들러

• then: promise 객체가 fulfilled 상태가 되면 실행할 콜백함수를 등록하는 메서드
• catch: promise 객체가 rejected 상태가 되면 실행할 콜백함수를 등록하는 메서드
• finally: 어떤 작업의 성공, 실패 여부와 상관없이 항상 실행하고 싶은 콜백함수를 등록하는 메서드

사용 이유

• 비동기 작업을 순차적으로 실행하기 위해 사용
• callback 함수를 보기 좋게 하기 위해 사용
  • callback 함수가 많아지면 콜백 지옥에 빠져 가독성이 매우 낮아짐
  • 여러 개의 비동기 작업을 순차적으로 수행할때, 콜백 함수가 중첩되어 코드의 깊이가 깊어지는데 이러한 현상을 콜백 지옥이라고 함

비동기적 처리가 가능하게 바꿔주는 문법이 아닌, callback함수를 대신해 보기 좋게 만들어주는 것임

참고 자료

https://velog.io/@minew1995/JavaScript-Promise-%EA%B0%9D%EC%B2%B4

소프트웨어 설계와 관련된 디자인 패턴 MVC를 이용하는 웹 프레임워크

• PHP
• Django
• Express
• Angular 등

디자인 패턴이란? 상황에 따라 자주 쓰이는 설계 방법을 정리한 코딩 방법론

MVC의 장단점

장점

• 패턴들을 구분해 개발
• 유지보수 용이
• 유연성 높음
• 확장성 높음
• 협업에 용이

단점

• 완벽한 의존성 분리가 어려움
• 설계 단계 복잡
• 설계 시간 오래걸림
• 클래스(단위)가 많아짐

여기서 완벽한 의존성 분리가 어려운 이유는 모델과 뷰 사이는 컨트롤러를 통해서 소통하기 때문에 완벽하게 의존성이 분리될 수 없기 때문이다.

MVC 흐름

• Model: 데이터 처리
• View: 사용자에게 보여지는 부분인 UI 관련된 것들을 처리하는 부분
• Controller: View와 Model을 연결해주는 부분

view, browser는 프론트이고 나머진 다 백엔드

MVC 패턴 폴더 구조

controller: view와 model을 연결하는 부분 model: 데이터 처리하는 부분(나중에 DB랑 연결되면 테이블을 저장) routes: 경로 설정하는 부분 views: UI 관련 처리

만드는 순서

모델 -> 컨트롤러 -> 라우터 -> app.js -> views

예시

models폴더/userModel.js -> 배열 안에 객체를 저장함(DB 대신 더미 데이터)

// 데이터 모델 만들거임//

// 간단한 데이터 모델 생성
const users = [
  { id: 1, name: "마루", email: "maru@naver.com" },
  { id: 2, name: "강아지", email: "dog@naver.com" },
];

// 유저 데이터 전부 가지고 오기
const getAllUser = () => {
  return users;
};

// id로 해당하는 유저 찾기
const getUserById = (id) => {
  //(매개변수 string으로 들어옴)
  return users.find((user) => user.id === parseInt(id));
};

// 다른 곳에서도 쓸 수 있게끔 내보냄(리액트에서도 내보내는거 있음)
// 해당 파일에서 만든 함수 내보내기(모듈화)
module.exports = { getAllUser, getUserById };

controllers폴더/userController.js -> 경로와 연결될 함수 내용 정의(경로와 연결되는 함수이므로 req객체와 res객체 사용), 컨트롤러와 모델 연결

// 가져오기
const userModel = require("../models/userModel");

// 유저 전부 가져오는 컨트롤러
const getUsers = (req, res) => {
  // 전체 유저를 가지고 있음
  const users = userModel.getAllUsers();
  res.render("users/index", { users });
};

// 해당하는 유저 가져오기
const getUser = (req, res) => {
  // get요청이니까 params에 담김
  const user = userModel.getUserById(req.params.id);
  if (user) {
    // 프론트에서 보여주려면 그 데이터 던져줘야 함
    res.render("users/show", { user });
  } else {
       res.statusCode = 404;
    return res.send("해당하는 아이템이 없습니다.");
  }
};

module.exports = { getUsers, getUser };

routes폴더/userRoutes.js -> 경로를 controller와 연결

// 쓴다고 명시
const express = require("express");
const router = express.Router();
const userController = require("../controllers/userController");

// 유저 전부 가져오기를 하는 라우터(app.get했던거)(앞에 users가 앞에 있음->use로 생략함)
router.get("/", userController.getUsers);

// 해당하는 유저 가져오기를 하는 라우터(url뒤에 id가 붙어서 날라옴)
router.get("/:id", userController.getUser);

module.exports = router;

app.js -> router 불러오는 부분(특정 시작 url의 역할 구분 가능)

const express = require("express");
const app = express();
const port = 3000;

// 라우팅 파일 불러오기
const userRouters = require("./routes/userRoutes");

// body-parser
// x-www-form-urlencoded 방식, 객체 형태로 결과가 나옴(객체형태: {})
app.use(express.urlencoded({ extended: true }));
// json
app.use(express.json());
app.use("/public", express.static("public"));

// users경로에 대한 라우팅 처리(/users경로로 들어감)
app.use("/users", userRouters); // '/users'에 대한 요청은 userRoutes로 처리

app.set("view engine", "ejs");
app.set("views", "./views");

// 기본 홈 라우트
app.get("/", (req, res) => {
  res.render("index", { title: "MVC 패턴" });
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

views/index.ejs

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>MVC 패턴 연습</h1>
  <!-- 파일주소가 아니라 요청 -->
  <a href="/users">유저 리스트로 가기</a>
</body>

</html>

실행 순서

a태그 누름 -> users로 요청보냄(url) -> app.js -> 라우터 -> 컨트롤러 -> 모델

404 Error

404 에러는 클라이언트가 잘못된 주소로 접속했을때 발생

app.get('*', (req, res) => {
    res.render('404');
});

• 맨 마지막 라우트로 선언
• *: 그 외 나머지 주소는 모두 잘못된 요청임을 사용자에게 알려야함
• 클라이언트가 올바르지 않은 주소로 요청 시 Error 페이지 렌더링

주의할 점

만약 라우터 파일이 다음과 같이 되어있다고 하자

const express = require("express");
const router = express.Router();
const ItemController = require("../controllers/itemController");

// 아이템 전부 가져오기를 하는 라우터
router.get("/", ItemController.getItems);

// 해당하는 아이템 가져오기를 하는 라우터
router.get("/:id", ItemController.getItem);

// 가장 비싼 아이템 가져오기를 하는 라우터
router.get("/price", ItemController.getPrice);

module.exports = router;

그러면 /price 요청을 보냈을때 원하는 결과가 나올까? 답은... NO!!!

왜냐하면 /:id에서 /밑에 오는건 다 id라고 인식하기 때문에 /price에서 price를 id로 인식하게 된다. 그래서 앞에 "/item/:id" 이런식으로 명시해주어야한다(혼동이 없도록).

const express = require("express");
const router = express.Router();
const ItemController = require("../controllers/itemController");

// 아이템 전부 가져오기를 하는 라우터
router.get("/", ItemController.getItems);

// 해당하는 아이템 가져오기를 하는 라우터
router.get("/item/:id", ItemController.getItem);

// 가장 비싼 아이템 가져오기를 하는 라우터
router.get("/price", ItemController.getPrice);

module.exports = router;

CSS 연결

1. css파일을 만들어 css폴더에 넣어줌
2. ejs파일에 css링크를 <link rel="stylesheet" href="css/파일이름.css">걸어놓음

• express는 모든 폴더를 서버에 보여주지 않고 app.js와 views폴더에 있는 것만 기본으로 보여준다. (css나 js파일은 https://localhost:3000/css/styles.css로 찾을 수 없음) 그래서 express에 css/js도 사용하겠다는 명시를 해줘야한다(서버에 나오라고 명령).

3.public폴더를 만들어 이 폴더를 서버에서 돌릴 수 있도록 만든다. public/css폴더 밑에 연결하고 싶은 css파일을 넣음 app.js에 app.use(express.static("public")); 추가하여 static 파일의 위치를 public으로 설정해준다.

js는 정적 파일이라 ejs로 읽어줄 수 없음 그래서 한번 더 요청을 보냄(node.js_02 폴더 참조) -> 데이터는 계속 app.js에서 바뀜

템플릿에서 태그로 참조하는 css,js,image 등 여러 정적 파일들을 사용하는 방법

1. public 폴더에 정적 파일을 담는다.
2. 모든 요청에 공공으로 사용하기 위해 use메서드 사용 const path = require('path'); // 경로 app.use(express.static(path.join(__dirname, 'public')));

(정적(static)한 파일을 이곳에 넣어두면 / 경로로 ejs파일내에서 public폴더내에 있는 파일을 접근 할 수 있다는 의미) app.use('/ejs에서접근할경로', express.static(path.join(__dirname, ' /실제위치한디렉토리경로')));

배달받을 장소를 선택할 수 있는 페이지에서 구현할 지도 기능은 다음과 같다.

• 사용자가 해당 페이지에 접근하면, 현재 위치가 지도와 주소 검색창에 표시

• 다음 우편번호 서비스를 사용하여 주소를 검색하고, 선택한 주소의 위치가 지도와 주소 검색창에 표시
• 지도 클릭시 클릭한 부분의 위치에 마커가 표시되고 해당 주소가 주소 검색창에 표시
• 현재 위치로 이동하는 버튼 클릭시 지도와 주소 검색창에 표시

필요한 API

다음 우편번호 서비스 API

<!-- 다음 우편번호 서비스 API를 불러오는 스크립트 -->
  <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

• 주소 검색을 제공하는 서비스
• 사용자가 주소를 검색하고 선택 가능
• 주소 검색 결과로 위도와 경도를 직접 제공하지 않음
  • 별도의 API를 이용하여 위도, 경도를 구해야 함

다음 우편주소 API는 주소 검색 기능을 제공하나, 지도에서 마커를 찍기 위한 위도, 경도 정보를 제공하지 않기 때문에 주소로부터 위도, 경도를 얻는 추가적인 API가 필요 -> 네이버 지도 API의 Geocode 서비스를 함께 사용

네이버 지도 API

https://www.ncloud.com/ (네이버 클라우드 플랫폼에 접속) -> 콘솔 클릭

Services -> AI NAVER API 클릭 -> Application 등록

Application 이름을 입력한 후 밑에 그림처럼 체크해준다. 여기서 Geocoding과 Reverse Geocoding을 선택해야 주소를 좌표로 변환하거나 좌표를 주소로 변환하는 것이 가능하다. Web 서비스에 이용할 것이기 때문에 We b 서비스 URL부분에 해당 페이지의 URL을 입력해준다.

등록을 하면 다음과 같이 인증 정보를 볼 수 있다.

<!-- 네이버 지도 API를 불러오는 스크립트 -->
<script type="text/javascript"
    src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=**인증 받은 키**&submodules=geocoder"></script>

• 네이버 클라우드 플랫폼에서 발급받은 클라이언트 ID를 인증 받은 키 부분에 입력
• 기본적인 지도 렌더링과 기본 기능 사용 가능
• submodules=geocoder로 주소를 좌표로 변환하거나 좌표를 주소로 변환할 때 필요한 Geocoder 모듈을 추가로 불러옴

구현

주소 검색창에서 주소 선택

// 주소 검색창에서 주소 선택 시
const changeInputText = () => {
  new daum.Postcode({
    oncomplete: function (data) {
      const addr = data.address; // 선택한 주소
      // 주소로 네이버 지도 검색 및 표시
      searchAddressdaum(addr); // 주소로 좌표 검색하여 지도에 표시
    },
  }).open();
};

• 다음 우편번호 서비스를 사용하여 주소 검색
• new daum.Postcode().open()으로 주소를 검색하고 선택할 수 있는 UI 제공
  • daum.Postcode는 주소 검색을 위한 API를 호출
• 주소 선택시 oncomplete 콜백이 실행되면서 선택한 주소인 data.address를 가져옴
• 해당 주소(addr)를 활용하여 searchAddressdaum 함수에서 네이버 지도에 표시
  • 다음 우편번호 API로 주소를 선택 -> 해당 주소의 위도와 경도를 네이버 지오코딩 API로 변환하여 사용

1. 사용자 입력 단순화: 사용자가 직접 주소를 입력하지 않고, 편리하게 선택
2. 지도 서비스 연동: 선택한 주소를 기반으로 좌표 검색 및 지도 표시같은 추가적인 작업 수행

검색한 주소를 지도에 표시

// 주소를 검색하여 지도에 표시하고 마커 생성(다음주소api에서 사용할 함수)
const searchAddressdaum = (address) => {
  naver.maps.Service.geocode(
    {
      query: address, // 검색할 주소
    },
    (status, response) => {
      // 응답 상태가 OK인 경우에만 처리
      if (
        status === naver.maps.Service.Status.OK &&
        response.v2.addresses.length > 0
      ) {
        const result = response.v2.addresses[0]; // 첫 번째 검색 결과
        const lat = result.y; // 위도
        const lng = result.x; // 경도

        // 좌표로 지도와 마커 표시
        const latlng = new naver.maps.LatLng(lat, lng);

        // 지도 중심을 검색된 위치로 이동 (기존 지도 객체 사용)
        if (map) {
          map.setCenter(latlng); // 기존 지도에서 중심만 변경
        } else {
          // 지도 객체가 없다면 새로 생성
          map = new naver.maps.Map("map", {
            center: latlng,
            zoom: 17,
          });
        }

        // 기존 마커가 있으면 삭제
        if (currentMarker) {
          currentMarker.setMap(null);
        }

        // 새 마커 생성
        currentMarker = new naver.maps.Marker({
          position: latlng, // 마커 위치
          map: map, // 마커가 표시될 지도
          title: address, // 마커의 타이틀
        });

        // 화면에 주소 표시
        addAddress(address);
      } else {
        alert("주소 검색에 실패했습니다.");
      }
    }
  );
};

• 네이버 지도 API를 사용해 주소를 검색하고, 검색된 주소를 지도에 표시
  • 다음 우편번호 서비스 API와 네이버 지도 API 연동
• 입력한 주소를 naver.maps.Service.geocode로 전달해 좌표 검색
• 검색 결과(response.v2.addresses[0])에서 첫 번째 주소 데이터 가져와 검색 성공시 위도(lat)와 경도(lng) 정보를 추출
• 지도 객체가 있으면 중심 좌표를 업데이트(map.setCenter(latlng))
• 기존 지도 객체(map)가 없다면 new naver.maps.Map("map", {...})새로 생성
  • "map"은 HTML에서 지도를 표시할 <div>의 id
• 기존 마커가 있으면 setMap(null)로 삭제 후 new naver.maps.Marker({...})로 새 마커 생성
• addAddress 함수를 통해 주소 검색창에 해당 주소 한글로 표시

1. 중복 방지: 입력된 주소를 기반으로 좌표 검색 후, 이전 마커를 갱신하여 지도에 표시
2. 사용자 경험 향상: 검색 결과가 없을 경우 오류 메시지를 표시

현재 위치를 지도에 표시 및 클릭한 위치의 주소 얻어오는 기능

// 지도 부분
let map; // 전역 변수로 map 객체 관리(재사용)
let currentMarker = null; // 전역 변수로 마커 관리

// 지도 생성 및 현재 위치로 이동
const moveCurrnet = () => {
  // 위치 정보를 얻기 위해 Geolocation API 사용
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        // 사용자의 현재 위치 가져오기
        const lat = position.coords.latitude;
        const lon = position.coords.longitude;

        // 지도 생성 (처음 한 번만 생성)
        if (!map) {
          map = new naver.maps.Map("map", {
            center: new naver.maps.LatLng(lat, lon), // 현재 위치로 지도의 중심 설정
            zoom: 17, // 초기 줌 레벨 설정
            minZoom: 7, // 최소 줌 레벨
            zoomControl: true, // 줌 컨트롤 표시
            zoomControlOptions: {
              position: naver.maps.Position.TOP_RIGHT,
            },
          });

          // 지도 클릭 시 마커를 찍고 주소를 받아오기
          naver.maps.Event.addListener(map, "click", (e) => {
            const latlng = e.coord; // 클릭한 좌표

            // 기존 마커가 있으면 삭제
            if (currentMarker) {
              currentMarker.setMap(null);
            }

            // 새로운 마커 생성
            currentMarker = new naver.maps.Marker({
              position: latlng, // 클릭한 위치에 마커 생성
              map: map, // 마커가 표시될 지도
              title: "클릭한 위치", // 마커의 제목
            });

            map.panTo(latlng); // 지도 이동

            // 클릭한 위치의 주소를 받아오기
            getAddressFromLatLng(latlng, addAddress);
          });
        } else {
          map.setCenter(new naver.maps.LatLng(lat, lon)); // 기존 지도 중심 재설정
        }

        // 현재 위치에 마커 표시 (기존 마커가 있으면 삭제 후 갱신)
        if (currentMarker) {
          currentMarker.setMap(null); // 이전 마커 제거
        }

        currentMarker = new naver.maps.Marker({
          position: new naver.maps.LatLng(lat, lon),
          map: map,
          title: "현재 위치",
        });

        // 현재 위치의 주소를 받아오기
        getAddressFromLatLng(new naver.maps.LatLng(lat, lon), addAddress);
      },
      (error) => {
        let errorMessage = "";
        switch (error.code) {
          case error.PERMISSION_DENIED:
            errorMessage =
              "위치 정보를 허용해야 합니다. 위치 서비스 권한을 부여해 주세요.";
            break;
          case error.POSITION_UNAVAILABLE:
            errorMessage =
              "위치 정보를 사용할 수 없습니다. 네트워크 상태나 GPS 신호를 확인해 주세요.";
            break;
          case error.TIMEOUT:
            errorMessage =
              "위치 정보를 가져오는데 시간이 너무 걸렸습니다. 다시 시도해 주세요.";
            break;
          default:
            errorMessage = "알 수 없는 오류가 발생했습니다.";
            break;
        }
        alert(errorMessage);
      }
    );
  } else {
    alert("이 브라우저는 위치 정보를 지원하지 않습니다.");
  }
};

• 네이버 지도 API와 Geolocation API를 사용
• navigator.geolocation.getCurrentPosition를 사용하여 현재 위치(위도/경도) 가져옴
  • 가져오면 처음에는 지도를 생성하고, 이후엔 지도 중심만 갱신
  • 기존 마커 제거 후 현재 위치에 새로운 마커 표시
  • getAddressFromLatLng 함수로 위도/경도를 이용해 해당 위치의 주소를 가져옴 -네이버 지도 API에서 Reverse Geocoding 기능을 통해 수행
• 지도 클릭시
  • 클릭한 좌표에 새로운 마커 생성 및 기존 마커 제거
  • 클릭한 좌표로 지도 중심 이동
  • 클릭한 위치의 주소를 얻어 화면에 표시

1. 동적 지도 관리: 지도 객체와 마커를 효율적으로 관리하여 불필요한 리소스 낭비 방지
2. 현재 위치 기반 지도 표시: 사용자 경험 향상을 위해 현재 위치를 기반으로 지도 초기화
3. 사용자 인터랙션 지원: 사용자가 클릭한 위치에 마커 생성 및 해당 위치의 주소 확인
4. 사용자 경험 개선: 클릭 이벤트를 활용해 실시간으로 지도와 주소 업데이트
5. 포괄적인 오류 처리: 다양한 오류 상황에 대한 구체적인 메세지 제공

주소로부터 현재 위치 얻어오기

// 주소로부터 현재 위치를 얻어오기 (Reverse Geocoding)
const getAddressFromLatLng = (latlng, callback) => {
  naver.maps.Service.reverseGeocode(
    {
      location: latlng,
    },
    (status, response) => {
      if (status === naver.maps.Service.Status.OK) {
        const address = response.result.items[0].address; // 가장 가까운 주소
        callback(address);
      } else {
        callback("위치를 찾지 못했습니다.");
      }
    }
  );
};

• 네이버 지도 API의 Reverse Geocoding 기능을 사용하여 주어진 좌표로부터 주소를 추출
  • 좌표로부터 사람이 읽을 수 있는 주소를 얻기 위한 기능
• naver.maps.Service.reverseGeocode를 사용하여 좌표(latlng)로부터 주소 검색
• 상태 코드가 OK인 경우
  • response.result.items[0].address를 통해 가장 가까운 주소를 가져옴
  • 해당 주소를 callback함수에 전달
• 상태 코드가 OK가 아닌 경우
  • 메세지를 callback함수로 전달

    콜백 함수 활용: 주소를 받아 화면에 표시하거나 다른 작업을 처리할 수 있도록 유연성 제공

주소를 주소 검색창에 표시 및 로컬스토리지에 저장

// 주소를 화면에 표시하고 로컬 스토리지에 저장
const addAddress = (address) => {
  document.getElementById("address").value = address;
  window.localStorage.setItem("name", address);
};

• 지도에서 클릭하거나 현재 위치를 검색한 경우 해당 주소를 UI와 로컬스토리지에 동기화

1. 피드백: 선택한 주소를 UI에 바로 반영
2. 데이터 지속성: 브라우저 세션 간 데이터 유지 -> 이전에 선택한 주소를 새 페이지에 자동으로 불러와 입력 필드에 표시

현재 위치로 이동 버튼

// 현재 위치 버튼 클릭 시
document.getElementById("showMap").addEventListener("click", function (e) {
  e.preventDefault();
  moveCurrnet();
});

• 현재 위치 버튼에 리스너를 추가해 클릭하면 현재 위치로 이동하는 moveCurrent 함수 호출

결과

직면한 문제와 해결방안

• 지도에서 현재 위치 버튼을 누르거나 주소 검색시 지도에서 이동하지 않음(map 객체가 두 번 생성되어 문제 발생) -> 이미 존재하는 map객체를 재사용하여 객체의 중심만 변경

• map 객체가 처음 생성되거나 이미 존재할 때 모두 지도 클릭 이벤트가 제대로 처리되도록 하고 싶음 -> moveCurrnet 함수에서 처음 지도 객체를 생성할 때, 지도 클릭 이벤트 리스너를 추가하고 지도 객체가 이미 존재한다면 기존 객체에 이벤트 리스너를 추가 -> 클릭한 위치에 마커를 추가하는 로직을 클릭 이벤트 리스너 안에서 처리
• 주소를 검색해서 추가한 마커도 기존 마커와 함께 남아있음 -> 기존에 표시된 마커가 있다면 setMap(null)을 호출하여 삭제하고, 새로운 마커만 currentMarker에 추가

동시에 뭔가를 실행하지 않고 무조건 하나의 행동이 끝나야 다음거를 실행하는 것을 싱글쓰레드라고 할 수 있다.

1. 싱글쓰레드

• 한번에 하나만 실행(하나가 끝난 뒤에 다음 거 실행)
• 자바스크립트는 위에서부터 순차적으로 실행하기 때문에 도중에 에러가 생기면 다음거를 실행하지 않음
• 그렇기 때문에 에러를 처리하지 못하는 경우 바로 에러가 나 멈춤
• 보완점으로 타입스크립트가 나왔고 타입스크립트에서 예외처리의 중요성이 커짐

자바스크립트는 싱글쓰레드에 비동기방식 동기방식은 멀티쓰레드

2. 동기/비동기

js는 싱글쓰레드고 비동기방식으로 처리, node.js는 js로 만들었음

• 동기: 다같이 처리
• 비동기: 동시에 일어나지 않음

쉽게 말하면

동기는 내가 해당하는 화면에서 다 로드됨(무조건 새로고침해야 적용됨->은행, 메일서비스) 비동기는 새로고침 안 해도 변화된 데이터가 적용됨(실시간으로 뜸)

3. Call Stack(호출 스택)

• LIFO 방식
• 함수의 호출을 기록하는 자료구조
• 자바스크립트는 하나만 실행
  • 함수가 있으면 따로 빼놓고 console 먼저 찍고 그 다음 함수를 실행시킴
• onclick에서 이벤트를 발생시키고 만들어놓은 함수 호출(가져와서 실행)
  • onclick 호출 스택은 call stack에 함수가 쌓여 실행되는 것을 의미

4. Event Loop

• console은 함수가 아니기 때문에 바로 실행
• 무조건 함수로 만든 것은 백그라운드로 빠져 태스크 큐라는 곳으로 보내짐
• 순서대로 빠지고 순서대로 실행

그렇다면 자바스크립트는 어떻게 실행될까?

싱글쓰레드라서 순서대로 실행된다.

함수는 어떤 과정을 거쳐서 실행되는 걸까?

함수가 실행되면 호출 스택에서 빠져서 백그라운드에 간다. 그리고 순차적으로 태스크 큐에 빠지고 순서대로 보여준다.

• 내장 함수를 썼을때도 당연히 백그라운드로 빠짐
• 그렇다면 이런경우에는?

  const run =()=>{
    return 3;
  }    
  

console.log("1"); console.log(run); console.log("2");

다음과 같은 순서로 실행됨
> 1
const run =()=>{
    return 3;
}
2



for문은?
> 자바스크립트로 찍는 친구
> 내장 함수는 한번 빠졌다가 나옴 -> 즉, 행동을 3번함(리소스를 잡아먹는다고 표현)

console은?
> 호출 스택에 한번만 딱 함 -> 행동을 한번만에 함
> for문으로 1부터 10까지 돌려서 찍는 것보다 console.log를 1부터 10까지 찍는게 리소스를 덜 잡아먹음
> 물론 100까지면 for로 돌리는게 빠름


참고. forEach 런타임에러 -> map이나 filter로 쓰면 빨라짐


싱글쓰레드
- 호출 스택에 하나만
- 태스크 큐에는 쌓여있음(대기)

이벤트 루프는 언어마다 다 다름


#### 5. node.js
- 비동기 방식(하나씩 처리)에 어울리는 서비스(스트리밍서비스, 채팅서비스 등)
    - 넷플릭스를 한 화면에 여러 개 띄우면 다 볼 수 없음


참고. 가장 빠른 언어는 c언어, 가장 느린 언어는 파이썬

#### 6. 모듈
- express 같은 거
- 캡슐화(자바할때 중요), 추상화

리액트에서 class를 지원하지 않고 함수형식으로…

그래서 프론트엔드는 추상화로 복잡한 시스템이나 객체를 단순화하여 핵심적인 부분에 집중하는 프로그래밍 원칙만 알고 있으면 됨


객체지향 - 외부에서 못 건들도록 함
재사용 - 두개를 하나의 함로 처리(리액트에서 매우 중요)


> 모듈 만들기
> - 해당하는 함수를 내보냄(export로 내보낼 수 있구나 이런식으로 내보낼 수 있구나만 알고 있기(그렇게 중요하진 않음))
> - 모듈을 불러올때는 구조분해해서 가져옴({})
>     - 구조분해란 원래 있는 데이터를 분해한다.
```javascript
const data=[

{
    name:”김김김”,
    age: 14,
},

{
    name:”이이이”,
    age: 15,
},
];
const names = data.map((x,i)⇒{
    return x.name;
});//이름만 뽑아서 새로운 데이터만들기
const name2=data[1].name; //두번째객체의 name 데이터가져오기
console.log(names, “이름”);

map(리액트문에서는 forEach말고 map을 많이 사용) 여기서 map을 돌릴때 x는 객체

{ name:”김김김”, age: 14, },

를 지칭함 i는 인덱스

7. 원하는 데이터 뽑아보기(js로 데이터 뽑는 연습)

페이징(Paging)이라고도 불리며, 콘텐츠나 데이터를 여러 페이지로 나누어서 특정 페이지로 이동하거나 이전/다음 페이지로 이동할 수 있는 기능을 말한다.

📋페이지네이션 개발에 필요한 4가지 값

- 총 페이지수

총페이지수 = Math.ceil(데이터의 전체 길이/한 페이지에 보여줄 데이터 개수)

- 화면에 보여질 페이지 그룹

화면에 보여질 페이지 그룹 = Math.ceil(현재 페이지 번호/한 화면에 보여질 페이지 개수)

총 데이터 개수가 10개, 한 화면에 보여질 페이지 개수가 3개라면?
그룹 1 -> 13
그룹 2 -> 46
그룹 3 -> 7~9
그룹 4 -> 10

- 화면에 보여질 페이지의 첫번째 페이지 번호

어떤 페이지 그룹의 첫번째 페이지 번호 = ((페이지 그룹 - 1) * 한 화면에 보여질 페이지 개수) + 1

- 화면에 보여질 페이지의 마지막 페이지 번호

어떤 페이지 그룹의 마지막 페이지 번호 = 페이지 그룹 * 한 화면에 보여질 페이지 개수 -> 만약, 페이지 그룹 * 한 화면에 보여질 페이지 개수의 값이 전체 페이지보다 크다면 전체 페이지가 마지막 페이지 번호

💻페이지네이션 구현

만들어놓은 쇼핑몰 홈페이지의 메인페이지에 페이지네이션을 추가해야한다. 쇼핑몰의 메인페이지에는 카테고리 메뉴가 존재하여 클릭한 메뉴에 해당하는 타입인 상품들이 나온다.

1. 필요한 4가지값 개산

한페이지에 보여줄 데이터 개수(conCount): 6 한 화면에 보여질 페이지 개수(PAGE): 5

// 총 페이지 수
totalPage = Math.ceil(datalength / conCount);

// 화면에 보여질 페이지 그룹
pageGroup = Math.ceil(nowPage / PAGE);

// 화면에 보여질 첫번째 페이지
first = (pageGroup - 1) * PAGE + 1;

// 화면에 보여질 마지막 페이지
last = pageGroup * PAGE;
if (last > totalPage) {
  last = totalPage;
};

2. 페이지네이션 버튼 생성

4가지 값을 이용해 페이지네이션을 DOM에 그려준다. 함수로 만들어서 페이지네이션 버튼을 만들어 줄 것이다.

출력할 상품 데이터의 인덱스 번호는 다음과 같은 조건으로 계산한다.

• 현재페이지 번호에서 한페이지에 보여줄 데이터 개수를 곱하면 그 다음 페이지 번호의 첫번째 데이터의 인덱스를 알 수 있음 -> 해당 인덱스보다 작아야 함

• 현재페이지 번호에서 1을 빼고 난 후 한페이지에 보여줄 데이터 개수를 곱하면 현재 페이지의 첫번째 데이터의 인덱스를 알 수 있음 -> 해당 인덱스보다 크거나 같아야 함

setPageBtn 함수

1) 4가지 값을 계산한다 2) 페이지네이션 넣어줄 요소를 document로 가져온다 3) 가져온 요소에 first부터 last까지 페이지번호 버튼을 삽입한다 3-1) 만약 nowPage와 같은 숫자라면 class로 active를 추가해준다(클래스 active의 css로 활성화되었다는 것을 표시함) 4) 각 숫자 버튼에 click 리스너를 추가한다 4-1) nowPage를 해당 페이지로 업데이트한다 4-2) 이전 숫자 버튼에는 active 클래스를 제거하고 현재 활성화된 숫자 버튼에는 active 클래스를 추가한다 4-3) 만약 현재 카테고리 타입이 'all'이라면 전체 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputMenu 함수) 4-4) 만약 나머지 타입이라면 type을 매개변수로 전달해 type에 해당하는 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputCateMenu 함수)

inputMenu 함수

1) 상품을 넣을 요소를 document로 가져온다 2) 전체 데이터를 돌면서 nowPageconCount보다는 작고, (nowPage-1)conCount보다는 크고 같은 인덱스에 해당하는 데이터들을 요소에 추가한다

inputCateMenu 함수

1) 상품을 넣을 요소를 document로 가져온다 2) filter를 이용해 카테고리 타입과 같은 타입을 가진 데이터들을 가져온다 3) 가져온 데이터를 돌면서 nowPageconCount보다는 작고, (nowPage-1)conCount보다는 크고 같은 인덱스에 해당하는 데이터들을 요소에 추가한다

3. 이전/이후 버튼

위의 그림과 같이 첫번째 페이지 그룹이면 이전 버튼이 없어야 하고

마지막 페이지 그룹이면 이후 버튼이 없어야 한다.

이전/이후 버튼은 동적으로 추가하는 것이 아니라 html에 넣어 이미 생성해놨기 때문에 특정 조건에서 숨기고 보이게 만들도록 하겠다.

또한, 이전/이후 버튼을 누르면 해당 그룹의 첫번째 숫자가 활성화되도록 한다.

3-1. 이전/이후 버튼 숨기기/보이기

setPageBtn 함수에 추가

1) 만약 totalPage가 last보다 작거나 같다면 그 다음 페이지는 없다는 뜻이기 때문에 해당 버튼의 요소를 가져와 숨긴다 2) 만약 totalPage가 last보다 크다면 해당 버튼의 요소를 가져와 보이게 한다 3) 만약 first가 1보다 작거나 같다면 이전 페이지는 없다는 뜻이기 때문에 해당 버튼의 요소를 가져와 숨긴다 4) 만약 first가 1보다 크다면 해당 버튼의 요소를 가져와 보이게 한다

3-2. 이전 버튼 기능 넣기

1) 이전 버튼의 요소를 가져와 click 리스너를 추가해준다 2) 만약 first - PAGE가 0보다 크다면 first - PAGE로 업데이트해준다 3) 이전 그룹의 숫자 버튼들을 생성하기 위해 setPageBtn 함수를 실행한다 4) 만약 type이 'all'이라면 전체 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputMenu 함수) 5) 만약 나머지 타입이라면 type을 매개변수로 전달해 type에 해당하는 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputCateMenu 함수)

3-3. 다음 버튼 기능 넣기

1) 다음 버튼의 요소를 가져와 click 리스너를 추가해준다 2) 만약 first + PAGE가 totalPage보다 작거나 같다면 nowPage를 first + PAGE로 업데이트해준다 3) 다음 그룹의 숫자 버튼들을 생성하기 위해 setPageBtn 함수를 실행한다 4) 만약 type이 'all'이라면 전체 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputMenu 함수) 5) 만약 나머지 타입이라면 type을 매개변수로 전달해 type에 해당하는 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputCateMenu 함수)

4. 맨 앞/맨 뒤 이동 버튼

데이터가 많아지면 맨 앞이나 맨 뒤로 페이지 이동시키는 것은 어려워진다. 이때 필요한 것이 맨 앞/맨 뒤로 이동하는 버튼이다.

이전/이후 버튼과 마찬가지로 첫번째 페이지 그룹이면 맨 앞 버튼을 없애고,

마지막 페이지 그룹이라면 맨 뒤 버튼을 없애겠다.

맨 앞/맨 뒤 버튼은 동적으로 추가하는 것이 아니라 html에 넣어 이미 생성해놨기 때문에 특정 조건에서 숨기고 보이게 만들도록 하겠다.

4-1. 맨 앞 버튼 기능 넣기

1) 맨앞 버튼의 요소를 가져와 click 리스너를 추가해준다 2) 맨앞으로 이동하니 nowPage=1로 업데이트해준다 3) 첫번째 그룹의 숫자 버튼들을 생성하기 위해 setPageBtn 함수를 실행한다 4) 만약 type이 'all'이라면 전체 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputMenu 함수) 5) 만약 나머지 타입이라면 type을 매개변수로 전달해 type에 해당하는 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputCateMenu 함수)

4-2. 맨 뒤 버튼 기능 넣기

1) 맨뒤 버튼의 요소를 가져와 click 리스너를 추가해준다 2) 맨뒤로 이동하니 nowPage=totalPage로 업데이트해준다 3) 마지막 그룹의 숫자 버튼들을 생성하기 위해 setPageBtn 함수를 실행한다 4) 만약 type이 'all'이라면 전체 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputMenu 함수) 5) 만약 나머지 타입이라면 type을 매개변수로 전달해 type에 해당하는 데이터에서 원하는 데이터만 동적으로 DOM에 그려준다(inputCateMenu 함수)

🌕최종 결과

📝참고자료

https://yonghwankim-dev.tistory.com/578

숫자를 올림, 반올림, 내림을 수행하는 함수는 각각 Math.ceil(x), Math.round(x), Math.floor(x)가 있다(여기서 x는 숫자).

Math.ceil 함수

소수값이 있을때 값을 올림

Math.ceil(0.8); //결과값: 1
Math.ceil(2); //결과값: 2
Math.ceil(3.0002); //결과값: 4
Math.ceil(-3.0002); //결과값: -3

Math.round 함수

소수값이 있을때 가장 가까운 정수로 반올림

Math.round(5.5); //결과값: 6
Math.round(5.05); //결과값: 5
Math.round(-5.05); //결과값: -5
Math.round(-5.5); //결과값: -5
 Math.round(-5.95); //결과값: -6

Math.floor 함수

소수값이 있을때 값을 내림

Math.round(5.94); //결과값: 5
Math.round(5.05); //결과값: 5
Math.round(-5.05); //결과값: -6
Math.round(5); //결과값: 5

뭔지 검색해보니 MySQL에서 한국어를 인코딩하지 못해서 생기는 문제라고 한다. (참고로 window를 사용하고 있다...)

해결 방안

1. 기본 언어 설정

설정 > 시간 및 언어 > 기본 언어 설정에 들어가준다.

2. 시스템 로캘 변경

시스템 로캘 변경 클릭

Beta 체크 후 확인을 누른다음 재부팅!

다시 MySQL 워크벤치에 들어가 Server Status를 보면 잘 뜨는 것을 확인할 수 있다 ㅎㅎ

여기서 csv는 콤마로 구분된 데이터인데 각 데이터 항목은 콤마로 구분되고 행은 줄 바꿈으로 구분된다.

csv 생성

현재 가지고 있는 data 배열의 각 항목을 csv로 변환해 줄 것이다. 첫번째 행은 미리 추가해주고 다른 행들은 데이터 배열을 처리하여 csv형식으로 바꿔준다.

const getCSV = (filename) => {
  let row = [];
  let csvdata = [];

  row.push("상품명", "가격", "상세 내용");
  csvdata.push(row.join(","));

  //데이터 배열
  data.map((x) => {
    row = [];
    row.push(x.name, x.price, x.content);
    csvdata.push(row.join(","));
  });

  downCSV(csvdata.join("\n"), filename);
};

이때 각 데이터는 콤마로 연결해서 push해준다. 그리고 csv를 다운로드하는 downCSV 함수에 파라미터를 넘길때는 줄바꿈으로 연결해서 보내준다.

그 이유는 위에서 설명했으니 이해했을거라 믿고...

csv 다운

csv형식으로 바꿔놨으니 이제 다운만 해주면 된다.

  // 한글 처리
  const BOM = "\uFEFF";
  const csvBOM = BOM + csv;

csv에서는 한글이 깨지기 때문에 BOM(Byte Order Mark, \uFEFF)을 추가해준다.

const csvFile = new Blob([csvBOM], { type: "text/csv" });

이제 웹 브라우저에서 직접 파일을 만들거나 조작하려면 Blob(Binary Large Object)이 필요하다. 데이터를 파일처럼 다룰 수 있게 해주는 객체인데 Blob을 만들때 type을 지정하면 csv형식이라는 것을 알릴 수 있다.

const downlink = document.createElement("a");
downlink.download = filename;
downlink.href = window.URL.createObjectURL(csvFile);

<a>태그를 동적으로 생성하여 download 속성에서 파일 이름을 설정하고 Blob데이터를 실제 파일 URL로 변환하면 브라우저가 이 파일을 다운로드할 수 있게 해준다.

downlink.click();

마지막으로 다운로드 링크를 클릭해준다. a태그가 DOM에 추가되지 않아도 click() 함수가 잘 작동하기 때문에 DOM에 추가는 불필요하다고 느껴서 안 해줬다.(해줘야한다면... 저에게 알려주세요)

window.URL.revokeObjectURL(url);

위 코드는 Blob 객체를 사용하여 URL을 생성했으니 메모리 누수가 발생하는 것을 방지하기 위해 추가해주었다. 필수는 아니지만, 메모리 관리 측면에서...

그런데!!!!!!!!!!!!

여기서 문제가 생겼다.

오 마이 갓

데이터 자체에 콤마가 포함되어있어서 그 데이터들도 구분되어 들어간 것이다...

그렇지만 걱정 노노 모르면 검색하면 되지 ㅎㅎ

값에 콤마가 있으면 따옴표(")로 감싸면 되는군! 음음 새로운 사실을 알아간다 ^^

그럼 바로 적용!

row.push(`"${x.name}"`, `"${x.price}"`, `"${x.content}"`);

좋아좋아