협업 진행 상황

https://www.notion.so/1f79bf893dde4b67b721106f65c6dfa9

중간 발표 자료

 

중간발표 후 질문을 통해 배운 것들이 있어서 정리해보려고 한다.

 

 

---

 

• Websocket과 Socket.IO에 대한 고민을 말씀해주세요.

이는 양방향 통신을 할 때 많이 쓰는 방법 두가지 입니다. Websocket의 장점은 연결 됐을 때 연결을 초기화한 이후에는 오버헤드가 되지 않아서 가볍게 연결 할 수 있다는 점입니다. Socket.IO에서는 스프링을 사용할 수 없어서 가볍게 사용할 수 있는 웹 소켓을 선택하게 됐습니다.(Socket.IO는 Node.js에서 사용하기 위한 라이브러리)

 

• 렌더링될 때 이전 컴포넌트가 보이는 이슈에 대한 해결책은 무엇인가요?

상태가 변경됐을 때 상태가 바로 적용이 되지 않는 이슈가 있었습니다. 그 부분에 대해서 useQuery를 사용해서 invalid에 있는 값을 불러와 다시 데이터를 업데이트 하는 방식을 사용했고, useEffect에서 의존성 배열을 걸어 변수가 변경되거나 함수가 사용되면 다시 값을 불러오는 방식을 사용해서 해결했습니다.

그 방식은 너무 많은 렌더링을 호출하게 될 수 있다. 로그가 여러번 찍히는 것으로 렌더링 횟수를 간접적으로 알 수 있다. 렌더링에 대한 이슈는 라이프 사이클에 대해서 명확한 이해가 부족해서 생기는 경우가 많다. 라이프 사이클을 정확하게 이해해야 한다.(각각의 사이클에서 호출되는 횟수, 순서가 중요)

 

• 외부 API가 자바스크립트와 자바 양쪽으로 호출이 가능하다면, 어떤 점들을 고려하여야 하나요?

서버 쪽에서 API로 호출했을 경우에는 보안상 민감한 정보들을 서버에서 저장할 수 있습니다. 프론트에서 볼러올 경우 노출이 될 수 있기 때문에 보안상 백에서 호출하는 것이 더 좋다고 생각합니다. 그러나, 백에서 호출할 경우 클라이언트 측에서 axios 요청을 보내야 하고, 그것에 대한 로딩을 기다리는 시간이 사용자 경험 측면에서는 좋지 않을 것이라고 생각합니다. 또 프론트에서 api를 호출했을 때에는 서버의 부하를 줄일 수 있는 장점이 있습니다. 각 장단점이 있어 어느 부분에 더 중점을 둬야 할지 고민이 필요하다고 생각합니다.

비즈니스 로직 상에서 프론트에서 호출하면 백으로 다른 호출이 없기 때문에 외부 호출 api와 데이터가 추가적으로 변경이 돼야 하는 것들을 처리할 수 없다. (예를 들어 외부 api를 호출하면서 테이블을 동시에 읽어야 하거나 외부의 호출 값을 DB에 저장해야 하거나..)

 

• 트래픽이 급증할 때 프론트에서 대처할 수 있는 방법은 무엇인가요?

CloudFront를 사용했습니다. CloudFront는 사용자에게 요청을 받으면 가장 가까운 엣지 로케이션에 저장된 캐시 콘텐츠를 가져오기 때문에 서버에 요청하는 부하가 감소하고 대규모 트래픽이 발생하는 상황에서 도움이 됩니다. 서버 네트워크 트래픽이 감소하면 데이터 전송 비용도 줄어들고, 서버 부하가 줄어들면 서버의 크기나 수를 늘릴 수 있어 운영 비용을 절감할 수 있다는 장점이 있습니다.