새로 쓰는 사용 설명서

프로젝트 개요fsd 아키텍처에 대한 고려메모 앱을 구성하면서 fsd 아키텍처의 내용을 학습   pnpm을 사용하여 Next.js 프로젝트 시작 > pnpm create next-app...✔ What is your project named? … test-fsd✔ Would you like to use TypeScript? … No / Yes✔ Would you like to use ESLint? … No / Yes✔ Would you like to use Tailwind CSS? … No / Yes✔ Would you like your code inside a `src/` directory? … No / Yes✔ Would you like to use App Router? (recommended) … N..

사내에서 진행하고 있는 프로젝트 중, npm을 사용하여, 프로젝트 개발 환경을 구성한 프로젝트가 있다.해당 프로젝트를 작업하던 중, 너무 많은 패키지들로 인해, 패키지 로딩 속도와 핫로딩의 속도가 많이 지연 되는 현상을 발견했다. 이에 대한 해결책으로, js 런타임 환경으로 bun을 사용하면 빠른 속도로 프로젝트를 진행할 수 있다는 것을 검색을 통해 알게 되었다. bun을 설치하고, next.js의 프로젝트를 시작하는 방법을 알아 본다. 1. bun 설치bun을 설치하기 위한 스크립트는 아래와 같다. on Maccurl -fsSL https://bun.sh/install | bash on Windowpowershell -c "irm bun.sh/install.ps1 | iex"  2. next.js 설치..

화면 소스코드 import TextInput from "@/component/Input/TextInput"; import Label from "@/component/text/Label"; import Image from "next/image"; const LoginScreen = () => { return ( ID PW ); }; export default LoginScreen; 로그인 화면에 보여질 라벨, 텍스트 박스 컴포넌트들을 위치 시킬 때는 미리 준비된 tailwindCSS의 클래스를 사용하면 편하게 작업이 가능하다. const TextInput = ({ id, name, type }) => { return ( ); }; export default TextInput; const Label = ({..

Next.js는 server-side rendering등 여러 편의 기능을 지원하는 React 프레임워크이다. 회사에서 다른 분이 Next.js로 프로젝트를 진행하는 것을 보면서, React를 사용하여 기능을 구현해야 여러 기본 기능들을 구현하기 위해서는 서드파티 라이브러리들을 적절히 활용해야 하며, 프로젝트 시작 시 프로젝트 설정을 위해 여러 라이브러리를 설치하는 등 여러 선행 작업 들을 진행해야 한다. 이를 간단히 얘기해보자면, 스타일링을 위해서는 styled-component나 tailwindCSS를 설치하고, 라우팅 기능을 위해서는 React-Router라이브리러리를 설치해야 한다. 해당 작업에는 그리 오래 걸리는 작업이 아니지만 여건 번거로운 것이 사실이다. Next.js에서는 기본적으로 초기 ..

회사에서는 react.js + styled-component를 활용한 아토믹 디자인 패턴을 사용하고 있어서, 커스텀 컴포넌트를 구성하고 스타일 속성을 객체 형태로 생성하여 이를 활용하고, 문맥에 맞게 디자인 속성 값을 다양하게 적용하여 컴포넌트의 재사용성과 조합성을 강화하고 있다. 하지만 tailwindcss에서는 동적으로 className을 변경하여 적용하는 것을 권장하고 있지않다. 예를 들면 다음과 같은 코드 구성을 사용할 수 없다는 것이다. TestComponent에서와 같이 colorLevel을 전달받아 bg-red-{colorLevel}의 값을 동적으로 생성할 수 없다. const TestComponent = ({ colorLevel }: { colorLevel: String }) => { co..