👻 성장을 이끄는 프레임워크: 프론트엔드 주니어를 위한 네 가지 질문

🪼 '나'는 어떤 성격을 가진 사람인가요?

🪼 무엇을 좋아하고 싫어하나요?

"일단 해보자" 라는 태도를 통해 이제까지 배웠던 개발 학습을 활용하고자 노력하고 있습니다.

새로운 기술을 배우더라도 빠르게 습득하기 위해 주도적으로 프로젝트를 시작하고 경험을 쌓는 것을 중요하게 생각합니다.

현재는 'figma'를 사용하여 디자인을 기획하고, Django와 React를 활용하여 프로젝트를 개발하고 있습니다. 이러한 프로젝트를 통해 오류가 발생하더라도 그것을 기회로 삼아 문제 해결 과정을 통해 배우고 성장하며, 기술 블로그에 작성하여 다른 사람들과 지식을 공유하고 커뮤니티에 기여하는 것을 선호합니다.

🪼 이뤄내고 싶은 것이 있나요? 정말 해결해보고 싶은 하나의 문제가 있다면 그것은 무엇인가요?

프론트엔드 개발자로서 웹 애플리케이션의 사용자 경험을 개선하고 싶습니다. 사용자 인터페이스 디자인을 개선하여 직관적이고 효율적인 사용자의 경험을 제공하고 웹 페이지의 성능을 향상시키고 반응성 있는 사용자 경험을 제공하는 목표로 프로트엔드 개발자로 성장하고 싶습니다.

웹 접근성을 개선하고 싶습니다. 모든 사람들이 사용할 수 있는 웹/앱을 만들고 싶습니다. 이를 위해 웹 어플리케이션의 접근성을 향상시키는 기술적인 해결책을 개발하고 보급하는 것이 목표입니다.

웹 애플리케이션의 취약점을 발견하고 보완하여 사용자의 개인정보와 데이터를 보호하는 것이 목표입니다.

---

---

👻 원티드 프리온보딩 챌린지 - CSR / SSR with Next.js

💡 CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요.

CSR(Client-side Rendering) : 클라이언트 측에서 페이지를 렌더링하는 방식

CSR은 SPA로 동작한다. (SPA(Single-Page Application) : 하나의 페이지로 구성된 웹 어플리케이션)

SPA는 브라우저에서 최초 단 한 번만 페이지 전체(HTML, CSS, JS)를 로드하고 이후 특정 부분만 Ajax를 통해 서버와 데이터를 받아오고 바인딩하는 방식 즉, 첫 요청시 딱 한번만 페이지만 불러오고 이동 시 기존 페이지의 내부를 수정해서 보여주는 방식이다. ex) React, Vue, Angular와 같은 자바스크립트 프레임워크들이 SPA의 방식

• CSR은 사용자의 요청에 따라 필요한 부분만 응답받아 렌더링 하는 방식이다. 단일페이지(SPA)와 같이 상호작용이 많은 웹 애플리케이션에서 유용하게 사용된다.

• CSR(Client-side Rendering)의 동작방식

  (1) 클라이언트가 서버에 페이지를 요청한다. > (2) 서버는 초기 HTML 및 JS파일을 전송한다.

  (3) 클라이언트가 JS를 실행하여 데이터를 가져와서 동적으로 컨텐츠를 생성한다.

  (4) 생성된 컨텐츠가 화면에 표시된다.

CSR 장점	CSR 단점
뛰어난 사용자 경험(UX) : 페이지 로딩 후에도 사용자 상호작용에 대한 빠른 응답이 가능하므로 사용자 경험이 향상된다.	SEO 문제 : 초기 HTML에는 동적으로 생성되는 컨텐츠가 포함되지 않기 떄문에 검색 엔진 최적화(SEO)에 문제가 발생할 수 있다.
서버 부하 감소 : 서버는 초기 페이지를 전송한 후에는 클라이언트에서 대부분의 작업이 이루어지므로 서버 부하가 줄어든다.	초기 로딩 속도 : 초기 HTML 및 JS파일의 다운로드와 실행에 대한 시간이 필요하므로 초기 로딩 속도가 느릴 수 있다.
캐싱 가능 : 초기 페이지를 제외한 대부분의 자원은 클라이언트에서 동적으로 로드 되므로 캐싱이 용이하다.	클라이언트 자원 사용량 증가 : 모든 렌더링 작업이 클라이언트에서 이루어지므로 브라우저의 자원(메모리, CPU등)을 더 많이 사용할 수 있다.

---

💡SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요.

SSR(Server-side Rendering)을 사용하면, 사용자는 서버가 클라이언트에게 완전히 렌더링된 페이지를 전송하기 때문에 나머지 애플리케이션을 백그라운드에서 로딩하는 동안 페이지를 보고 상호작용을 시작할 수 있다.

(1) SEO(Search Engine Optimization) 최적화

검색 엔진은 페이지의 컨텐츠를 크롤링하여 인덱싱한다. SPA는 초기에 빈 페이지를 로드하고 그 후 JS를 사용하여 컨텐츠를 동적으로 렌더링하므로 검색 엔진은 빈 페이지에서만 볼 수 있는데 이는 SEO에 부정적인 영향을 미칠 수 있다.

🤔 어떤 부정적인 영향?

1. 검색 엔진 크롤러의 이해 어려움

일반적인 HTML 페이지와 달리 SPA는 초기에 빈 페이지를 로드하고 JS를 통해 동적으로 콘텐츠를 렌더링하는데 이는 검색 엔진 크롤러가 페이지의 전체 콘텐츠를 인식하는데 어려움을 준다.

2. 검색 결과에 부정적인 영향

SPA의 경우, 검색 엔진이 페이지의 전체 콘텐츠를 인식하지 못할 수 있기 때문에 검색 결과에 반영되는 콘텐츠 양이 제한될 수 있다. 이는 웹 사이트의 검색 결과 노출 및 순위에 부정적 영향을 준다.

3. 페이지 인덱싱의 지연

SPA에서 초기 빈 페이지만 로드가 되기 때문에 검색 엔진이 실제 콘텐츠를 인식하기까지 시간이 걸립니다. 이는 새로운 페이지나 업데이트된 콘텐츠가 새로운 검색 결과에 반영되는 속도를 늦출 수 있다.

4. 사용자 경험의 저하

검색 엔진 크롤러 외에도 일부 사용자는 JS 가 비활성된 상태에서 웹 사이트를 방문할 수 있다. 이런 경우 SPA에서 제공하는 동적으로 렌더링되는 콘텐츠를 볼 수 없으며 이는 사용자 경험을 저하시킬 수 있다. SPA에서는 SEO를 고려하여 SSR 또는 Prerendering과 같은 방법을 사용하여 초기에 렌더링되는 콘텐츠를 검색 엔진이 인식할 수 있도록 해야 한다.

• Prerendering
  : SPA(Single Page Application)에서 사용되는 SEO 최적화 기술 중 하나, 웹 서버 또는 서비스의 백엔드에서, 사용자가 요청하기 전에 미리 페이지를 렌더링하여 정적 HTML 파일로 생성하는 과정
  : SEO 최적화를 위한 간단하고 효과적인 방법 중 하나)

(2) 초기 로딩 시간 감소

SPA는 초기에 필요한 자원(HTML, JavaScript, CSS)을 모두 다운로드해야 하므로 초기 로딩 시간이 길어질 수 있다.

SSR을 사용하면 서버에서 초기 페이지 상태를 렌더링하여 사용자가 빠르게 컨텐츠를 볼 수 있도록 할 수 있다 이후 JS를 사용하여 인터랙티브한 요소를 추가할 수 있다.

🤔 JS를 사용하여 인터랙티브한 요소 예시
: 사용자가 버튼을 클릭하면 모달 창이 열리거나 폼이 동적으로 생성되어 사용자로부터 정보를 입력할 수 있다.
: 실시간으로 주식 시세를 표시하거나 실시간 채팅 메시지를 업데이트 할 수 있다.
: 요소의 이동, 페인드 인/아웃, 스크롤 애니메이션의 구현을 할 수 있다.
: 탭, 아코디언, 드롭다운 메뉴 등의 컴포넌트를 사용자가 상호작용할 때마다 동적으로 활성화 또는 비활성화 할 수 있다.

(3) 소셜 미리보기 공유

소셜 미디어 플랫폼이나 메신저 앱과 같은 곳에서 URL을 공유할 때, 해당 페이지의 미리보기가 표시된다.

SPA에서는 초기에 빈 페이지만 로드되기 때문에 이 미리보기가 제대로 표시되지 않는다 SSR을 사용하면 페이지의 초기 상태가 서버에서 렌더링되므로 미리보기가 정확하게 표시됩니다.

---

💡 Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤,

해당 파일에 대한 간단한 설명을 첨부해주세요.

• https://nextjs.org/docs/getting-started (Next.js 세팅 가이드)
• https://github.com/vercel/next.js/ (Next.js Github 레포지토리)
• _document.js, _app.js, getServerSideProps 같은 요소들에 대해 설명을 요구하는 과제가 아닙니다. 오히려 Next.js 코드 베이스 내부를 살펴보라는 의미입니다.