본문 바로가기
728x90

전체 글109

Next.js 튜토리얼 - ch5. 페이지 간 네비게이팅 Learn Next.js 튜토리얼 https://nextjs.org/learn/dashboard-app/getting-startedNext.js 튜토리얼 - ch5. 페이지 간 네비게이팅Next.js는 컴포넌트를 사용하여 불필요한 자원 낭비 혹은 네트워크 요청을 하지 않음으로써 네비게이션 최적화를 한다.Next.js의 컴포넌트의 특장점Client-side navigating링크 클릭 시 전체 페이지를 새로 로드하지 않고 JavaScript로 클라이언트 사이드 네비게이팅을 하게 되어 네트워크 비용을 줄일 수 있다. 부분적으로는 SSR을 하게 되지만, 전체 페이지를 새로 렌더링 하지 않기 때문에 사용자 경험을 향상시키고 불필요한 네트워크 요청을 줄여주는 장점이 있다.자동 code-splitting과 pre.. 2024. 11. 18.
Next.js 튜토리얼 - ch4. 레이아웃과 페이지 생성하기 Learn Next.js 튜토리얼 https://nextjs.org/learn/dashboard-app/getting-startedNext.js 튜토리얼 - ch4. 레이아웃과 페이지 생성하기Next.js App RouterNext.js 13버전부터 앱 라우터를 제공한다. 이전에는 /pages 디렉토리 하위에 경로 설정을 통해 라우팅을 했었지만,13버전부터는 /app 디렉토리 하위에 경로 설정을 통한 파일 시스템 기반 라우팅을 하게 된다. URL의 경로와 파일 경로가 일치하게 되는 것이다.다음은 예시이다.애플리케이션 실행 시 localhost:3000 번으로 호스팅 된다고 가정하자.localhost:3000/dashboard 경로에서 보여지는 페이지= /app/dashboard/page.jsxlocalh.. 2024. 11. 18.
Next.js 튜토리얼 - ch3. 폰트 및 이미지 최적화 Learn Next.js 튜토리얼 https://nextjs.org/learn/dashboard-app/getting-startedNext.js 튜토리얼 - ch3. 폰트 및 이미지 최적화Cumulative Layout Shift (CLS) https://vercel.com/blog/how-core-web-vitals-affect-seo Layout Shift는 웹 페이지가 로딩되는 동안 페이지 콘텐츠의 예상치 못한 이동을 나타내는 용어이다. 이는 페이지 안정성을 낮추고 사용자 경험을 저하시킬 수 있다. 또한 layout shift가 자주 발생하는 웹 페이지는 낮은 구글 페이지 랭크를 갖게 된다.웹 폰트 혹은 가로, 세로가 설정되지 않은 이미지는 layout shift를 발생시키는 요인이 될 수 있기 때.. 2024. 11. 18.
Next.js 튜토리얼 - ch1 ~ 2. 프로젝트 기본 설정 Learn Next.js 튜토리얼 https://nextjs.org/learn/dashboard-app/getting-startedNext.js 튜토리얼 - ch1 ~ 2. 프로젝트 기본 설정프로젝트 받기npm install -g pnpm // 패키지 매니저로 pnpm 설치해 사용. 더 빠르고 효율적임npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm// next 프로젝트 생성 명령어. --example 옵션 뒤에 기존 프로젝트의 깃허브 주소를 주어서 clone 해옴.cd nextjs-dashboard // .. 2024. 11. 18.
Spring - Proxy 인프런 김영한 강사님 강의를 듣고 정리한 내용입니다.프록시Proxy는 대리자라는 뜻으로 말 그대로 진짜 객체 대신 대리로 역할을 수행해주는 객체를 일컫는다.일반적으로 서비스를 요청하는 쪽을 클라이언트, 처리하여 응답하는 쪽을 서버라고 한다. 프록시는 클라이언트가 서버에게 요청을 할 때, 중간에서 요청을 가로채어 수행하게 된다.클라이언트의 호출에서 서버가 요청을 직접 수행하는 것을 직접 호출, 프록시가 서버 대신 요청을 수행하는 것을 간접 호출이라고 한다.프록시의 주요 기능1. 접근 제어 : Proxy Pattern권한에 따른 접근 차단캐싱지연 로딩처음 진짜 객체를 호출한 후에, 변하지 않는 데이터에 대해서 캐싱을 한다. 그리고 다음 번에 같은 요청이 들어오면 객체를 호출하는 대신 프록시가 캐싱해둔 데이터.. 2024. 11. 15.
DB 개념 7편 - 함수적 종속성, 정규화(1NF~BCNF) 함수적 종속성함수적 종속성 개념Functional dependency 함수적 종속성어떤 스키마 R의 두 속성 집합 A, B가 존재한다.R의 모든 튜플집합 r로부터 속성 집합 A의 속성 값이 동일한 임의의 두 튜플 t1과 t2를 선택했을 때, t1과 t2의 속성 집합 B의 속성 값도 동일하다면 이와 같은 현상을 함수적 종속성이라고 한다. 즉, A에 의해 B는 유일하게 결정된다. 이때, A가 B를 함수적으로 결정한다고 말하며, A는 결정자, B는 종속자라고 부른다. R = relationA,B = attribute set. A, B ⊆ Rr(R) = tuple set of Rt1, t2 ⊂ rt1[A] = t2[A] → t1[B] = t2[B] 이와같은 함수적 종속성은 R에 여러개가 존재할 수 있고 이들의 .. 2024. 11. 14.
JPA - JPA 기본 인프런 김영한 강사님 강의를 듣고 정리한 내용입니다. JPAJava Persistence Api자바 진영의 ORM 기술 표준이다. ORMObject-Relational Mapping객체는 객체대로 설계관계형 데이터베이스는 관계형 데이터베이스대로 설계ORM 프레임워크가 중간에서 매핑대중적인 언어에는 대부분 ORM 기술이 존재JPA는 애플리케이션과 JDBC 사이에서 동작한다.  JPA 구현체로는 하이버네이트, EclipseLink, DataNucleus 등이 있으며, 주로 하이버네이트를 사용한다.JPA를 사용하는 이유SQL 중심의 개발에서 객체 중심으로 개발생산성 향상유지보수의 용이성패러다임의 불일치 해결성능 향상데이터 접근 추상화와 벤더 독립성자바 ORM 기술의 표준임JPA 기본 개념Entity엔티티는 J.. 2024. 11. 13.
Spring - 외부 설정 외부 설정코드 내의 변수를 외부에서 가져오려면 외부 설정을 사용해야한다.외부 설정으로부터 값을 가져오는 방법에는 여러가지가 있다.OS 환경변수자바 시스템 속성커맨드 라인 인수그리고 이 세가지를 통합하여 사용하는 방법에 대해서 알아보겠다.OS 환경변수OS Environment variablesOS에서 지원하는 외부 설정으로, 해당 OS를 사용하는 모든 프로세스에 적용된다.윈도우는 cmd에서 set 명령어로 설정된 환경변수를 확인할 수 있다.환경변수 편집시스템 환경 변수 편집 - 환경 변수에서 확인 및 편집이 가능하다.자바에서 사용자바에서 환경변수를 사용하려면, System.getenv()로 사용할 수 있다. Map envMap = System.getenv(); String username = envMap... 2024. 11. 13.
728x90