이번장이 이미지 최적화 마지막장입니다. 이제까지 알아본 내용들을 기초로 비교 & 분석해 보겠습니다. 1. img VS next/image (fill) VS next/image (fix size) 이미지 크기 비교 결과 일반적인 'img' 태그의 이미지는 407kb인 원본 이미지 사이즈만큼 나오는 반면, 'next/image'는 21.3kb 그리고 크기를 고정한 경우에는 5.4kb로 나타났습니다. img next/image - fill next/image - fix size (384/224) Image Size 407kb 21.3kb 5.4kb 2. next/image quality에 따른 비교 quality 옵션에 따른 비교에서는 기본적인 옵션은 유지한 채로, quality가 변함에 따라 이미지의 파일 ..

이번장은 앞서 이미지 최적화를 다룬 1장 2장 3장에 이어지는 내용입니다. 이번에 다룰 내용은 배경이미지 적용방법 두 가지입니다. 이 프로젝트는 기본적으로 tailwindcss 프레임워크를 활용하고 있습니다. 1. tailwindcss 프레임워크만을 활용한 배경이미지 적용 이 코드에서는 div 요소에 tailwind 클래스를 직접 적용하여 배경이미지를 적용하였습니다. // area 확인을 위한 border 및 높이너비 고정 bg-[url('/images/955535072f0c-10.png')] : tailwind 클래스 코드, bg-[URL]로 작성하여 이미지를 가져와 배치합니다. 이 밖에 background에 영향을 주는 클래스는 아래 링크에서 추가로 확인할 수 있습니다. Background Size ..

이번장은 앞서 이미지 최적화를 다룬 1장 2장에 이어지는 내용입니다. 이번에 다룰 주요 내용은 sizes 적용입니다. next/image - sizes 속성 적용 내용을 살펴보자면 아래와 같습니다. A string, similar to a media query, that provides information about how wide the image will be at different breakpoints. The value of sizes will greatly affect performance for images using fill or which are styled to have a responsive size. "Sizes"는 미디어 쿼리와 유사한 문자열로, 다양한 브레이크포인트에서 이미지의 ..

이번 장에서는 Tailwind CSS를 사용한 Next.js의 이미지 작성예를 다루고자 합니다. 첫째로 이전에 다루었던 필수 속성들을 다시 확인해보겠습니다. 그것은 fill 속성을 사용할때입니다. width와 heigth prop이 항상 필수라고 생각하였지만 예외가 있었습니다. 우선 작성되어 있는 내용은 아래와 같습니다. 항상 필수라고 생각되었던 옵션에 예외를 발견할 수 있습니다. A boolean that causes the image to fill the parent element, which is useful when the width and height are unknown. 부모 요소의 너비와 높이가 알려지지 않은 경우에 이미지를 채우도록 하는 부울 값입니다. 영어 실력때문인지... 바로 이해가..

웹사이트의 성능을 향상하기 위한 고려사항 중 가장 중요하게 여겨지는 NEXT.js에서의 이미지 최적화에 대해서 다루어 보고자 합니다. NEXT.JS의 이미지 최적화 nextjs에서는 기본적으로 'next/image' 를 제공하고 있습니다. 네 가지 특성을 살펴보겠습니다. 향상된 성능 (Improved Performance) : 언제나 디바이스 사이즈에 맞게 최적화된 이미지 제공 - 스마트폰으로 보면 그에 맞는 이미지를 보여주고, 태블릿 또는 피씨에서 보면 그 디바이스에 맞는 사이즈의 이미지를 보여줍니다. 시각적 안정감 (Visual Stability) : CLS(Cumulative Layout Shift - 누적 레이아웃 이동)을 방지 - 페이지를 최초 오픈시나 살펴볼 때 레이아웃이 이상하게 움직이는 것..

Topic. Huggingface 에 등록된 LLM 을 Base 모델로 하여 미세조정(Fine-tuning) 하기 위한 환경설정 내용을 공유합니다.* 파이썬 설치는 아래 링크에서https://x2bee.tistory.com/9 Python 설치 및 가상 환경(conda evn)Tech김백엔드, Tech막내녀석 공동작성 및 수정본 1. Python 설치 Python을 설치하는 방법은 3가지가 있다. Python 공식 홈페이지에서 설치 Anaconda 설치 Miniconda 설치 1번 공식 홈피 vs. 2번 Anaconda 1번 공식 홈x2bee.tistory.com1. Hardware InformationOS : Linux Ubuntu 18.04.6 LTS (Windows11 WSL)CPU : AMD Ry..

1. Routing 정책 - App Router를 쓰는지 그렇다면 use client를 써야하는 상황 - App Router vs. Page Router → App Router 방식을 사용합니다. 공시문서: https://nextjs.org/docs#app-router-vs-pages-router App Router에서는 streaming과 같은 최신 React 기능을 사용할 수 있는 이점이 있습니다. Next.js 13.3까지 Page Router 방식을 사용했고 App Router는 베타 단계였고, Next.js 13.4부터 App Router가 정식 버전으로 채택되었습니다. App Router의 가장 큰 변화는 RSC(React Server Component)를 default로 쓰고 있다는 점입니다..

개요 : React에서의 routing React.js에서는 routing을 위해서 react-router-dom을 설치해야한다. (현재 최신 버전은 6.2) React에서는 routing을 아래처럼 코딩을 해야한다. import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'; const App = () => { return ( ) } export default App; 위의 코드는 별거 아니지만, E-commerce에서 Nested Routing이 들어가는 순간 코드는 어마어마하게 길게 될 수 있다. router package도 다운로드 받을 뿐 아니라 코드도 복잡해진다. 이를 위해 Next.js (Nuxt.js ver..

이번 글에서는 Java에서 var와 타입추론에 대해 알아보겠습니다. Java 10에서 var Java 10부터 도입된 'var'는 지역 변수의 타입 추론을 가능하게 하는 키워드입니다. 이는 코드를 간결하게 작성할 수 있도록 도와주며, 프로그래머가 변수를 선언할 때 타입을 직접 명시하지 않아도 되게 합니다. 기존의 Java에서는 변수를 선언할 때 반드시 타입을 명시해야 했지만, 'var'를 사용하면 컴파일러가 할당된 값의 타입을 보고 변수의 타입을 추론합니다. 얼마 전에 Scala언어의 장점으로 보았던 '타입추론'입니다. 예를 들어 구문 작성을 확인해 보겠습니다. String message = "Hello world"; 위와 같은 전개가 기존 자바에서의 전개코드입니다. 하지만 var를 사용하면 다음과 같이..

Vue 2.x 버전을 썼던 사용자라면 Vuex 상태관리 라이브러리를 알 것이다. Nuxt 에서 SSR이 제공되고 Vue 3 에서는 Composite API 가 사용되면서 새로운 라이브러리로 대체되었다. 복잡한 어플리케이션을 작성하다보면 컴포넌트 혹은 페이지간 동일한 상태(값)에 대한 접근이 필요할 때가 있다. Nuxt 는 useState 라는 SSR 친화적인 상태관리 컴포저블을 제공하고 있다. 자세한 내용은 Nuxt-개요 > 11. 상태관리 를 참고하자. 전역 상태 정의하기 useState 는 상태 참조를 키 값을 통해서 한다. 여기서는 userState 를 이용해 사용자 정의 상태관리자를 생성한다. 프로젝트 루트에서 /composable/states.ts 파일을 생성하고 아래와 같이 코딩한다. /com..

Nuxt 는 경로가 바뀔 때 수행되는 미들웨어를 제공한다. 글로벌 미들웨어는 middleware/ 디렉터리에 .global 접미사를 가진 소스파일로 정의하고 인라인 미들웨어는 각 페이지 내 definePageMeta 유틸 함수로 정의한다. 자세한 내용은 Nuxt-Directory > middleware 을 참고한다. 도메인에 공통적으로 처리할 수 있는 미들웨어는 인증/인가 부분에서 라우팅 경로를 리다이렉션 해주는 경우를 생각해 볼 수 있다. 예를 들어 로그인 후 정해진 랜딩페이지로 리다이렉션 하거나, 로그아웃 전에 상태값을 지우거나, 자원을 초기화 하는 작업 등의 예가 있을 수 있다. 사용자 정의 미들웨어 생성 프로젝트 루트에 middleware/ 디렉토리를 생성한다. 해당 디렉토리에 auth.globa..

Nuxt 는 Nuxt 혹은 Vue 앱이 생성될때 앱을 확장할 수 있는 플러그인 시스템을 갖추고 있다. Nuxt 는 /pages, /components, /layouts 및 /composables 디렉터리를 자동으로 임포트 하는 것처럼 자동으로 /plugins 디렉터리를 자동으로 등록한다. 서버에서 쓰일 때는 .server, 클라이언트에서 쓰일때는 .client 접미사를 쓰면 된다. plugins/ 하위 디렉터리를 이용할 때는 nuxt.config.ts 에 plugins 속성에 해당 디렉터리 명을 배열로 등록한다. 자세한 내용은 이 곳을 참고하면 된다. 사용자 플러그인 작성 먼저 프로젝트 루트에서 /plugins 디렉토리를 생성한다. 해당 디렉토리에 myPlugin.ts 파일을 생성한다. plugin 선언..

리액트를 써본 사람들은 훅(hook)에 대해 알것이다. Nuxt/Vuejs 에서도 3.0 이후로 비슷한 개념이 생겼는데, 이를 컴포저블이고 하며 Vue 에서는 Composite API 라고 부른다. 아래는 Composition API 에 대한 Vuejs 의 소갯말 이다. Composition API는 함수 범위에서 직접 반응 상태 변수를 선언하고 여러 함수의 상태를 함께 구성하여 복잡성을 처리하는 데 중점을 둔다. 더 자유로운 형식이며 효과적으로 사용하려면 Vue에서 반응성이 어떻게 작동하는지 이해해야 한다. 대신, 그 덕분에 로직을 구성하고 재사용하기 위한 더욱 강력한 패턴이 가능해졌다. 내장 컴포저블과 관련해 자세한 내용은 이 곳을 참고한다. 커스텀 컴포저블 생성 반복적으로 호출해서 쓸 수 있는 기능..

Nuxt 는 스타일시트, 폰트, 이미지 등의 정적 자산을 관리하기 위해 public/, assets/두개의 디렉토리를 사용한다. public/ 디렉터리는 서버에서 사용되고, assets/ 디렉터리는 vite 혹은 webpack 같은 번들러에 의해 빌드될 때 사용된다. 자세한 내은은 이 곳을 참고하자. 이미지 불러오기 /pages/index.vue Hello Nuxt 3 Static URL 스태틱 URL 이 필요하다면 public/ 디렉터리에 이미지가 있어야 한다. Hello Nuxt 3 assets/ 디렉토리 와 public/img 디렉토리에 위 예제가 가르키는 파일이 같은 이미지라면 결과는 동일하다. public/ 에 위치한 파일은 URL 로 직접 접근도 가능하다. SVG Icon 최근에는 해상도에 구..

이전 장을 통해 컴포넌트 생성 및 컴포넌트 구조화에 대해 좀 더 깊게 이해했을 것이다. 이번 장에서는 컴포넌트를 배치함에 있어 레이아웃을 동적으로 적용하는 방법을 알아보겠다. 이런 형태의 사용은 예를 들어, 인가된 사용자(login)와 인가되지 않은(default or logout) 사용자의 화면 구성이 다를 때 특히 유용하다. 간단한 예를 들어 살펴 보겠다. layouts 디렉터리 /pages, /components 디렉터리와 마찬가지로 Nuxt 에서는 레이아웃 엘리먼트를 디렉터리 기반으로 전개할 수 있다. /pages/index.vue 소스를 아래와 같이 바꿔보자. app.vue 소스도 바꾼다. /pages/index.vue Main Page /app.vue 이제, 프로젝트 루트 디렉토리에서 /lay..

Nuxt 는 컴포넌트 정의하는데 있어서도 디렉토리 구조를 활용한다. 자세한 내용은 이 곳을 참조한다. 이전 장에 이어서 실습을 통해 컴포넌틀 생성해보자. compnents 디렉터리 프로젝트 루트에서 components 디렉터리를 생성하고, 해당 디렉터리에서 Alert.vue 파일을 만들고 아래 내용으로 코딩한다. This is an alert component 만들어진 컴포넌트를 일단 메인페이지에서 활용해 보자. Nuxt 는 components 디렉토리도 자동 임포트 하기 때문에 별도의 임포트 구문이 필요하지 않다. /pages/index.vue 파일을 아래와 같이 수정하자. /pages/index.vue http://localhost:3000 을 호출해 보면, 방금 만든 Alert 컴포넌트가 보이는 걸..

Nuxt 는 '파일시스템 기반 라우팅'을 제공한다. 간단하게 정리하면 디렉터리 및 파일 명으로 라우팅을 제공한다는 의미이다. 자세한 내용은 이 곳을 참조 하고 이번 시간에는 실습에 집중하자. 새로운 페이지 생성 프로젝트 디렉터리에서 하위 디렉터리로 pages 디렉터리를 생성한다. 이 후 pages 디렉터리에 events.vue 파일을 생성하고 아래와 같이 내용을 채운다. /pages/events.vue events page 파일시스템 라우팅이라는 말에서 직관적으로 해당페이지가 바로 디스플레이 될 것이라고 유추 할 수 있다. http://localhost:3000/events 를 호출해보자. app.vue 를 호출한 http://localhost:3000 의 내용과 동일할 것이다. 의도한 바와 다르다. 아..

테일윈드 CSS 는 CSS 프레임워크 중에 최근 2~3 년간 가장 주목받는 CSS 프레임워크가 되었다, 가장 최근에는 메타에서 만든 StyleX 도 급부상하고 있다. 최근 웹 프런트엔드 개발 생태계를 보면, 테일윈드 CSS를 기본 CSS 프레임워크로 정하고 만들어진 오픈소스, 강좌 및 블로그가 대부분인 것을 알 수 있다. 이 강좌에서도 테일윈드를 기본으로 쓰겠다. 1. 설치 설치는 테일윈드 사이트에 보면 각 프런트엔드 프레임워크에 맞는 설치 가이드가 이미 제공된다. Nuxt 가이드를 보면 두가지 방법이 있는데, 첫 번째 방법인 'Standard Installation' 에 나와있는 가이드를 따라 하겠다. npm install -D tailwindcss postcss autoprefixer npx tail..

1. 사전 준비 Node.js - v18.0.0 혹은 그이상 텍스트 에디터 - Visual Studio Code, 추가 플러그인 Volar Extension 터미널 - Nuxt 커맨드 용 2. Nuxt 설치 적당한 워크스페이스 디렉토리를 생성한다. 터미널을 열고 워크스페이스 디렉토리로 이동 후 아래 명령을 실행한다. VScode 안에 통합되어 있는 터미널을 쓰면 편리하다. // pnpm pnpm dlx nuxi@latest init 그 다음, 프로젝트 디레토리로 이동한다. cd 3. 의존성 설치 프로젝트 디렉토리로 현재 위치가 이동이 되었으면, nuxi 를 통해 구성된 프로젝트 의존성을 설치하거나, 업데이트 할 수 있다. 간단하게 페이지가 반응하는 것을 살펴보기 위해 sass 의존성을 설치하겠다. pnp..

오픈 소스 클러스터 컴퓨팅 프레임워크인 아파치 스파크에 대해 알아보고자 합니다. 아파치 스파크 : 대규모 데이터 처리 프레임워크 아파치 스파크는 대규모 데이터 처리를 위한 오픈 소스 클러스터 컴퓨팅 프레임워크입니다. 주요 특징 중 하나는 메모리 기반의 빠른 데이터 처리입니다. 이를 통해 대용량 데이터를 효율적으로 처리할 수 있습니다. 또한 다양한 작업을 지원하며, 배치 처리뿐만 아니라 스트리밍 처리, 머신 러닝, 그래프 처리 등 다양한 영역에서 활용됩니다. 등장배경과 혁신 그리고 맵리듀스와 관계 아파치 스파크의 등장배경을 이해하기 위해서는 기존의 데이터 처리 시스템에서의 한계를 살펴볼 필요가 있습니다. 기존의 데이터 처리 시스템에는 MapReduce 같은 배치 기반의 프레임워크가 주로 사용되었습니다. 하..