HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📯
부스트캠프 7기 BE 멤버쉽 설계
/
8주차 - SSR

8주차 - SSR

스프린트
강의날짜
Nov 2, 2022
키워드
server side rendering
🧐
마스터클래스 질의응답 모음
제목
요약
확인
네트워크 부하가 심할것 같다?
확인
nginx reverse proxy 세팅
확인
클라이언트를 믿을 수 없기 때문에 정확한 하나의 시뮬레이션을 기반으로 게임엔진을 서버에서 돌리고 있습니다. 만약 여러 개의 방을 지원한다면 게임 엔진을 여러 개 돌리는 것이 최선일까요?
가능한 한 부하가 안 갈 만큼만 여러 개의 게임 엔진을 하나의 서버에서 돌리도록 합시다 그 이상이 필요하면 서버 더 만들어야 합니다 (데디케이티드 서버 방식)
확인
해피해킹 vs 리얼포스
확인
도커는 리눅스 컨테이너 기술로 알고있는데, 아까 도커에서 만든 이미지를 윈도우, 맥, 리눅스 다 띄울 수 있다고 하셨는데 이는 각 플랫폼마다 도커 엔진의 구현이 다르기때문인가요? 예를 들면 도커 엔진이 같은 인터페이스에 대해 플랫폼마다 다른 시스템콜을 연결해주는 느낌일까요.
확인
ws://host:포트 로 소켓을 연결하든 http://host:포트로 소켓을 연결하든 똑같이 동작하는데 이유가 뭘까요?
확인
작은 사이즈의 프로젝트 같은 경우는 쿠버네티스로 서버를 관리하는게 오버엔지니어링 이라는 의견이 많던데, 어느정도 사이즈의 프로젝트부터 쿠버네티스를 적용하는게 좋을까요?
확인
보통 기업에서 인프라 개발자와 백엔드 개발자를 따로 뽑는 기업들이 있는데 이 둘의 업무의 차이가 어떤 부분이 있나요
확인
SSR 하이드레이션을 구현하다 보면 데이터를 바인딩해야 할 때가 있습니다. 이전까지는 데이터를 서버측에서 DB를 참조하고, 클라이언트측에서 서버를 거쳐 DB를 참조하는 방식으로 데이터를 바인딩하는데 DB참조가 2번 일어나서 비용이 많이 들어가는 것 같습니다.
html을 만들 때 원본 데이터를 같이 script 변수 등으로 보내주고, 클라이언트측에서 하이드레이션을 시도해서 데이터를 각 컴포넌트에 부착할 때에는 해당 변수를 참조하는 방식으로 불필요한 DB참조를 줄일 수 있다
확인
고양이 방구냄새가 지독한것이 사실인가요?
https://www.edaily.co.kr/news/read?newsId=01328406622651280&mediaCodeNo=257
확인
소켓 vs HTTP 요청
확인
인터넷의 많은 예시들을 찾아보니 Socket 서버와 HTTP 서버를 나눠서 운영하는 걸 확인할 수 있었습니다. 혹시 나눠서 운영해야 하는 이유는 어떤게 있을까요?
🐮😺
확인
오픈소스 보는 팁이 있을까요?
확인
Docker를 배포할 때 쓰는 건 이해가 가는데, 개발과정(분업 등)에서는 Docker가 어떻게 효율적으로 쓰일 수 있나요?(build에 시간이 오래걸릴 것 같고 수정을 할 때마다 Docker Image를 수정하는 게 비효율적으로 느껴져서요) 그리고 FE에서도 Docker를 쓸 일이 많나요?
확인
CORS 어디서 설정하는게 좋을까요?
확인
마이크로서비스 아키텍처는 왜 쓰는 걸까요? 무슨 이점이 있을까요?
1. 회사가 새 언어를 안가르칠려고 귀찮아서 만들었다 2. 한쪽이 터지더라도 나머지는 안터지도록 하려고
확인
이번 스프린트때는 개발을 많이 못했네요
개발을 시작하려 했는데, 이제 처음 보는 canvas 관련 로직들 조사하다 보니 토끼굴을 파져서 남는건 블로그 글 뿐…
확인
클라우드 컴퓨팅 연습하면서 비용 절감할 방법?
확인

다음주 마스터 클래스

은님이 에비군하러 👋👋
  • 월요일 → 백엔드
  • 수요일 → 프론트엔드
 

멘토링

  • 멘토님이랑 한 번 쯤은 오프라인으로 보면 좋음
  • 팀원들과도 자주(?) 오프라인으로 모이면 어떨까요?
  • 일단 친해지자.
  • 친해진다 - 신뢰 관계를 쌓는다
    • 신뢰 관계
      • 개소리를 해도 믿어준다
      • 빌게이츠가 똥을 싸도 박수를 쳐준다
 

팀플레이

  • Leadership
    • 좋은 리더란 뭘까?
    • 우리 팀이 일을 잘 하게 하려면 어떤 장치들이 필요할까?
    • 어떤 문화가 필요할까
    • 어떤 시스템이 필요할까
      • 스크럼
      • 회고
      • KPT 회고
      • 목표치 정하기
      • 페어프로그래밍을 하는 시간 만들기
      • ….
  • Followership
    • 리더를 잘 따라 주는 것
    • 누군가가 이야기를 하면 잘 듣고, 잘 피드백 해주고
 
  • Task Manager
    • 우리팀의 스케쥴 관리하기
    • 현재 어떤 일들을 해야 하는지 관리하기
    • 일을 잘 분배해주기
    • 일이 잘 진행되고 있는지 점검하기
  • Project Manager
    • 프로젝트 자체가 잘 굴러가도록 하는 것
 
  • 협업 포인트
    • 프론트 + 프론트
    • 백엔드 + 백엔드
    • 아키텍쳐 설계
  • 분업 포인트
    • 프론트엔드
    • 백엔드
 
  • 내가 할 수 있는 일
  • 내가 해야 하는 일
  • 우리가 할 수 있는 일
 
우리가 어떤 일들을 할 수 있고, 이를 통해서 어떤 가치를 만들어낼 수 있는지 생각해보자
 
시니어 주니어를 정확하게 정의할 수 있을까?
  • 시니어
  • 주니어
 
주니어가 시니어의 일 일부를 할 수 있으면 어떻게될까?
 
 

 
 
 

Client Side Rendering

const items = [ { content: 'test' } ]; const template = () => ` <ul> ${items.map(item => `<li>${item.content}</li>`)} </ul> `; const render = () => { document.querySelector('#app').innerHTML = template(); }
 

Server Side Rendering

const items = [ { content: 'test' } ]; const template = () => ` <ul> ${items.map(item => `<li>${item.content}</li>`)} </ul> `; app.get('/', (req, res) => { res.send(` <!doctype html> <html> <head> <title>Server Side Rendering</title> </head> <body> <div id="app"> ${template} </div> </body> </html> `); }); app.listen(8080, () => { console.log('listen server: http://localhost:8080') })

Hydration

const items = [ { content: 'test' } ]; const template = () => ` <ul> ${items.map(item => `<li>${item.content}</li>`)} </ul> `; app.get('/', (req, res) => { res.send(` <!doctype html> <html> <head> <title>Server Side Rendering</title> </head> <body> <div id="app"> ${template} </div> <script> const items = ${JSON.stringify(items)}; const template = () => \` <ul> ${items.map(item => \`<li>${item.content}</li>\`)} </ul> \`; const render = () => { document.querySelector('#app').innerHTML = template(); } </script> </body> </html> `); }); app.listen(8080, () => { console.log('listen server: http://localhost:8080') })
 

Reference

  • https://zuminternet.github.io/vue-ssr/
  • https://github.com/JunilHwang/simple-ssr