Introduction 이번 글에서는 Vscode에서 Tailwind css를 사용할 때 유용한 두가지 확장프로그램을 소개하고자 합니다. 그 확장프로그램은 Tailwind Twin IntelliSense와 HeadWind입니다. 1. Tailwind Twin IntelliSense vscode에서 Intellisense 확장프로그램을 설치했다면, Tailwind CSS 마스터입니다. CSS 프레임워크를 다룰때 지속적으로 나왔던 단점이 '학습곡선이 존재한다. ' (본인은 동의하지 않음)었습니다. 하지만 이 환상적인 확장 프로그램을 설치함으로써, 없애버렸습니다. 일단 사용하기만 한다면, Tailwind CSS의 클래스를 빠르게 탐색하고 적용하는데 매우 유용합니다. 역할 자동 완성 기능 : 클래스 이름을 입력..

Introduction 이번 글에서는 rules of Hooks에 이어서, 기본이 되는 Basic Hooks에 대해서 소개합니다. 1. useState 컴포넌트에 상태 변수를 추가할 수 있게 해주는 기능입니다. useState는 함수 컴포넌트 내에서 상태 변수를 선언하고 업데이트하는 데 사용됩니다. 다음은 기본적인 사용법입니다: import { useState } from "react"; export default function Home() { const [count, setCount] = useState(0); return ( Next.js Example setCount(count + 1)}>Click me! Clicked {count} times. ); } 조건부 랜더링으로 사용된 예 const [..

Introduction 이번 글에서는 React에서 Hook의 규칙에 대해 알아보고 또 알려진 Hook은 무엇이 있는지 알아보고자 합니다. 1. Rules of Hooks [1] 원문글링크 Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks는 React 16.8에서 새롭게 추가된 기능입니다. 클래스를 작성하지 않고도 상태와 다른 React 기능을 사용할 수 있게 해줍니다.. + React 16.8 버전은 2019년 2월 6일에 릴리스되었습니다 Hooks are JavaScript functions, but you need to follow two..

Introduction 이번 글에서는 CSS 프레임워크 선택에 있어서 주요 요소와 CSS에 대하여 알려진 사실들을 다루겠습니다. 최근에 프론트엔드 개발에 관심도가 높아지면서 자연스럽게 CSS에 대한 관심이 올라가고 있습니다. 그래서 찾아보았습니다. CSS 분야에서 지금 가장 주목받고 있는 프레임워크는 무엇인지, 또한 CSS를 다룰때 무엇이 개발자들을 고통스럽게 하는지. 1. Best CSS는 무엇인가? 우선, Best CSS가 무엇인지에 대한 궁금증으로 시작하였고, 구글 검색을 통해 결과를 찾아볼 수 있었습니다. 가장 먼저 노출되는 "24 Best CSS Frameworks ..." 에서 들여다보면 트렌드를 한눈에 파악할 수 있습니다. [1] 원문글 링크 title, 24 Best CSS Framewor..

Parallel Routes란 Parallel route란 Next.js 13.3 버전에서 새로 도입된 기능이다. 13.3버전은 2023년 4월초에 출시되었고 App router가 공식적으로 개시된 13.4버전은 2023년 5월초에 출시되었다. 그래서 자료를 찾아도 많이 없다. 우선 공식문서의 주소 : https://nextjs.org/docs/app/building-your-application/routing/parallel-routes Parallel routes가 무엇인지에 대해 공식문서에 설명이 아주 길지만, 나름 한 줄로 요약하자면, 같은 layout에서 slot을 이용해 여러 개의 page를 동시에 rendering하고 독립적으로 streaming이 가능하며 각각 폴더에 loading.tsx과..

Introduction 사소한 Lint 설정 때문에 시간 낭비했던 것들을 Error 위주로 간략히 기록하고자 합니다 1. 오류 Error: A space is required after '{'. @typescript-eslint/object-curly-spacing Error: A space is required after '}'. @typescript-eslint/object-curly-spacing 2. Prettier Lint 설정 { "bracketSpacing": true } // 위 소스 추가시 변경점 차이 import {IconType} from 'react-icons/lib'; // false import { IconType } from 'react-icons/lib'; // true Pr..