Angular에서 FormGroup 사용 시 아래와 같이 에러가 발생할 경우 해결 방법에 대해 알아보겠습니다. Error ERROR Error: NG01350: ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead. Example: In your class: this.myGroup = new FormGroup({ firstName: new FormControl() }); Or, if you'd like to avoid registering this form control, indicate th..

Next.js에서 Dynamic Routes 사용 방법에 대해 알아보겠습니다. Dynamic Routes Next.js에서는 page에 대괄호([param])를 추가하여 Dynamic Route를 생성할 수 있습니다. pages/movies 경로에 [id].js 파일을 생성하면 /movies/1, /movies/abc 등과 같은 경로로 접속할 수 있습니다. 다음 예제처럼 useRouter()의 query를 통해 /movies 다음의 하위 경로를 확인할 수 있습니다. // pages/movies/[id].js import { useRouter } from 'next/router'; export default function Detail() { const router = useRouter(); const {..

Next.js에서 Redirect와 Rewrite 설정 방법에 대해 알아보겠습니다. Redirect와 Rewrite 설정은 next.config.js 파일에서 설정하게 됩니다. next.config.js Next.js에서 커스텀 설정을 하기 위해서는 프로젝트 디렉터리의 루트에 next.config.js 또는 next.config.mjs 파일을 만들 수 있습니다. next.config.js는 JSON 파일이 아닌 일반 Node.js 모듈입니다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, }; module.exports = nextConfig; Next.js 서버 및 빌드 단계에서 사용되며 브라우저 ..

Next.js에서 Head 사용 방법에 대해 알아보겠습니다. Title 설정 Next.js에는 페이지 헤더의 제목을 변경하고 meta를 추가할 수 있는 내장 컴포넌트를 가지고 있습니다. import Head from 'next/head'; export default function Home() { return ( Hello ); } 태그 중복 방지 head에 태그가 중복되는 것을 방지하려면 다음 예제와 같이 태그가 한 번만 렌더링 되도록 하는 key 속성을 사용할 수 있습니다. import Head from 'next/head'; export default function Home() { return ( Hello ); } 이 경우 두 번째 meta property="og:title"만 렌더링 됩니다. ..

Next.js에서 스타일 적용하는 방법에 대해 알아보겠습니다. CSS-in-JS 가장 간단한 방법은 인라인 스타일입니다. export default function Home() { return ( Hello ); } CSS Modules Next.js는 [name].module.css 파일 명명 규칙을 사용하여 CSS Module을 지원합니다. Common.module.css 파일을 생성하고 스타일을 아래와 같이 작성합니다. 중요한 것은 .module.css 패턴을 사용하는 것입니다. .nav { display: flex; justify-content: space-between; background-color: red; } .text { color: blue; } 생성된 module을 import 해서 ..

Next.js에서 Rouing 하는 방법에 대해 알아보겠습니다. a 태그 사용 태그를 사용해서 페이지 이동을 할 수 있습니다. 하지만 페이지 이동 시 전체 페이지 새고로침이 되는 문제가 발생했습니다. export default function NavBar() { return ( Home About Us ); } Link 사용 single-page app 환경의 페이지 전환을 하려면 Link 컴포넌트를 사용해야 합니다. import Link from 'next/link'; export default function NavBar() { return ( Home About Us ); } useRouter() 컴포넌트에서 router 객체 내부에 접근하려면 userRouter() hook 을 사용할 수 있습니다..

Next.js를 사용하는 프로젝트 생성 하는 방법에 대해 알아보겠습니다. 시스템 요구 사항 Node.js 14.6.0 이상 MacOS, Windows(WSL 포함) 및 Linux가 지원됩니다. 프로젝트 생성 리액트 프로젝트를 생성하는 방법과 비슷하게 create-next-app 명령어를 사용합니다. @latest를 추가하면 최신 버전으로 프로젝트를 생성합니다. npx create-next-app@latest # or yarn create next-app TypeScript 프로젝트로 시작하려면 --typescript 옵션을 추가합니다. npx create-next-app@latest --typescript # or yarn create next-app --typescript 위의 방법으로 프로젝트를 생성..

WPF에서 Windows Forms(WinForm) Control 사용하는 방법에 대해 알아보겠습니다. 참조 추가 프로젝트에 다음 어셈블리에 대한 참조를 추가합니다. WindowsFormsIntegration System.Windows.Forms XAML에 추가 WinForm 컨트롤을 사용하려는 XAML 파일을 열고 아래 네임스페이스 매핑을 추가합니다. wf 네임스페이스 매핑은 Windows Forms 컨트롤이 포함된 어셈블리에 대한 참조를 설정합니다. xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" ... 사용 WindowsFormsHost 컨트롤을 사용하고 자식으로는 WinForm 컨트롤을 사용합니다. 전체 소스 ..

gatsby-source-filesystem 로컬 파일 시스템에서 Gatsby 애플리케이션으로 데이터를 sourcing 하기 위한 Gatsby 소스 플러그인입니다. 플러그인은 파일에서 파일 노드를 생성합니다. 다양한 "transformer" 플러그인은 파일 노드를 다양한 다른 유형의 데이터로 변환할 수 있습니다. Markdown, JSON, 이미지, YAML, CSV 및 기타 수집 가지 데이터 유형이 지원됩니다. 설치 $ npm install gatsby-source-filesystem 사용 방법 예시로 blog-posts 디렉토리를 생성하고 디렉터리 안에 post1.md, post2.md 파일을 생성합니다. gatsby-config.ts 파일의 plugin 부분을 아래와 같이 수정합니다. path 속성..

useStaticQuery useStaticQuery는 빌드 시 리액트 훅을 사용하여 Gatsby의 GraphQL 데이터 계층을 쿼리 하는 기능을 제공합니다. 이를 통해 React 컴포넌트는 구문 분석, 평가 및 컴포넌트에 삽입될 GraphQL 쿼리를 통해 데이터를 검색할 수 있습니다. useStaticQuery 훅은 모든 컴포넌트 또는 페이지에서 사용할 수 있습니다. const data = useStaticQuery(graphql` query HeaderQuery { site { siteMetadata { title } } } `); 사용 방법 TypeScript를 사용하고 gatsby-config.ts 파일에서 GraphQL 타입 생성에 관한 항목인 graphqlTypegen 값이 true로 설정되어..