스스로 빛을 내는 개발자 스스로 빛을 내는 개발자

보통 CSS-in-JS는 서버컴포넌트에서는 지원이 안돼서 style component를 사용하기 위해 babel을 사용하는 방법이 있는데, NextJS 13부터 app router 구조로 바꾸면서 기존 방법이 불가능해졌다. ("use client"를 선언하고 사용하면 가능하지만, css를 위해 서버컴포넌트를 포기하고싶지는 않았다.) 그래서 무작정 globals.css에 모든 css를 작성했다.(module.css는 개발자모드와 css를 비교하면서 오류잡기가 힘들어서 사용하지 않았다.)하지만 모든걸 global.css 파일에 작성하다 보니 수정하고 관리하는게 너무 힘들었다. stylex 란?nextjs 13 + 서버컴포넌트에서도 사용 가능한 CSS-in-JS 를 찾아보다가 stylex를 알게돼었다.styl..

nextJS 기반 웹사이트를 제작중이고 컨텐츠를 사용자가 자유롭게 업로드하고 수정 및 삭제할 수 있어야 하기 때문에 cms(contentful)를 이용해 컨텐츠를 관리하고 데이터를 연결해 사용했다.  웹사이트 제작 요구사항중 하나가여러개의 이미지를 원하는 레이아웃 구성으로 배열하고 원할때 레이아웃 구성을 바꿀 수도 있게 하는 것이였다! 처음에 생각한 방법은 사용자 입장에서도 너무 불편하고 개발자 입장에서도 비합리적인 방법이였다. 이미지를 저장하는 필드를 여러개 만들어놓는 방법을 생각했다.1레이아웃 필드, 2레이아웃 필드를 번갈아가면서 여러개 만들어놓고,원하는 필드에 이미지를 넣어 원하는 구성을 만들 수 있도록 했다. 그래서 사용자가 더 쉽고 자유롭게 이미지를 구성하는 방법을 고민했다.사용자 입장에서는1...

이름 명단을 출력하고 이름을 클릭하면 이름과 같이 저장된 이미지를 출력하는 컴포넌트를 작성했다.처음 랜더링했을 때 첫번째 이름의 이미지가 보이므로 공평성?의 문제로 첫번째 이름을 계속 바꾸어야했다.랜덤으로 뽑기엔 이름을 찾을 때 불편할 것 같아서 이름을 한칸씩 당겨서 출력하기로 했다예를들어 인덱스가 0부터 5까지면,012345 / 123450 / 234501 / 345012 / ... 이런식으로 출력할 예정이다. 새로고침 할때마다 첫번째 이름이 달라져야하기 때문에 localStorage를 사용하기로했다.왜냐면 변수는 랜더링할때마다 초기화되니까.. //로컬스토리지에 저장된 값을 가져와 저장하고, 로컬스토리지값을 갱신const [firstIndex, setFirstIndex] = useState(0);con..