분류 전체보기15 CSR vs. SSR 그리고 Next.js 1. CSR(Client Side Rendering) CSR은 서버로부터 받은 HTML, CSS, Javascript파일을 browser side에서 렌더링하는 방식입니다. React나 Angular등 modern frontend frameworks로 만들어진 어플리케이션이 이 방식을 사용합니다. 1.1 CSR 순서 유저가 브라우저에 www.naver.com(예시)를 입력하면, 서버는 빈HTML파일을 유저에게 보내면서 CSS, Javascript 등 렌더링에 필요한 파일을 함께 보냅니다. 모든 자바스크립트 파일이 다운로드 될 때까지 유저는 빈 화면을 보게 됩니다. 자바스크립트 다운로드가 완료되면, 모두 컴파일 됩니다. 그 이후 API 등 디스플레이에 필요한 추가 데이터들을 호출하고, 동적 웹페이지를 완성.. 2023. 4. 16. SPA(Single Page Application) 싱글 페이지 어플리케이션(single-page-application)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 렌더링 하는 웹 어플리케이션 혹은 웹사이트를 말합니다. SPA의 핵심 가치는 사용자 경험(UX) 향상에 있으며 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어 Mobile First전략에 부합합니다. 전통방식? link tag를 이용하는 전통적인 화면 전환 방식은 새로운 페이지 요청 시마다 정적리소스가 다운되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생합니다. 간단한 웹페이지라면 문제될 것이 없겠지만 복잡한 웹페이지의 경우, 요청마다 중복된 html, css, javascript를 매번 다운로드해야하므로 속도 저하의 요인이 됩니다.. 2023. 4. 16. 왜 React를 써야할까? React는 2013년 페이스북에서 오픈소스로 공개한 자바스크립트 라이브러리로, 페이스북에서 이용하고 있을 뿐 아니라 AirBnB, Uber, Netflix, Instagram 등 우리가 자주 사용하는 웹 어플리케이션 중 상당수는 리액트로 만들어졌습니다. 1. React is a JavaScript library for building user interfaces 공식사이트는 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 React를 소개합니다. 만약 많은 기능을 제공하지 않는 웹사이트거나 사용자와의 인터렉션이 별로 없는 웹사이트라면 HTML, CSS, Javascript로 충분히 그 기능을 제공할 수 있습니다. 그러나 프로젝트 규모가 커지고 다양한 유저 인터페이스와 인터렉션을 제공해야 한다면.. 2023. 4. 16. React - Input 자동완성(Auto Completing) 기능 만들기 1. 만들고 싶은 기능 정리하기 auto completing은 검색기능을 만들 때 필수적으로 구현해야 하는 기능입니다. 알파벳을 하나 이상 input에 입력하면 그 입력값으로 시작하는 추천 검색어가 랜더링돼 user에게 보여지는 것이 핵심입니다. 입력 알파벳이 하나 이상이면 suggestion list 랜더링하기 입력 알파벳이 하나 이상이면 clear button이 보이도록 하기 suggestion을 클릭하면 그 값을 input value로 세팅하기 input에 알파벳을 입력 후 suggestion을 클릭하지 않은 상태에서, input과 suggestion 외부에서 클릭이벤트가 발생했을 때 4-1. suggestion list가 닫히도록 하기 4-2. input값은 입력값 그대로 남아 있게 하기 clea.. 2023. 4. 16. 이전 1 2 3 4 다음
