코딩을 박터지게 죽을때까지

휴일에 사부작사부작 Next 13을 건드리고 있다. 가볍게 블로그나 만들면서 공부를 해보자 하고 건드리는데, 이러한 메뉴를 만들고 있다. ** 요구사항 1. 하위메뉴가 있을 경우에, 그 상위메뉴가 클릭될 시, 해당 메뉴들이 보여야 한다. 2. 현재 페이지에 해당하는 메뉴는 빨간색이다. 3. hover는 파란색이다. 4. 하위 메뉴는 오른쪽 정렬이다. 5. 현재 페이지가 하위메뉴에 해당할 경우 그 상위 메뉴도 빨간색이 된다. 정규화해서 표현하자면 아래와 같다. 처음에는 아무 생각없이 RSC로 다 구현을 하려고 했다. 어차피, 클릭하면 해당 페이지를 띄우는 거니까, RSC에서 사용이 제한되는 onClick의 인터렉션이 걸리지는 않는다고 생각했다. 그런데 잊고 있는 요소가 있었다. 1. 하위메뉴가 있을 경우에..

어릴때부터 공부를 하다보면 가끔 보는 순간엔 다 이해했다고 생각했는데, 지나고 나면 뭐였더라? 하는 경우가 있다. 프론트엔드를 공부하면서, 처음으로 느낀게 SSR과 RSC의 차이이다. 맨날 공부하는 동안에는 '음 그렇지, 이런 차이이지' 하다가 지나고나면, '그 두개가 뭔 차이더라'를 시전한다. 금붕어가 된 느낌이다. 그래서 좀 정리해보려고한다. 좀 잘못 이해했을 수도 있는데, 누군가 지적해주시면 감사합니다 1. SSR 일단 과거의 SSR과 NextJS의 SSR은 정확히는 다르고, 과거의 SSR의 이점과 CSR의 이점을 섞었다는 정도로만 알고 있다. 1) 풀스택 시절의 SSR(MPA 시절) - 서버에 미리 HTML/JS/CSS 문서가 작성된 파일이 올라가 있고, 클라이언트측의 요청시마다 해당 페이지의 문..

1. 상황 vercel 공식문서대로 styled-components를 위한 를 만들어서 페이지를 감쌌음에도 불구하고, 아래와 같은 에러가 뜬다.(웹페이지는 정상작동하기는 한다) 2. 원인 및 문제 첫 렌더때는 상관없다가, 새로고침을 하거나 하면서 클라이언트쪽에서 렌더를 하고 SSR 시의 클래스명과 달라지는 것이 원인이다. 그런데 문제는, 그걸 위해서 vercel 공식문서에서 적혀있는대로 StyledComponentsRegistry 를 만들어서 페이지를 감싸주는건데 이것이 정상작동하질 않는다는 것이다. 3. 해결 기존에 스타일드컴포넌트를 사용할때 자동완성으로 import { styled } from "styled-components"; 로 import를 했다. 아마 다들 그럴 것 같다. 그런데 뭔가 바뀌었..

1.상황 NextJS 13, styled-components를 사용하면서 발생하는 경고문이다. 요컨데, styled-component에 prop으로 "gap"이라는 애가 DOM으로 직접 쏴진다는 소리로 보인다. 웹페이지를 사용하는데 특별히 문제가 일어나고 있진 않은데, 경고문에서 권장하는대로 해결하기로 했다. 2. 해결 컴포넌트의 prop앞에 프리픽스 '$'를 붙여준다. const VDefault = styled.div` display: flex; flex-direction: column; width: ${({ width }) => width ? width : "100%"}; height: ${({ height }) => height ? height : "100%"}; gap: ${({ $gap }) =..

NextJS 13을 하면서 SSR과 CSR에 대해서 통신관련하여 고민을 하게 되었다. SSR의 목적을 먼저 생각해보자. SSR은 기존 SPA의 SEO 취약점을 커버함과 동시에, 기존 SPA에서 첫 로딩이 느려지는 부분에 대해 보다 더 나은 UX를 제공하기 위한 것이 주 목적이다. 기존 SPA에서는 텅빈 HTML을 서버에서 브라우저에 던져주고 JS코드를 넘겨주면, 코드에 맞춰서 JS엔진이 HTML을 채워가는 형식이다. 따라서, SPA는 컨텐츠가 없으니 SEO가 안되고, 컨텐츠를 채워서 렌더링해야하니 첫 로딩이 길어지는 것이 아쉽다. 이를 보완하기 위해서 SSR을 도입하는데, 문제는 서버에서 렌더링해서 전달해주는 것은 컨텐츠가 작성되어있는 HTML 파일이다. JS를 적용한 파일이 아니기 때문에 SSR 컴포넌..

사이드프로젝트로 GraphQL이랑 emotion을 사용하고 SSR/CSR을 좀 연습하고자 했다. 상황 NextJS13 을 설치하고 진행하는데 emotion을 설치하고 나니 기본 페이지조차 렌더링되지 않고 에러가 뜬다. 그동안 "use client" 명령으로 모두 CSR로 진행을 하다가.. 이게 무슨 의미가 있나 싶어서 어떻게든 해결해보고자 했다. 원인 NextJS 13버전은 버그가 있는데, CSS-in-JS가 지원되는 라이브러리가 한정적이다. CC에서 지원이 되네 안되네 하는데, 사실 그냥 라이브러리를 설치해서 패키지 등록되고 하면서 세팅들이 이루어지면, SSR에서 emotion 자체를 부르지도 않았음에도 에러가 뜬다. Hello world처럼 기본으로 제공되는 NextJS 로고 화면 조차 에러가 떠서 ..

Cafe Log 프로젝트의 회고 추가작성을 잠시 미루고, NextJS와 emotion을 한번 사용해보기로 했다. (회고로 적을 게 많다보니 생각이 잘 정리가 안되는데.. NextJS랑 emotion을 꼭 한번 사용해보고 싶어서.. 추가적인 회고 포스팅은 일단 보류하기로 했다..) 듣자하니 넥스트로 서버사이드 렌더링을 할수있고 풀스택 프레임워크라서 기본적인 백엔드 기능정도는 만들어볼 수 있을 것 같다. 그래서 빨리 좀 공부해보고 싶었다. nextjs 사이트가면 문서에 자동설치가 적혀있다 npx create-next-app@latest 터미널에 위와 같이 치면 아래와 같이 뭔가 줄줄이 옵션을 물어본다. 내가 원하는 옵션으로 한다. 일단 이번에는 emotion을 사용해볼 계획이므로, tailwind CSS 는..

프로젝트 초반에, 디자인이 자꾸 바뀌고 기획도 계속 바뀌는데, 동적스타일링을 평소대로 하다가, 색다르게 해보고 싶어져서 컴파운드 패턴을 활용하기로 했다. 모든 CSS 요소를 쪼개서, 컴파운드 패턴의 요소로 넣는다. 각 요소는 컴포넌트의 객체로 구성하여 자동완성 기능을 활용하자. 라는 방향이었다. 좀 특이한 경험이긴 하다. 장점은 1. 새로운 디자인이 생기면 아무 컴포넌트나 하나 복붙하고, 부분만 수정하여 바로 만들어낸다(생산성 향상) 2. 휴먼에러가 적다. 단점은 1. hover 같은 스타일을 지정하기가 너무 귀찮다. 디자이너가 hover를 거의 안넣긴 했는데, 이러한 방식으로 구현하니 간간히 hover가 들어갈 때 너무 귀찮았다. const Refresh = ({ onClick, children }: ..