개발 연습 블로그

서버 사이드에서 데이터 패칭이 이뤄지는 것의 차이는 단순한 성능의 차이(SSR이 초기 로딩시간이 긴 대신 SEO에 최적화/CSR이 그 반대인 것)말고도 사용자 경험에 있어서 큰 차이가 있다. CSR 부분은 기존의 리액트 방식과 유사하기에 로딩 관련 표시 부분이 쉬웠지만 SSR에서는 아니다. 여기서 차이가 생기는데, 그것이 로딩 컴포넌트다. 로딩 페이지를 원하는 페이지 폴더에 로딩 컴포넌트를 생성하고 작성하면 되는 것이다. NextJS는 streaming을 통해 html을 쪼개서 보낸다. 첫번째로 layout이나 navigation을 보내고, 그 다음으로 로딩 컴포넌트를 보낸다. 백엔드와의 소통이 끝나면 그제야 온전한 페이지를 드러낸다.

서버 사이드에서의 데이터 패칭이 이뤄지는 방법은 간단하다.(강의에 따르면) 그냥 이렇게 하면 된다는 것이다. 리액트 쿼리로 뭐 이것저것 할 필요없이(GPT의 주장에 따르면 리액트 쿼리도 서버 사이드 패칭을 할 수 있다고 하지만 여기선 논외) 그냥 컴포넌트 만들 듯이 하면 된다는 것이다! 간단하긴 하지만, 나는 이미 클라이언트 사이드에서 리액트 쿼리를 쓰기 때문에 서버 사이드에서도 쓰는 방법을 찾아봐야 할 거 같다. 우선 NEXTJS의 기본 기능을 전부 파악하는 것이 먼저지만 말이다.

클라이언트 사이드에서의 데이터 패칭 클라이언트 사이드(이하 클라단)에서의 데이터 패칭은 기존 리액트에서 사용하던 방식과 거의 유사한 것 같다. 이런 식으로 하면 아주 간단하고 원시적으로 데이터 패칭이 이루어진다. 다만 여기에 로딩이나 실패 체크가 없는 것이 문제다. 그냥 기본적인 패칭이지만 나는 여기에 react-query(이하 리액트쿼리)를 사용할 것이다. 다른 블로그 글을 참조하여 app/layout 파일에 쿼리클라이언트를 심어준다. 기존 리액트에서는 index에서 하던 것을 여기서는 layout에서 한 것이다. 먼저 간단하게 axios구조를 만들어주고 그것을 받아낼 api 파일을 다시 생성한다. 여기까지 일단 수도코드 수준으로 짠 탓에 잠깐 세이브 하자마자 에러가 터졌다. 검색해보니 쿼리클라..

url에서 데이터를 가져오는 방법을 nextjs15에서는 프로미스로 관리한다. 그래서 async/await가 필요하다.(서버단에서 해결할 것이면) 위에 타입은 무시해도 된다. 14버전 방식으로 하다가 꼬인 것이다. 15버전에서도 쓸 수 있지만 크게 의미없어 보인다. 15 버전에서는 이렇게 async/await로 작동시켜야 서버단에서 해결이 가능하다. 클라단에서 해결하고 싶다면 "use client"로 React.use를 사용해야 한다.

레이아웃은 기존 리액트의 리액트-라우터에 쓰던 방식과 비슷하게 작동한다.(내가 배운게 맞다면)import React from "react";import { BrowserRouter, Route, Routes } from "react-router-dom";import Main from '../pages/Main';import { styled } from 'styled-components';import Header from "../components/Header";import { scroller } from "react-scroll";import Test from "../pages/Test";const Router = () => { const scrollToComponent = (componentId: s..

nextjs가 리액트와 다른 점은 여러가지가 있지만 가장 인상적인 것은 라우팅 구조라고 생각한다. 기본적인 리액트는 리액트-라우터로 Shared 폴더에 Router파일을 만들고 import React from "react";import { BrowserRouter, Route, Routes } from "react-router-dom";import Main from '../pages/Main';import { styled } from 'styled-components';import Header from "../components/Header";import { scroller } from "react-scroll";import Test from "../pages/Test";const Router = () ..

일단 기본적으로 설치하는 방식은 기존과 동일하다. 프로젝트 폴더를 생성한 다음 npm init -ynpm install npm install react@latest next@latest react-dom@latest app 폴더 생성기초적인 page파일 생성기초적인 layout파일 생성기초적인 component파일 생성 이걸로 기본 세팅은 끝이다.

정말 오랜만에 글써보는 것 같다. 그동안 알바도하고 좀 앓아눕기도하고 일들이 많았다. 그래도 틈틈히 작업을 해서 포폴을 고쳐보는데 성공했다.  기존의 포폴이다. 나는 나름 정갈하게 만들었던거 같은데 가끔씩 피드백을 받을 때 마다 내용을 추가하던가 어떻게 좀 해보라는 말을 듣곤 했다.......아니 바꾸고 싶어도 뭐 경력이 쌓이고 프로젝트 참여를 했어야 "나 이거 했슴다~ 엣햄"하지.... 그래도 어떻게 해보라는 말을 무시할 수는 없어서 짬내서 바꿔보았다.  마우스 드래그를 줄이고 클릭같은 인터랙션을 높이는 식으로 가보았다.  외부 CSS div는 싹다 뜯어 고쳐야했지만 프로젝트, 스킬 소개 리스트 같은 알맹이 컴포넌트들은 반응형 웹 추가를 하면서 최대한 재활용하였다.  스킬소개, 자기소개 같은 것들은 얼..

테일윈드 CSS에 대해서는 과거 잠깐 알바하던 시절의 동료로부터 대략적인 개요를 들었었다. 스타일드 컴포넌트가 말 그대로 스타일링을 컴포넌트 식으로 만드는 것이면 테일 윈드는 클래스 명에다 CSS를 붙이는 거라고. 그런데 CSS를 클래스 명에다 붙이는 건 기본적인 HTML의 방식 아니었나? 하는 생각과 컴포넌트 재사용성을 몇 번 겪어본 경험 때문에 어떻게 쓰는 건지는 알지만 따로 프로젝트에 적용하지는 않았었다. 그러므로 약간 복습하는 겸하여 간단한 토이 프로젝트에 붙여넣기로 했다. 우선 직전 프로젝트에서 사용했던 마비 옛채 폰트 파일을 적용해본다.  실행한 결과 제대로 폰트 적용이 완료되었다. 이렇게 글로벌 폰트를 지정했으니 이제 App.css 파일에서 이 div를 중앙정렬 시킬 css를 만들어보자.  ..

한동안 소식이 뜸했다.   일단, 완성은 끝났다.  마지막 글 작성일 이후로 올린 깃들을 보면 단순한 CSS 반응형 웹 수정만 있던 것이 아니었다. 우선 클론코딩을 겸하는 AI 메이커 기능을 완성하고나서, 간단한 피드백들을 받아보니 기존 재우스 AI를 고칠 수 있으면 좋겠다는 의견이 다수 있었다.기존 메이커는 접근성이 워낙 낮아서 웹으로 빠른 접근을 가능하게 했지만 그것으로도 모자른 것이었다. 사용자들은 자신만의 AI를 직접 만드는 것보다, 내가 만든 AI에서 사용자 취향을 가미하는 것이 훨씬 빠르고 쾌적하다는 것이었다. 그러면 해야하는 것은 한가지. 기존 AI를 쪼개서 메이커에 패턴으로 추가하는 기능을 만드는 것이다. 하지만 문제가 있었다. 이러한 종류의 후속 조치를 생각하고 기존 재우's AI 패턴 ..