@2023/10/29 안녕하세요 lika-7입니다오늘은 React Hook Form 라이브러리의 register 메서드를 설명하겠습니다 react-hook-form이란react-hook-form이란 애플리케이션에서 폼 관련 작업을 쉽게 처리하기 위한 라이브러리 중 하나이다.쉬운 유효성 검사와 간단한 구현이 특징입니다.React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.https://react-hook-form.com/ register 메서드register는 React Hook Form 라이브러리의 메서드 중 하나입니..

@2023/10/21 안녕하세요 lika-7입니다오늘은 styled-components에서 사용할 기본적 기법을 정리하였습니다주요 기법 2가지props로 스타일 선택 하기props를 통해 받은 데이터를 기반으로 컴포넌트의 스타일을 선택 할 수 있습니다.위의 예제는 primary 상태 일 때 버튼의 스타일을 바꿔주는 코드 입니다.$primary props가 true 일 때 background 와 color 색을 바꾸어 줍니다스타일의 확장컴포넌트를 이용할 때 전체 부분이 아닌 한,두가지 부분의 스타일만 바꾸고 싶을 때가 있습니다. overriding을 이용해 쉽게 컴포넌트의 스타일을 바꿀수 있습니다.위의 코드에서 TomatoButton은 Button과 닮은 것을 볼 수있습니다.TomatoButton에 But..

@2023/10/19 안녕하세요 lika-7입니다이번시간에는 Next.js 13에서 바뀐 내용을 다루겠습니다.app 폴더Next.js 13버전은 pages 폴더 대신에 app 폴더를 이용해 페이지 구성과 라우팅을 구현 할 수 있습니다.File System Routing파일 시스템 라우팅을 구성하는 방법은 크게 3가지가 있습니다. home/abc.com/home일반 라우팅[slug]/abc.com/{slug}동적 라우팅(group)/abc.com/라우팅 경로에 영향을 주지 않음일반 라우팅을 위한 파일 구성동적 라우팅을 위한 파일 구성그룹을 만들기 위한 파일 구성파일의 그룹을 만들기 위해 사용되며, 라우팅 경로에 영향을 주지 않습니다.app/ ├── layout.tsx ├── (marketing)/ │ ├─..

@2023/10/17 안녕하세요 lika-7입니다이번시간에는 Next.js에서 라우터를 사용하는 방법을 설명하겠습니다,.Next.js에서 라우터를 사용하는 방법Next.js에서 route는 파일 시스템 기반 라우터를 지원하여 라우팅 설정을 간단하게 만듭니다.이 방식을 사용하면 페이지 컴포넌트를 프로젝트의 디렉토리 구조와 일치시키고 URL 경로에 따라 페이지가 자동으로 연결됩니다.작동 방식 - 파일 기반 네비게이션pages/ ├── index.tsx ├── about.tsx └── products/ ├── index.tsx ├── product1.tsx └── product2.tsx페이지 컴포넌트는 pages 디렉토리에 저장됩니다.이 디렉토리 아래에 새로운 디렉토리를 만들고 해당 디렉토리에 페이지 컴포넌트..

@2023/10/17 안녕하세요 lika-7입니다이번시간에는 Next.js에서 데이터를 가져오는 방법을 설명하겠습니다,.Next.js에서 데이터를 가져오는 방법Next.js에서 데이터를 가져오는 방법을 data fetching이라고 합니다 react.js에서 데이터를 가져오는 방법은 보통 useEffect를 통해서 데이터를 가져 옵니다.Next.js 또한 비슷한 방법을 통해서 데이터를 가져올 수 있습니다.react.js에서 데이터를 가져오기React.js 에서 useEffect를 이용해 함수형 컴포넌트에서 데이터 가져오기, 구독 설정, 수동 DOM 조작을 수행하기 위한 Hook 중 하나 입니다.//JSX import React, { useState, useEffect } from 'react'; func..

@2023/10/15 안녕하세요 lika-7입니다이번시간에는 Next.js 설치 방법을 정리하겠습니다설치방법일반 설치 법npx create-next-app@latestoryarn create-next-app타입스크립트용 설치 법npx create-next-app@latest --typescriptoryarn create-next-app --typescript 현재 디렉토리에 설치하려면 npx create-next-app@latest --typescript ./ TypeScript: YesESLint: YesTailWind Css: Nosrc/ directory: YesApp Router: Noimport alias: No

@2023/10/15 안녕하세요 lika-7입니다이번시간에는 Next.js가 무엇인지 정리하겠습니다Next.JS란 / 사용 이유React의 SSR(Server Side Rendering)을 쉽게 구형할수 있도록 도와주는 프레임워크React는 라이브러리이고, Next.JS는 프레임워크React로 개발 할 때 SPA(Single Page Application)을 이용해 CSR(Client Side Rendering)을 하면 좋은점도 있는데검색엔진 최적화(Search Engin Optimazation) 부분에서 문제가 생깁니다.CSR은 첫페이지에서 빈 html을 가져와 JS파일을 해석하여 화면을 구성하기 때문에 포탈 검색에 거의 노출 안되는 문제가 있습니다.하지만 Next.js에서 Pre-Rendering을 ..

@2023/10/14 안녕하세요 lika-7입니다이번시간에는 대괄호 표기법에 대해서 정리하겠습니다.대괄호 표기법 (Bracket Notation) 이란대괄호 표기법 (Bracket Notation)은 객체의 속성(프로퍼티)에 접근할 때 사용되는 방법 중 하나입니다. 객체 내의 특정 속성에 접근하려면 해당 속성의 이름을 대괄호 [] 안에 넣어서 사용합니다. 이 방법은 객체의 속성 이름이 동적으로 생성되거나 변수로 지정되는 경우 유용합니다.예시const person = { name: "John", age: 30 }; const propertyName = "name"; console.log(person[propertyName]); // "John"위 예제에서 propertyName 변수에 저장된 문자열을 사용..