$$config title: 장고 프로젝트 meme - 개발 환경 세팅 keywords: - IT - django - project - portfolio $$ # 개발 환경 세팅
## 개발 환경 세팅 (부트스트랩, 테일윈드까지) - GIT 연결 - `git init` - `git config user.name "fmfu51"` - `git config user.email "fmfu5129@gmail.com"` - `git remote add origin ~` - `git pull origin master` - gitignore 세팅 - [toptal.com](https://www.toptal.com/developers/gitignore) - pycharm / django 입력하고 검색하면 gitignore에 제외할 내용 나옴, 복붙 - sqlyog DB 세팅 ``` DROP DATABASE IF EXISTS meme_dev; CREATE DATABASE meme_dev; USE meme_dev; ``` - DB 아이디와 비밀번호 생성 - `mysql -u root` - GRANT ALL PRIVILEGES ON *.* TO root@\`%\` IDENTIFIED BY 'fy133124'; - `SELECT user FROM mysql.user;` - 장고 설치 : `pip install django==3.2.9` - mysql 설치 : `pip install mysqlclient` - config 프로젝트 생성 : `django-admin startproject config .` - 요구사항(의존성) 디렉터리 생성 : `mkdir requirements` - `echo "Django" > requirements/common.txt` - `echo "mysqlclient" >> requirements/common.txt` - 개발용 : `pip install -r requirements/dev.txt` - 운영용 : `pip install -r requirements/prod.txt` - 안되면 복사로 : `cp requirements/common.txt requirements/dev.txt` - dev.txt와 prod.txt에 복사된 내용 삭제 후 -r common.txt 추가 - ? : pip install -r requirements/common.txt - 설치 리스트 확인 : pip list - settings 수정 ```python LANGUAGE_CODE = 'ko-kr' TIME_ZONE = 'Asia/Seoul' USE_TZ = False DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'meme_dev', # DB명 'USER': 'fypi', # DB아이디 'PASSWORD': 'fy113412', # DB비밀번호 'HOST': '127.0.0.1', # DB 호스트 'PORT': '3306', # DB 포트 'OPTIONS': { 'init_command': "SET sql_mode='STRICT_TRANS_TABLES'", # 추가, 만약에 이 부분 때문에 오류가 난다면, 이 라인을 지우고 다시 시도해주세요. }, } } ```
### settings 파일 나누기 - config\settings 디렉터리 생성 - settings.py > common.py로 수정 후 settings 디렉터리로 옮김 - settings에 dev.py / prod.py 파일 생성 - common.py 임포트 : `from .common import *` - prod.py에 디버그 끄기 : `DEBUG = False` - common.py 수정 ``` # 경로에 .partent 추가 BASE_DIR = Path(__file__).resolve().parent.parent.partent ``` - manage.py 수정 ```python def main(): """Run administrative tasks.""" # 경로에 dev 추가 os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings.dev') ``` - asgi.py / wsgi.py 수정 ``` # asgi 경로에 prod 추가 os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings.prod') # wsgi 경로에 dev 추가 os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'base.settings.dev' ```
### 디버그 툴바 추가 - [DDT 설치 안내 사이트](https://to2.kr/dt4) - 툴바 설치 : python -m pip install django-debug-toolbar - config/urls.py 추가 ```python from django.conf import settings # ... from django.http import HttpResponse from django.urls import path, include urlpatterns = [ # DDT가 정상 실행되는 지 확인하기 위한 람다 html 매핑 추가 (DDT는 body가 있어야 보임) path('', lambda request: HttpResponse('DDT확인')), # ... ] # 디버그툴바 매핑 추가, 사용할 때만 켜지도록 if settings.DEBUG: urlpatterns += [ path('__debug__/', include('debug_toolbar.urls')) ] ``` - common.py 수정 ```python # debug_toolbar추가 및 하는 김에 섹션 나누기 INSTALLED_APPS = [ # Core 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'accounts.apps.AccountsConfig', # 써드파티 'debug_toolbar' ] # ... MIDDLEWARE = [ # ... "debug_toolbar.middleware.DebugToolbarMiddleware", # ... ] # ... MIDDLEWARE = [ "debug_toolbar.middleware.DebugToolbarMiddleware", # ... ] ``` - DDT 정상 작동 확인 : python manage.py runserver ### pillow 설치 - img 사용을 위한 pillow 설치 - `pip install Pillow`
### User 모델 세팅 - accounts 앱 생성 : `python manage.py startapp accounts` - settings/INSTALLED_APPS 에 `'accounts.apps.AccountsConfig',` 추가 - settings 하단에 `AUTH_USER_MODEL = 'accounts.User'` 추가 - accounts\model.py에 User 모델 추가 - 우리나라는 라스트,퍼스트네임이 없기 때문에 기존 모델에서 수정해줘야 함. - 그리고 등록 날짜와 수정 날짜 데이터 추가 ```python from django.contrib.auth.models import AbstractUser from django.db import models # Create your models here. class User(AbstractUser): last_name = None first_name = None deta_joined = None reg_date = models.DateTimeField('등록날짜') update_date = models.DateTimeField('수정날짜') name = models.CharField('이름', max_length=100) ``` - python manage.py makemigrations - python manage.py migrate - urls.py에 accounts 매핑 ```python urlpatterns = [ path('accounts/', include('accounts.urls')), ] ``` - accounts\urls.py 생성 후 login 매핑 ```python from django.urls import path from accounts import views urlpatterns = [ path('login/', views.login), ] ``` - views.py 에 login 함수 작성 - 출력되는 지 HttpResponse로 확인 ``` from django.http import HttpResponse, HttpRequest from django.shortcuts import render # Create your views here. def login(requset:HttpRequest): # :HttpRequest는 추가해주면 좋다. return HttpResponse("안녕") ``` - 런서버 후 잘 나오는 지 확인(http://127.0.0.1:8000/accounts/login/)
### css, 부트스트랩 세팅 및 확인 - accounts\urls.py의 login 함수 수정 - templates/accounts/login.html 생성 ```python def login(request: HttpRequest): return render(request, "accounts/login.html", {}) ``` - config(base)에 static 디렉터리 추가 (공통으로 사용되는 css, js 디렉터리) - common.css / common.js 추가 - login.html 내용 및 부트스트랩 추가 - ! 작성하고 Tap 누르면 베이스가 자동으로 작성되는 Magic - js, jquery에는 반드시 defer 붙이기 ```html ``` - common.css에 폰트패밀리, 언더바스타일 추가 ```css @font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; } html > body { font-family: "GmarketSansMedium"; text-underline-position: under; } ``` - settings\common.py에 STATICFILES_DIRS 추가 ```python STATICFILES_DIRS = [ BASE_DIR / 'config/static', ] ```
### 테일윈드 세팅 - nvm : 노드 버전을 맘대로 바꿀 수 있는 툴 - [nvm windows](https://github.com/coreybutler/nvm-windows/releases/tag/1.1.9) - nvm-setup.zip 다운 - cmd 진입 - nvm install v16.13.2 - nvm use 16.13.2 - 안될 때는 powershell을 관리자 권한으로 실행 후 입력 - 파이참에 테일윈드 설치 - (tailwindcss.com)[https://tailwindcss.com/docs/installation] - `npm install -D tailwindcss` - `npx tailwindcss init` - jit 추가 ```js module.exports = { # 추가 mode: "jit", prefix: 't-', # 부트스트랩이랑 겹치지 않게 t- 를 추가해서 씀 content: ["./**/templates/**/*.{html,js}"], # 경로안의 html과 js이 대상임을 지정 theme: { extend: {}, }, plugins: [], } ``` - static\tailwind.input.css 생성 및 내용 추가 ```css @tailwind base; @tailwind components; @tailwind utilities; ``` - package.json에 내용 추가 ``` { "devDependencies": { "tailwindcss": "^3.0.13" }, # 추가 "scripts": { "css": "npx tailwindcss -i ./config/static/tailwind.input.css -o ./config/static/tailwind.output.css --watch" } } ``` - .gitignore 하단에 내용 추가 ``` node_modules config/static/tailwind.output.css ``` - login.html에 tailwind 연결 ```html ``` - npm run css 로 구동 - runserver 정상 작동 확인