차근차근 스칼라 언어에 접근을 시도합니다. 그 시작으로 스칼라 빌드도구 sbt입니다. sbt 대화형 빌드도구인 sbt는 버전 1.9.8까지 나와있습니다. sbt는 스칼라와 자바를 위해 만들어졌으며 스칼라와 자바 프로젝트용 빌드 도구입니다. 2019년 기준으로 스칼라 개발자의 93.6%가 이를 선호하는 것으로 알려져 있습니다. 스칼라에 특화된 기능 중 하나는 여러 스칼라 버전에 대해 프로젝트를 크로스 빌드할 수 있는 능력입니다. 기본적으로 build.sbt는 병렬 처리 작업 그래프를 표현하기 위한 스칼라 기반 DSL입니다. build.sbt에서의 오타는 컴파일 에러로 감지됩니다. 더 많은 정보가 필요하다면 아래 sbt 도메인에서 다양한 정보를 찾아볼 수 있습니다. https://www.scala-sbt.o..

스칼라를 보다가 잠시 삼천포에 빠져보고자 합니다. 그 대상은 IT 기술 랭킹 2023 이란 토픽으로 스택오버플로 내용을 살펴보고자 합니다. (작성일 2023-12-27) - https://survey.stackoverflow.co/2023/#technology-most-popular-technologies Stack Overflow Developer Survey 2023 In May 2023 over 90,000 developers responded to our annual survey about how they learn and level up, which tools they're using, and which ones they want. survey.stackoverflow.co 2023년 5월, 9..

Hello Scala를 찍어보았지만 아는 게 너무 없어서 최신 릴리즈 정보부터 학습해 보겠습니다. New in Scala 3 가장 중요한 변화들에 대한 간단한 개요를 제공해 드리겠습니다. 더 자세한 정보를 원하신다면 공식 홈페이지의 자료를 확인해 주세요! 스칼라 3 북 : 스칼라 언어를 처음 접하는 개발자 용 구문 요약 (Syntax Summary) : 새 구문들에 대한 공식적인 설명 제공 언어 참조 (Language Reference) : Scala2에서 Scala3으로의 변경 사항에 대한 자세한 설명 마이그레이션 가이드 : Scala2에서 Scala3로 이동하는데 필요한 정보 스칼라 3 Contributing 가이드 : 문제 해결 가이드 및 컴파일러 https://docs.scala-lang.org/..

vscode로 플러그인 설치하고, Hello Scala 출력하기 vscode extention 설치 플러그인명 : Scala Syntax (offical) 설명 : 공식적으로 지원되는 스칼라 문법 강조 확장입니다. 기본적인 문법 강조와 코드 가독성을 높여줍니다 플러그인명 : Metals 설명 : Scala 및 sbt 프로젝트용 풍부한 기능을 제공하는 확장입니다. 코드 내비게이션, 리팩터링, 자동완성, 코드 액션 등 다양한 기능을 제공합니다. Metals = Meta (from Scalameta) + LS (from Language Server) 플러그인명 : Scala Language Server 설명 : 스칼라 언어 서버를 활용한 확장으로, 코드 분석, 자동완성, 코드 작성 지원 등 다양한 기능을 제공..

빅데이터 분석을 위해 배우기 위해 Scala와 spark를 배우는 여정을 담아보려 합니다. 스칼라는 2004년 마틴 오더스키가 자바의 복잡함을 극복하기 위해 만든 언어입니다. Scala라는 명칭은 이탈리아어로 계단을 뜻하기도 합니다만 Scalable Language에서 유래되었습니다. 한국에서는 '스칼라(skah-lah)라고 읽지만 영어권에서는 '스케일러 (skay-lah)'라고 자주 부른다고 합니다, 스칼라는 간결한 코드로 자바의 대부분 기능을 구현할 수 있습니다. 이러한 스칼라는 범용 프로그램 언어로, 다른 언어로 표현가능한 패턴을 간결하게 표현할 수 있습니다. 객체지향과 함수형 프로그래밍을 결합하고 자바 API를 활용하여 개발자의 생산성을 높여주고 있습니다. 예를 들어 같은 프로그램을 자바로 작성했..

메타데이터는 SEO 및 공유성에 매우 중요하다. 이 장에서는 Next.js 애플리케이션에 메타데이터를 추가하는 방법에 대해 설명한다. 이번 장에서 다룰 주제는 아래와 같다. 메타데이터란? 메타데이터 유형. 메타데이터를 사용하여 오픈 그래프 이미지를 추가하는 방법 메타데이터를 사용하여 파비콘을 추가하는 방법 메타데이터란? 웹 개발에서 메타데이터는 웹페이지에 대한 추가 세부정보를 제공한다. 페이지를 방문하는 사용자에게는 메타데이터가 표시되지 않는다. 대신 페이지의 HTML, 일반적으로 엘리먼트에 포함되어 뒤에서 작동한다. 이 숨겨진 정보는 웹페이지의 콘텐츠를 더 잘 이해해야 하는 검색 엔진 및 기타 시스템에 매우 중요하다. 메타데이터가 왜 중요한가? 메타데이터는 웹페이지의 SEO를 향상시키는 데 중요한 역할..

이전 장에서는 폼 유효성 검사를 추가하고 접근성을 향상하여 송장 경로 구축을 완료했다. 이 장에서는 대시보드에 인증을 추가한다. 이번 장에서 다룰 주제는 아래와 같다. 인증이란? NextAuth.js를 사용하여 앱에 인증을 추가하는 방법. 미들웨어를 사용하여 사용자를 리디렉션하고 경로를 보호하는 방법. React의 useFormStatus 및 useFormState를 사용하여 보류 상태 및 폼 오류를 처리하는 방법. 인증이란? 인증은 오늘날 많은 웹 애플리케이션의 핵심 부분이다. 이는 시스템이 사용자가 자신이 누구인지 확인하는 방법이다. 보안 웹사이트에서는 사용자의 신원을 확인하기 위해 다양한 방법을 사용하는 경우가 많다. 예를 들어 사용자 이름과 비밀번호를 입력하면 사이트에서 기기로 인증 코드를 보내거..

이전 장에서는 오류(404 오류 포함)를 포착하고 사용자에게 대체 메시지를 표시하는 방법을 살펴보았다. 그러나 여전히 퍼즐의 또 다른 부분인 폼 유효성 검사에 대해 논의가 필요하다. 서버 액션으로 서버측 유효성 검사를 구현하는 방법과 접근성을 염두에 두고 useFormState 후크를 사용하여 폼 오류를 표시하는 방법을 살펴보겠다. 이번 장의 주제는 아래와 같다. 접근성 모범 사례를 구현하기 위해 Next.js와 함께 eslint-plugin-jsx-a11y를 사용하는 방법. 서버 측 폼 유효성 검사를 구현하는 방법. React useFormState 후크를 사용하여 폼 오류를 처리하고 사용자에게 표시하는 방법. 접근성이란? 접근성이란 장애가 있는 사용자를 포함하여 모든 사람이 사용할 수 있는 웹 애플리..

이전 장에서는 서버 액션을 사용하여 데이터를 변경하는 방법을 배웠다. JavaScript의 try/catch 문과 Next.js API를 사용하여 오류를 우아하게 처리하는 방법을 살펴보자. 이번 장의 주제는 아래와 같다. 특수 error.tsx 파일을 사용하여 경로 세그먼트에서 오류를 포착하고 사용자에게 대체 UI를 표시하는 방법. notFound 함수와 찾을 수 없는 파일을 사용하여 404 오류(존재하지 않는 리소스의 경우)를 처리하는 방법. 서버 액션에 try/catch 추가 먼저 오류를 적절하게 처리할 수 있도록 JavaScript의 try/catch 문을 서버 액션에 추가해 보자. 이를 수행하는 방법을 알고 있다면 서버 액션을 업데이트하는 데 몇 분 정도 시간을 투자하거나 아래 코드를 복사할 수 ..

이전 장에서는 URL 검색 매개변수 및 Next.js API를 사용하여 검색 및 페이지네이션을 구현했다. 송장 생성, 업데이트 및 삭제 기능을 추가하여 송장 페이지 작업을 계속해 보자. 이번 장에서 다룰 내용은 아래와 같다. React Server Actions가 무엇이며 이를 사용하여 데이터를 변경하는 방법. 양식 및 서버 컴포넌트로 작업하는 방법. 유형 유효성 검사를 포함하여 기본 formData 개체 작업에 대한 모범 사례. revalidatePath API를 사용하여 클라이언트 캐시를 재검증하는 방법. 특정 ID를 사용하여 동적 경로 세그먼트를 만드는 방법. 낙관적 업데이트를 위해 React의 useFormStatus 후크를 사용하는 방법. 서버 액션이란? React Server Actions를 ..

이전 장에서는 스트리밍을 통해 대시보드의 초기 로드 성능을 개선했다. 이제 /invoices 페이지로 이동하여 검색 및 페이지네이션을 추가하는 방법을 알아보자! 이번 장에서는 아래와 같은 주제를 다룬다. Next.js API(searchParams, usePathname 및 useRouter)를 사용하는 방법을 알아보세요. URL 검색 매개변수를 사용하여 검색 및 페이지네이을 구현합니다. 코딩 시작 /dashboard/invoices/page.tsx 파일 내에 다음 코드를 붙여넣는다. import Pagination from '@/app/ui/invoices/pagination'; import Search from '@/app/ui/search'; import Table from '@/app/ui/inv..

부분 사전 렌더링은 Next.js 14에 도입된 실험적 기능이다. 기능이 안정화되면서 이 페이지의 내용이 업데이트될 수 있다. 실험적인 기능을 사용하지 않으려면 이 장을 건너뛰어도 된다. 이 장은 전체 과정을 완료하는 데 꼭 필요하지 않다. 이번장에 다룰 주제는 아래와 같다. 부분 사전 렌더링이란? 부분 사전 렌더링의 작동 방식 정적 콘텐츠와 동적 콘텐츠 결합 현재 경로 내에서 동적 함수(예: noStore(), cookie() 등)를 호출하면 전체 경로가 동적이 된다. 이는 오늘날 대부분의 웹 앱이 구축되는 방식과 일치한다. 전체 애플리케이션 또는 특정 경로에 대해 정적 렌더링과 동적 렌더링 중에서 선택한다. 그러나 대부분의 경로는 완전히 정적이거나 동적이지 않다. 정적 콘텐츠와 동적 콘텐츠가 모두 포..

이전 장에서는 대시보드 페이지를 동적으로 만들었지만 느린 데이터 가져오기가 애플리케이션 성능에 어떤 영향을 미칠 수 있는지 논의했다. 데이터 요청이 느린 경우 사용자 경험을 개선할 수 있는 방법을 살펴보겠다. 이번 장에서는 아래의 주제를 다룬다. 스트리밍이란 무엇이며 언제 사용할 수 있나? loading.tsx 및 Suspense를 사용하여 스트리밍을 구현하는 방법. 로딩 스켈레톤이란? 경로 그룹은 무엇이며 언제 사용할 수 있나? 애플리케이션에서 Suspense 경계를 배치할 위치. 스트리밍이란 무엇입니까? 스트리밍은 경로를 더 작은 "청크"로 나누고 준비가 되면 서버에서 클라이언트로 점진적으로 스트리밍할 수 있는 데이터 전송 기술이다. 스트리밍을 하면 느린 데이터 요청이 전체 페이지를 차단하는 것을 방..

이전 장에서는 대시보드 개요 페이지에 대한 데이터를 가져왔다. 그러나 현재 설정의 두 가지 제한 사항에 대해 간단히 논의했다. 데이터 요청이 의도하지 않은 워터폴 전송이 되었다. 대시보드는 정적이므로 데이터 업데이트가 애플리케이션에 반영되지 않는다. 이번 장에서는 아래의 주제를 다룬다. 정적 렌더링이 무엇이며 애플리케이션 성능을 어떻게 향상시킬 수 있는지 알아보자. 동적 렌더링이란 무엇이며 언제 사용해야 할까? 대시보드를 동적으로 만드는 다양한 접근 방식을 알아보자. 느린 데이터 가져오기를 시뮬레이션하여 무슨 일이 일어나는지 확인해보자. 정적 렌더링이란 무엇입니까? 정적 렌더링을 사용하면 빌드 시(배포 시) 또는 유효성 재검사 중에 데이터 가져오기 및 렌더링이 서버에서 발생한다. 그 다음 결과는 CDN(..

이제 데이터베이스를 생성하고 초기 데이터도 구축했으므로 애플리케이션에 대한 데이터를 가져올 수 있는 다양한 방법에 대해 논의하고 대시보드 개요 페이지를 구축해 보자. 이번 장에서 다룰 내용은 아래와 같다. API, ORM, SQL 등 데이터를 가져오는 몇 가지 접근 방식. 서버 컴포넌트가 백엔드 리소스에 보다 안전하게 액세스하는 방법 네트워크 워터폴 이란? JavaScript 패턴을 사용하여 병렬 데이터 가져오기를 구현하는 방법 데이터 페치 방법 선택 API 레이어 API는 애플리케이션 코드와 데이터베이스 사이의 중간 계층으로 쓰인다. API를 사용할 수 있는 몇 가지 경우가 있다. API를 제공하는 타사 서비스를 사용하는 경우. 클라이언트에서 데이터를 가져오는 경우 데이터베이스 비밀정보가 클라이언트에 ..

대시보드 작업을 계속하려면 몇 가지 데이터가 필요하다. 이 장에서는 @vercel/postgres를 사용하여 PostgreSQL 데이터베이스를 설정한다. PostgreSQL에 이미 익숙하고 자체 공급자를 사용하고 싶다면 이 장을 건너뛰고 직접 설정할 수 있다. 이번 장에서 다룰 내용은 아래와 같다. 프로젝트를 GitHub에 푸시한다. 즉각적인 미리보기 및 배포를 위해 Vercel 계정을 설정하고 GitHub 저장소를 연결한다. 프로젝트를 생성하고 Postgres 데이터베이스에 연결한다. 초기 데이터로 데이터베이스를 시드한다. GitHub 저장소 만들기 시작하려면 아직 수행하지 않았다면 리포지토리를 Github에 푸시해 보겠다. 이렇게 하면 데이터베이스를 더 쉽게 설정하고 배포할 수 있다. 참고: GitL..

이전 장에서는 대시보드 레이아웃과 페이지를 생성했었다. 이제 사용자가 대시보드 경로 간을 탐색할 수 있도록 몇 가지 링크를 추가해 보겠다. 이 챕터에서 다루는 주제는 아래와 같다. next/link 컴포넌트를 사용하는 방법. usePathname() 후크를 사용하여 활성 링크를 표시하는 방법. Next.js에서 탐색이 작동하는 방식. 탐색을 최적화하는 이유는 무엇입니까? 페이지를 연결하려면 일반적으로 엘리먼트를 사용합니다. 현재 사이드바 링크는 엘리먼트를 사용하지만 브라우저에서 홈, 송장, 고객 페이지 사이를 탐색할 때 어떤 일이 발생하는지 확인하자. 각 페이지 탐색에 전체 페이지 새로 고침이 있다! 컴포넌트 Next.js에서는 컴포넌트를 사용하여 애플리케이션의 페이지 간을 연결할 수 있다. 를 사용하면..

NiFI의 Relationships 설명입니다. 각 프로세서에는 데이터를 전송할 수 있는 정의된 "Relationships" 집합이 있습니다. 프로세서가 FlowFile 처리를 완료하면 해당 FlowFile을 다른 Relationships 중 하나로 전송합니다. 이는 처리 결과에 따라 사용자가 구성할 수 있습니다. 대부분 프로세서들은 성공(success)과 실패(failure) 두 가지로 정의합니다. 프로세서간 일반적인 Relation 말고도 프로세스 그룹간 데이터를 전송하는 입력 포트와 출력포트도 있습니다. 입력 포트(Input Port) : 입력 포트는 데이터를 프로세스 그룹으로 전송하는 메커니즘을 제공합니다. 입력 포트를 캔버스에 끌어다 놓을 때 DFM은 포트에 이름을 지을 것을 요청받습니다. 프로..

동기화 업무를 수행하기 위해 사용한 Processor 위주의 설명입니다. 사용할 Processor 종류는 다음과 같습니다. ExecuteSQL ConvertAvroToJSON SplitJson EvaluateJsonPath PutSQL UpdateAttribute MergeRecord ExecuteSQL 제공된 SQL 선택 쿼리를 실행합니다. 쿼리 결과는 Avro 형식으로 변환됩니다. 가져온 ExecuteSQL의 모습과 이슈 사항의 이미지 최초 생성시 이슈 사항으로 'Database Connections Pooling Servie' 와 'Relationship success/failure' ExecuteSQL Properties 주요 설정사항은 총 2가지입니다. Database Connection Poo..

지금까지 애플리케이션에는 메인 페이지만 있었다. 레이아웃 과 페이지를 사용하여 더 많은 경로를 생성하는 방법을 알아보자. 이 챕터에서 다룰 주제는 다음과 같다. 파일 시스템 라우팅을 사용하여 dashboard 경로를 만든다 . 새 경로 세그먼트를 생성할 때 폴더와 파일의 역할을 이해한다. 여러 대시보드 페이지 간에 공유할 수 있는 네스티드 레이아웃을 만든다. 코로케이션, 부분 렌더링, 루트 레이아웃이 무엇인지 이해다. 중첩 라우팅 Next.js는 중첩된 경로를 만드는데, 파일 시스템 라우팅을 사용한다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타낸다. layout.tsx 및 page.tsx 파일을 사용하여 각 경로에 대해 별도의 UI를 만들 수 있다. page.tsx는 React 컴포넌트를..