2월 3주차 - 스파르타 내일배움캠프 14주차

이번 주 알게 된 점

Maps API 사용 시 Client ID 관리

https://4sii.tistory.com/425

Naver Maps API Client ID 훔쳐 쓰기

위 포스팅에서 작성한 내용과 같이 

script를 통해 API 데이터를 세팅하는데 내 Client ID가 노출되는게 거슬리는 상황이 있었다.

 

실제 배포를 하여 서비스하게 되면

기존의 테스트용 localhost를 허용 URI에서 지우는 방식으로 결론을 짓긴 했는데

 

여러군데에서 아직 localhost를 빼놓지 않았는지 내가 해당 사이트의 Client ID를 그대로 가져다 써도

잘 사용되는 상황이 여럿 나왔다. (당장 네이버 공식 문서에서만 해도 가져다 쓸 수가 있다.)

 

일단 issue에 올려놓긴 했는데 누가 확인해줄지는.. 잘 모르겠다.

 

나만 호들갑 떠는거 같기도 하고. 

나오고나서 지금까지 몇년동안 쓴 개발자가 수없이 많을텐데 이에 대해 고려를 안해봤을까 싶긴 하지만

이런 고민하는 자체도 개발자로서 좋은 자세라고 나는 생각하기에

앞으로 답변이 달리거나 추가로 알아내는 부분이 있다면 포스팅 할 예정이다.

 

window.onload vs addEventListener('DOMContentLoaded')

window.onload = () => {
  //실행될 코드
}

window.addEventListener('DOMContentLoaded', () => {
  //실행될 코드
})

지금까지 나는 주로 window.onload를 많이 써왔고

비록 좀 오래된 코드지만 다른 코드들을 볼 때도

아래 addEventListener보단 window.onload를 많이 쓰는걸 볼 수 있었는데

 

뭐가 더 좋은지 궁금해져서 확인해보니 중복될 우려 때문에 

window.addEventListener('DOMContentLoaded')를 쓰는게 더 낫다고 한다.

 

물론 내가 혼자 공부해서 나온 결론이라 틀린 오답에 도달한 거일수도 있다.

그래도 일단 프론트를 많이 다룰 일이 없기에 나온 결론으로 알고 

코딩할 생각이다.

 

Nest.js와 CORS

app.enableCors();

Nest.js에서는 위 한줄만 추가해주면 CORS 관련 설정이 끝날것으로 보였는데

프론트엔드 서버를 같이 다룰 때 좀 더 세심한 설정이 필요했다.

 

main.ts

app.enableCors({
  // origin: 'http://localhost:3000',
  origin: true,
  credentials: true,
});

파라미터로 옵션을 줘서 credentials를 설정해줘야 하고

필요에따라 origin에 대해서도 요청을 받을 클라이언트 서버 주소를 직접 명시해주는게 좋다.

 

클라이언트 서버에서도 요청할 때

axios
  .post(
    `http://localhost:8080/boards/${boardId}/join`,
    {
      // data
    },
    { withCredentials: true },
  )

위 코드와 같이 withCredentials를 명시해줘야 원하는 요청값을 받을 수 있다.

 

이번 주 목표 달성

패스트캠퍼스 코딩테스트, 기술면접 패키지

원래 목표는 문제 풀이 들어가는거였는데 한참 못미쳐서

자료구조 챕터도 못끝냈다. 

프로젝트 대비 기술 공부하느라 바쁜것도 있었지만 의지가 많이 부족했던 것 같다. 

일단 요즘 잠이 너무 많아짐.. 봄이라 그런가 자도자도 멍한게 안사라진다. 새벽에만 쌩쌩해져서 큰일남

 

자료구조 강의 퀄리티는 너무 좋다. 

Python으로 자료구조 하나하나 구현해보면서 정리 딱 하고 넘어가는중이고

강사님이 자료구조를 딱 어떤거고 어디에 쓰인다. 뭐가 중요하다 라는 요점만 콕콕 찝어주다보니

내일배움캠프 강의랑을 퀄리티 자체가 다른걸 계속 느끼는중..

 

좀 더 빡세게 해서 다음주에는 문제풀이 챕터를 꼭 들어가보자

 

내일배움캠프 챌린지 팀

프로젝트 아이템 선정이 거의 3일에 걸쳐 선택되었고

기획을 어느정도 진행해서 필요한 로직들에 대해 부족한 부분을 공부중이다. 

 

월화수에 프로젝트 선정을 했고 목요일부터 차례대로 공부하며 스터디를 진행중인데 

생각보다 순조로워 다행이다. 

동시성 제어에 대해 태어나서 처음 접근해보는터라 처음에는 방향도 못잡고 많이 헤맸는데

4명이서 머리를 맞대기도 하고 주위 여러 사람들의 도움을 받다보니 거의 

실제 서비스에서도 쓸 수 있을만한 코드가 나오는중이다.

https://4sii.tistory.com/423

[동시성 문제] (2) Nest.js의 Bull Queue - 작성중

 

지도 API도 모두 써본 결과 다 비슷해서 관리자 기능이 좀 더 괜찮은 네이버 API를 쓸 것 같은데

개발자들 사이에선 카카오 API도 많이 사용하고 있어서 

일단 네이버로 결정해놓고 나중에 지도 관련 기능을 구현할 사람이 선택하는걸로 결론지었다.

 

남은건 multer를 통한 이미지 저장 관련 점검

AWS S3, SES, ASM 공부 정도인데 

나태하지만 않다면 프로젝트 시작 전까지 필요한 부분에 대해 모두 숙지가 가능할 것으로 보인다.

 

Nest.js 강의 완강

노마드코더 강의 완강 완료했고

내배캠 강의도 나오는 날 바로 완강해버리고 있다. 

형태가 스프링이랑 비슷하고 TypeScript도 Java와 비슷하다보니 

습득하는데 큰 어려움 없이 잘 되는중이다. 

위의 강의들 퀄리티도 좋아 이해하는데 도움이 많이 되어서 

지금은 직접 샘플 프로젝트를 만들며 팀원들의 공부 방향을 리딩하는중이다. 

https://github.com/cchoseonghun/nestjs_sample

GitHub - cchoseonghun/nestjs_sample: Sample Back-End project using Nest.js. with Front-end using ejs or React.js

 

화요일에 마지막 내배캠 Nest.js 강의가 나오는데 그것도 바로 습득해서

프로젝트 돌입할 준비를 해야겠다.

 

다음 주 목표

• multer를 통한 이미지 저장 시 실패 응답 과정에서 이미지 저장 취소되는 방법 알아보기
• AWS S3
• AWS SES
• AWS ASM (옵션)
• 팀프로젝트 와이어프레임, DB 스키마 설계, API 설계