https://github.com/byahram/react-ui-components
[React / VanillaJS] UI 요소 직접 만들기
https://github.com/byahram/react-ui-components
nextjs react typescrpit ui-components vanillajs
Last synced: about 2 months ago
JSON representation
[React / VanillaJS] UI 요소 직접 만들기
- Host: GitHub
- URL: https://github.com/byahram/react-ui-components
- Owner: byahram
- Created: 2024-09-12T03:25:13.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-10-08T02:46:43.000Z (8 months ago)
- Last Synced: 2024-10-10T06:20:49.969Z (8 months ago)
- Topics: nextjs, react, typescrpit, ui-components, vanillajs
- Language: TypeScript
- Homepage:
- Size: 112 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [ UI요소 만들기 강의 코드 - 보일러플레이트 ]
## 디렉토리 구조
- `app`: app 전반에 대한 기본 view 제공
- `[...item]/page.tsx`: `/[...item]` route의 page view. `routes`의 `key`에 매칭된 컴포넌트를 렌더링.
- `layout.tsx`: 기본적인 html 구성
- `page.tsx`: `/` route의 page view. `/README.md`를 보여줍니다.
- `global.scss`: app 전반의 style
- `gnb.tsx`: 좌측 메뉴 컴포넌트
- `components`
- `vanillaWrapper.ts`: 독립적인 VanillaJS 환경의 wrapper 컴포넌트
- `routes.ts`: route 구성
## Getting Started
- 다운로드 받은 파일의 압축을 해제하고, 터미널에서 해당 폴더로 이동합니다.
```bash
cd uiComponents
```
- npm module 설치를 진행합니다.
```bash
npm install
# or
pnpm install
# or
yarn
```
- 개발 서버를 실행합니다.
```bash
npm run dev
# or
pnpm run dev
# or
yarn dev
```
- 브라우저에서 [http://localhost:3000](http://localhost:3000)에 접속하여 결과를 확인합니다.