codinghatso

JS로 재사용가능한 태그 만들어 사용하기 let 변수이름 = document.createElement("태그이름"); - 변수에 원하는 태그를 생성하여 담아놓는 패턴. let 텍스트변수 = document.createTextNode("문자열 또는 HTML Symbols"); - 변수에 문자열이나 특수문자를 담아놓고 사용하는 패턴. https://www.htmlsymbols.xyz/unicode/U+00D7 HTML Symbols ... www.htmlsymbols.xyz 담아놓은 '태그변수'에 Class를 부여하고 태그의 자식인자로 '텍스트변수'를 할당한다. 이렇게 활용 가능한 태그가 완성된다. 접근자 이해하기 선택된 태그의 위치를 파악하고, 선택된 태그를 기준으로 상대적인 경로로 접근합니다. 예) no..

의미론적 div 태그를 복습하기 용이하게 정리해 보았습니다. 매번 구글링 해서 하나하나 찾고 복습하는게 매우 효율적이지 못하다고 생각해서 작성한 포스트입니다. 강조할 문자열

7장이랑 연결되는 내용입니다. 7장의 마지막 내용 두 가지 를 참고하며 진행하시면 됩니다. 1. 데이터 요청이 의도하지 않는 waterfall을 만들었다. 2. 대시보드는 정적(static)이므로 데이터 업데이트가 애플리케이션에 반영(reflected)되지 않는다. 이번 장에서 배울 내용 * 정적 렌더링이란 무엇이며 애플리케이션의 성능을 향상시킬 수 있는 방법입니다. * 동적 렌더링이란 무엇이며 언제 사용해야 하는지에 대한 것입니다. * 대시보드를 동적으로 만들기 위한 다양한 접근 방식. * 느린 데이터 가져오기를 시뮬레이션하여 어떤 일이 일어나는지 확인합니다. 정적 렌더링이란? 정적 렌더링을 사용하면 빌드시(배포 시) 또는 재검증 중에 서버에서 데이터 가져오기 및 렌더링이 수행됩니다. 그런 다음 결과를..

애플리케이션에 대한 데이터를 가져올 수 있는 다양한 방법에 대해 논의하고 대시보드 개요 페이지를 작성합니다. 이번 장에서 배울 내용 * API, ORM, SQL 등 데이터를 가져오는 및 가지 방법에 대해 알아봅니다. * 서버 구성요소를 통해 백엔드 리소스에 보다 안전하게 액세스할 수 있는 방법 * network waterfalls란? * JavaScript Pattern을 사용하여 병렬 데이터(parallel data) fetching을 구현하는 방법. 데이터 가져오는 방법 선택 API 계층 데이터베이스 쿼리 React Server Components 추가 API 계층 없이 서버에서 직접 데이터베이스를 조회할 수 있습니다. SQL 사용하기 대시보드 프로젝트의 경우 Vercel Postgres SDK 및 ..

이 포스팅은 Learn Next.js를 학습하면서 보조 역할로서 봐주시면 좋겠습니다. 대시보드 작업을 계속하려면 먼저 데이터가 필요합니다. 이번 장에서는 PostgreSQL을 설정합니다. @vercel/postgres 이번 장에서 배울 내용 * GitHub에 프로젝트를 Push합니다. * Vercel 계정을 설정하고 즉각적인 미리보기 및 배포를 위한 GitHub 저장소를 연결합니다. * 프로젝트를 만들고 Postgres database에 연결합니다. * 초기 데이터로 데이터베이스를 seed합니다. GitHub 저장소에 관한 내용을 학습하려면 이동하시길 바랍니다. https://docs.github.com/en/repositories/creating-and-managing-repositories/qui..

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

2023년도의 브라우저 업데이트는 전체적으로 2022년도의 새로운 기능들을 수정하고 발전시키는 방향으로 진행되었던 것 같습니다. 또한 디자인적인 부분도 많이 신경쓰면서 트렌디함을 유지하며 기존의 기능들을 더 편하게 사용할 수 있게 해 주었습니다. ▲(핵심) ▲(편의성) 2022년 01월 측면 패널, 번역, 검색 단축키 등 새로운 기능을 사용해 보세요. 측면 패널을 활용하여 웹을 탐색할 수 있습니다. (읽기 목록, 읽기 모드, 북마크) ▲ 읽기 목록을 만들 수 있으며, 읽음으로 표시와 삭제 기능을 통해 읽기 목록 관리 가능 특정 텍스트만 번역하기 ▲ 주소 표시줄을 활용하여 탭, 북마크, 방문 기록을 검색할 수 있습니다. (@북마크, @기록, @탭) ▲ 페이지 확대 축소의 단축키를 통해 제어 가능 ( CMD..

많은 개발자와 소비자가 선호하는 Chrome의 업데이트 내용을 보면서 앞으로 웹 시장이 어떤 걸 중요시하며, 방향을 잡고 있는지 생각해 보는 시간이 되었으면 합니다. ▲(핵심) ▲(편의성) 2022년 01월 링크를 쉽게 공유하고 Chrome 프로필을 여러 개 만들어 보세요. 웹 서핑,서칭을 하다가 공유하는 부분을 UI를 이용해 간편하게 할 수 있도록 업데이트했습니다. ▲ QR 코드나 다운로드 무선 전송 등 다양한 방식을 지원하는 부분이 인상적 입니다. 2022년 03월 안전 확인을 사용해 안전하게 인터넷 이용하기 안전한 인터넷 사용을 위해 사용자가 보안 부분을 설정할 수 있도록 합니다. ▲ 위치 및 기기에 대한 웹사이트의 액세스 권한을 제어할 수 있도록 합니다. 2022년 05월 과거 검색어를 되돌아보고..