2 분 소요

이번 주 작업

  1. 프로젝트 제작 회의

    월, 화요일은 이 프로젝트를 어떻게 작성할 것인가 회의했다. 다른 팀들과 다르게 기초부터 전부 정하고 프로젝트에 들어가자는 주의라 훨씬 회의가 길어졌지만, 그러 인해 생각치 못했던 것들을 발견할 수 있어서 결과적으론 나쁘지 않았다.
    이번 회의에서 특히 주목할 것은 명세서를 세분화 시킨 것으로, 물론 개발 도중에 몇 번이고 변경될 수 있겠지만 기초적으로 무슨 작업을 하면 좋을지 표를 작성해서 그걸 채워나가는 방식으로 진행된 것이 좋았다. 현재 진척 상황을 확인하는 것이 특히 좋았다.
    이미지 이미지

  2. html에서 서버로 통신 시도(insomnia 말고 직접 코드 짜기)

    기존에는 post, get 등, REST API를 사용할 때 통신을 insomnia를 통해 작업했는데, 직접 클라이언트 -> 서버의 연결을 해야 하니, 작업할 게 좀 더 있었다.
    먼저, 연결 자체는 fetch를 이용하여 연결하면 된다는 것은 금방 해결했다. post를 중심으로 한 회원 가입, 로그인 등은 문제가 없었지만 가챠 등, get을 사용하는 통신은 body를 줘선 안 된다는 것을 작업 하고 한참이 지나서야 알게 되어 고생 좀 했다.

로그인(post의 경우)

document.getElementById("login").addEventListener("click", async () => {
        //username : id라 생각하자.
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;

        /* 
          로그인 API 호출 후 로그인 성공 시 index.html로 이동시켜주세요!
          이 때, 엑세스 토큰은 어딘가에 저장을 해놔야겠죠?! 
        */

        const register = await fetch("http://localhost:3017/api/login", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ username, password }),
        });

        //alert("클릭함");

        if (register.ok) {
          // const token = getCookie('authorization');
          // const now = new Date();
          // const item = {
          //   token : token,
          //   expired : now + 60
          // }

          //console.log(item);
          //localStorage.setItem('authorization', JSON.stringify(item));
          //console.log('token : ', token);
          //const check = JSON.parse(localStorage.getItem("authorization"));
          //alert(check['token']);
          //alert(check['token'])
          window.location.href = "index.html";
        } else {
          alert(register.message);
        }
      });

Get 통신 경우

fetch("https://example.com/api?param1=value1&param2=value2", {
  method: "GET",
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

이후 로그인한 토큰을 받아서 확인하려고 하는데, 코드 내부에서 cookie를 읽지 못하는 문제가 생겼다. 이 문제를 튜터에게 물어봤더니 쿠키가 브라우저 종속적이라는 대답을 듣고 현재 작업하고 있는 코드가 html 파일을 계속 넘어가는 방식을 쓰고 있기 때문이란 생각에 토큰을 localstorage에 저장하여 코드를 변경하는 방식을 취했었다.
그러나 localstorge에 등록한 걸 다시 인증하기 위해선 서버 쪽에서 사용하고 있는 인가 미들웨어를 사용할 수 없었고, 코드를 수정해야 하나 보던 도중에 갑자기 cookie를 사용해도 다른 html 파일로 넘어가도 사용할 수 있게 되었다.
해당 문제는 토큰의 유효 기간을 설정할 때 그 기한을 너무 짧게 설정한 것 때문이었다. 그래서 1시간짜리로 설정을 변경했다. 또한 암호화 할 때의 키를 env 안에 있는 걸로 설정하는 식으로 수정했다.

const token = jwt.sign(
            {
                userId: user.USER_ID,
            },
            process.env.JSONWEBTOKEN_KEY,
            {
                expiresIn: '1h'
            }
        );

이후 토큰이 인식 안 되는 문제는 cookie-parser를 express 서버에 등록함으로써 해결했다.

남은 것

  1. 가챠 작업을 할 때 보니 ID 컬럼이 뭔 역할을 하는지 확실치 않다는 문제를 발견하여 주말 중에 상담하여 변경해야 할 듯 하다.
  2. fetch를 통해 params를 전달하는 방법을 연구 중이다. 일단 이 방법을 베이스로 찾아봐야 할 것 같다.
function Test() {  // 컴포넌트
  
    const getXMLfromAPI = async () => {
        // 국토교통부 xml
        const baseurl = 'http://openapi.molit.go.kr:8081/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTrade';         
        const key ='발급받은키';        
        const params = {  // 필요한 query params를 {} 형태에 담아준다.
            serviceKey : key,
            LAWD_CD : 11110,
            DEAL_YMD : 201510,
        };

        const queryString = new URLSearchParams(params).toString();  // url에 쓰기 적합한 querySting으로 return 해준다. 
        const requrl = `${baseurl}?${queryString}`;   // 완성된 요청 url.
      
        try{
           const response = await fetch(requrl); 
           const xmlString = await response.text();  // 해석할 xml문자열.
           console.log(xmlString);
        }catch(error){
           console.log(error); 
        }

    };

    useEffect(() => { 
       getXMLfromAPI();  // api요청 함수실행.
    }, []);

}

참고