프레임워크

Next.js 프레임워크는 Data Fetching 시에 SSR(Server-side Rendering), SSG(Static-site Generation), 그리고 Dynamic Routing 등의 세 가지 방법을 제공한다. 각각의 방법에 대해서 하나씩 깊게 알아보고 언제 어떻게 써야 하는지 사용법을 공부해 보고자 한다. SSR(Server-side Rendering) 만약 어떤 페이지에서 getServerSideProps 함수를 호출하면, Next.js는 getServerSideProps에서 데이터를 반환받을 때 마다 이 페이지를 pre-rendering 할 것 이다. export async function getServerSideProps(context) { return { props: {}, //..

Next.js는 React에서 기존에 CSR(Client Side Rendering)의 특징에 더하여 SSR(Servers Side Rendering)을 혼합하여 운영환경에서 최적의 퍼포먼스를 낼 수 있게 도와주는 프레임워크이다. 2020년 11월 현재 버전 10.0.1이 나와있으며 다음과 같은 기능들을 지원한다. 페이지 기반 라우팅 (동적 라우팅) 데이터 패칭 빠른 성능을 위한 코드 스플리팅 CSS in JS 이미지 최적화 빠른 컴포넌트 재활성화 정적 파일 처리 타입스크립트 환경 변수 브라우저 지원 각각에 대한 자세한 사항들은 이후에 하나씩 알아보고자 한다. Next.js는 SPA에서 CSR이 가질 수 밖에 없는 한계들을 보완해 주는 도구이다. SSR과 CSR에 대한 포스팅 참고 CSR은 초기 로딩 속..

Vue.js란 무엇인가? Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다. Vue.js의 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽다. Vue.js는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원한다. Vue.js 의 주요 특징을 정리해 보면 다음과 같다. 1. 가상 DOM(Virtual DOM): Vue.js에서는 React.js, Ember.js 프레임워크와 유사하게 가상 DOM을 사용한다. 가상 DOM은 원본 HTML DOM을 표현하는 메모리 상의 가벼운 DOM 트리로, 원본 DOM에 영향을 미치지 않고 업데이트를 할 수 있다. 2. 컴포넌트(Components): ..

(본문에 앞서, 저의 솔직하고 주관적인 후기임을 먼저 밝혀드립니다.) 작년 여름, 나는 6개월짜리 웹 개발 국비지원 과정을 수강하였다. 당시 나의 상황을 간단하게 설명하자면... 영국에서 교환학생을 돌아온 직후였고, 거기에 있는동안 너무 잘 놀고 와서 ㅋㅋ 코딩을 좀 제대로 해야 할 필요성을 느끼고 있던 시기였다. 인터넷 강의는 이전에도 몇 번 들어보았는데 강제성이 없어서 그런가 끝까지 완강을 못한 적이 더 많았던 것 같다. 뭔가 항상 시작을 하고 흐지부지 되는게 싫었고, 그렇다고 혼자서 무언가를 하자니 할줄 아는 것이 거의 없던 상황이어서 여러가지 고민이 많았던 시절이었다. 제대로 코딩을 배워보고 싶었다. 가장 먼저 알아본 건 패스트캠퍼스나 코드스테이츠, 코드스쿼드 등의 부트캠프였다. 나는 가을학기 휴..