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

휴일에 사부작사부작 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 문서가 작성된 파일이 올라가 있고, 클라이언트측의 요청시마다 해당 페이지의 문..

지금 있는 회사에 온지 대충 2달쯤 지난것 같다. 이 회사는 대기업 계열의 게임사에서 빠져나온 스타트업회사로.. 모기업으로부터 시드를 투자 받아 스타트업치고 투자유치금이 매우높고 직원도 매우 상당히 많다. 게임회사로 web3를 이용해서 NFT를 팔아먹는 BM을 가진 회사이다. 여기와서 장점은, Web3.0의 일부를 대강 감을 잡았다?.. 정도이고(지갑과 트랜잭션, 영수증 등) 여기와서 단점은 셀수없이 많다. 직무를 전향한 중고신입으로서 든 생각은, 이 회사는 프론트엔드 개발자, 특히 시니어 미만은 절대 다녀선 안되는 곳이다. 솔직히 시니어 이상은 회사의 프론트 대우에 기분나빠서 못 다닌다. (실제로 나 대신 원래 들어오기로 했던 사람은 5년차 시니어로, 인수인계 받고 다음날 바로 입사취소했다.) 마찬가지..

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 는..