여기에서는 실습 개념으로

Vite를 이용해서 React 앱 생성하는 과정만 빠르게 살펴볼 것이다.

 

0. 실습 환경

- Ubuntu 20.04

 

1. Node

- Vite를 사용하기 위해서는 node가 설치되어 있어야 한다.

- 아직 설치가 안되어 있다면, 아래 포스팅을 통해 nvm 기반으로 설치하자.

  . https://www.whatwant.com/entry/npm

nvm

 

- 원활하게 Vite를 사용하기 위해서는 node 버전이 18 이상이어야 한다고 한다.

node version

 

2. Vite 설치

- npm을 이용하여 vite를 설치하면 된다.

> npm install vite@latest

install vite

 

3. Project 생성

- vite를 이용해서 React project를 생성해보자.

  . 아래 캡처한 내역과 같이 3가지 정보를 작성 및 선택해주면 된다.

> npm create vite@latest

create project

 

4. App 실행

- vite가 알려준대로 진행해보면 된다.

> cd gemini-nagger

> npm install

> npm run dev

run

 

- 웹브라우저를 통해 확인해보자.

WEB

 

간략히 살펴보았다.

반응형

'Programming > Web' 카테고리의 다른 글

백엔드 프레임워크 - KeystoneJS  (1) 2023.07.13
npm, node 그리고 nvm  (0) 2023.01.04

우연히 보게된 노마드 코더(Nomad Coders)의 유튜브.

파이썬 코드만가지고 JS, React, NextJS 인터랙티브 웹앱을 만들어주는 프레임워크가 나타났단다.

 

 

최근 정말 많은 주목을 받고 있는 오픈소스 프로젝트인 것은 분명한 것 같다.

 

https://pynecone.io/

 

Pynecone: The easiest way to build web apps.

Completely customizable. All Pynecone components are fully customizable. Change the colors, fonts, and styles to match your project. Styling guide ->

pynecone.io

 

발음이 같은 'pinecone'을 상징하는 솔방울을 로고로 사용하고 있다 ^^

 

공식 웹사이트도 Pynecone을 사용해서 만들었다고 한다.

왠지 Unix is Not Unix 같은 느낌인데!? 아닌가?! ^^

 

 

Pynecone은 파이썬으로 작성한 코드를

React/NextJS로 컴파일을 하는 방식이기에 성능이 뛰어나며 그래서 node를 필요로 하고 있다.

 

보다 더 나은 성능을 위해 node를 bun으로 교체하는 작업을 하고 있지만

아직 100% 호환성을 보장하지 못하기에 당분간은 node를 계속 필요로 할 것이라고 한다.

 

 

서두가 길었다.

이제 직접 한 번 사용해보자.

 

 

이하 과정은 다음 링크의 내용을 따라갔다.

- https://pynecone.io/docs/getting-started/installation

 

 

0. PoC Environment

  - 이하 과정을 진행한 환경은 Ubuntu 20.04 64bit Desktop 이다.

 

 

2. Prerequisites

  - Python 3.7+

  - NodeJS 12.22.0+

 

  ① Python 여러 버전을 관리할 수 있는 pyenv 기반으로 설치해보자.

    . https://www.whatwant.com/entry/pyenv

    . 설치한 버전은 다음과 같이 했다.

      - v3.8.16

 

  ② node 설치도 여러 버전을 관리할 수 있는 nvm 기반으로 설치를 진행해보자.

    . https://www.whatwant.com/entry/npm

    . 설치한 버전은 다음과 같이 했다.

      - v18.15.0   (Latest LTS: Hydrogen)

 

 

3. Virtual Environment

  - Optional 이라지만, 사실 필수이지 않을까 싶다.

❯ cd ./workdir

❯ python -m venv .venv

source .venv/bin/activate

 

 

4. Installing

  - 이제 pynecone 설치하면 된다!

 pip install pynecone

 

 

5. Create a Project

  - 일단 프로젝트 생성하는 방법부터 알아보자.

 mkdir my_app_name

 cd my_app_name

 pc init

 

 

6. Run the App

  - 일단 한 번 띄워보자.

 pc run

 

  - 브라우저로 확인해보자.

 

 

 

7. Edit

  - 본문을 살짝 살펴보자.

❯ nano my_app_name/my_app_name.py

  - 눈꼽만큼 변경해보자.

"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config

import pynecone as pc

docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"


class State(pc.State):
    """The app state."""

    pass


def index() -> pc.Component:
    return pc.center(
        pc.vstack(
            pc.heading("Welcome to WHATWANT!", font_size="2em"),
            pc.box("Get started by editing ", pc.code(filename, font_size="1em")),
            pc.link(
                "Check out our docs!",
                href=docs_url,
                border="0.1em solid",
                padding="0.5em",
                border_radius="0.5em",
                _hover={
                    "color": "rgb(107,99,246)",
                },
            ),
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )


# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()

 

  - 포트도 변경하고, debug log도 찍어보자.

❯ pc run --port 8282 --loglevel debug

 

  - http://localhost:8282/

 

 

8. Fast Refresh

  - Pynecone은 실시간으로 변경 사항이 반영된다.

  - 웹브라우저가 띄워져 있는 상황에서, 다른 터미널로 파일을 수정해보자.

❯ nano my_app_name/my_app_name.py

 

  - 파일을 수정한 뒤, 저장을 하면 조금 있다가 브라우저에 자동으로 페이지 내용이 변경된다.

 

 

 

일단 여기까지 살짝 맛만 봤고

시간이 나면 다음 단계로 넘어가보겠다. (시간이 날까?! ^^)

 

반응형

 

회사에서 내부적으로 사용할 웹사이트가 필요할 때

다른 개발자들이 종종 리액트를 추천하곤 했고, 결국은 리액트로 만들었었다.

 

Long long time ago,

PHP / ASP / JSP 시절에 웹사이트를 만들었었던 나는 ...

 

"그게 대체 뭔데!?"

 

Kubernetes 공부하면서 동작 테스트를 위한 간단한 웹서버를 띄울 때

Node.js를 이용해 정말 간단한 웹페이지를 만들어 보면서

새로운 세계를 살짝 엿보기는 했었지만 ...

 

그러던 중 집으로 배달된 아름다운 책 한 권 !!!

 

표지

나처럼 리액트가 뭔지 모르는 초심자를 위한 책이다 !!!

거기에다가 무료 동영상 강의까지 제공 되다니 !!!

나를 위한 찰떡 궁합 !!!

 

목차

목차를 살펴보면,

정말 말 그대로 초심자를 위해 엄청난 고민을 했다는 것이 딱 느껴진다.

 

일단, 너무 많은 내용을 포함하지 않아서 부담감이 크지 않은 점이 너무 좋았다.

 

꼭 알아야할 기초 중심으로 설명해주면서

마무리로 미니 프로젝트를 하나 함으로써 정리를 할 수 있게 해주고 있다.

동영상 강의

이 책의 가장 큰 매력 ... 동영상 강의 !!!

 

아는 사람은 알고 있는 goormedu에서 찾아볼 수 있다.

  - https://edu.goorm.io/

 

goormedu

goormedu 사이트에서 '리액트'로 검색을 해보면

리액트 관련한 많은 강의를 찾아볼 수 있다.

 

'처음 만난 리액트(React) v2' 강의를 선택하면 된다!!!

 

처음 만난 리액트(React) v2

무료다!

 

강의 목차
강의

책 없이 강의만 봐도 충분할 것 같은 퀄리티다.

 

인프런에서도 강의를 볼 수 있다.

  - https://www.inflearn.com/course/처음-만난-리액트/

 

인프런

동영상 강의 내용은 같다.

 

인프런 강의

유튜브로도 바로 볼 수 있다.

  - https://www.youtube.com/c/소플TV

 

유튜브

동영상 강의의 컨텐츠 내용은 모두 같다.

각자 편한 방식으로 선택하면 된다.

 

유튜브가 접근성이 편리해 보이지만,

goormedu 또는 inflearn을 통해서 강의를 듣게 되면 진도 체크 같은 도움을 받을 수 있어서 좋다.

 

그러면, 이제 GitHub를 방문해보자.

  - https://github.com/soaple

 

GitHub

저자의 사진도 볼 수 있다! (어?! 훈남이시네!!!)

 

실습 코드

실습코드도 제공되니 이를 활용하면 보다 편하고 재미있게 공부할 수 있다.

 

 

다시 책 내용을 살펴보도록 하자.

 

각 장의 앞 부분에는 어떤 것을 공부할 것이라고 알려주는 Preview 내용이 있다.

 

Preview

장을 마칠 때에는 Summary로 정리까지 해준다.

 

마무리

개인적으로 이렇게 정리해주는 것을 정말 좋아한다.

 

작은 요소에 매몰되지 않고 전체적인 큰 그림으로 보면서

지금 무엇을 공부하려고 하는 지, 지금까지 무엇을 공부한 것인 지 알면서 공부하는 것이 정말 중요하다!!!

 

마지막으로 살펴볼 내용은 ...

리액트를 공부하기 위한 책인데, 리액트의 단점에 대해서도 설명해주고 있다.

 

리액트 단점 1

 

리액트 단점 2

 

단점을 설명하긴 했지만,

그렇다고 절대 리액트의 매력이 떨어진다고는 생각하지 않는다.

 

개인적으로 크로스-플랫폼 프레임워크로써 플러터(Flutter)의 세상이 오기를 기다리고 있는 입장이지만

최소한 아직까지는 리액트의 세상이기에~

 

 

책 내용을 살펴본 느낌을 적어보자면,

저자가 정말 많은 고민을 하고, 애정을 쏟아서 정성들여 만든 초급자를 위한 안내서라고 느껴졌다.

 

강의를 많이 하던 분이라거 그런지

내용 하나 하나가 직접 설명을 해야하는 책임감을 갖고 작성된 것 같았다.

 

리액트 초급자라면 정말 무조건 선택해야 하는 책이라고 추천하고 싶다!!!

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

반응형

 

"최적의 리액트 코드를 작성하기 위한 모범 사례와 패턴"

 

책의 표지에 적혀있는 문구이다.

 

표지

 

러닝 리액트 - 10점
알렉스 뱅크스.이브 포셀로 지음, 오현석 옮김/한빛미디어

 

 

React를 공부하겠다라고 하면

주변 사람들이 입문서로 가장 많이 추천한 책이었는데,

마침 이번에 새로 개정까지 되었다니~ 금상첨화 !!!

 

 

표지

 

표지를 보면 알겠지만,

21년 7월 1일 1쇄 발행이다!

 

 

이 책의 포지션은 "입문서"이지만,

중급자가 보기에도 나쁘지는 않을 것 같다.

 

CONTENTS

 

목차를 보면

리액트에 대한 소개는 물론이고

변수 선언이나 함수 만들기부터

친절하게 차근 차근 소개를 해주고 있다.

 

 

사실 리액트의 시작은 얼굴책-Facebook이다.

 

Facebook에 적용이 되었다고 하여 유명세를 얻게 되었으며

심지어 별스타그램-Instagram도 리액트로 만들었다고 해서

많은 신도들을 불러들인 라이브러리이다.

 

리액트의 과거와 미래

 

책에서도 이러한 리액트의 역사와 비전에 대해서도

짧게나마 소개해준다.

 

 

요즘 기본이 된 사항이지만

이 책에서 사용된 소스 코드들을

GitHub로 제공해주고 있다.

 

코드 예제

https://github.com/MoonHighway/learning-react

 

MoonHighway/learning-react

The code samples for Learning React by Alex Banks and Eve Porcello, published by O'Reilly Media - MoonHighway/learning-react

github.com

 

 

[ Pros ]

- 리액트 입문자를 위한 친절한 책

: 리액트는 무엇인지, 변수 선언은 어떻게 하는지와 같은

기초적인 것부터 친절하고 쉽게 설명해준다.

 

- 샘플 코드와 결과를 보기 쉽게 제공

: 편집의 힘인 것 같은데,

희한하게 다른 책과 뭐가 다른지 딱 꼬집아 말할 수는 없지만

책을 보면서 소스 코드가 눈에 잘 들어왔다.

그리고 결과 등을 보여주는 부분도 보기 좋았다.

 

- 충실한 github.com 예제/정보 제공

: 예제 코드를 제공해주는 github에 꼭 접속해보기 바란다.

책에서 아쉬운 부분도 많이 채워준다.

Chapter에 맞춰서 꼭 github도 같이 보기를 강력하게 추천한다.

 

[ Cons ]

- 개발환경 구축에 대한 설명 미흡

: 입문자를 위한 책임에도

개발환경을 갖추는 부분에 대한 설명이 조금 부족하다.

없는 것은 아닌데... 아쉽다.

 

- 기능 설명의 나열

: 차근 차근 공부하려는 분들에게는 좋을 수도 있는 부분인데

바로 뭔가 만들면서 공부하는 것을 좋아하는 사람에게는 조금 아쉽다.

사전처럼 필요한 부분을 찾아서 보기에 좋을 수도 있기는 한데...

이 책만 가지고 리액트를 공부하기에는 조금 아쉬울 수 있을 것 같다.

 

[ 총평 ]

- 리액트를 공부하기 시작했다면 꼭 갖고 있기를 추천

클론 코딩과 같은 강의를 들으면서 보면 더더욱 많은 도움이 될 것 같다!

 

 

 

 

 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

 

반응형

+ Recent posts