본문 바로가기

Programing371

모듈의 exports는 선언문에서? 하단에서? // 선언문에서 바로 export 하는 use caseexport function Login() { ...}export fuction Logout() { ...}// 하단에서 모아서 export 하는 use caseexport function Login() { ...}export fuction Logout() { ...}export { Login, Logout }  위 예제는 컴포넌트로 예를 들었지만, 물론 보통 한 파일에서 컴포넌트를 여러 개 export 하는 경우는 잘 없었던 것 같다.함수를 여러 개 export 하는 경우를 생각해보면 더 적절하겠다. 둘의 기능은 완전히 같다. 단순히 취향 차이이다. 각각 장단점이 있는데,선언문에서 바로 export 하는 경우 함수나 컴포넌트가 export 됨.. Programing/React 2024. 8. 2.
layout 컴포넌트 React.js에서 App 컴포넌트에서 했던 일을 Next.js에서는 layout 컴포넌트가 해주고 있다고 생각하면 된다. 프로젝트를 처음 생성하고 나면 src/app 폴더 하위에서부터 layout.tsx 컴포넌트가 만들어져 있을 건데,이곳에서 해당 레이아웃 컴포넌트가 있는 폴더 내부의 모든 파일들 (자식 요소들, children)에 대해서 공통된 레이아웃을 설정할 수 있다. 예를 들어 아래처럼 모든 페이지에 둥둥 떠있는 내비게이션 헤더를 만들 수도 있다. import Link from 'next/link';export default function Layout({ children }) { return ( 홈 ㅣ 로그인 {children} );} .. Programing/Next.js 2024. 8. 1.
<Link> 컴포넌트 넥스트에서는 컴포넌트와 useRouter() 훅으로 페이지 간 이동을 할 수 있다. import Link from 'next/link'function Home() { return ( Main Login )} 앵커 태그와 비슷한 형태로 되어 있는 것을 알 수 있다.Link 컴포넌트로 만든다고 해서 별도의 태그로 만들어지는 것이 아니라 개발자 도구에서 확인해보면 HTML 문서에서는 앵커 태그로 변환되어 있는 것을 확인 할 수 있다. 앵커 태그로 만들어져야 검색 엔진 크롤러가 페이지를 읽을 수 있기 때문에 그런 부분은 넥스트에서 잘 변환해주니 걱정하지 않아도 된다. 다만 Link 컴포넌트로 페이지 이동할 수 있는 링크를 만들어 놓으면 a 태그와는 다르게, 사용자의 뷰포트에.. Programing/Next.js 2024. 7. 31.
개발 초기 아이템 리스트 스켈레톤 로더 구현하기 스크린샷코드// 스켈레톤 컴포넌트// 이후에 가져올 데이터가 렌더링 될 크기와 동일하게 맞춘다import React from 'react';const SkeletonLoader: React.FC = () => { return ( );};export default SkeletonLoader; 위 스켈레톤을 isLoading이나 isPending 등의 값을 반환 받거나 api route에서 로직.. Programing/Next.js 2024. 7. 31.
2024-07-30 Funnel Pattern + CRUD 에서의 커스텀 훅 사용 패턴 상황페이지 컴포넌트에서 자식 컴포넌트를 호출해서 시퀀스의 이동에 따라 페이지를 이동시키는 듯한 효과를 보여주는 Funnel Pattern으로 디자인하였다.글쓰기 페이지이기 때문에 자식 컴포넌트들에서 사용자와의 인터렉션이 계속 발생하는 컴포넌트들이고, 사용자에게 입력 받은 값을 마지막 step에서 값을 서버에 전송해야 하는 로직으로 작성되어 있다.자식 컴포넌트에서 입력한 값을 부모 컴포넌트가 참조하는 방법으로 전역 상태로 관리하는 방법이 가장 먼저 떠오르지만, 이건 개인 프로젝트가 아니라 팀 프로젝트이기 때문에 대부분의 컴포넌트가 재사용이 가능하도록 작성하였고, 실제로 검색 페이지에서 이 컴포넌트들을 사용하고 있다.그렇다면 글쓰기 페이지에서 이 컴포넌트를 사용해서 사용자에게 값을 입력 받고 이어서 글쓰기 .. Programing/TIL 2024. 7. 30.

티스토리툴바