질문 리스트
데이터를 한 번에 받아오는 게 좋은지 나눠서 받아오는 게 좋은지 궁금합니다
메인 페이지와 같이 다양한 영역의 테이블에서 값을 받아올 때
클라이언트에서 원하는 값 마다 요청을 보내서 받아오는 게 좋을지(요청 → 서버 → 전송)
axios.get(캐러셀), axios.get(게시글), axios..get(뮤지컬목록)
아니면 서버에서 테이블마다 요청을 보내고 취합해서 제공할지(요청 → 서버 → 취합 → 전송)
axios.get(메인페이지)
안건 ) 두 요청을 한 번의 요청으로 만드는 게 좋지 않을까?
/maps/theaters/{theater-id} | X | X | { "theater" : { "id" : 1, "placeName" : "오둥이극장", "longitude" : 126.978891, "latitube" : 37.5709794, "phone" : "02-555-5555", "address": "서울특별시 어쩌구 23로 233", "roadAddress" : "서울특별시 어쩌구 23로 233" } , "restaurants": [ { "id" : 1, "recoomendPlaceId" : 1, "placeId": 1, "name": "오둥이식당", "address": "서울특별시 어쩌구 23로 233", "roadAddress" : "서울특별시 어쩌구 23로 233", "phone" : "02-555-5555", "score": 5.0, "totalReview": 200, "longitude" : 126.97607241059578, "latitube" : 37.57286713479182, "placeUrl" : "http://place.map.kakao.com/10753713" "categoryGroupCode" : "FD6" }, { "id" : 2, "recoomendPlaceId" : 2, "placeId": 2, "name": "오둥이식당2", "address": "서울특별시 어쩌구 23로 233", "roadAddress" : "서울특별시 어쩌구 23로 233", "phone" : "02-555-5555", "score": 5.0, "totalReview": 200, "longitude" : 126.973265, "latitube" : 37.572695, "placeUrl" : "http://place.map.kakao.com/10753713" "categoryGroupCode" : "FD6" }, .... ], "cafes": [ { "id" : 3, "recoomendPlaceId" : 1, "placeId": 1, "name": "오둥이식당", "address": "서울특별시 어쩌구 23로 233", "roadAddress" : "서울특별시 어쩌구 23로 233", "phone" : "02-555-5555", "score": 5.0, "totalReview": 200, "longitude" : 126.97607241059578, "latitube" : 37.57286713479182, "placeUrl" : "http://place.map.kakao.com/10753713" "categoryGroupCode" : "CE7" }, { "id" : 4, "recoomendPlaceId" : 2, "placeId": 2, "name": "오둥이식당2", "address": "서울특별시 어쩌구 23로 233", "roadAddress" : "서울특별시 어쩌구 23로 233", "phone" : "02-555-5555", "score": 5.0, "totalReview": 200, "longitude" : 126.973331, "latitube" : 37.5764652, "placeUrl" : "http://place.map.kakao.com/10753713" "categoryGroupCode" : "CE7" } .... ], "parkings" : [ { "id" : 5, "recoomendPlaceId" : 1, "placeId": 1, "name": "오둥이식당", "address": "서울특별시 어쩌구 23로 233", "roadAddress" : "서울특별시 어쩌구 23로 233", "phone" : "02-555-5555", "score": 5.0, "totalReview": 200, "longitude" : 126.984085, "latitube" : 37.5770079, "placeUrl" : "http://place.map.kakao.com/10753713" "categoryGroupCode" : "PK6" }, { "id" : 5, "recoomendPlaceId" : 2, "placeId": 2, "name": "오둥이식당2", "address": "서울특별시 어쩌구 23로 233", "roadAddress" : "서울특별시 어쩌구 23로 233", "phone" : "02-555-5555", "score": 5.0, "totalReview": 200, "longitude" : 126.974402, "latitube" : 37.572972, "placeUrl" : "http://place.map.kakao.com/10753713" "categoryGroupCode" : "PK6" }, .... ]} | 원하는 극장 아이디를 pathvariable 을 이용해 전달해당 페이지에 속하는 정보들을 전달theater : 기준이 되는 극장 정보restaurants : 맛집을 평점 평균 점수가 높은 순으로 5개 전달cafes : 카페를 평점 평균 점수가 높은 순으로 5개 전달packings : 주차장 평점 평균 점수가 높은 순으로 5개 전달logitude : 경도(x)latitude : 위도(y)address : 지번 주소roadAddress : 도로명 주소categoryGroupCode : 카카오지도API 그룹코드 |
/theaters | x | x | [ { "id": 5, "placeName": "오둥이 소극장", "longitude": 126.978891, "latitude": 37.5709794, "phone": "02-555-5555", "address": "서울특별시 송파구 잠실동 40-1번지 샤롯데씨어터", "roadAddress": "서울특별시 송파구 올림픽로 240(잠실동) 샤롯데씨어터" }, { "id": 4, "placeName": "오둥이 중극장", "longitude": 126.978891, "latitude": 37.5709794, "phone": "02-555-5555", "address": "서울특별시 송파구 잠실동 40-1번지 샤롯데씨어터", "roadAddress": "서울특별시 송파구 올림픽로 240(잠실동) 샤롯데씨어터" }, { "id": 3, "placeName": "오둥이 대극장", "longitude": 126.978891, "latitude": 37.5709794, "phone": "02-555-5555", "address": "서울특별시 송파구 잠실동 40-1번지 샤롯데씨어터", "roadAddress": "서울특별시 송파구 올림픽로 240(잠실동) 샤롯데씨어터" } ......] | 등록된 극장정보를 전부 전달id 기준 DESC 으로 전달logitude : 경도(x)latitude : 위도(y)address : 지번 주소roadAddress : 도로명 주소 |
프론트엔드(이효근) 생각: 한 페이지에 고정적으로 받아야 할 정보라 여러 번의 요청을 보내게 되면 필요 없는 네트워크 요청이 늘어나는 것 같아 요청을 나눠 보내는 것 보다 axios.get(메인페이지)와 같이 한번에 주고 받는 게 더 좋다고 생각됩니다. 그래서 저 두 요청을 /theaters를 지우고 /maps/theaters/{theater-id} 안에 넣어 한번에 불러오는 게 좋다고 생각합니다.
백엔드(김관우) 생각 : 드롭다운을 클릭 시에 해당 극장 관련 정보와 주변장소 정보가 오는 것이 좋다고 생각해서 저 엔드포인트에 극장정보 전체 와 해당 극장에 대한 주변 정보가 담기는 것이 같은 내용의 데이터가 계속 요청되는 것 같아 따로 요청하는게 좋지 않을까 생각합니다.
기능 구현을 한 브랜치와 현재 작업 중인 브랜치 중 어디에서 수정하는 것이 좋을까?
기능 구현한 작업이 사용된 척도에 따라 달라질 것 같다.
특정 브랜치에 기능에 대한 모든 작업을 담을 필요는 없다.
브랜치(= 나뭇가지) 마구 뻗쳐도 상관없다! 기록이 중요하지 깔끔히 정리할 필요는 없다.
전역적으로 많이 사용되는 기능일 경우 빨리 수정 후 머지하는게 좋다 → 작업 후 알리자
새로 만들어 적게 사용하는 기능일 경우 현재 작업 중인 브랜치에서 계속 진행할 것이다.
브랜치 전략 → 공유가 가장 중요하다! 충돌 방지를 위해 지속적으로 소통하는 것이 중요하다!
멘토링 정리
- 로그인 테스트 → 빌드 시간 단축?
- 로컬에서 최대한 구현 후 빌드해 테스트하기
- console.log로 한번에 최대한 확인 후 수정하기
- 간단하게 배포를 하는 방법?
- Vercel 임시 배포 주소로 이분화시키는 방법
- Admin 서버를 하나 더 만드는 개념이라 적합할까…?
- 통신 횟수가 많은 것 vs 한번에 많은 양의 데이터를 받아오는 것
- A + B = 10 vs C = 10 → 서버는 큰 영향이 없다.
- 요청 횟수를 줄이는게 좋지 않을까?
- 요청 횟수가 아니라 API 호출 지점에 대해 논의해봐야 한다.
- 드롭다운 리스트를 한번만 불러와서 저장하면 좋지 않을까?
- 데이터 통신 시 로딩 시간을 줄이는 것은 한계가 있다.
- 로딩 지연을 최소화할 수 있는 방법 → 스피너? 로딩 UI?
- API를 확장성있게 작성하는 것이 중요하다!
- 다음 회의 : 화요일 7시 반 회의 / 목요일 8시 !!!
- 취업 관련 이야기
- 백엔드는 어렵다..? 프론트엔드가 쉬워서 온걸까?
- 전공을 해서 살릴 수 있는 강점이 있는지?(프로젝트 경험이나, 개인 블로깅 기록 등)
- 전공자 : 프론트엔드 수업은 따로 없을 텐데 굳이 프론트를 고른 이유를 궁금해 함 비전공 : 그 외에 다른 옵션이나 선택지가 많이 있었을텐데 프론트엔드를 하기로 했는지 가볍게 물어봄
- ⭐ 면접팁 1 다른 직군에 대한 단점으로 비교해버리면 대답을 하기 어려워질 수 있음 (백엔드는 어려워서, 대체가능한 영역이라서 등등 —> 지양할 것) (최대한 장점으로 어필할 것)
- ⭐ 면접팁 2 끊어말하기 A하는데 B도 이렇고 저렇다. (X) A이다. / 그러나 B란 지점도 있다.(O)
- ⭐ 면접팁 3 나의 강점을 찾자! → 나 자신을 알자…^_^ Ex) 서비스를 좋아함 : 사이드 프로젝트로 1개로 집중해 준비할 수 있음 Ex) 다양한 분야를 접하는 것을 좋아함 : 사이드 프로젝트로 다양한 경험을 하는 것이 중요함 나의 강점이 빛날 수 있는 회사를 결정할 수 있게 된다! 남하고 비교해 찾지 않기! 나의 장점! Ex) 멘토님이 어필한 장점 - 문서화 : 노션만 봐도 알 수있게 정리를 잘 했다. - 커뮤니케이션 : 면접에서 커뮤니케이션능력을 최대한 말 잘통하는 척! - 꾸준함 : 유튜브도 하나의 이력서로 썼다. 꾸준한 영상편집, 개발공부 했음을 어필
- ⭐ 면접팁 4 면접은 면접관 뿐만 아니라 나도 회사를 평가하는 자리다. 면접을 통해 회사의 전반적인 분위기도 파악할 수 있다. → 면접관, 면접 분위기 등
- 코테 / 데브매칭 꾸준히 봐야함 시험, 면접을 주기적으로 봐서 무엇이 부족한지 틈틈이 파악하기 객관적으로 어느부분이 부족한지 알아보기 위한 지표로 사용해보자! - 유형분석을 하는지? greedy / DP 등 - 시간복잡도 공간복잡도 고려하는지?
- 코테 레벨 3 이상은 풀 수 있어야 한다 → 레벨 2 기준 2 / 5 문제
- 스타트업은 과제에 집중해서 구현능력을 더 길러야함 → 자유로운 분위기 ~_~
- 회사 선택 우선순위 : 도메인 / 연봉 / 근무형태 / 회사 분위기 / 자율복장!!! 등
- 자사 서비스 회사들은 하나의 서비스만 운영하며 확장되지 않는데, 서비스가 개발된 후에는 운영 단계에서는 어떤 업무를 하나? → 작은 업무가 많다!
- 레거시를 걷어내는 작업 → 새로운 기술 스택을 도입함
- 유지보수 → 주기적으로 서비스 개선을 위해 작업함
- 써드파티 라이브러리 → 버전 변경 시 마이그레이션 작업
- 신기술 도입 / 데이터 변경 / 사업 중단 → 인력 투여
- 유저 디바이스 분석 → 문제 발생 시 오류 해결(웹뷰, 티비 브라우저 등)