[Next.JS] SSG - getStaticPaths
·
Next.JS
getStaticProps에 대해 익숙하지 않다면, 아래 글을 먼저 보는 것을 추천 드립니다. [Next.JS] SSG - getStaticPropsgetStaticProps SSG(Static Site Generator)는 페이지를 호출할 때마다 서버에서 pre-render하는 SSR와 달리 빌드시점에 pre-rendering을 한다. // posts는 빌드 시점에 getStaticProps()에 의해 채워진다. function Blog({ posts }soojae.tistory.com getStaticPaths동적 경로를 사용하는 페이지에서 getStaticPaths라는 함수를 사용할 때 Next.js는 getStaticPaths에 지정된 모든 경로를 정적으로 미리 렌더링한다.pathspaths값은 ..
[Next.JS] SSG - getStaticProps
·
Next.JS
getStaticPropsSSG(Static Site Generator)는 페이지를 호출할 때마다 서버에서 pre-render하는 SSR와 달리 빌드시점에 pre-rendering을 한다.// posts는 빌드 시점에 getStaticProps()에 의해 채워진다.function Blog({ posts }) { return ( {posts.map((post) => ( {post.title} ))} )}// 이 함수는 Server Side에서 빌드 타임에 호출된다.// Client Side에서는 호출되지 않으므로 직접 데이터베이스 쿼리를 수행할 수도 있다.export async function getStaticProps() { const res = awai..
[Next.JS] SSR - getInitialProps, getServerSideProps
·
Next.JS
getInitialProps, getServerSideProps, getStaticProps 전부 Server Side Rendering(SSR)을 위해 필요한 함수들이다. SSR은 서버에서 미리 데이터를 채운 페이지를 브라우저에 보여준다. 이는 특히 SEO 구현에 유용하다.이번 시간은 getInitalProp와 getServerSideProps에 대해 알아보자. 각각의 렌더링 유형은 props를 페이지 컴포넌트로 전달된다. 초기 HTML가 내려왔을 때, 클라이언트 측에서 이 props 데이터를 확인 할 수 있다. 이는 페이지에서 적절한 hydrate를 위함이다. 그러므로 클라이언트에서 사용하면 안되는 민감한 정보(secret key등)를 props로 전달하면 안 된다. getInitialProps사실 ..
[Keycloak] keycloakify로 테마 커스텀 - 화면 작업 방식
·
Keycloak
※ 이전 게시물과 이어집니다. 아직 keycloakify 설치, 세팅하기 전이라면 다음 포스팅을 확인해 주세요. [Keycloak] keycloakify로 테마 커스텀 - 초기 설정버전 정보 keycloak: v20.0.3 keycloakify: v6 로그인 테마 커스텀 사실 keycloak의 테마는 이쁘지 않다... 이를 극복하기위해 직접 freeMaker(https://freemarker.apache.org/) 즉, .ftl 확장자 파일을 수정해야 한다. freeMasoojae.tistory.com 버전 정보keycloak: v20.0.3keycloakify: v6 화면 작업 방식화면 작업 방식은 2가지로 보면 된다.keycloak에서 기본으로 사용하는 login.ftl, register.ftl 등의..
[Keycloak] keycloakify로 테마 커스텀 - 초기 설정
·
Keycloak
버전 정보keycloak: v20.0.3keycloakify: v6  로그인 테마 커스텀 사실 keycloak의 테마는 이쁘지 않다... 이를 극복하기위해 직접 freeMaker. 즉, .ftl 확장자 파일을 수정해야 한다.freeMarker가 어떤 코드인지 확인하기 위해 keycloak 깃허브에서 .ftl 확장자를 찾아보면 아래와 같이 되어있다.짧은 코드라 읽히긴 하지만, 이 코드 양이 많아지거나 커스텀 로직을 추가해야 한다고 생각하면 쉽지 않다.  이를 위해 Joseph Garrone라는 개발자분이 React로도 개발이 가능하도록 (React로 개발 후에 빌드하면 ftl파일로 변화된다) keycloakify라는 라이브러리를 만들었다. Keycloakify 설치 keycloakify-advanced-s..
[Next.JS] _app.js, _document.js
·
Next.JS
_app.js, _document.js이 파일들은 pages폴더에 위치한 Next.JS에서 제공하는 로직을 override하기 위해 필요한 파일들이다. Next.JS에서 제공해 주는 기능만 사용한다면 생성하지 않아도 된다. 하지만 실제로 개발하다 보면 100% 커스텀해야 한다._app.js_app은 모든 페이지에 레이아웃 형태로 항상 적용되어 있다.페이지 이동 시에 상태가 변하지 않는다.필요한 초기 데이터를 getInitialProps에서 받아 컴포넌트들에 공유할 수 있다.global css를 추가하기 좋은 파일이다.// _app.tsconst App = ({Component, pageProps}: AppProps) => { return }}export default App;위 코드에서 Componen..