코드노예

이 포스트는 Django 에 대한 포스트로, 박응용님의 점프 투 장고를 많이 참조했습니다.

기초부터 차근차근 공부하시고 싶으신 분은 점프 투 장고를 읽어 보시기를 권장합니다.

https://wikidocs.net/book/4223

Django의 정의

Django는 웹 프로그램을 쉽고 빠르게 만들어 주는 웹 프레임워크입니다.

웹 프레임워크란

웹 프레임워크는 웹 프로그램을 만들기 위한 스타터 키트 같은 것으로, 웹 프로그램에 필요한 많은 기능들(쿠키나 세션 처리, 로그인/로그아웃 처리, 권한 관리, 데이터 베이스 연결 등)을 포함시켜서 바로 사용할 수 있게 만들어진 프레임워크 입니다.

Django 설치하기 1 - Python 설치

Django 를 이용해서 웹 개발을 위해서는 Python 이 필요합니다. Python 홈페이지에서 사용하는 컴퓨터의 OS에 맞게 설치를 합니다. 버전은 3.8 이후를 사용하는 것을 권장하는데, 2022년 10월 기준으로 3.10.4 버전을 설치하면 됩니다. 이미 Python 3.8 이후 버전이 설치되어 있다면 이 과정은 건너 뛰어도 됩니다.

https://www.python.org 

설치가 끝나면, 명령 프롬프트 (커맨드 창) 등에서 아래 명령어를 이용해서 설치된 버전을 확인할 수 있습니다. (V는 대문자 입니다.)

> python -V

Django 설치하기 2 - Python 가상환경 설정

Python의 가상환경은 Python 프로젝트를 진행할 때, 각각의 프로젝트에 독립된 환경을 만들어 주기 위해서 사용합니다. 예를 들어서 Python 프로젝트를 여러개 관리 중인데, 각 프로젝트가 필요로 하는 모듈 및 모듈의 버전이 다르다면, 가상환경을 이용해서 각 프로젝트에 필요한 모듈을 각각 설치해서 사용할 수 있습니다. 

가상환경은 아래 명령어로 생성할 수 있습니다.

> python -m venv <name>

원하는 위치에 가상환경을 세팅할 수 있지만, 각 프로젝트 폴더에 .venv 라는 이름으로 생성하도록 하겠습니다. 가상환경에 설치되는 모듈은 pip 명령어를 이용해서 다시 설치가 가능하기 때문에 소스 관리 툴(git 등)에서 해당 폴더를 ignore list에 추가하도록 합니다.

다음은 가상환경을 시작하는 방법입니다. 시작은 가상환경을 설치한 프로젝트 루트에서 아래 처럼 명령어를 입력해 주면 됩니다.

> cd .venv\Scripts
> activate
(.venv) > cd ..\..

위의 명령어는 윈도우 기준으로 작성되었습니다. 첫번째 라인은 script 경로로 변경해 주는 것이고, 두번째 라인은 activate.bat 파일을 실행하여 가상환경을 시작하는 것이고, 마지막 라인은 다시 프로젝트 루트 폴더로 돌아오게 하는 것입니다. 세번째 라인은 명령 프롬프트 앞에 (.venv) 가 보이는데, 이것은 .venv 라는 가상환경이 실행 중임을 표시해 주는 것입니다.

참고로 맥이나 리눅스에서는 아래 명령어를 이용하면 됩니다. 

> source ./.venv/bin/activate

가상환경을 종료하기 위해서는 아래 명령어를 입력합니다.

(.venv) > deactivate

Django 설치하기 3 - Django 모듈 설치하기

지금까지는 Python 과 Python 가상환경 설치에 대해서 살펴 봤는데요, 이제는 Django를 구동하기 위한 Django 모듈을 설치합니다.

설치는 pip 명령어를 이용하게 됩니다.

가상환경이 실행된 상태인지 확인합니다. 명령 프롬프트 앞에 (.venv) 이 표시되고 있는지 확인하시고, 없다면 바로 앞에서 설명드린 명령어로 가상환경을 시작합니다.

그리고 아래 명령을 이용해서 Django 모듈을 설치합니다. 이 글을 작성하는 시점에서는 4.1.2 버전이 최신입니다.

(.venv) > pip install django==4.1.2

새로 생성된 가상환경에서 pip 를 처음 실행하거나 새로운 pip 버전이 출시 되었을 때 실행하면, pip 버전을 업그레이드하라는 경고 메시지가 나옵니다. 아래 명령어를 입력하면 pip 버전을 업그레이드 할 수 있습니다.

(.venv) > python -m pip install --upgrade pip

자 이제 Django 를 시작할 준비작업은 모두 마친 것 같습니다.

다음 포스트에서는 HelloWorld 프로젝트를 시작해 보겠습니다.

React는 UI 개발에 사용되는 Javascript Library 입니다. 

React – A JavaScript library for building user interfaces (reactjs.org)

React의 특징으로는 선언형 스타일을 사용하며, Javascript를 이용한 컴포넌트 기반의 아키텍처를 사용합니다. 그리고 강력한 추상화 기능을 제공합니다.

Javascript Native 기능을 이용하는 문법을 사용하기 때문에, 다른 프레임워크에 비해서 빠르게 습득할 수 있으며, Virtual DOM 방식을 이용해서 UI 속도가 매우 빠릅니다.

현재 (2021.08.20) React는 17.0.2 버전이 출시되어 있으며, 버전 18이 준비 중 입니다.

React 프로젝트로 "원활히" 개발을 진행하기 위해서 먼저 node.js 를 설치합니다.

명령 프롬프트를 실행하여 프로젝트 폴더로 이동해서 아래 명령어를 입력합니다.

npx create-react-app my-app

my-app 이라는 폴더가 생성되고 기본 프로젝트 코드가 생성됩니다.

현재 설정된 패키지 버전은 다음과 같습니다.

yarn 혹은 npm 명령어를 이용해서 프로젝트를 실행합니다.

yarn start

혹은

npm start

처음 실행시에는 필요한 라이브러리를 다운로드 받기 때문에 시간이 조금 걸릴 수 있습니다.

웹브라우저에서 http://localhost:3000 를 입력하면, 생성된 프로젝트 결과물이 나옵니다. (설정에 따라 포트 번호는 달라질 수 있습니다.)

아래와 같은 화면이 나옵니다.

Hello World 를 출력해 보기 위해서, src 폴더에 있는 모든 파일들을 삭제하고,

index.css, index.js 파일만 새로 생성해 보았습니다.

아래 파일들 삭제

신규 파일 생성

index.js 파일을 열어서 아래와 같이 코드를 작성합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

var element = React.createElement('h1', null, "Hello World!")
ReactDOM.render(element, document.getElementById('root'))

저장 후 웹브라우저를 리프래시 하면 아래와 같이 나옵니다.

작성한 코드에 대해서 간단히 설명하자면,

React.createElement 매써드는 html 엘리먼트를 생성해서 돌려주기 때문에,

element 에는 <h1>Hello World!</h1> 에 해당하는 엘리먼트가 지정됩니다.

그리고, ReactDOM.render 매써드는 해당 엘리먼트를 렌더링해 줍니다.

코드는 element에 지정된 것을 root 라는 아이디를 가진 엘리먼트를 찾아서 렌더링 해주라는 의미이고,

public 폴더에 있는 index.html 파일을 열어보면, body 에 "root" 라는 아이디를 가진 div 엘리먼트가 있는 것을 확인할 수 있습니다.