codinghatso

GoogleMap API, OpenWeatherMap API날씨 정보를 가져와 UI로 표시하는 프로젝트를 시작하려 합니다.프로젝트의 주제는 K리그 경기장들의 날씨를 한눈에 볼 수 있는 웹 서비스입니다.우선 날씨 정보를 가져와서 지도 위에 표시하는 것을 완료했습니다.추가 기능을 넣어서 UX 개선을 하고 싶은 상황에서도시를 클릭하면 별개의 창을 띄워 상세설명을 할 것인지. / 도시를 클릭하면 클릭된 박스를 확장시켜 상세설명을 표시할 것인지 선택해야 했습니다.결과적으로 아이콘을 클릭하면 전체 아이콘 변경과 클릭된 도시의 자세한 정보를 오른쪽 상단에 따로 표시해 주는 방향으로 선택했습니다. Tip 버튼 (이용방법 안내)는 왼쪽에서 오른쪽으로 글을 읽는 한국인의 특성을 고려해서 왼쪽에 배치했습니다.아이콘 같은 경..

사용자가 대시보드 경로 사이를 탐색할 수 있도록 몇 가지 링크를 추가하겠습니다. 이번 장에서 배울 내용 * next/link 요소 사용 방법 * usePathname() 에 대한 활성 링크를 표시하는 방법 * Next.js에서 내비게이션이 작동하는 방식 내비게이션을 최적화하는 이유는 무엇일까? 전통적으로 HTML의 요소를 사용합니다. 현재 사이드바 링크는 요소를 사용하여 각 페이지 이동시 전체 페이지 새로 고침이 있습니다. The component Next.js 에서는 를 사용할 수 있습니다. Javascript로 client-side navigation을 수행할 수 있습니다. import Link from 'next/link'; import 해서 사용하며 태그를 태그로 교체해 주면 됩니다. Automa..

지금까지 애플리케이션에는 홈페이지만 있습니다. 레이아웃과 페이지로 더 많은 경로를 만들 수 있습니다. 이번 장에서 배울 내용 * dashboard routes를 만들고 file-system routng을 사용해 봅니다. * 새 경로 세그먼트를 만들 때 폴더와 파일의 역할을 이해합니다. * 여러 대시보드 페이지 간에 공유할 수 있는 중첩 레이아웃을 만듭니다. * colocation, partial rendering, 그리고 the root layout이 무엇인지 이해합니다. Nested routing 중첩 라우팅 Next.js는 폴더가 중첩된 경로를 만드는 데 사용되는 파일 시스템 라우팅을 사용합니다. 각 폴더는 URL segment에 매핑되는 route segment를 나타냅니다. 라우팅 페이지 만들기 ..

이번 장에서 배울 내용 * 사용자 정의 글꼴을 추가하는 방법 next/font. * 이미지를 추가하는 방법 next/image. * Next.js에서 글꼴과 이미지가 최적화되는 방법. 글꼴을 최적화하는 이유 글꼴 파일을 가져와서 로드해야 하는 경우 성능에 영향을 미칠 수 있습니다. Cumulative Layout Shift 줄여서 CLS라고 불리는 레이아웃 변경 횟수는 안정적인 Core Web Vitals 측정항목이다. 이는 시각적 안정성을 측정하는 데 있어 중요한 사용자 중심 측정항목이다. 예를 들면 링크나 버튼을 탭 하려고 하는데 손가락이 닿기 직전에 링크가 이동하여 다른 것을 클릭하게 되는 피해가 일어날 수 있습니다. 글꼴의 경우 브라우저가 처음에 텍스트를 대체(fallback) 하거나 system..

개요 스타일링 : Next.js에서 응용프로그램 스타일을 지정하는 다양한 방법. 최적화 : 이미지, 링크 및 글꼴을 최적화하는 방법. 라우팅 : 파일 시스템 라우팅을 사용하여 중첩 레이아웃 및 페이지를 만드는 방법 데이터 가져오기 : Vercel에서 데이터베이스를 설정하는 방법 및 가져오기 및 스트리밍 모범 사례. 검색 및 페이지 지정 : URL Search Params를 이용한 Search 및 Pagination 구현 방법 데이터를 변형하는 중 : React Server Actions를 사용하여 데이터를 변경하고 Next.js 캐시를 다시 확인하는 방법. 404 오류를 찾을 수 없습니다. 양식 점증 및 접근성 : 서버 측 양식 검증 방법 및 접근성 향상을 위한 팁 인증 : 및 미들웨어를 사용하여 응용프..

https://react-hook-form.com/ React Hook Form - performant, flexible and extensible form library Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com React-Hook-Form 라이브러리를 사용하는 이유 직관적인 기능을 제공 패키지 크기가 작다 재렌더링 수를 최소화하고 유효성 검사 계산을 최소화 종속성이 없는 작은 라이브러리 직관적인 UI 코드의 양이 줄어든다. import React from "react"; import { useForm } from "react-hook-form"; const HeaderContent ..

발생한 문제 styled-components에서 styled component에 전달된 props 중에서 HTML 요소에 해당하지 않는 (props로 전달되지 않는 isDarkMode와 같은 속성이 감지됐다.)는 경고 메시지를 만나서 해결하려고 합니다. 즉, 해당 속성은 브라우저에 직접 적용되지 않는데도 전달되고 있다는 뜻입니다. Transient props styled-components에서 styled component에만 전달되고 HTML에는 전달되지 않는 props를 생성할 수 있습니다. 이를 위해서는 '$' 접두사를 사용하면 됩니다. 결론은 프롭이 스타일시트에만 필요하고 DOM으로 프롭을 전달할 필요가 없다면 '$'명시적으로 붙여서 사용할 필요가 있다는 것입니다. 해결한 코드 const Todo..

theme.js import { createGlobalStyle } from "styled-components"; export const GlobalStyle = createGlobalStyle` @import url('https://fonts.googleapis.com/...'); body{ font-family: 'Dongle', sans-serif; ... } `; export const theme = { colors: { ... }, spacing: { ... }, }; 코드의 구조를 살펴보시면 GlobalStyle과 theme를 export 해서 적용시키고자 하는 파일에서 import 해서 사용하면 됩니다. styled-components 라이브러리를 사용해서 적용시키고자 한다면, 위 코드처럼 ..