정글 크래프톤 정글 7기 4,5일차 (SSR,CSR)

 

어느새 정글의 4일차와 5일차가 지나갔다. 

정말 인생에서 가장 열심히하고, 몰입했던 순간이 였던거 같다. 

 

4일차에서는 프로젝트의 마무리였고,

아쉬움은 있지만 그래도 어느 정도 만족한다. 

 

우리 팀이 진행했던 프로젝트는

JWT를 활용한 회원가입 기능과 실시간 채팅의 게시글을 만드는것이였다.  

그리고 실시간 채팅 부분은 파이썬 라이브러리인 웹 소켓을 이용해 구현했고, 

게시글이 여러개 있기 떄문에 룸을 사용해서 구현하였다. 

 

아쉬웠던 점은 시간이 부족해서 보안적 측면이 많이 부족했다. 

(비밀번호 해시화, 암호화, 아이디 중복 등등)  

그리고 키워드였던 SSR에 대해 생각해보지 못해 아쉬웠다. 

 

받았던 피드백으로는 

1. 게시글 알림을 어떻게 아느냐 ?  

→ 알림 기능을 넣지는 못했다... 

알림 기능 구현을 위해서 Polling , Web Socket, SSE(Server Sent Events) 기술이 필요할 것 같다. 

 

2. 룸 생성이 되고 삭제는 어떻게 할거냐? 

→  leave를 하면 될 것 같은데, 아마 기능구현이 미완이라 물어보신 것 같다. 

 

 

이렇게 프로젝트가 마무리되고, 정글러들과 회식을 하였다.

좀 아쉽고 아직 의지가 남아있어 회식 후 조금이라도 공부를 하려고 했다.

 

아직은 더 긴장하고 열심히하고 나를 끝까지 밀어넣고 싶다. 

 

5일차에는 블로그 정리로 하루를 다 쓴거 같다...

아니 분명 JWT 한개 쓴게 전부인데, 이렇게 시간이 간다고 ? 

( 진짜 긴장 확 풀렸다... )

 

블로그 외에는 오늘 팀원이 바껴져서 스터디 계획을 짰다. 

할게 정말 많은데, 자율이라 나 스스로 잘해야한다. 

 

오후 4시 이후부터는 알고리즘 문제를 풀었고, 

재귀함수의 "하노이 탑" 부분이 너무 어려웠다 . 

하노이 탑이 대표적인 재귀함수인 것은 알고 있지만, 

막상 코드로 구현하려니 막막했다. 

( 코드 관련 정리는 아침에 업로드 할 예정 ! ) 

 

 

그리고 Computer systmems a Programmer's Perspective을 살짝 보았는데

생각보다 많이 어려웠다... 

 

https://www.youtube.com/watch?v=4CpHpFu_KYM&list=PLyboo2CCDSWnhzzzzDQ3OBPrRiIjl-aIE

 

해당 영상은 저 책을 만드신 분이고, 강의 영상들이 유튜브에 쭉 있다.

영어도 잘 못하지만... 열심히 봐야지 ... 

 

---

 

오늘 나 혼자 학습한 것은 크게 없다 ... 

다만 0주차 과제에 SSR과 CSR에 대해서 잘 몰라서 정리를 해본다. 

 

먼저 CDN에 대해서 알면 좀 더 쉽게 이해가 가능 할 것이다. 

 

🔖CDN (Content Delivery Network) : 

- 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크

- 지리적으로 가까운 CDN 서버에 저장되어, 서버와 멀리 떨어져 있는 사용자에게 빠르게 동영상 또는 이미지 파일을 제공한다.  

 

 

 

🔖CSR (Client Side Rendering)

사용자로부터 요청을 받은 서버는 클라이언트에게 HTML과 JS를 보내준다. 

클라이언트는 그것을 받아 렌더링을 한다. 

 

1. User가 Website에 요청을 보낸다.

2. CDN이 빠르게 저장 할 수 있는 링크를 클라이언트로 보낸다.

3,4. 브라우저는 HTML과 JS를 다운받는다.  (SSR과 달리 유저는 아무것도 볼 수 없음)

5. JS가 실행되고, 데이터를 위한 API가 호출되고 유저는 placeholder을 보게된다.

6. 서버는 클라이언트의 API 요청을 응답한다.

7. API로 부터 받아온 data를 placeholder 자리에 넣으면 페이지와 상호작용이 가능해진다. 

 

→ 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스크립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없다.

 

 

🔖SSR(Server Side Rendering)

 

1. User가 Website에 요청을 보낸다.

2. 서버는 즉시 렌더링 가능한 html 파일은 생성한다.

3. 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어  HTML 즉시 렌더링

(Javascript가 읽히기 전이여서 아직 조작 불가능)

4. 클라이언트가 JS를 다운

5. 다운 받아지는 사이에 유저는 컨텐츠는 볼 수 있지만, 사이트 조작 불가능 

(하지만 사용자의 조작을 기억하고 있음)

6. 브라우저가 Javascript 프레임워크를 실행

7. JS까지 성공적으로 컴파일 되면 기억하고 있던 사용자 조작이 실행되고 웹 페이지 상호작용

 

 

클라이언트는 서버에 요청을 하고 서버의 응답으로 HTML,JS 를 받는데,

SSR은 서버 측에서 미리 다 만들어서 주는 느낌이고, CSR은 클라이언트 측에서 만드는 느낌이다.

 

CSR이 HTML,JS를 한번 받으면 다른 페이지 이동시 나머지 부분 구성에 효과적이다.

SSR은 첫 페이지를 로딩한 과정을 정확하게 다시 시작한다. 

 

SEO 같은 경우, SSR이 서버 사이드에서 클라이언트로 넘어와 대응에 용이하다. 

하지만 SSR이 서버 자원을 더 많이 사용한다. (매번 요청하기 때문에)

 

 

 

ps. 

크래프톤 정글에 오길 정말 잘했다고 생각이 든다. 

옆에 동료들을 보면 정말 정말 열심히 한다. 

새벽 3시에 기숙사 복도에서 컴퓨터를 만지는 정글러들 응원합니다 !!