[포스코x코딩온] 풀스택 부트캠프 9주차 정리 -1 (2차 프로젝트 회고)

12/19

1. 막 로그인 했을때는 로그인 상태인데 새로고침을 하면 로그인이 풀리는 오류가 발생했다. 알고보니 이는 내가 미들웨어에 대해서 잘 이해하지 못하고 로직을 짠 것이었다.

결과적으로 미들웨어는 클라이언트에서 요청이 들어오면 app.js 순서상으로 한번 거치는 로직이라고 생각하면 될 듯하다. (이마저도 개인의 추측이라 틀릴 수도 있다.)

내가 짰던 미들웨어는 res.locals를 로그인을 할 때만 반환하게 짜서 로그인을 한 순간에만 생기고 이후에는 res.locals로 프론트측에 주지 않았기 때문에 자연스럽게 사라진 것이라고 예상했고 그게 맞았다.

즉 클라이언트에서 로그인 이후 index페이지 요청을 하면 먼저 미들웨어에서 aceesstoken 발급을 하면서 res로 토큰 반환을 해주고 이를 토대로 render를 해줬기에 첫 시도에는 브라우저 측에서 인식할 수 있었던 것이었다.

반면에 새로고침을 하면 이미 accessToken이 있는 다음 요청에서는 미들웨어에서 res.locals를 해주지 않기 때문에 초기화가 되었던 것이었다.

어쨌거나 미들웨어에서 res.locals 정의를 제일 처음에 해줌으로써 오류를 잡아낼 수 있었다.

또한 res로 프론트에 반환을 해주는 구문이기 때문에 서버나 미들웨어 측에서는 프론트로 보내줄 수 있을 뿐 res.locals로 부른 변수를 사용할 수 없다. 그래서 계속 console.log를 찍었을 때 undefined가 떴던 거였다.

 

2. 팀원들의 github 에러를 수정했다. 팀원들이 작업한 폴더에서 pull을 받아서 작업물이 날아가는 불상사가 발생했다.( 백업해서 다행이었다.)

그래서 각자의 feat branch에서 push를 하고 pull request를 해서 충돌이 일어난다면 그 충돌을 해결하고 merge 후 pull을 받아도 되지만 먼저 다른 branch에서 pull을 해주고 작업 폴더와 로컬에서 merge 이후 push를 하면 될 것 같지만... 나만 이렇게 하는 것 같긴 하지만, 뭐 둘 다 원리는 같으니까 상관 없지 않을까 싶다.

 

3. 로그인이 되었음에도 불구하고 url을 통해서 로그인 페이지로 get 요청을 보내면 로그인 페이지가 뜨는 버그가 발생했다. 다른 페이지는 어떻게 하고 있을지 모르겠는데 그냥 액세스 토큰이 있을 때 로그인 페이지로 가게 되면 401에러로 redirect하는 걸로 해결했다. 좀 더 좋은 방법이 있을지 모르겠다.

---

 

12/ 20

 1. 새로운 테이블을 만들었다. words로 유저가 직접 단어를 등록해서 mz어 낱말 사전? 비슷한걸 만드는 테이블이었다. 그래서 index를 primary key로, useid를 외래키로 받아서 만들었는데 나름의 유효성 검사를 설정했음에도 불구하고 사용자가 올린 것을 그대로 사용하기에는 관리자의 손길이 조금 필요할 것 같다는 의견이 있었다. 그래서 사용자가 보낸 post 요청을 별도의 테이블(words)에 insert 하고 관리자 페이지를 따로 만들어서 타자 검정에 쓸 단어들을 고르는 방식(approved words 테이블)으로 진행하기로 했다.

그렇게 된다면 user 테이블에 관리자를 식별할 수 있는 별도의 isadmin같은 속성을 만들어줘야 할 것 같은데....

(물론 그렇게 할 수도 있지만 그냥 특정 아이디를 관리자로 설정해서 그 관리자로 로그인을 하면 admin 권한을 주는 미들웨어를 설정해도 될 듯하다.)

 

2. 관리자 페이지에서 기각할 때 primary key인 index 값이 필요하다는 사실을 알게 되었다. 그걸 axios로 delete 요청을 보낼 때 data 값으로 보내야 했다. 그래서 dataset을 이용해서 보냈다. 바닐라가 아니라 어떤 프레임워크를 사용하면 편해질 지도 모르겠다.

 

3. csrf 공격을 막기 위해 토큰을 이용할 생각을 했는데 어차피 미들웨어로 access 토큰이 없으면 post 요청을 보내지 못하게 했는데 굳이 필요할까...? 싶다. 내가 모르는 부분이 있는건가?

 

4. 팀원의 깃허브 충돌을 해결했다. 왜 다들 깃허브를 무서워하는지 이제야 이해가 간다...

 

 

---

12/ 21

팀원분의 프론트에 오류가 발생했다. 내가 더미데이터로 approved words 테이블에 단어1이라고 설정한 단어에 대해서 enter값을 눌렀을 때 설정되게 하는 eventlistener가 동작하지 않는 것이었다. 그래서 구문을 분석하고 if 구문에 console을 찍어가면서 그 이유를 찾으려고 노력했다.

trial은 다음과 같다.

 

1. 글자가 맞는지 확인하는 함수와 input을 초기화하는 함수가 따로 정의되어 있었고 둘 다 enter를 입력하면 실행되게 되어있었다.

=> 평소에는 잘 작동하는데 숫자가 마지막에 나오면 모종의 오류로 인해서 초기화 함수가 먼저 실행되는 것이 아닐까?

=> 입력 단어와 정답 단어가 일치할 때는 초기화가 되지 않게 조건을 걸었다.

=> 두 단어가 일치하지 않을 때는 초기화가 되지만 둘 다 일치할 때는 내가 적은 조건처럼 초기화가 되지 않았음에도 함수가 작동하지 않았다.

=> 실패.

 

2. get 요청을 하면 정답 단어와 뜻은 데이터베이스에서 받아오는데 데이터베이스의 default 값은 객체값으로 받아오지만 프론트 코드에서 이용하는 코드는 array 였기 때문에 서버에서 word와 meaning으로 두개의 array로 변형해서 render를 했다. 이 곳에서 문제가 발생한 것은 아닐까. 

 => res.render('somthing')를 하고 script 에서 동적 form을 통해 받아와 변수를 script에서 활용한다는 방법도 있었지만,

아래 그림도 재밌을 것 같아서 이렇게 해봤다. 여기서 문제가 있었나?

=> console을 찍어봐도 문제 없었고 혹시 몰라서 axios로 받아왔는데도 동일한 오류가 있었다. 실패

 

이렇게

 

3. 특정 조건에서는 작동하고 다른 조건에서는 checkTyping이라는 함수가 작동하지 않는다는 사실을 깨달았다.

그리고 그 조건에는 event.code라는 변수를 이용한다는 사실을 알게 되었다. 또한 그 조건은 html의 oninput 속성을 이용하고 있었다.

=> 입력할때마다 (event가 발생할 마다) event.code를 console로 찍어봤다.

=> 특정 조건에 따라 enter 이벤트가 듬성듬성하게 발생했다.

=> 이에 대해 gpt에게 질문했고 친구는 아래 답을 내놓았다.

=> oninput 속성을 기반으로 한 function에서 잘 인식하지 못하는 key = 'Enter'인 조건까지 추가해서 난 오류였다.

=> 팀원분이 input 초기화는 keyup속성을 이용하게 짜셨기 때문에 여기에다가 정답을 검사하는 로직을 옮겨넣어서 해결할 수 있었다.

내일은 예외처리를 하면 되겠다.