본문 바로가기

🌳Frontend74

Next.js 환경에서 CSS in JS Styled-Component의 치명적인 단점 💄 CSS in JS CSS in JS 는 컴포넌트 스타일링 방식 중 하나 이다. (번외로, CSS in CSS 도 있다.) 쉽게 설명하자면, 자바스크립트 코드에서 CSS 를 작성하는 방식이다. `.css` 파일을 별도로 생성해 스타일을 주는 방법이 아니라, jsx, tsx 코드 내에서 스타일링이 가능하다. CSS in JS의 대표적인 라이브러리는 styled-component인데, CSS 스타일링을 .css 파일 레벨에서 작성하는 것이 아니라, 컴포넌트 레벨에서 작성이 가능하다 ! 🤔 그런데 말이죠. styled-component 는 치명적인 단점이 있다. 바로 SSR,SSG 환경과, 서버컴포넌트에서는 스타일링이 어렵다는 점이다. SSR을 지원하는 Next.js 의 공식문서에서는 이러한 경고문구가 있다.. 2023. 10. 14.
Next.js에서 Router.push VS next/link Next.js에서 페이지 이동은 useRouter 를 이용하거나, next/link의 Link 컴포넌트를 이용한다. 이 두가지 방식의 차이점은 무엇일까? const router = useRouter() const onClick = () => { router.push('...') // router.push } return ( {/* Link 이용 */} ) next/link 의 Link는 내부적으로 `` 태그를 생성한다. 따라서 useRouter push와 같은 동작을 하지만 더 직관적인 동작을 나타낼 수 있다. 여기서 말하는 직관적인 동작은 무엇일까? 위의 내 프로필을 클릭하면 나의 프로필 페이지로 이동은 하지만, 우 클릭시 이동과 관련된 액션을 찾아볼 수 없다. 하지만, 클릭하면 index페이지로 이동.. 2023. 10. 2.
CSR SSR SSG 당신의 선택은 무엇인가요? velog를 탐방하다가 정말 정말 좋은 게시글이 발견했다. 대부분이 모르는 Next에서 SSG가 작동하는 방식 | 리팩토링을 통해 서비스 최적화하기 2편 해당 내용을 읽고 재 정리한 것이니(내용은 동일해요 !!!!) 한번쯤 꼭 읽어보길 추천합니다. CSR (클라이언트사이드 렌더링) CSR 이전의 웹 사이트 CSR 이전의 사이트들은 페이지마다 HTML로 그려진 파일이 있었다. 그 페이지를 이동할 때 마다 서버에서 HTML를 요청했고 화면에서는 서버에서 받아온 HTML을 그렸었다. 1. 사이트 접속 2. 서버에 HTML 요청 3. HTML을 화면에 그림 4. 사이트에서 다른 페이지로 이동 5. 그 페이지에 맞는 HTML 을 서버에 또 요청 6. HTML 을 화면에 그림 .. 무한반복 즉, 사용자가 한 사이트.. 2023. 10. 2.
가장 좋은 React Custom hook 구상하기 https://www.d0dam.com/blog/react/react-hooks/make-hooks-with-think hook은 생각하고 만드세요.....제발 | d0dam's-log hooks가 react에 도입되면서 class 없이 상태와 여러 react의 기능을 사용하게 해주었다. hooks의 도입으로 react에 신세계가 열렸고, custom hooks라는 것도 만들기 시작했다. 그런데, hooks... 당신은 생각하 www.d0dam.com 을 읽고 요약했습니다. 자세한 내용은 위의 게시글을 참고해주세요. 1. hook은 순수하게 작성되어야 한다. hook도 컴포넌트와 같은 맥락으로 같은 인자를 넘기면 같은 동작을 기대할 수 있어야 한다. 2. 컴포넌트 내부에 여러 관심사가 존재하는가? hoo.. 2023. 9. 17.
728x90
반응형

티스토리툴바