7/31 - 4주 프로젝트

Toy 41번 문제. event 함수를 저장해서 콜백으로 실행시킬 수 있는 library 구현.

var mixEvents = function(obj) {
  let library = {};
  //  console.log("args===========>", obj);
  obj.on = (event, callback) => {
    if (!library[event]) {
      library[event] = [callback];
      // 여러개가 있어도 순차적으로 실행되야함
    }
    library[event].push(callback);
  };

  obj.trigger = function(event) {
    let args = [];
    console.log(arguments);
    for (let j = 0; j < arguments.length; j++) {
      args.push(arguments[j]);

      console.log(args);
    }
    args = args.slice(1);
    if (library[event] !== undefined) {
      for (let i = 0; i < library[event].length; i++) {
        library[event][i].apply(obj, args);
      }
    }
    // for (let i = 0; i < library[event].length; i++) {
    //   library[event][i];
    // }
  };
  return obj;
};

---

 

Passport - kakao 를 구현하면서 문제가 발행했다.

 

회원가입과 로그인 flow 를 따로 분기해서 카카오에서 받아온 정보를 db 에 정보와 비교해서 없다면 회원가입 폼으로 

 

카카오에서 넘어온 정보를 넘기고 , 있다면 로그인 시키는 분기 작업을 기반으로 기획하고 작업을 시작했지만 카카오에서 정보를

 

받아오는 callbackurl 이 하나라서 실패했다. 그래서 시도한 첫번 째 방법은 req.headers 에 kakao sign status 를 넣어서 

 

분기를 나누는 시도를 했다. 가상 클라이언트를 하나 만들고 버튼 태그에 onclick 이벤트를 걸어서 fetch 를 시도했지만

 

계속  Access-Control-Allow 에러가 발생했다.  Access-Control-Allow에 관한 옵션을 찾아서 headers  에 넣어보았지만 

 

오류는 계속 발생했고 콘솔을 찍으며 확인해보니 카카오까지 요청은 잘 갔지만 되돌아오지 못한다는 점까지는 발견했다.

정확하진 않지만 이 오류와 같은 케이스로 검색해보니 해결방안으로 headers 에  Access-Control-Allow 관련 옵션을 설정하고 

 

<a href > 태그 안에 버튼을 넣어서 연동해주는 방법이 나왔다. 이 방법으로 시도하니 데이터는 무사히 도착했다.

 

그렇지만 .. 여전히 같은 주소로 fetch를 보내기 때문에 근본적으로 해결이 되지 않았다. 결국 분기를 나누는 것을 포기하고

 

하나의 분기에서 db에서 data 를 찾아서 있다면 res.send 로 필요한 리소소를 건내고 없으면 만들어서 저장 후 리소스를 주는

 

find or create 를 시도했다. 또 나의 부족한 코드리딩 능력으로 이것저것 sequelize 문을 시도해보았지만 번번히 실패했고

 

결국 바보 같은 방법이지만 find 따로 create 따로 구현했다. 비록 최선의 방법도 , 원래 기획과도 다른 길이었다.

 

누군가에게는 핑계로 들릴 수도 있지만 아직 초심자인 내 딴에는 맞딱드린 문제를 해결한 것에 나름 큰 의미가 있는 날이었다.

 

react 만 조금 해본 나에게 server 나 db , 인증과 같은 부분에 대해 잔뜩 겁을 먹고 있었지만 하나 씩 해결해가니 점점 재미가

붙는 것 같다. 늦은 시간까지 앉아있는 의미가 있는 날이다.