개발 연습 블로그

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 패턴 ..

패턴을 복제하는 코드의 로직은 다음과 같다. 1. 복제 버튼을 누르면 PatternButton 스크립트의 deleteDupleQueue(이하 딜리듀플)가 발동한다.2. 딜리듀플은 삭제 버튼과 호환되어 위 로직대로 발동한다.3. 복사 버튼을 눈렀다면 splice 버튼으로 복사할 인덱스 앞에 새 패턴을 생성한다. 여기까지는 일반적인 복사 패턴이다. 그런데 여기서 복사한 패턴들은 이름이 다른데 list 부분에서 얕은 복사가 이뤄지고 있다는 것이 1차적인 판단이었다. 쳇GPT한테 물어보니 JavaScript에서 객체나 배열을 `...`(스프레드 연산자)를 사용하여 복사할 때, 복사는 얕은 복사(shallow copy)만 이루어집니다. 이는 배열의 첫 번째 레벨까지만 복사되고, 그 안에 있는 배열이나 객체는 참조..

운을 어떻게 떼야 할지 모르겠다. 1인 혹은 소규모 개발은 에자일 패턴으로 개발하는 것이 선택이 아니라 필수라는 것을 느낀 시간이었다? 일단 AI 패턴을 전부 만드는데 성공했다. 모든 패턴을 구현하는데 성공했고, 기본적인 패턴 CRUD 중 R만 빼고 만들었다. React App (jaewoo-s-ai.vercel.app) React App jaewoo-s-ai.vercel.app 이미 배포 버전에 적용시키는데 성공했다. 단순 설계 단계에서는 예상 못했던 몇 가지 크리티컬한 구조적 문제가 있었다. 후반에 갑자기 몰아 겪은 트러블 이슈1. 패턴을 선택하지 않은 시점에서는 내부 코드 편집기에 접근하면 안된다는 점 간과2. 복사한 패턴들이 같은 키를 공유하고 있는 상황3. lodash를 사용하는데도 얕은 복사가..

State변수 통합으로 인해 컨디션 체크를 앞에서만 하게 되었다. 하지만 문제가 생겼다.  써야할 useState가 한도끝도없이 많아졌다. 처음 구조상으로는 해당 슬롯만 바뀌도록 하기에 useState가 겹칠일이 없었는데, 구조를 통일시키는 과정에서 useState를 한 번 4개를 가져다 고치게 되었다. 이건 좋지 못하다. 안그래도 가져올 배열들이 천지삐까리인데 한 번 바꿀 때 마다 useState를 4개씩 우다다다 고치면 많은 문제가 생긴다. useMemo로 조금이라도 효율화를 시킬 수 있지 않냐고 하는데, 이 배열이 정말 한도끝도없이 나타날 예정이므로 얼마나 많은 값이 메모리 상에 올라갈지 모른다.그러면 useState값을 하나로 합치면 되지 않을까?  배열을 받는 useState를 만들었다. 이 r..