Personal Portfolio
이번 스프린트는 테스트를 통과할 필요가 없는 개인 포트폴리오 페이지를 제작해보는 스프린트였다!
지나고서 생각했었지만 테스트를 통과할 필요가 없을것 같아서 좋아했었지만 답이없으니까 더 시간이 오래 걸리고 만족이 안되는 것 같다.
이번 Personal Portfolio 스프린트는 리액트를 이용해서 SPA(Single Page App)를 제작해 보는 스프린트였다
SPA(Single Page App)
SPA(Single Page App)는 뭘까?
single page app은 말 그대로 1개의 페이지인 어플리케이션이다 하나의 페이지이기 때문에
페이지를 전환하지 않고 AJAX요청을 통해서 정보를 업데이트 하고 필요한 부분만 업데이트 하는 컨셉의 기능이다.
어떻게 실제로 페이지를 이동하지 않고도 브라우저액션이 작동할까?
html5에 History API의 pushState라는 기능을 이용하는 것이다.
히스토리 기록을 만들어줌으로써 뒤로가기 앞으로가기 버튼을 사용할 수있게 만들어주는게 핵심이다
중요한점은 / ... 이라는 url이 실제로 서버가 제공하지 않는다는 점이 핵심이다
브라우저상에서 네비게이션할때만 의미가 있을뿐 html요청을 보낼 수는 없다.
clienet side rendering & server side rendering
서버 측(Server-side)에서 렌더링을 할 경우, 새로운 웹 페이지를 보고 싶을 때마다 다음과 같이 새로운 페이지 요청이 필요합니다.
이것은 먹고 싶은 것이 있을 때마다 슈퍼마켓에 가는것과 비슷하다
그러나 클라이언트 측(Client-side) 렌더링을 사용할 경우, 슈퍼마켓에 한 번 방문하고 좀 더 시간을 들여 꽤 오랜 기간동안 먹을 음식을 구매하고, 먹고 싶은 것이 있을 때마다 슈퍼마켓에 가지 않고 냉장고에서 찾게된다.
각 접근법에서는 성능면에서 장점과 단점이 있다.
클라이언트 측 렌더링을 사용하면 초기 페이지로드가 느려진다. 네트워크를 통한 통신이 느리므로 사용자에게 콘텐츠를 표시하기 전에 서버를 두 번 왕복해야한다. 그러나 그 후에는 이후의 모든 페이지로드가 빠르다.
서버 쪽 렌더링을 사용하면 초기 페이지로드가 크게 느려지지 않지만. 그렇다고 크게 빠르지는 않다.
출처 : Client-side rendering VS. Server-sde rendering
오늘은 공부한 내용을 바탕으로 목업을 구현해 봤다.
그리고 리액트 내에서 라우터를 구현해 봤다.
테스트 케이스가 없으니까 능력이 부족한 디자인에 더 고민이 많아지고 느려진것 같았다.
