받아보는 메일링 리스트를 통해 알게된 재미있는 Framework가 있어서 한 번 다뤄보려 한다.

https://oneoneone.kr/content/d9b579e3

 

나온지 꽤 된 것임에도 잘 몰랐는데,

'노마드 코더'의 극찬 영상으로 인해 호기심을 확 끌었다.

https://www.youtube.com/watch?v=DlyoFFOcPCg

 

 

이 framework의 분류를 정확히 뭐라해야할지 애매한데, 구글링을 통해 확인한 여러 별칭은 다음과 같다.

  - CMS

  - App Framework

  - App Backend

  - Backend Framework

  - Admin Panel

  - Library

 

음... 아직 명확한 naming은 안되어있는 분류인 것이다.

하지만, 뭘 말하고자 하는 것인지는 왠지 알 수 있을 것만 같은 느낌적인 느낌!?

 

 

일단, 이번에 다뤄보고자 하는 것은 "Keystone JS"라는 아이이다.

https://keystonejs.com/

 

재빨리 설치하고 웹을 띄워보자!!!

 

 

[ Environment ]

일단 개발 환경은 다음과 같다.

- 운영 체제: Ubuntu 20.04 LTS

 

❯ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description: Ubuntu 20.04.6 LTS
Release: 20.04
Codename: focal

 

 

[ Node ]

이 아이도 Node.JS 기반이고 npm을 이용하기 때문에 node부터 설치를 해야 한다.

 

버전 호환성으로 인한 어려움이 종종 발생하기 때문에

우리는 node의 다양한 버전을 다룰 수 있는 방법이 필요하다!

 

그래서, 나의 선택은 nvm !!!

아래 링크를 통해 nvm, node, npm 설치를 하자 !!!

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

 

❯ git clone https://github.com/nvm-sh/nvm.git ~/.nvm
'/home/chani22/.nvm'에 복제합니다...
remote: Enumerating objects: 9051, done.
remote: Counting objects: 100% (1830/1830), done.
remote: Compressing objects: 100% (111/111), done.
remote: Total 9051 (delta 1764), reused 1730 (delta 1719), pack-reused 7221
오브젝트를 받는 중: 100% (9051/9051), 3.28 MiB | 10.09 MiB/s, 완료.
델타를 알아내는 중: 100% (5790/5790), 완료.


❯ cd ~/.nvm


❯ git tag


❯ git switch -c v0.39.3 tags/v0.39.3
새로 만든 'v0.39.3' 브랜치로 전환합니다
 3.8.16  chani22@chani22-VBox  ~/.nvm   v0.39.3


❯ nano ~/.zshrc

 

...
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

 

- shell 재접속 후

 

❯ nvm --version
0.39.3


❯ nvm install node
Downloading and installing node v20.4.0...
Downloading https://nodejs.org/dist/v20.4.0/node-v20.4.0-linux-x64.tar.xz...
######################################################################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v20.4.0 (npm v9.7.2)
Creating default alias: default -> node (-> v20.4.0)


❯ node --version  
v20.4.0


❯ npm --version 
9.7.2

 

 

[ Keystone JS ]

npm을 이용해서 keystone-app을 생성할 수 있다.

나의 app 이름을 지어주면 기본적인 boilerplate를 생성해준다.

 

❯ mkdir keystone


❯ cd keystone


❯ npm init keystone-app@latest
Need to install the following packages:
  create-keystone-app@9.0.1
Ok to proceed? (y) 

✨ You're about to generate a project using Keystone 6 packages.

✔ What directory should create-keystone-app generate your app into? · my-app

⠋ Installing dependencies with yarn. This may take a few minutes.
⚠ Failed to install with yarn.
✔ Installed dependencies with npm.


🎉  Keystone created a starter project in: my-app

  To launch your app, run:

  - cd my-app
  - npm run dev

  Next steps:

  - Read my-app/README.md for additional getting started details.
  - Edit my-app/keystone.ts to customize your app.
  - Open the Admin UI
  - Open the Graphql API
  - Read the docs
  - Star Keystone on GitHub


❯ cd my-app/


❯ ls -al
합계 484
drwxrwxr-x   4 chani22 chani22   4096  7월 12 16:28 .
drwxrwxr-x   3 chani22 chani22   4096  7월 12 16:26 ..
-rw-rw-r--   1 chani22 chani22     46  7월 12 16:26 .gitignore
drwxr-xr-x   2 chani22 chani22   4096  7월 12 16:28 .keystone
-rw-rw-r--   1 chani22 chani22   2874  7월 12 16:26 README.md
-rw-rw-r--   1 chani22 chani22   2710  7월 12 16:26 auth.ts
-rw-rw-r--   1 chani22 chani22   1014  7월 12 16:26 keystone.ts
drwxrwxr-x 570 chani22 chani22  20480  7월 12 16:28 node_modules
-rw-rw-r--   1 chani22 chani22 410056  7월 12 16:28 package-lock.json
-rw-rw-r--   1 chani22 chani22    397  7월 12 16:26 package.json
-rw-rw-r--   1 chani22 chani22   9506  7월 12 16:26 schema.graphql
-rw-rw-r--   1 chani22 chani22   1056  7월 12 16:26 schema.prisma
-rw-rw-r--   1 chani22 chani22   5178  7월 12 16:26 schema.ts
-rw-rw-r--   1 chani22 chani22    195  7월 12 16:26 tsconfig.json
 3.8.16  chani22@chani22-VBox  /srv/workspace/ks/my-app


❯ nano keystone.ts


❯ npm run dev

> keystone-app@1.0.2 dev
> keystone dev

✨ Starting Keystone
⭐️ Server listening on :3000 (http://localhost:3000/)
⭐️ GraphQL API available at /api/graphql
✨ Generating GraphQL and Prisma schemas
✨ sqlite database "keystone.db" created at file:./keystone.db
✨ Your database is now in sync with your schema
✨ Connecting to the database
✨ Creating server
✅ GraphQL API ready
✨ Generating Admin UI code
✨ Preparing Admin UI app
- warn You have enabled experimental feature (appDir) in next.config.js.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

- event compiled client and server successfully in 195 ms (18 modules)
✅ Admin UI ready
- wait compiling /_error (client and server)...
- event compiled client and server successfully in 6.5s (1706 modules)

 

'npm run dev'를 하면 웹앱을 띄워준다.

크롬으로 접속하면 된다.

http://localhost:3000/

 

첫 사용자를 생성해야 한다.

귀찮지만 8자 이상의 패스워드를 넣어줘야 한다.

Create user

 

예쁜 화면을 볼 수 있다.

Dashboard

 

User List를 확인해보면 다음과 같은 화면을 볼 수 있다.

Users

 

상세 정보도 확인할 수 있다.

User detail

 

Posts 화면을 살펴보자.

Posts

 

Create Post 버튼을 누르면 멋진 화면이 나온다.

Create Post

 

입력 인터페이스가 정말 산뜻하다. (직접 구현하려면 엄청 귀찮았을....)

Edit

 

 

[ GraphQL ]

API를 확인하기 위해서는 주소가 다르다.

 

http://localhost:3000/api/graphql

 

멋지지 않은가?!

 

 

하지만, 주의 사항은 있다.

관련된 공부를 하지 않고서는 이 편리함을 누릴 수 없다.

 

귀차니즘의 해결이지, No Study & Easy Use는 아니다 !!!

 

 

반응형

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

npm, node 그리고 nvm  (0) 2023.01.04

나름의 이유로 시스템에서 메일을 보내야할 일이 있는데,

이왕이면 Gmail을 이용해보고 싶어서 살펴보기로 했다.

 

일단 Gmail을 통해 이메일을 보내기 위해서

미리 셋팅을 해줘야 할 것이 있다.

 

 

Gmail의 설정 화면으로 이동한 뒤에

 

 

IMAP 사용 설정을 해주면 된다.

 

 

그런데, Python 코드에서 Gmail 인증 부분을 구현해야 이메일 발송을 할 수 있을텐데,

2가지 방법 중 하나를 선택해야 한다.

 

1. 로그인 PASSWORD
2. 앱 PASSWORD

 

로그인 PASSWORD를 사용하기에는 왠지 찝찝한 느낌이 들기에

앱 PASSWORD를 사용하도록 해보겠다. (보안은 중요하다!!! ^^)

 

 

Google 계정 관리 화면에 일단 들어가보자.

 

 

어?! 그런데, 찾고자 하는 "앱 비밀번호" 부분이 안보인다.

 

 

2단계 인증을 사용한다고 해야 원하는 항목이 등장한다.

2단계 인증을 사용하게 되면 조금 불편할 수도 있지만, 보안을 위한 일이니 감수하자!!! ^____^

 

 

전화 및 인증 기기 등을 잘 확인하면서 진행하면 되는데,

 

 

개인적으로 OTP 앱까지 추가해주는 것을 추천한다.

 

자~ 이제, "앱 비밀번호" 항목을 볼 수 있다.

 

 

우리 입맛에 맞게 생성 진행하면 된다.

 

 

그러면 16 digit을 만들어 준다.

 

 

저 비밀번호는 다시 안알려준다. 미리 잘 기억/기록 해야 한다.

 

 

자~ 이제 Gmail에서 준비할 것은 모두 끝났다.

이제 Python 코딩을 시작해보자.

 

 
  #!/usr/bin/env python3
  """
  Send email via Gmail SMTP
  """

  __author__ = "whatwant"
  __version__ = "0.1.0"
  __license__ = "BEER-WARE"

  import smtplib
  from email.mime.text import MIMEText
  from email.mime.multipart import MIMEMultipart

  def send_email(sender_email, receiver_email, app_password, subject, text, html):
      message = MIMEMultipart("alternative")
      message["Subject"] = subject
      message["From"] = sender_email
      message["To"] = receiver_email

      part1 = MIMEText(text, "plain")
      part2 = MIMEText(html, "html")

      message.attach(part1)
      message.attach(part2)

      with smtplib.SMTP_SSL("smtp.gmail.com", 465) as server:
          server.login(sender_email, app_password)
          server.sendmail(sender_email, receiver_email, message.as_string())

  if __name__ == "__main__":
      sender_email = "whatwant@whatwant.com"
      receiver_email = "whatwant@gmail.com"
      app_password = "xxx"
 
      subject = "This is a lucky email from Python"
      text = "whatwant is a good man."
      html = f"<html><body><p>{text}</p></body></html>"
 
      send_email(sender_email, receiver_email, app_password, subject, text, html)

 

여전히 예쁘지 않은 코드이지만, 그래도 동작한다!

실행하면 된다.

 

 

메일이 잘 도착했다!!!

 

첨부파일까지 보내는 것까지 하려고 했는데, 지금 당장은 필요하지 않기에...^^

나중에 필요로 할 때 해보겠다! ^^

 

반응형

업무를 하면서 간단한 Python 코드를 작성하고

코드 리뷰를 받을 때면 종종 왠지 모르게 부끄러움을 느낄 때가 있다.

 

남들이 작성한 코드를 보면 왠지 멋져보이는데

내 코드는 왠지 모르게 초라해보이는 자격지심이..... ^^

 

예를 들어서 "현재 디렉토리의 파일 이름과 사이즈를 출력"해주는 프로그램을 작성해보자.

 

 

실행 결과도 잘 나온다.

 

 

원하는 결과를 잘 뽑아내고,

나름 함수로 잘 구분해서 잘 작성한 것 같은데..... 왠지 뭔가 부족한 듯 한 느낌이...

 

속된 말로 뭔가 "와꾸"가 있었으면 좋겠는데...

 

 

https://www.python-boilerplate.com/

 

이런 고마운 사이트가 있다니!!!

 

Parameter들을 사용하고 싶거나, Logging을 하고 싶거나 하면 "Options"에서 고르면 된다.

Unit-Test를 하고 싶은 경우에 입맛에 맞는 프레임워크를 고를 수도 있다.

 

이걸 이용해서 코드를 다시 작성해보면 다음과 같다.

 

 

뭔가 조금 더 있어보이게 된 것 같은 느낌적인 느낌이다.

 

 

별 것 아니게 느낄 수도 있겠지만,

Python과 같은 자유도가 과도하게 높은 언어로 개발을 할 때에는

이런 boilerplate 코드를 이용하는 것이 많은 도움이 된다고 생각한다!

여러분은?

 

반응형

구글에서 "chatgpt"를 검색하고 뉴스 항목을 선택하면 아래와 같은 뉴스가 보인다. (2023-04-30)

  - https://www.google.com/search?q=chatgpt&tbm=nws 

 

 

많은 사람들, 특히 기업 입장에서는 기업 내부의 비밀들이 유출될 우려가 있기에 머리가 아플 것이다.

 

심지어 이탈리아에서는 국가차원에서 chatgpt를 차단하기도 했었다. 물론 지난 금요일(04/28)에 차단을 해지하기는 했지만 개인정보 유출이라던지 기밀사항에 대한 유출 우려에 대해서 모두들 심각하게 받아들이고 있음을 엿볼 수 있다.

 

그래서 openai에서 사용자들의 이력 사항들을 학습에 사용하지 않도록 할 수 있는 옵션을 추가해줬다.

 

 

옵션을 해제하면 이력을 관리하지 않는다고는 하는데.... 믿어야겠죠!? ^^

 

 

뭐 이런 심각한 이야기는 잠시 미뤄두고... ^^

 

 

youtube에서 "chatgpt 개발"이라는 키워드로 검색해보면 많은 동영상들을 볼 수 있다.

 

 

구글에 "chatgpt debugging", "Unit Test Generation with ChatGPT" 등의 키워드로 검색해보면

정말 유용하고 신기한 많은 사례들을 찾아볼 수 있다.

 

그리고 아래와 같이 kubeflow를 어떻게 설치해야하는지 등과 같은 질문에도 나름 대답을 하기도 하고,

 

 

카카오톡 메시지를 보내는 파이썬 코드를 보여달라고하면 아래와 같이 샘플 코드를 보여주기도 한다.

 

 

개발할 때 chatgpt를 이용하면 분명 많은 도움이 될 것 같다.

물론 GitHub Copilot보다 더 유용할지에 대해서는 여러 의견이 있을 수 있지만

사용하기에 따라서 다른 의미로 chatgpt가 유용할 수 있음은 분명한 사실일 것이다.

 

 

여기에서 다시 한 번 생각해보자.

회사와 같은 곳에서 chatgpt를 이용해서 개발을 하는 것에 문제가 될까? 안될까?

 

질문(chatgpt 세상에서는 prompt라고 불리우는!?)에 너무 많은 내부 정보를 담는 것은 무조건 문제가 될 것이다.

그러면, 질문을 할 때 보내는 정보만 조심하면 문제가 안될까!?

 

내가 생각해보았을 때 2가지 정도가 더 문제가 될 수 있다고 본다.

 

① 검색 결과 품질

② 검색 결과 출처

 

 

"chatgpt"는 질문에 대해서 나름의 대답을 한가지 해준다.

그것이 원하는 결과가 아니라고 하면 추가 질문을 통해서 다른 대답을 받아볼 수는 있지만

기본적으로 기존 검색엔진과 같이 여러가지를 보여주는 방식은 아니다.

 

그리고,

해당 결과의 출처가 무엇인지를 알 수 없기에 가져다 써도 무방한 것인지

혹시 compliance 이슈가 있을 수 있는 것인지도 확인이 어렵다.

 

더더욱 문제가 되는 것은

GPT3 및 GPT4 모두 데이터가 2021년 8월까지의 데이터로 학습되어있기에 최신 정보에 약하다.

물론 검색 결과를 다시 입력으로 넣는 등의 방법으로 우회할 수 있다고는 하지만

이는 변칙적인 우회 방법이지 제대로 된 chatgpt의 사용 방법은 아니다.

 

 

 

이런 부분들을 조금은 해소해 줄 수 있는, 개발자들을 위한 AI 검색엔진이 등장했다.

  - https://www.phind.com/

 

 

하단에 있는 문구가 아주 재미있다.

 

Made with ❤️ in San Francisco.

 

미국의 이런 문화가 좀 신기해보이면서도 재미있게 느껴지고, 왠지 멋져보이기까지 한다.

음... 나는 "Made with ❤️ in Dong Tan" 이렇게 해볼까!? ^^

 

검색 결과는 어떻게 나오는지 살펴볼까!?

 

 

chatgpt 화면과 비슷하면서도 좀 다르다.

가운데에 나름의 답변을 해주면서, 그 대답을 만들기 위한 출처 목록을 오른쪽에 보여주고 있다.

 

chatgpt 처럼 Session 개념이 있기에 추가적인 검색을 같은 맥락으로 이어가며 할 수 있다.

또한 현재 검색 결과를 반영하기 때문에 최신 정보들도 잘 가지고 온다.

 

왼쪽 하단에 있는 "Customize search" 버튼을 눌러보자.

 

 

내가 특정 개발 사이트를 좀 더 선호한다던지, 아니면 특정 사이트 결과를 좀 후순위로 하고 싶다던지 하면

그러한 옵션들을 반영할 수 있다.

 

 

전문가(Expert) 모드도 있고, 좀 더 간략히 본다거나, 좀 더 창의적인 결과를 나오게 할 수도 있다.

그냥 구글 검색하는 것 보다는 좀 더 효율적으로 활용할 수 있는 검색엔진이 아닐까 한다.

 

 

하지만, phind도 정보 유출 등의 우려에서 자유롭지는 않다.

 

 

anonymously 하게 저장되고, 3rd party에 정보를 공유하지 않는다고 하지만

여하튼 내가 입력한 질문을 가지고 자신들의 서비스를 향상시키는데 사용한단다.

 

 

그렇다면,

chatgpt를 대체하는 용도로서 사용하기 보다는 그냥 google을 사용하는 것을 대체하는 용도라고 생각해야 한다.

 

 

설마 회사에서 google까지 막지는 않을테니 ^^

google 대신 사용하는 개발자를 위한 검색엔진으로 phind를 사용해보자.

반응형

'Programming' 카테고리의 다른 글

개발자라면 ... Google for Developers  (0) 2023.12.06

우연히 보게된 노마드 코더(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

 

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

 

 

 

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

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

 

반응형

 

GitHub Pages 기능을 이용한 개인 포트폴리오 웹서비스를 해보려고

이것 저것 알아보던 중 몇 가지 템플릿을 찾았는데

 

사용법에 등장한 'npm'

 

"응?! npm을 설치해야겠구만!"

 

 

'npm'의 약자는 'Node Package Manager'이다.

 

즉, node.js 기반으로 미리 잘 만들어진 패키지들을 사용하고 싶을 때

의존성 있는 패키지들을 설치하려면 npm을 이용하면 된다.

 

 

다른 프로그래밍 언어들도 각자 나름의 패키지 매니저가 있다.

Language Package Manager
Ruby Gem
PHP Composer
C# NuGet
Java Jpm
Python pip

 

다시 npm 이야기로 돌아와서

node와 npm이 짝궁이라면 node만 설치해도 npm이 같이 설치가 된다는 말인데,

node를 설치하려고 봤더니 정말 다양한 버전의 node가 있다.

 

 

상황에 따라 여러 버전의 node를 사용하게 된다는 것인데,

하나의 시스템에서 여러 버전의 node를 사용하려면 귀차니즘이 발동할 수 있다는...

 

 

그래서, 여기저기 기웃거리다가 찾게된 'nvm'

 

'nvm'의 약자는 'Node Version Manager'이다.

 

 

 

nvm 저장소 주소는 다음과 같다.

  - https://github.com/nvm-sh/nvm

 

nvm

 

 

'nvm' 설치 방법은 다양하게 제공되고 있고

일반적으로는 'curl' 명령어를 이용해서 install script를 실행하는 방식을 가이드하고 있다.

 

하지만, 여기에서는 개인적인 취향으로

깔끔하게 git clone 받아서 직접 설치하는 방법으로 결정했다.

  - https://github.com/nvm-sh/nvm#git-install

 

 

이하 과정은 Ubuntu 20.04 LTS 환경에서 진행했다.

 

❯ git clone https://github.com/nvm-sh/nvm.git ~/.nvm

❯ cd ~/.nvm

git switch -c v0.39.3 tags/v0.39.3

 

개인적으로 zsh을 사용하고 있으므로 이를 기준으로 해서 후속 작업 진행했지만,

bash를 사용하는 경우에도 동일한 과정이다.

 

❯ nano ~/.zshrc

 

...
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

 

위의 내용을 추가해주고, 터미널 재시작하면 'nvm' 명령어를 먹는다.

 

❯ nvm --version
0.39.3

 

nvm에서 설치 가능한 node version 목록을 확인하고 싶다면 다음 명령어를 사용하면 된다.

 

❯ nvm ls-remote

 

최신 버전의 node를 설치하려면 다음 명령어를 통해 가능하다.

 

❯ nvm install node
Downloading and installing node v19.3.0...
Downloading https://nodejs.org/dist/v19.3.0/node-v19.3.0-linux-x64.tar.xz...
####################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v19.3.0 (npm v9.2.0)
Creating default alias: default -> node (-> v19.3.0)

❯ node --version
v19.3.0

 

특정 버전의 node는 다음과 같이 설치할 수 있다.

 

❯ nvm install 14.7.0
Downloading and installing node v14.7.0...
Downloading https://nodejs.org/dist/v14.7.0/node-v14.7.0-linux-x64.tar.xz...
####################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v14.7.0 (npm v6.14.7)

❯ node --version
v14.7.0

 

앞에서 설치한 버전으로 변경하고자 한다면 다음과 같이 할 수 있다.

 

❯ nvm use node 19.3.0
Now using node v19.3.0 (npm v9.2.0)

❯ node --version
v19.3.0

 

어디에 설치되어 있는지(실행 파일의 위치를) 확인하고 싶다면 다음과 같이 하면 된다.

 

nvm which 19.3.0
/home/chani22/.nvm/versions/node/v19.3.0/bin/node

 

어?! 여기서 잠깐 !!!

우리가 지금 여기까지 진행한 이유는 npm 설치를 하려던 것이다. npm을 확인해보자.

 

❯ node --version
v19.3.0

❯ npm --version
9.2.0

❯ nvm use node 14.7.0
Now using node v14.7.0 (npm v6.14.7)

❯ node --version
v14.7.0

❯ npm --version
6.14.7

 

중간에 node 버전을 변경해봤더니, npm도 버전이 바뀌었다는 것을 볼 수 있었다.

 

 

여기까지 해서 마무리~!!!

반응형

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

백엔드 프레임워크 - KeystoneJS  (1) 2023.07.13

 

Python은 왠지 한글하고 친하지가 않은 것 같다.

그나마 v3.x 버전이 되면서 많이 편해지긴 했지만, 그래도 한글 관련 이슈가 계속 나오는 느낌적인 느낌이...

 

MachineLearning 공부하게 되면서 많은 분들이 사용하고 있는 matplotlib의 경우에도

기본적으로는 한글 출력에 문제가 있다.

 

Google Colab 및 Local 환경에서 matplotlib 한글 출력이 잘 되도록 해보자.

 

 

1. Google Colab

 

① 기본 상황

  - 한글 부분이 제대로 나오지 않는 것을 볼 수 있다.

 

font error

 

② 폰트 설치

  - 나눔 폰트를 설치해보자.

 

!sudo apt-get install -y fonts-nanum
!sudo fc-cache -fv
!rm ~/.cache/matplotlib -rf

 

install font

 

③ 런타임 재시작

  - 설치된 폰트를 사용하기 위해 "런타임 다시 시작"을 실행하자

 

런타임 다시 시작

 

④ 폰트 적용

  - 이제 한글을 적용해서 그래프를 그려보자.

  - 설치한 폰트를 사용하도록 한 줄 추가가 되어야 한다.

 

plt.rc('font', family='NanumBarunGothic')

 

matplotlib with hangul

 

  - 그런데, 위의 그래프에서 뭔가 이상한 것을 볼 수 있는가?

  - y축의 "-5" 부분이 제대로 출력되지 않았다.

 

⑤ minus 처리

  - 아래와 같은 구문이 추가되면 된다.

import matplotlib as mpl
 
mpl.rcParams['axes.unicode_minus'] = False

 

fix minus

 

 

2. Local (Ubuntu)

Colab과 비슷하지만 약간 차이가 있다.

 

① 기본 상황

  - 코드가 살짝 다르다.

 

import pandas as pd
import matplotlib.pyplot as plt
import warnings

warnings.simplefilter(action='ignore', category=UserWarning)

plt.plot(['서울', '경기', '인천', '광주', '대구', '부산', '울산', '대전', '제주'], [12, 32, -4, 0, 5, 2, 19, 9, 3])
plt.xlabel('x축')
plt.ylabel('y축')
plt.title('제목')
plt.savefig('test.png')

 

execute

 

error

 

② 폰트 설치

  - 나눔 폰트를 설치해보자.

 

$ sudo apt-get install -y fonts-nanum
$ sudo fc-cache -fv
$ rm ~/.cache/matplotlib -rf

 

③ 코드 개선

  - 폰트 및 마이너스 관련 코드 추가해서 재실행해보자.

 

import pandas as pd
import matplotlib.pyplot as plt
import matplotlib as mpl
import warnings

warnings.simplefilter(action='ignore', category=UserWarning)

plt.rc('font', family='NanumBarunGothic')
mpl.rcParams['axes.unicode_minus'] = False

plt.plot(['서울', '경기', '인천', '광주', '대구', '부산', '울산', '대전', '제주'], [12, 32, -4, 0, 5, 2, 19, 9, 3])
plt.xlabel('x축')
plt.ylabel('y축')
plt.title('제목')
plt.savefig('test.png')

 

new graph

 

예쁜 한글 파이팅 !!!

 

반응형

 

나의 로컬 환경에서 Jupyter Notebook을 사용하고 싶어서 살펴봤다.

 

0. 실행 환경

  - Ubuntu 18.04 환경에서 진행했지만, 20.04 등 다른 버전에서도 잘 될 것 같다.

 

1. 설치

  - 가장 편한 "pip"를 이용해서 설치해봤다.

$ pip install jupyter

 

pip install jupyter

 

2. 설치 내역

  - Jupyter Notebook은 여러 패키지의 조합이다. 확인해보자.

$ jupyter --version

 

jupyter --version

 

3. 실행

  - Jupyter Notebook을 실행해보자.

$ jupyter notebook

 

jupyter notebook

 

  - 자동으로 브라우저가 실행되며 Jupyter Notebook을 볼 수 있다.

 

jupyter notebook

 

  - 오른쪽 중간에 보이는 "New" 버튼을 통해 새로운 Notebook을 생성하고, 간단한 실행을 해보자.

 

jupyter notebook

 

정말 간단히 Jupyter Notebook 환경을 만들 수 있다.

서버로 구동하거나 비밀번호를 등록하는 등의 추가 설정은 별도의 포스팅으로 작성해보도록 하겠다.

 

반응형

+ Recent posts