Reset CSS 예전에는 Reset CSS를 해주었지만 Tailwind는 설치만 하면 기본적인 Reset을 (margin이나 padding) 해주므로 따로 할 필요가 없지만 app/globals.css 파일은 생성해주어야 한다. globals.css 코드는 밑에서 채우고 우선 app/layout.tsx에서 import 해준다. import './globals.css'; Tailwind CSS https://nextjs.org/docs/app/building-your-application/styling 를 가면 Next.js에서 사용할 수 있는 CSS가 나온다. SCSS, CSS-in-JS중에 가장 유명한 styled-components를 사용해도 되지만, 요즘에는 Tailwind CSS의 점유율이 점점..

ESLint 설치 ESLint라고 하는 것... 짜증 그 자체이다. 나혼자 나만의 프로젝트를 코딩할 때는 절대 설치하지 않는다. 하지만 ESLint보다 더 참을 수 없는 것은 여러 명이 한 프로젝트를 같이 코딩할 때 일어나는 다양한 일들이다. 그래서 이런 불편함을 감수하고 ESLint의 적용하는지도 모른다. 문제는 인터넷 강의에도 잘 나와있지 않고, 공식 문서에 설명도 제대로 안 되어있다. 그러나 분명한 것은 아직까지는 팀 프로젝트에서 가장 많이 쓰이므로 핵심적인 것은 확실히 알고 넘어가야한다. 참조: https://nextjs.org/docs/pages/building-your-application/configuring/eslint Next.js는 바로 사용할 수 있는 통합 ESLint 환경을 제공한다..

주요 프로세서 ExecuteSQ ConvertRecord ConvertAvroToJSON JoltTransformJSON SplitAvro PutDatabaseRecord UpdateRecord InvokeHTTP 1. 주요 프로세서 ExecuteSQL 제공된 SQL 선택 쿼리를 실행합니다. 쿼리 결과는 Avro 형식으로 변환됩니다 ConvertRecord 구성된 레코드 리더 및 레코드 쓰기 컨트롤러 서비스를 사용하여 레코드를 한 데이터 형식에서 다른 데이터 형식으로 변환합니다. 판독기와 기록기는 일치하는 스키마로 구성되어야 합니다. 이는 스키마의 필드 이름이 동일해야 함을 의미합니다. ConvertAvroToJSON 바이너리 Avro 레코드를 JSON 객체로 변환합니다. 이 프로세서는 Avro 필드를 ..

지난 글 01-1. Create Next.js app에 이이서... Typescript 설정하기 지난 번에 생성한 layout.jsx의 파일 이름만 layout.tsx로 바꾼다. 그리고 다시 로컬 빌드를 다음과 같이 한다. $ npx next dev 그리고 package.json을 보면 자동으로 다음 3가지가 설치된 것을 볼 수 있다. "devDependencies": { "@types/node": "20.5.9", "@types/react": "18.2.21", "typescript": "5.2.2" } 추가로 next-env.d.ts라는 typescript 환경설정 파일과 tsconfig.json이라는 typescript compiler가 쓰는 config 파일도 자동으로 생성된 것을 볼 수 있다. ..

Introduction Meta에서 만든 React는 public/index.html에 이 하나의 div에 모든 걸 다 Javascript로, 또한 nested 구조로 때려박는 CSR (Client Side Rendering) 방식이다. (물론 예외적으로 createPortal 같은 modal창 만들 때 div 한 개 더 추가해주긴 하지만 개념적으로 그렇다.) SSR의 장점(빠른 초기 로딩, SEO)과 CSR의 장점(빠른 interaction)을 둘 다 섞은 Framework가 최근 더 점유율이 늘어나고 있다. Prerequisites 1. Visual Studio Code VS code를 https://code.visualstudio.com/download 여기서 다운로드받아 설치한다. 다른 IDE도 ..

실행 가이드 구동 로그인 웹 구성 Flow 실행 Flow 단위 실행 및 확인 1. Nifi 실행 가이드 💡 Nifi 설치는 이전 문서 [Nifi 설치하기] ← 링크를 참조 1.1. Nifi 구동 💡 Window 환경 설치한 NIFI의 홈 디렉토리에서 bin 폴더에 내에 있는 run-nifi.bat 파일을 실행하여 NIFI를 구동합니다 또한 구동 상태를 확인하기 위해 status-nifi.bat 배치 파일을 사용할 수 있습니다 run-nifi.bat // 실행 status-nifi.bat // 상태확인 1.2. Nifi 로그인 💡 도메인 : https://localhost:8443/nifi/login 페이지에 아래와 같이 뜬다면 [고급] 버튼을 눌러 localhost(안전하지 않음)(으)로를 눌러서 페이지..