Next.js 12 12버전에는 보통 다음과 같이 구글 폰트를 적용했다. export default function Home() { return ( ... 위처럼 font를 가져와서 처리한다. 그래서 잠깐의 시간 차이인 하지만 가져오기 직전 fallback font로 보였다가 font가 load 되면서 layout shift가 발생하곤 하였다. Layout shift 란 fallback font와, 내가 사용하려는 font와 동일한 font-size를 사용해도, font 고유의 크기가 달라서 font가 load되면서 layout이 밀리는 현상이다. Next.js 13에서부터는 adjustFallbackFont 라는 기능을 이용해 CSS의 size-adjust 속성을 조정해 크기 차이가 발생하지 않게하였다..

기본적으로 Nuxt는 필요한 경우 재정의할 수 있는 기본값을 제공한다. // nuxt.config.ts export default defineNuxtConfig({ app: { head: { charset: 'utf-8', viewport: 'width=device-width, initial-scale=1', } } }) nuxt.config.ts 에 app.head 속성을 제공하면 전체 앱의 헤드를 맞춤설정할 수 있다. 이 메서드를 사용하면 반응형 데이터를 제공할 수 없다. app.vue 에서 useHead() 를 사용하는 것을 권장한다. 보다 쉽게 ​​구성할 수 있는 바로가기: charset 및 viewport. Types 에 아래 나열된 키 중 하나를 제공할 수도 있다 . useHead 컴포저블 함..

Nuxt의 핵심 기능 중 하나는 파일 시스템 라우터이다. pages/ 디렉토리 내의 모든 Vue 파일은 파일 내용을 표시하는 해당 URL(또는 경로)을 생성한다. Nuxt는 각 페이지에 대한 동적 가져오기를 사용하여 코드 분할을 활용하여 요청된 경로에 대해 최소한의 JavaScript를 제공한다. Pages Nuxt 라우팅은 vue-router를 기반으로 하며, 파일 이름을 기반으로 pages/ 디렉터리에 생성된 모든 구성 요소에서 경로를 생성한다. 이 파일 시스템 라우팅은 명명 규칙을 사용하여 동적 및 중첩된(nested) 경로를 생성다. | pages/ ---| about.vue ---| index.vue ---| posts/ -----| [id].vue 아래는 생성된 라우터 파일 { "routes"..

Nuxt는 스타일링에 있어서 매우 유연하다. 자신만의 스타일을 작성하거나 로컬 및 외부 스타일시트를 참조하기 위해서 CSS 전처리기, CSS 프레임워크, UI 라이브러리 및 Nuxt 모듈을 사용하여 애플리케이션 스타일을 지정할 수 있다. 로컬 스타일시트 로컬 스타일시트를 작성하는 경우 이를 배치하는 자연스러운 장소는 assets/ 디렉토리다. 페이지, 레이아웃 및 구성 요소의 스타일시트를 직접 가져올 수 있다. javascript 또는 CSS 문을 임포트 하기위해 @import 문을 사용할 수 있다. 힌트) 위의 경우 스타일시트는 Nuxt가 렌더링한 HTML에 인라인된다. CSS 속성 Nuxt 구성에서 css 속성을 사용할 수도 있다. 스타일시트의 자연스러운 위치는 assets/ 디렉토리다. 이 경우 해..

// scss 인 경우 export default defineNuxtConfig({ vite: { css: { preprocessorOptions: { scss: { additionalData: '@use "~/assets/_colors.scss" as *;' } } } } }) Nuxt는 두 개의 디렉토리를 사용하여 스타일시트, 글꼴 또는 이미지와 같은 애셋을 처리한다. .public/ 디렉터리 콘텐츠는 서버 루트에서 그냥 그대로 제공된다 .assets/ 디렉터리 에는 일반적으로 빌드 도구(Vite 또는 webpack)에서 처리할 모든 애셋이 포함된다 public 디렉토리 public/ 디렉토리는 애플리케이션의 정의된 URL에서 공개적으로 사용 가능한 정적 자산이다. 애플리케이션의 코드나 브라우저의 루..

Nuxt는 애플리케이션의 사용자 인터페이스를 구현하기 위한 여러 구성 요소 레이어를 제공한다. 기본적으로 Nuxt는 이 파일을 진입점 으로 처리 하고 애플리케이션의 모든 경로에 대한 콘텐츠를 렌더링한다. Welcome to the homepage Vue에 익숙하다면 일반적으로 Vue 앱을 생성하는 main.js 파일이 어디에 있는지 궁금할 것이다. Nuxt는 이 작업을 백그라운드에서 수행한다. 컴포넌트 대부분의 컴포넌트, 버튼이나 메뉴와 같이 재사용 가능한 사용자 인터페이스다. Nuxt에서는 이러한 컴포넌트를 components/ 디렉터리에 생성할 수 있으며 명시적으로 임포트할 필요 없이 애플리케이션 전체에서 자동으로 사용할 수 있다. Welcome to the homepage This is an aut..

설치 각 패키지 관리자별로 설치 방법 정리한다. 터미널을 열고, 아래 명령 중 하나를 수행한다. // npx npx nuxi@latest init // pnpm pnpm dlx nuxi@latest init // bun bunx nuxi@latest init VSCode 를 통해 프로젝트를 연다. code 다시 터미널에서 프로젝트의 패키지 의존성을 해결한다. - VSCode, Intellij 에 내장된 터미널을 이용해도 된다. // yarn yarn install // npm npm install // pnpm pnpm install // bun bun install 기본 구성된 어플리케이션 서버 띄우기 - Development Server // yarn yarn dev --open // npm npm ..

미션 크리티컬한 소프트웨어 개발에서 자동화된 테스트는 필수적이다. 테스트를 자동화하면 개별테스트 및 테스트 모음을 빠르고 쉽게 반복할 수 있다. 이는 릴리스 품질 및 성능 목표를 충족하는지 확인 가능하게 한다. 자동화 테스트는 적용 범위를 늘리고 개발자에게 더 빠른 피드백 루프르 제공한다. 자동화 테스트는 개별 개발자의 생산성을 높이고 소스코드 제어 체크인, 기능 통합 및 버전 릴리즈와 같은 중요한 소프트웨어 개발 수명 주기 시점에 꼭 필요한 단계이다. 이러한 테스트는 단위 테스트, 엔드투엔드(e2e) 테스트, 통합 테스트 등 다양한 유형에 걸쳐있다, Nest는 효과적인 테스트를 포함한 개발 모범 사례를 제공하기 위해 다음과 같은 기능이 포함되어 있다. 구성요소에 대한 기본 단위 테스트와 애플리케이션에 ..

개요 테크 블로그에 또 왜 비(非)테크 글이냐 하겠지만 모든 프로그래머가 하루종일 코딩만 하지는 않고 공유의 측면에서 서평은 어떤 게시판에서든지 환영받는 주제 아닌가 생각해본다. 저자 소개 이다지 쌤은 현재 메가스터디에서 역사 분야 1타 강사다. 요즘 스타강사라고 하는 사람들은 대부분 독한 노력으로 그 자리에 올라섰다. 그래서 대부분 수험생들을 가르칠 때 강의 중간중간에 '쓴소리'를 많이 한다. 자기처럼 독하게 노력하라는 내용의 쓴소리 영상들. 수험생들도 스스로 나태해진 자신을 채찍질하기 위해 일부러 쓴소리 영상을 찾곤 한다. 그러나 이다지 쌤은 다르다. 항상 수험생들을 응원해준다. 넌 할 수 있어, 자기 자신을 사랑해줘, 열심히 했으니 자기 자신을 믿어. 이런 식으로 단소리를 한다. 가장 인간적이다. ..

개요 테크 블로그에 왠 비테크 글인가라고 생각할 지 모르겠지만, 원래 이 블로그의 1차 목적은 어떤 내용이라도 같은 팀원에게 공유하고 싶은 내용을 적기 위해 시작했다. 다음은 Stephen Krashen 교수의 외국어 습득 이론에 대해서 내 개인적인 생각과 혼합해서 정리해보았다. 영어 학습 미국드라마 '파친코'의 여주인공 김민하의 영어 인터뷰를 처음 들어보면 분명 미국에서 장기간 살다가 왔을 것이라고 생각하지만 국내파라는 사실에 다들 놀란다. 우리나라도 영어 교육의 방법이 바뀌고 있다. 영어 공부는 어떻게 해야할까? 거의 모든 남자들은 자기가 운전을 제일 잘한다고 생각하는 것처럼 대부분 영어 강사들은 이렇게 공부해야 영어가 는다라는 자신만의 이론이 있다. 그러나 많은 영어 강사들의 그런 이론들은 엉터리가..

nextjs의 끝판왕이라 생각되는 React-Query를 개념적으로만 다루어보겠습니다. React-Query는 React 앱에서 비동기 로직을 간편하게 처리할 수 있도록 도와주는 라이브러리입니다. 이전에 Redux와 Saga를 사용하여 비동기 관련 로직을 다뤘던 것과 다른 비동기 작업을 접근하고, 다양하고 유용한 기능을 제공하고있습니다. React-Query React-Query는 비동기 데이터 요청과 관련된 여러 가지 문제점을 해결하기 위해 등장했습니다. 이 라이브러리는 전역 상태 관리, 캐싱, 리패칭 등을 자동으로 처리하여 개발자가 데이터의 무결성에 직접 신경 쓰지 않아도 되도록 돕습니다. 기존에는 React 애플리케이션에서 비동기 데이터를 다루기 위해 Redux나 Context API와 함께 자체적..

이번 장에서는 Apache nifi 사용 안내서(1)에 이어서 docs 중 프로세서 구성에 대한 내용을 번역하여 기술하겠습니다. 프로세서 구성 프로세서의 탭에는 여러 가지 구성 항목이 있습니다. 프로세서 Settings Tab Name : 프로세서의 이름을 변경 작성 할 수 있습니다 Enabled : 프로세서의 이름 옆에는 활성화 여부를 판단하는 체크박스가 있습니다 Penalty Duration, Yield Duration : 페널티 지속 기간은 기본값 30초, 양보 지속 기간은 기본값 1초입니다. 데이터를 처리하는 일반적인 과정에서 이벤트가 발생할 수 있습니다. 데이터를 현재 시점에서 처리할 수 없지만 나중에 처리 가능할 수 있음을 나타내는 경우에 페널티를 부여할 수 있습니다. 마찬가지로 데이터를 처리..

이번 장부터는 Apache nifi 사용자 가이드 docs를 번역하여 기술하겠습니다. 전문용어 데이터 흐름 관리자 (DataFlow Manager, DFM) nifi 사용자 중 하나로 데이터 흐름의 구성 요소를 추가, 삭제, 수정할 수 있는 권한이 있는 사람을 의미합니다 플로우 파일 (FlowFile) nifi에서 단인 데이터 조각을 나타냅니다. 플로우 파일은 플로우 파일 속성(attributes)과 플로우 파일 콘텐츠(content)로 구성됩니다. 콘텐츠는 플로우 파일로 표현되는 데이터입니다. 속성은 데이터에 대한 정보나 콘텍스트를 제공하는 특성으로 키-값 쌍으로 이루어져 있습니다 프로세서 (Processor) 데이터를 수신하거나 외부 소스에서 데이터를 추출하고, 데이터를 외부 소스로 게시하거나 트랜스..

Topic. 가우스 함수의 개념, 위상에 대해 알아봅니다. 1. 개요 '가우스 함수' 란 카를 프리드리히 가우스가 수많은 분야에 업적을 남겼기 때문에, 가우스라는 이름이 여러 분야에서 널리 쓰이고 있습니다. 어떤 특정한 함수를 하나만을 가리키지는 않고 그래프의 좌우가 0에 수렴하며 중간이 최고 높이인 모양을 모두 가우스 함수라고 칭합니다. 중간 높이가 최고인점을 착안하여 '최대 정수 함수' 라고도 합니다. 이 함수가 어떻게 나왔는지 알기 위해서는 높은 수준의 수학지식이 필요하므로 우리는 모양과 변화에만 집중해서 관찰해봅시다. 2. 위상 위상이라는 멋있는 단어를 썼지만 그냥 쉽게 모양이라고 합시다. 가우스함수의 모양은 언덕모양처럼 생겼습니다. 3. 그래프 위 함수가 바로 가우스 함수입니다. x 는 지수이..

'23.11/28.에 진행했던 연구소 테크팀 세미나 Session 4 : SW품질확보를 위한 자동화테스트 https://youtu.be/PoR2AzQ0NXE

이번 장에서는 Apache nifi 시작 안내서(2)에 이어서 docs 중 프로세서 속성에 대한 내용을 번역하여 기술하겠습니다. 속성을 다루는 방법 각 FlowFile은 여러 속성과 함께 생성되며, 이러한 속성은 FlowFile의 수명 동안 변경될 수 있습니다. FlowFile의 개념은 매우 강력하며 세 가지 주요 이점을 제공합니다 첫째, 특정 기준을 충족하는 FlowFile을 다른 FlowFile과 다르게 처리할 수 있도록 흐름에서 경로를 결정할 수 있습니다. 이는 RouteOnAttribute와 유사한 프로세서를 사용하여 수행됩니다 둘재, 속성은 데이터 자체에 따라 프로세서를 구성하는 데 사용됩니다. 예를 들어 PutFile 프로세서는 각 FlowFile을 저장할 위치를 파악하기 위해 속성을 사용할 ..

이번 장에서는 Apache nifi 시작 안내서(1)에 이어서 docs 중 프로세서에 대한 내용을 번역하여 기술하겠습니다. 프로세서 각 프로세서에는 데이터를 전송할 수 있는 정의된 "Relationships" 집합이 있습니다. 프로세서가 FlowFile 처리를 완료하면 해당 FlowFile을 다른 Relationships 중 하나로 전송합니다. 이는 처리 결과에 따라 사용자가 구성할 수 있습니다. 예를 들어 많은 프로세서들은 성공(success)과 실패(failure) 두 가지로 정의합니다. 사용자는 데이터를 처리하는 프로세서가 데이터를 성공적으로 처리할 수 있는 경우에는 한 경로를 통해 흐르도록 데이터를 구성하고, 프로세서가 데이터를 처리할 수 없는 경우에는 완전히 다른 방식으로 흐르도록 데이터를 구성..

이번 장에서는 아파치 나이파이에 작성된 docs 중 시작 안내서를 번역 기술하겠습니다. 이 가이드는 누구를 위한 것입니까? 이 가이드는 Nifi를 처음 사용하거나, 경험이 제한되거나, 특정 작업에만 익숙한 사용자를 대상으로 작성되었습니다. 광범위한 정보를 제공하여 보다 체계적인 리소스로 설계 작성 되었으며 참조 가이드로 유용합니다. 이 가이드는 사용자가 필요로 하는 핵심 정보만을 제공하고 nifi를 사용하여 강력하고 유연한 데이터 흐름을 빠르고 간편하게 구축하는 방법을 이해하는데 도움을 주기 위해 작성되었습니다. 이 가이드에 사용된 용어 이 가이드문서를 이해하는데 중요한 몇 가지 용어가 있습니다. FlowFile "사용자 데이터"라고도 할 수 있는 각 조각의 데이터(즉, 사용자가 처리 및 배포를 위해 n..

이번 장에서는 아파치 나이파이에 작성된 docs 중 개발자 안내서를 번역 기술하도록 하겠습니다. 소개 이 개발자 가이드의 목적은 독자가 Apache Nifi 확장 기능을 개발하는 방법을 이해하고 구성 요소를 개발하는 데 필요한 정보를 제공하는 것입니다. 확장 기능을 개발하는 데 사용되는 API에 대한 소개와 설명을 제공합니다. NiFi 구성 요소 Nifi는 여러 확장 지점을 제공하여 개발자가 애플리케이션에 기능을 추가하여 필요에 맞게 사용할 수 있도록 합니다. 다음은 가장 일반적인 확장 지점들에 대한 설명입니다. 프로세서 프로세서 인터페이스는 Nifi가 FlowFiles, 그들의 속성 및 내용에 대한 액세서를 노출하는 메커니즘입니다. 프로세서는 Nifi 데이터 플로우를 구성하는 데 사용 되는 기본 빌딩 ..

'23. 11/28에 진행했던 연구소 세미나 중 세션3, Apache Nifi 소개 / 인터페이스 효율화 https://youtu.be/UcwWjJnN8r8