너와 나의 프로그래밍

Next.js에 없어서 안될 공통 페이지 _app, _document, _error 페이지들이다. 처음에 CLI로 Next.js를 설치를 하면 기본적으로 _app는 자동적으로 생성이 된다. 그러나 _document, _error는 자동적으로 생성되지 않기 때문에 따로 만들어줘야한다. 그럼 그 세개의 공통페이지들의 역할이 뭘까? ./pages./_app.js 페이지를 맨 처음 초기화해주는 아주 중요한 녀석이다. 이녀석이 없으면 앱이 실행되지 않는다. React.js나 Vue.js에 꼭 필요한 app.js라고 보면 된다. 이 페이지는 처음 초기화를 해줄 뿐더러 페이지를 탐색할 때 상태 유지를 해주고 페이지들의 공통된 레이아웃을 담당해준다. 또 초기 데이터를 페이지에 주입(pageProps)해주고 Global..

Next.js의 기본적으로 내장되어 있는 styled-jsx는 따로 노드 모듈을 설치할 필요없이 바로 사용할 수 있다. 제일 많이 사용하고 있는 styled-component와 공통점이 굉장히 많아 둘 다 사용하는데 큰 어려움이 없다. 다만 styled-jsx을 사용할 때의 render 방식과 styled-component의 Nesting 기능은 지원히지 않는다는 단점이 있다. import css from "styled-jsx/css"; // 스타일을 적용할 객체 생성 const style = css` .container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .first-div ..

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의 정적, 동적 라우팅이 장점이라고 하는 이유는 맨 처음에 설명에서 적었듯이 "파일 시스템 기반"이라 라우팅을 해주기가 아주 편하다는 것이다. 그럼 "파일 시스템 기반"의 ..

React.js는 프론트엔드 기술의 대표적인 자바스크립트 라이브러리다. 전형적인 SPA(Single Page Application) 방식이며 CSR(Client Side Rendering)으로 동작한다. React.js가 나오고 나서부터 국내의 최신 프로젝트들은 React.js를 기반으로 하는 프로젝트들이 너무나도 많고 실제 React.js를 쓰고 있는 기업들도 굉장히 많다. 과거에 HTML, CSS, Javascript(jQuery)를 사용하던 옛날시대에서 이제는 React.js라는 최고의 자바스크립트 라이브러리로 성능은 물론 UI/UX에서도 많은 변화를 일으킬 정도로 정말 대단한 라이브러리다. 하지만, 이 마저도 만족스럽지 못했던 것이 바로 SPA 단점에서 부터 시작되었다. SPA 방식은 첫 사이트에..

[Javascript] 두 배열의 대한 비교 방법 실무에서나 알고리즘의 대한 공부를 할 때 두 배열의 대한 비교나 교집합(Intersection), 차집합(Difference)은 정말 많이 사용되는 것 같다. 특히 알고리즘을 풀 때 단골 문제가 아닐까 싶다. 실무에서 작업하는 도중 갑자기 차집합의 대한 문제가 있어 Stackoverflow에 아주 좋은 설명이 있어서 정리하려고 한다. 먼저 두 배열의 대한 제일 간단한 비교는 JSON.stringify를 통해 문자열로 변경해 준 뒤 비교하는 방법이 있다. 아마 이게 제일 간단할 것 같다. 교집합과 차집합 같은 경우엔 Array의 filter와 includes prototype Method로 간단하게 비교할 수 있다. 교집합(Intersection) arr2..