/react_image_font

Primary LanguageTypeScript

document

react_image_font 설명

react_image_font는 Webpack(웹팩) 기반 React(리액트) 프로젝트에서 이미지(Image)와 웹 폰트(Font)를 사용하는 방법에 관한 저장소(Repository)입니다. 이 저장소(Repository)를 제작하면서 작성한 블로그가 있습니다. 자세한 내용은 아래에 링크를 통해 확인하시기 바랍니다.

사용 방법

아래에 명령어를 통해 react_image_font 저장소(Repository)를 복사(Clone)합니다.

git clone https://github.com/dev-yakuza/react_image_font.git

아래에 명령어로 필요한 라이브러리르 설치합니다.

npm install

아래에 명령어로 Webpack(웹팩) 개발 서버를 실행시킵니다.

npm start

개발 서버가 시작되면, 브라우저를 열고 http://localhost:3000/로 이동하여 Hello World!가 표시되는지를 확인합니다.

개발 서버를 중지시키고, 아래의 명령어로 React(리액트) 프로젝트를 빌드해 봅니다.

npm run build

빌드가 완료되면, ./dist/ 폴더를 확인할 수 있습니다.

react_image_font説明

react_image_fontはWebpack(ウェブパック)をベースにしたReact(リアクト)プロジェクトでイメージ(Image)とウェブフォント(Font)を使う方法についてまとめたレポジトリ(Repository)です。このレポジトリ(Repository)を作る時作成したブログポストがあります。詳しく内容は下記のリンクを確認してください。

使い方

下記のコマンドでreact_image_fontレポジトリ(Repository)をコピー(Clone)します。

git clone https://github.com/dev-yakuza/react_image_font.git

下記のコマンドで必要なライブラリをインストールします。

npm install

下記のコマンドでWebpack(ウェブパック)開発サーバーを起動します。

npm start

開発サーバーが起動したら、ブラウザを開いてhttp://localhost:3000/に移動したらHello World!が表示されることが確認できます。

開発サーバーを止めて、下記のコマンドでReact(リアクト)プロジェクトをビルドしてみます。

npm run build

ビルドが完了されたら、./dist/フォルダが生成されたことが確認できます。

how to use react_image_font

react_image_font repository is about how to use images and web fonts in React project based on Webpack. if you want to know more details, see the link below.

How to use

execute the command below to copy(clone) react_image_font repository.

git clone https://github.com/dev-yakuza/react_image_font.git

execute the command below to install libraries required the project.

npm install

execute the command below to start Webpack dev-server.

npm start

after starting the test server, open the browser and go to http://localhost:3000/. you can see Hello World! on the screen.

stop the dev server, and execute the command below to buidl React project.

npm run build

after building, you can see ./dist/ folder is created.