Next.js6 as="link"? 왜 작동 안 하는지 👿문제상황스타일 가이드가 나왔고 , 그에 맞게 텍스트를 공통 컴포넌트로 뺐다. 서비스 소개 그후에 링크태그에 위와 같이 적용을 하고싶었는데바로 오류가 떴다고 한다,,🤔원인추론재사용 가능한 컴포넌트로 사용하기 위해서 Test.tsx에서 as 로 태그 변경을 할수 있게 하였다. 경고 메시지! 그런데 여기서주의할 점은, HTML코드로만 변경이 가능하다는 점이다.단순성: HTML 태그는 표준화된 속성(예: className, id, href)을 가지므로, as로 전달된 태그에 prop을 안전하게 전달하기 쉽다.타입 안정성: 타입스크립트를 사용할 경우, as를 keyof JSX.IntrinsicElements로 제한하면 HTML 태그만 허용되며, 타입 에러를 방지할 수 있다.예측 가능성: React 컴포넌.. 2025. 4. 14. 쿠키가 존재하면 로그인 상태라고 할수있는가? https://supabase.com/docs/guides/auth/server-side/nextjs?queryGroups=router&router=app Setting up Server-Side Auth for Next.js | Supabase DocsBe careful when protecting pages. The server gets the user session from the cookies, which can be spoofed by anyone. Always use supabase.auth.getUser() to protect pages and user data. Never trust supabase.auth.getSession() inside server code such as middle.. 2025. 4. 5. App Router VS Pages Router 예전의 전통적인 방식 : Pages Router13버전 이후의 방식 : App Router 리액트와 넥스트에서의 라우팅 구현 방법리액트 : react-router-dom을 이용해서 구현넥스트 : 파일 시스템 베이스 라우팅 (or 폴더구조기반)으로 자동으로 제공해준다.- 페이지라우터: pages 폴더에 원하는 페이지의 파일 이름을 둔다 pages ㄴ about.jsㄴ index.js/about > 으로 자동으로 들어갈수 있다. - 앱라우터 app폴더 밑 폴더명을 기반으로 자동 라우팅이 된다.각 폴더 아래에 page.js 파일이 있고, 이 파일이 /about 에 자동으로 페이지를 그려준다. 그러면 대체 어떤걸 써야할까? 공식문서에 따르면 앱라우터를 추천한다고 한다.그렇지만 어떤 차이점이 있는지 알고, 상황.. 2025. 3. 17. Next.js만 활용해서 CRUD 구현하기 Uncontrolled Components : 폼 요소의 상태를 제어하지 않는 컴포넌트한마디로 정의하자면 과정은 보지 않고 결과만 반영하여준다.(마지막 제출할때만)즉 코드상으로 onChage 등으로 관리할 필요가 없다는것! 장점 : 간단한 구현 - 상태를 따로 관리하지 않기 때문에 간단한 폼 처리에 적합하다낮은 복잡성 - 폼의 상태를 리액트 상태로 동기화할필요가 없음으로 상태를 관리하지 않아도 된다단점 :비제어 컴포넌트이니까 당연하게도 제어되지 않는다 -> 폼의 상태 추적이나 제어가 어려울 수 있다.복잡한 폼 처리 어려움 : 실시간 유효성 검사 불가 : 판단하려면 무조건 제출해야함 FormDatahttps://ko.javascript.info/formdata FormData 객체 ko.javascript.. 2025. 3. 13. 서버 컴포넌트 vs 클라이언트 컴포넌트 기본적으로 넥스트에서 app폴더 하위의 모든 컴포넌트는 서버 컴포넌트 이다 서버컴포넌트?말 그대로 서버에서 실행되는 컴포넌트이다.코드상에서 확인해보면, 넥스트상에서 이렇게 콘솔을 찍어보자. 콘솔이 어디에 찍힐까?// src>app>page.tsxexport default function Home() { console.log("여기 어디?"); return ( 안녕하세요! Next.js 입니다! );} 터미널에서 찍히고, 브라우저에서도 "server"에서 찍히고 있다고 말해주고 있다. 그렇다면 서버 환경에서 상호작용 메서드는 어떻게 될까? 해당 메서드를 찾지못한다.. 클라이언트 컴포넌트?당연하게도 브라우저 상에서 실행되는 컴포넌트 이다.서버컴포넌트에서는 alert,confir.. 2025. 3. 11. Next.js App Router에서의 렌더링 방식 이해하기 서버 사이드 렌더링 vs 클라이언트 사이드 렌더링서버 사이드 렌더링 : 주문한 가구가 완전히 조립된 상태로 배송되고, 고객은 바로 사용하면 되니 편리하다.클라이언트 사이드 렌더링 : 주문한 가구의 부품과 조립 설명서만 배송되고, 고객이 직접 조립해야함으로 시간과 노력이 필요하다. - 서버 컴포넌트 : 서버에서만 렌더링 되는 컴포넌트로, SSR의 역할을 한다.클라이언으로 전달되는 HTML만 생성하고, 유저 상호작용을 하지 않는다.Next.js의 App Router에서 모든 컴포넌트는 기본적으로 서버 컴포넌트 이다.// src/app/page.tsxconst HomePage = async () => { const data = await fetchDataFromAPI(); // 서버에서 데이터 호출 re.. 2025. 3. 10. 이전 1 다음
