Web (4) 썸네일형 리스트형 [웹심화] SSR 과 CSR (우리가 옳은 선택을 했나?) CSR(Client Side Rendering)과 SSR(Server Side Rendering)은 대척 관계에 있는 방식인만큼 장단점이 서로 엇갈려 있다. 따라서 서로의 장단을 정확하게 알고, 적재적소에 필요한 방식으로 구현하는 것이 중요하다고 생각한다. 우선, CSR 이 정확히 뭐고 SSR이 정확히 무엇인가? 1. SSR 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식 ⭕️ User가 Website 요청을 보냄. ⭕️ Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 html파일을 만든다. ⭕️ (리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.) ⭕️ 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러.. [웹심화] Next.js 1. Next.js 란 무엇인가? Next.js는 리액트 기반의 서버사이드 렌더링 프레임워크이다. 더보기 ⭕️ CSR (Client Side Rendering) CSR은 쉽게 말해서 클라이언트에서 렌더링을 모두 처리하는 것이다. 맨 처음 렌더링을 할 때 서버에서 페이지 전체를 받아서 보여주고, 사용자의 요청에 따라서 리소스를 서버에 요청하고 제공받아서 화면에 띄우는 방식이다. 서버에 HTML문서를 요청하는 것이 아니라 브라우저에서 자바스크립트로 화면을 렌더링 하는 것! CSR은 SPA에 적합한 방식이기 때문에, 화면에 렌더링을 할 때 HTML은 텅텅 비어있다. 또한 맨 처음에 화면에 필요한 자바스크립트파일(라이브러리 + 프레임워크 + 소스코드 등)을 몽땅 다운받게 되기 때문에, 첫 렌더링에 많은 시간이 .. [웹심화] SWR : 데이터를 가져오기 위한 React Hooks Front-End에서 서버와 소통할 때 axios라는 HTTP 통신 라이브러리를 이용한다. 하지만 axios는 한번 데이터를 가져오면 다시 호출하지 않는 이상 이전의 데이터를 그대로 유지하기 때문에, setInterval함수 등을 통해 주기적으로 데이터를 업데이트 해줘야 한다. 여기서 api콜과 관련된 데이터들의 상태관리의 필요성이 생겼고, SWR / React-Query / apollo 등의 라이브러리가 등장하게 되었다. 1. SWR (SWR이란 데이터를 가져오기 위한 React Hooks) SWR이 뭐냐..? 피클에서 리개선생님이 소개해줘서 사용했지만 아직까지도 정확한 동작원리를 설명할 수 없다는게 말이 안된다. 그래서 이번 기회에 SWR을 샅샅히 파헤쳐 보고 싶어서 이 주제를 선택하게 되었다~ SW.. 스크린 리더로 UX개선하기 사용자의 접근성을 개선하기 위한 과정은 여러가지가 있다. Semantic HTML, 키보드 인터랙션, 스크린리더, WAI-ARIA 등등 이중 스크린리더를 사용하여 시각에 불편함이 있는 사용자들의 경험을 개선하기 위한 방법을 알아보고자 한다. 1. 움직이는 단위 : 요소 (HTML Element) 2. 순차탐색 : 손가락을 좌우로 스와이프 하면서 앞뒤로 이동 3. 스크린 터치 : 터치한 영역에 있는 요소를 선택 4. 로터를 이용한 탐색 : 머리말/단어/글자 단위로 이동 ** 사전지식** 1. Accessible Name 스크린리더가 요소를 포커스 했을 때 읽는 값은 다음 중 하나로 결정된다. 1. author : 특별한 속성을 사용해서 정하는 값 (aria-label, aria-labelledby, alt.. 이전 1 다음
