![]()
🤔 매 페이지 마다 선언했던 Header를 layout.tsx에 적용했다🧐 SSR 안에 RCC를 선언하는건 문제가 되지않는다RSC와 RCC:SSR 페이지 내에 RSC와 RCC를 모두 포함할 수 있습니다.RSC는 서버에서만 렌더링되고, 클라이언트로 JavaScript를 전송하지 않습니다.RCC는 클라이언트에서 실행되고 사용자 상호작용을 처리합니다. 하지만 어떠한 문제로 SSR로 랜더링 되는것을 거부하고 CSR로 랜더링한다고 경고를 하는것...😆 CSR에서 선언한 useSearchParams 때문 https://nextjs.org/docs/messages/deopted-into-client-rendering이 오류가 발생한 이유정적 렌더링 중(SSR)에는 이를 포함하는 Suspense 경계가 use..
🤔 tsx 파일에는 Server 든 client 든 FC 를 붙여야해 ? 🧐 장단점 TSX 파일에서 컴포넌트를 정의할 때 FC (Functional Component) 타입을 사용하는 것은 선택 사항입니다. 이는 개발자의 선호도와 팀의 코드 스타일 가이드에 따라 달라질 수 있습니다. FC 타입을 사용하면 컴포넌트의 Props 타입을 명시하고, 기본적으로 children prop을 포함하는 등의 이점이 있습니다. 장점FC 타입은 children을 기본적으로 포함하기 때문에 추가적인 타입 정의가 필요 없습니다.컴포넌트의 Props 타입을 명확하게 정의할 수 있습니다.단점FC 타입은 기본적으로 children을 포함하기 때문에, children을 사용하지 않는 컴포넌트에서도 children prop이 필요..
🤔 먼저 fetch API를 이용한 Client 와 Sever의 통신 방법에 대해 알아보자기본적으로 Client와 Server는 API를 통해 데이터를 주고 받는다하지만 Next.js는 Client와 서버의 데이터를 API를 통해서 주고 받지 않아도 된다 🧐 HTTP 요청(fetch API) VS Next.js Server Action기본적으로 Next.js를 사용하지 않고있다면 HTTP 요청을 사용해야한다 RESTful하고 통신이 명확하게 분리되기 때문이다하지만 Next.js fullstack으로 개발중이라면Next.js Sever Action이 더 좋을 수 있다코드를 간소화해도 되고 HTTP 요청이 없어서 빠른 응답과 직접적으로 클라이언트 함수에 접근이 가능하기 때문이다다양한 BE를 사용한..
![]()
🤔 Input 안에 div 요소를 넣을 수 없어 focus를 활용한 border-color 변경이 어려워 졌다..🧐 GPT에게 도움 받기// React, Tailwind CSS, 그리고 TypeScript를 사용하여 Next.js 프로젝트에 맞게 필드의 포커스 상태에서 테두리 색상을 변경하는 방법을 설명하겠습니다.// Tailwind CSS는 유틸리티 클래스를 통해 포커스 상태의 스타일을 쉽게 제어할 수 있습니다. focus: 접두사를 사용하여 포커스 상태일 때의 스타일을 정의할 수 있습니다. 아래 코드는 필드가 포커스될 때 테두리 색상을 변경하는 방법을 보여줍니다:typescriptCopy codeimport React from 'react';interface SearchInputProps ..
![]()
🤔 PC 화면에서는 모든 컨텐츠를 보여주지만 모바일 화면에서 특정 컨텐츠를 드래그하면서 스크롤바를 안보이게 하는작업구글링을 통해 구현하려다가 간단하게 구현할 방법이 없을까 고민해보았다 참고한 블로그https://jihyundev.tistory.com/33 리액트로 만들어보는 마우스 드래그 좌우스크롤 컴포넌트최근 프로젝트에서 모바일에서만 노출되던 화면을 PC 환경에서 그대로 띄워줘야 할 일이 생겼다. 이때 신경써야 할 부분 중 하나가 바로 좌우스크롤이었다. 기존 모바일 브라우저 환경에서는 터jihyundev.tistory.comhttps://wnsdufdl.tistory.com/518🧐 라이브러리를 활용https://www.npmjs.com/package/tailwind-scrollbar-hide..
🤔 NavBar라고 불리우는 네비게이션바를 두줄로 출력하는 방법퍼블리싱 작업에서 한줄인 div를 두줄로 나눠서 출력하는 방법에 대해🧐 hidden을 사용하여서 만들기 {/*내용*/} {/*내용*/} tailwind 기준으로 크기를 지정하여 hidden을 이용하여 컨텐츠를 가리고 넣는 방식으로 진행하였다하지만 단점은 하나의 내용을 수정하려면 두개다 수정해야하는 번거로움이 발생하였다😆 flex-row flex-col 적극 사용하기크기에 따라서 flex-col과 flex-row를 사용해서 컨텐츠들을 적절히 배치해줬다div가 추가로 필요하지만 한번의 내용만 수정할 수 있어서 편리했다 {/*상단*/} {/*내용*/} ..
https://velog.io/@lky9303/127.0.0.1-%EA%B3%BC-localhost%EC%9D%98-%EC%B0%A8%EC%9D%B4
🤔 BigQuery를 알아보다가 데이터 웨어하우스라는 단어를 발견 🧐 뜻 정보에 입각한 의사 결정을 내릴 수 있도록 분석 가능한 정보의 중앙 리포지토리입니다. 😆 A a a 💪 출처 및 도움주신분들 https://aws.amazon.com/ko/data-warehouse/
