너와 나의 프로그래밍

Next.js는 기본적으로 "모든 페이지를 미리 렌더링"을 하는 특징을 가지고 있다. 이렇게 미리 렌더링해서 html 파일을 생성한다면 더 나은 성능과 SEO 이점을 얻을 수 있다. 그 중 Next.js는 빌드 시 페이지를 html로 만들어 요청시 제공해 주는 "정적 렌더링"과 페이지 요청 시 서버 사이드 렌더링을 통한 "서버 사이드 렌더링" 방식이 있다. 그 두가지 방식을 지원하는데는 Next.js에서 지원하는 getServerSideProps, getStaticProps를 활용할 수 있다. getServerSideProps 말 그래도 서버측에서 Props를 가져오겠다는 함수다. 보통 외부데이터를 서버에서 받아와서 초기 데이터로 Setting을 하고 페이지로 전달하도록 구성해준다. getServerSi..

Next.js는 장점으로 "파일 시스템 기반 정적라우팅(Static Routing)과 동적라우팅(Dynamic Routing)"을 지원한다. 간단하게 정적라우팅은 직접 경로를 일일히 설정을 해주는 것이고 동적라우팅은 한번 설정 해주면 라우팅 프로토콜을 통해 알아서 계산되어 경로가 정해진다. 라우팅이라는 용어는 보통 네트워크에서 많이 사용되는 용어로 나는 솔직히 많이 생소했다. 그냥 라우팅이라 하면 페이지 이동 경로설정이라고만 생각했는데 Next.js를 공부하면서 정적, 동적 라우팅을 하는 것에 대해 뭔가 낯설게 느껴졌다. Next.js의 정적, 동적 라우팅이 장점이라고 하는 이유는 맨 처음에 설명에서 적었듯이 "파일 시스템 기반"이라 라우팅을 해주기가 아주 편하다는 것이다. 그럼 "파일 시스템 기반"의 ..

프로그래밍에서 항상 나오는 단골이 for문이 아닐까 싶다. Vue.js에서도 우리가 생각하는 for문을 사용할 수 있다. 하지만 우리가 생각하는 for문과는 조금 다르게 Vue.js에서 사용하는 「v-for」문은 Rendering을 하거나 DOM에서 데이터를 처리할 때도 사용한다. 간단하게 반복적인 DOM을 생성할 수 있어서 Vue.js에서는 꼭 사용되는 디렉티브 중에 하나다. 그리고 v-for를 사용할 때의 중요한 부분은 배열의 대한 유니크한 「key」값을 꼭 설정해 줘야 한다. v-for문의 종류 기본적인 v-for문 Index를 활용한 v-for문(배열) 객체와 Key, Index를 활용한 v-for문(객체만 사용) 리터럴에 직접 적용하는 v-for문 참고 1 : https://kr.vuejs.or..