NextJs7 [next 14 공식문서 부시기] 2. Next.js 라우팅 맛보기 App 라우터 13 버전부터 Next.js는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Server Components 를 기반으로 구축된 새로운 App Router를 도입했습니다. App Router 는 app이라는 새 디렉토리에서 작동합니다. app 디렉토리는 pages 디렉토리와 함께 작동하여 점진적인 채택을 허용합니다. Pages Router 문서 참조 기본적으로 앱 내부의 구성 요소는 React Server Components입니다. 이는 성능 최적화에 유리하고 Client Components도 사용할 수 있습니다.App 라우팅 관련 파일 layout : 공통적으로 감싸지는 ui 파일page : 페이지 관련 ui 파일loading : 로딩시 보여질 대체 ui .. 2024. 1. 12. [error] next/image Un-configured Host 설명 next/image 컴포넌트의 src 속성에 정의되지 않은 URL 의 호스트 이름을 사용하는 값을 사용했을 때 오류 발생 기본적으로 로컬 public 경로를 제외한 외부 경로를 사용하려 하면 next.config 파일에 사용할 URL 패턴을 정의해 사용 가능하다. 단순히 외부 URL 패턴을 추가하는 것이므로 기존에 로컬 경로로 쓰던 방식 또한 사용가능하다. 코드 // next.config module.exports = { images: { remotePatterns: [ { protocol: 'https', hostname: 'assets.example.com', port: '', pathname: '/account123/**', }, ], .. 2023. 7. 10. 비동기 데이터로 jsx 구성 시 최적화 및 예외 처리 2023.06.27 오류 발견 및 내용 업데이트 PART 1. sequlize findOne 메서드의 null return 설명 개발 환경 back : express + sequlize + ts from : nextjs + redux toolkit + ts sequlize 의 findOne 메서드를 통해 데이터베이스의 내용을 조회하는 기능을 구현했다. try-catch 문안에서 조회 성공 시 2xx 번대 실패 시 4xx, 5xx 번대 상태코드로 반환하여 redux toolkit 기능들을 활용 비동기 작업을 처리하고 있는 와중 잘못된 요청에도 데이터 없이 화면이 나타나고 redux 의 state, api 요청 역시 에러관련 내용이 없었고 값은 있어야 할 state 의 값이 null 인 이상한 상황이 나왔다.. 2023. 6. 23. 커스텀 crousel (nextjs + ts + styled-components) 저장해두면 언젠가 쓸까해서 저장해두는 나의 커스텀 crousel 만들때는 참 오래걸렷는데 버리는 것도 한순간이군 사용 방법 ReactElement[] | ReactElement 형식의 children 을 받아 배열의 경우 매핑하여 슬라이드 배치 추가로 필요한 banner 가 있다면 받아서 배치 (딱히 필요없음) props 로 styleOption:{ height:CssValue } 받아 crousel 높이 설정 (width 는 자동으로 100% 상위 태그로 감싸서 넓이 조정하여 사용하는 방식) CssValue 는 따로 css 를 props 를 입력받을때 타입을 자세히 설정해두려고 만든 class 형식의 type 이며 간단하게 string 으로 조금 고쳐서 사용해도 상관없다. 보완점 css 입력 받는 부분.. 2023. 4. 20. nextjs 기타 지원 기능 12 버전 기준으로 정리한 내용이므로 주의 13 버전은 일부 바뀐 내용이 있습니다. 개념만 참고 추천 nextjs 기본 및 페이지 개념 에서 이어지는 내용 css 관련 css-module, sass, css in js 등등 지원함 Adding a Global Stylesheet pages/_app.js 에 style 을 적용하면 됨 Import styles from node_modules v9.5.4 부터 node_modules 에 있는 css 파일 가져와서 적용 가능 ex) bootstrap, antd import 'bootstrap/dist/css/bootstrap.css' layout 레이아웃 감싸는 것도 따로 만들어 둠 꽤 편리함 13 버전에는 layout 파일을 생성해서 적용 가능.. 2023. 2. 2. nextjs 기본 및 페이지 개념 12 버전 기준으로 정리한 내용이므로 주의 13 버전은 일부 바뀐 내용이 있습니다. 개념만 참고 추천 Next.js 는 무엇인가 Next.js is a flexible React framework that gives you building blocks to create fast web applications - 공식문서 소개 부분 Next.js는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다. - [출처] 위키 백과 (https://ko.wikipedia.org/wiki/Next.js ) 정리: React 를 효율적인 사용하기 위한 프레임워크 이며 SSR 을 구현하는데 많이 사용함 설치 npx.. 2023. 2. 2. next-redux-wrapper 이해하기 nextjs 에서 redux 를 사용하기 위해서는 next-redux-wrapper 가 필수적으로 필요한 이유가 궁금했다. 본문 일부 내용 번역 정적 앱용 Redux 를 설정하는 것은 다소 간단하다 모든 페이지에 제공되는 단일 Redux 저장소를 만들어지기 때문에. Next.js static site generator or server side rendering 이 관련되면 Redux 연결 구성 요소를 렌더링하기 위해 서버에 다른 저장소 인스턴스가 필요하기 때문에 작업이 복잡해지기 시작합니다. 또한 초기 값 관련해서 redux 의 store 에 접근해야 할 수 도 있다. next-redux-wrapper 는 자동으로 스토어 인스턴스를 생성하고 모두 동일한 상태를 갖도록 합니다. 이해 과정 실제로 처음 n.. 2023. 2. 2. 이전 1 다음
