프론트엔드 개발이란?
용어 정리
www란?: 인터넷 통신망을 이용하여 전세계 모든 사람들이 정보를 공유할 수 있는 공간 === 브라우저.
하이퍼 텍스트란?: 다른 문서로 이동하게 해주는 텍스트.
클라이언트: 서비스 사용자 또는 사용자의 디바이스
클라이언트 영역: 디바이스에서 서비스를 접하는 영역인 화면
인터페이스: 어떠한 기능을 동작시키기 위한 매개체
userInterface(UI): 사용자가 화면에서 서비스를 이용하기 위한 도구, 수단
프론트엔드 개발자의 역할
사용자가 웹 서비스를 편리하고 빠르게 사용하도록 서비스 사용 경험의 만족도를 높히는 역할
- 마크업과 스타일링 통해 ui 제작
- 사용자의 입력을 비즈니스 로직에 따라 처리
- 서버와 통신해 가져온 데이터를 가공해 출력
비즈니스 로직이란?
- 사용자의 데이터를 서비스 정책에 따라 처리하는 것.
- 프론트: 입력 값이 유효한지 검사 - 비밀번호 중복 확인, 이메일 형식 확인, 필수값이 입력됐는지 확인
- 백엔드: 데이터베이스 영역에서 데이터를 조작하거나 확인하는 것 - 회원정보 수정, 게시물 삭제
프론트엔드 개발의 궁극적인 목표
- 편리한 ui와 빠른 서비스 환경을 제공하는 것
프론트엔드 개발자의 중요성이 커지게 된 이유
- 웹의 복잡도(기능)가 증가해서 사용자 인터랙션이 많아졌고, → 웹에서 할 수 있는 기능이 많아졌다는 것
- ajax기술과 csr이 등장하면서 클라이언트 단에서 처리해야할 로직들이 많아졌기 때문입니다.
ui개발자와 다른점?
- 서버와 통신한다는 점
- 사용자 다양한 인터랙션(이벤트)에 따른 동작을 구현하고 예외를 처리해야함
웹의 종류
정적 웹
동적 웹
ㄴ ssr
ㄴ csr
html의 내용을 데이터 베이스에서 실시간으로 데이터를 가져와서 만드냐?, 동적으로 변경 가능하냐?
yes - 동적 웹
no - 정적 웹
동적 웹에서 html내용을 서버에서 구성한 채로 클라이언트로 보내냐?
yes - ssr
no - csr
html의 모든 내용을 브라우저에서 구성하냐?
yes - csr
no - ssr
정적 웹 ssg
서버에 이미 만들어진 여러 html이 그대로 전달되는 웹페이지
- 누가 언제 접속하든 같은 화면을 보여주는 웹
- 페이지에 속한 데이터가 이미 담겨있다.
- 변화가 거의 일어나지 않는 페이지들에 적합
장점 - 이미 만들어져있기 때문에 로드 속도가 빠르다.
단점 - 데이터를 추가, 삭제, 수정하려면 일일이 서버에서 페이지를 내려받아 수정 후 다시 업로드해야한다. (수동으로 직접 조작)
동적 웹
클라이언트가 요청하면 그 요청에 따라 데이터베이스에서 실시간 데이터를 가져와 html파일을 만들어서 보내는 것
- 클라이언트 요청에 따라 실시간 데이터가 반영된 화면을 보여줌
- 누가, 언제 접속했냐에 따라 다른 화면을 보여주는 웹
- 실시간 db의 동적인 데이터를 담아서 html를 완성해 전송한다
- 요청하는 즉시 실시간 데이터를 담아서 페이지를 만든다
- 데이터베이스의 변화에 의존된다.
- 화면이 자주 변경되지 않는 사이트에 적합
장점 - 사용자에게 다양한 정보를 제공할 수 있고, 데이터를 추가, 삭제, 수정이 간편하다
단점 - 웹페이지 전달 전 처리 작업을 해야하므로 로드 속도가 느리다, 데이터를 조작할 또 다른 서버가 필요해 비용이 든다.
ssr
새로운 데이터를 요청할 때마다 서버 쪽에서 페이지(html)를 완성시켜서 보내주는 방법.
- 서버에서 html에 데이터 반영해 클라로보낸다.(렌더링 준비완료)
- 정적 파일 요청할 서버, api로 데이터 불러올 서버 따로 불가능.
- ttv, tti가 일치하지 않음(화면 완성되어도 js가 로드되어 적용되기까지 까지 인터랙션을 못한다.)
- 화면 변경이 적고 노출이 잘 되어야하는 서비스에 적합하다 (ex-홍보 사이트)
장점- 이미 완성되어 있어서 첫 렌더링이 빠르다. 검색엔진 최적화에 유리하다.
단점- 매 요청마다 html이 새로 그려지기 때문에 화면 깜빡임이 생긴다.
csr
처음에만 빈 html을 받아오고, js를 이용해 클라이언트 단에서 페이지 내용을 구성하는 방법입니다.
- 첫 로드 이후 화면을 변경해야할 때 ajax기술을 사용해 비동기로 데이터만 불러와 일부만 변경하는 방법을 사용한다.
- 비동기여야지 데이터를 받아오는 동안 다른 일이 수행될 수 있어서 화면이 유지된다.
- 정적 파일 요청할 서버, api로 데이터 불러올 서버 따로 가능
- 부드러운 화면 변경에 따른 사용성 개선과 렌더링 효율성을 위해 등장
장점
- 새로 고침 없이 부드러운 화면 변경이 가능하다.
- 변경된 부분만 바꾸기 때문에 불필요한 렌더링을 줄일 수 있다.
단점
- 빈 html이기 때문에 검색 엔진 최적화에 불리하다.
- 초기에 모든 파일을 부르기 때문에 초기 로드 속도가 느리다
(js파일이 많고 크다면 그만큼 적용되는 시점이 늦어진다.) - js가 로드되어 적용되기 전까지 화면이 보이지 않는다.
어떤 서비스에 적합할까?
- 유저랑 상호작용이 많아 화면 변경이 잦고
- 대부분이 고객의 개인 정보로 이루어진 페이지들이라 검색엔진이 필요없는 서비스
- 유저들의 개인 정보와 데이터를 받아서 서비스하는 웹애플리케이션 - sns
개선점
- code splitting을 통해 필요한 부분을 먼저 로드하는 방법으로 초기 로딩속도를 개선할 수 있다.
- pre-rendering으로 seo를 개선할 수 있다.
웹앱 구성 형태
애플리케이션이란?: 특정 기능을 수행하는 프로그램
애플리케이션 구성 형태: 페이지가 몇 개냐
spa
- 하나의 html파일로 구성된 웹애플리케이션
- 하나의 파일에서 데이터만 갈아끼우기 때문에 csr방식이 적합하다.
mpa
- 여러 html파일로 구성된 웹애플리케이션
- ssr이 적합
SSR과 CSR의 접목
next.js는 CSR방식의 React에서 SSR방식 또한 쉽게 사용할 수 있는 프레임워크이다.
CSR, SSR 방식의 장점을 모두 가지고 있다.
- 사용자가 초기에 server에 페이지 접속을 요청한 경우 SSR방식으로 렌더링 된 정적페이지를 클라이언트에 보낸다.
- 클라이언트에서 js를 다운로드 받고 React를 실행한다.
react를 실행하는 동안 1에서 pre-rendering된 페이지를 보게된다.
React가 로딩이 되면 pre-rendering된 페이지와 연결되어 일반적인 React app 처럼 작동하게 된다. (hydration) - 사용자가 페이지와 상호작용을 하며 다른 페이지로 이동할 경우 CSR방식으로 server가 아닌 클라이언트에서 처리한다.
장점
초기로딩 시간도 짧고, SEO가 유리하다.(ssr)
페이지 간 전환 속도도 빠르고 부드럽다.(csr)
Next.js 핵심기능
1. 코드 스플리팅 - 현재 페이지에 필요한 컴포넌트만 로드함
2. 간단한 클라이언트 사이드 라우팅 제공
3. getInitialProps() - 미리 데이터를 가져온 후 렌더링하는 것.
기존에는 컴포넌트가 먼저 실행되어 렌더링을 한번 하고 나서 데이터를 가져온 후 리렌더링했는데
getInitialProps을 사용하면 컴포넌트 첫 렌더링 전에 데이터를 미리 가져와서 렌더링 한번으로 페이지를 구성할 수 있다.
