본문 바로가기

About coding/Weekly I learned

[WIL]2023년 04월 05일~7일 [#Django 입문: 개인 프로젝트_1]

난몰랑 일단 만들어!!!


프로젝트 진행 계획 (스케치)

# 발제문 왼쪽에 깔린 것 보고 내가 어디까지 할 수 있는지 보기
 
# 내가 할 수 있는 게 대다수이면 일단 만들면서 해보기 > 응 절대 아니었죠
 
# 만들 때는 발제문에 나와있는 작업 순서대로 참조하기 > 좋은 생각이었죠
 
# form.py를 새로 만드는 내막이 궁금하다. 생코에서는 그냥 input 제출할 것이 있을 때 action을 줘서 라우팅 하는 용도로 썼었는데. > django에 내장된 편이 모듈을 쓸 때 필요하다
 
# 근데 생코에서 사용자 입력란이 하나는 input 이었고 나머지 하나는 뭐였지?
 > textarea였구나. 이건 닫는 태그가 필요하다. a도 닫아야하고. 근데 input은 안닫음
 
# 디렉토리 구성을 봤는데 많이 다르다. erd가 뭐지... 수강을 더 하고 와야겠다. 일단 보이는 그대로 따라 만들긴 했음  > config는 myproject역할인 것 같고 migrations는 app인 것 같다.

라고 당돌한 진횡 계획을 한 뒤, vs코드를 이용해 발제문에 있는 디렉토리를 일단 따라서 구성했다.

그러나 ㅋㅋㅋㅋㅋㅋ 허망한 일이었다.

1. 바울쌤 강의를 듣다보니 파이참에서 django-admin 등 명령어로 app이나 myproject를 생성하면 저절로 구성되는 것이 많았고, vs코드로 할 때랑 좀 달랐다. 무튼 파이참으로 기초세팅을 하면 절로 잡히는 것들이 많음.

2. pycharm이 django 개발하라고 전용으로 나온 프로그램이었다. vs코드로 django하면 나중에 에러가 많이 생긴다는 둥, 작업물을 통째로 날렸다는 둥 괴담이 성행하여, 나도 pycharm으로 갈아타기로 했다. 사실 괴담과 에러가 무섭다기보단 나는 vs코드가 좋아서 앞으로 vs코드를 쓸 예정인데, pycharm 사용법도 꼭 알고 있고 싶었던게 가장 큰 이유다리라리로롱.

 

다시 세운 프로젝트 진행 계획

1. 와이어프레임 작성
_발제문에 있었던 들어가야 하는 내용과 실제 무신사 사이트 참조
_발제문에서 장고에서 제공하는 기능을 쓰라고 했으니 그 모양대로 만든다.

2. 작업 순서 **매 단계 찍어보며 연결확인 노력

_발제문에 나온대로 폴더/파일 구성 따라하기
  : 강의자료 보며 장고 설치/파일생성/데이터베이스 연결
 
_의사코드 작성하며 돌아다니고 import 부분 넣기

_실제 코딩
 :뼈대 html 부터 코딩하고 >
  API 코딩하며 기능 단위로 한 줄기 씩 완성하기
  순서는 html > views/form > urls > data


3. 마무리
_발제문에 있는 요청사항 모두 만족했는지 점검
_Git 푸시
_동기들 작품과 비교해보기

진행

일단 와이어프레임을 그리고

더보기

사용자 접근 순서

[최초] login.html

> 로그인 시 > base.html

> 회원가입 클릭 시 > signup.html

 

signup.html

> 인풋값 입력 후 제출하기 버튼 > login.html

 

base.html

> 로그아웃 시 > login.html

> 현재재고 보기 클릭 시 > inventory.html

> 상품 목록 보기 클릭 시 > product.html

 

inventory.html

> 입고장치의 제출하기

> 출고장치의 제출하기

 

product.html

> 상품목록 등록하기에서 옵션 쓰고 제출하기

 

 

그리고 빼먹었는데, inventory.html, product.html 화면에서 홈 버튼이 있어야 한다.

 

 

 

기능중심으로 최소화 한 디자인. 실제 구현에서는 이것보다 더 간단히!! 그냥 django에서 제공하는 로그인, 회원가입 모듈을 사용할 예정
이게 메인페이지다. 로그아웃함수 작동, inventory.html로 리디렉션, product.html로 리디렉션 가능해야함.

 

발제문 과제안내에서는 재고합계보여주는 페이지와 입고페이지, 출고페이지를 모두 따로 구성할 수 있게 예시를 주었는데, 나는 사용자가 직접 입/출고 할 때마다 재고량을 눈으로 볼 수 있어야 좋을 것 같아서 같은 화면에 3가지 컨텐츠를 함께 기획했다. 이거 변수랑 수식이 많아서 view 구현하기 오래 걸릴 듯 덜덜
요게 인제 상품목록 보여주면서 동시에 신규등록도 가능한 페이지. 마찬가지로 사용자 편의를 위해 상품 목록 보여주기와 상품 등록하기 두 가지 html을 함께 구성했다.

 

요러면 인제 와이어 프레임 끝!

 

와이어프레임 그렸으면 이제

파이참으로 프로젝트 파일을 만들어서 기초 세팅을 한다.

바울쌤 강의 자료 참고하면서 하니까 잘된다.

천리길도 파일생성부터!!!! ◟( ˘ ³˘)◞ ♡

 

1.파이참 켜고 New project

2.와 나 에러 만났다 간신히 돌아옴

더보기

프로젝트를 생성하면 처음에 루트앱이 자동으로 생성되는데, 그 친구 이름이 erp인데 config로 바꾸고 싶어서 바꿨더니 초록버튼을 누르니까 정상 작동이 안되고 에러가 나는거다;;

뭐지?!?! 겨우 이름 하나 바꿨을 뿐인데... 루트앱의 이름은 원래 바꾸면 안되는거야?? 싶기도 하고...

근데 당연히 그럴리가 없지ㅋㅋㅋㅋ 내가 모르는 뭔가 최초 세팅이 있을 것이고, 그게 파이참이 맨 처음 자동으로 정해준 이름으로 되어 있을거라고 예상은 함.

일단 처음엔 '루트앱'이란 명칭도 몰라서 gpt 한테 물어봤다.

wsgi.py를 가진 건 루트앱 밖에 없으니까, wsgi.py를 갖고 있는 폴더의 명칭 이라고 검색 ㅋㅋㅋㅋㅋ

루트디렉토리라고 말해주는 지피티... 일단 알겠어.

그럼 루트 디렉토리의 폴더명을 바꾸면 안되는거야? 하니까 아니라고 바꿀 수 있는 거란다.

그러면서 바꾸는 방법도 내가 했던 그대로 똑같이 알려줌 ㅋㅋㅋ 흠...

지금 밤 11시 였는데 다행히 훈히 기술매니저님이 계셔서 가서 여쭤봤다.

너무나 잘 알려주시는 기술매니저님!!!!! 너무 멋지신분 ㅋㅋㅋ

기분 좋았던게, 매니저님이 힌트를 주시는 스타일로 한걸음씩 직접해보게 하셨는데,

맨 처음 가설을 하나 말씀하셨다. 음~ 이렇게 해서 안되네요!

힌트를 드릴게요.

저희가 새로 프로젝트를 생성할 때 파이참이 루트앱의 이름을 정해줬어요. 근데 지금 루트앱 이름을 임의대로 바꾸었어요. 그럼 그 전에 정상적인 실행을 위해 자동으로 설정되었던 값이 아직도 이전 이름을 가리키고 있지 않을까요?

대 박 사 건 ㅋㅋ

매니저님의 가설이 내가 맨 처음 생각했던 추론과 같았다!! 별 건 아니고 이 점이 너무 기뻤다 ㅋㅋㅋㅋ 괜한 반가움.

그 다음은 일단 세팅스로 들어가 보라고 하셨다. 장고의 모든 설정은 세팅스에 있다고.

들어가서는, 여기서 그럼 어떻게 우리가 찾으려는 설정 오류를 찾을까요? 별거 없습니다. Ctrl+F 해서 검색해보세요.

이전 루트앱 이름이었던 erp로 검색했다. 바로 나옴

바로 config로 고쳤다.

초록버튼으로 실행했더니 안된다.

어? 그럼 이제 터미널에서

python manage.py runserver 해서 실행해 볼까요?

된다!!!!!!!!!!!!!!!!!!!!!!

ㅋㅋㅋㅋ

 

그럼 초록버튼으로는 왜 안되는지도 바로 알려주셨다.

초록버튼은 장고를 구동시킬 때, 터미널처럼 파일을 바로 작동시키는 게 아니라,

파이참에서 정해 놓은 설정값을 거쳐서 실행된다고 한다. 쉬운 말로 파이참 손을 탄 뒤 실행된다는 것.

그래서 그 파이참 설정도 이전 erp를 가리키고 있으니, 수정해야 한다.

 

파이참 오른쪽 귀팅이에 이런게 있다.

누르면 창이 하나 켜지는데

Edit Configurations 누른다. configuration이 뭐냐고 여쭤보니, 설정값 같은 거라고 생각하면 된다신다. 관행적으로 그렇게 부르는 거라고.

여기서부터 숨은그림찾기라고 센스있게 드립치시는 기술 매니저님 ㅋㅋㅋㅋㅋ

대박 ㅋㅋㅋ 여기 erp 찾았다!

바로 config로 바꿨더니

이제 초록버튼으로도 작동 잘 됨!!!!!!!!!!! ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

행복하다.

이렇게 재밌는거였어?!

후니매니저님께 감사드리고... 앞으로는 혼자 끙끙하지 말구 몇 번 찾아봐서 안나오면 바로 여쭤봐야겠다.

초보때는 쉬운 일로 막히고, 양치기를 해야 빨리 배우니까 혼자 고민도 좋지만 빨리빨리 해결해서 낙담하지 않는 것도 좋겠다.

코딩 하다보니 나 스스로를 키우는 느낌이 드네;;;

이제 erp도 얻었으니 다음 단계로!

 

3. 앱 2개 만들기! 각각 accounts와 erp가 된다.

ㄷㄷㄷ 맨처음에 accoundts라고 잘못 써서 앱이 만들어졌음 ㄷㄷㄷ

일단 그냥 카테고리에서 우클릭해서 딜릿 하기는 했는데 추후 어떤 문제가 발생할 진 모르겠다.

 

좋아 앱 다 만들었고,

앱을 만들었으니 장고에게 내가 앱을 만들었음을 알려주어야 한다.

루트앱의 settings.py에 가서

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'accounts',
    'erp',
]

 

앱이 처음 생성되면 urls.py가 없구나.

일단 루트앱에서 어카운트앱으로 path 호출한 다음에 views 함수가 잘 작동하는지 테스트를 해보고 싶어서

account에 urls.py를 추가해주었다.

순서대로 말하자면

 

a) 루트앱의 urls.py 내용 수정

: from django.urls import path 에서 path 뒤에 , include 추가

urlpatterns 리스트 안에 path('', include('accounts.urls')) 추가 (임시로 그냥 ''로 둠. 현재는 어카운츠urls랑 연결확인이 주목적)

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('accounts.urls')),
]

 

b) 어카운츠의 views.py에 가서 내용 수정

: 간단한 응답을 화면으로 확인해야 하니까 HttpResponse 모듈을 임포트한다. 그리고 동작할 실질적인 함수도 만들어줌.

 

from django.shortcuts import render
from django.http import HttpResponse

def base_response(request):
    return HttpResponse("안녕하세요! 장고의 시작입니다!")

 

c) 어카운츠의 urls.py 내용 수정

: 어카운츠 안에 있는 views의 함수를 건드려서 HttpResponse를 불러낼거니까 임포트 란에

from .(쩜은 현재위치를 의미) import views를 써주고

urlpatterns에 할당할 경로, 건드릴함수, 이름을 써준다.

from django.urls import path
from . import views

urlpatterns = [
    path('test/', views.base_response, name='first_test'),
]

그러면이제

짠! 테스트페이지가 잘 동작한다.

 

4. 이제 연결이 잘 되는게 확인됐으니

본격적으로 첫 화면(login.html)을 만들어본다.

첫 화면에서는 뭐뭐를 나타낼까? 일단은

반갑습니다! 무신사스토어 재고관리 페이지입니다! #이렇게 인사를 해주고

로그인 모듈 #이렇게 로그인 할 수 있게 해야겠다.

이렇게 하고 할라고 했는데!!!

django 로그인 모듈을 이식하려면 데이터베이스도 연결되어 있어야 할 것 같다 ㅋㅋㅋㅋ

데이터 베이스부터 연결하고 온다!

 

5. 데이터베이스 연결

파이참에서 장고 한 번 실행 > 좌측 카테고리에 db.sqlite3 깔려있음 > 우측 database 탭 끄집어내기 > 펼쳐진

화면에서 좌상단 귀퉁이 + 버튼 > Data Source from Path > db.sqlite3 선택 > open > 드라이버 sqlite 선택 > OK >

Data Source and Drivers 창에서 Test Connection > OK > 끝났음. 우측 창에 db.sqlite3 목록 생김

 

6.이제 데이터베이스 생성해도 되는데~ 지금 하진 않고 장고 모듈 갖다 쓸 것.

직접 만들어도 되고, 이미 장고에서 제공하는 게 있으면 갖다 써도 된다.

▼직접 만드는 방법

더보기

직접 만들려면 내가 만든 app 하위에 models.py 들어가서 from django.db import models 한 다음에

아래에다가 ORM이라고 하여 클래스 형식으로 내가 다룰 데이터들을 넣어주면된다.

class UserModel(models, model):
    class Meta:
    	db_table = "my_user"
    
    username = models.CharField(max_length=20, null=False)
    password = models.CharField(max_length=256, null=False)
    bio = models.CharField(max_length=256, default='')
    created_at = models.DataTimeField(auto_now_add=True)
    updated_at = models.DataTimeField(auto_now=True)

 대충 이런 식임.

 

그리고 위에 CharField니 뭐니 있는데 이런 것들은 장고에서 제공하는 모델 필드. 모델 필드란 데이터베이스에 저장되는 데이터의 유형을 결정.

django 모델 필드의 종류에는 이런 것들이 있다 함.

문자열 : CharField, TextField #Char는 길이가 제한된 문자열 저장, Text는 길이가 제한없는 문자열 저장
날짜/시간: DateTimeField, DateField, TimeField #날짜와 시간을 저장하는 필드들
숫자 : IntegerField, FloatField #정수를 저장하는 필드, 실수를 저장하는 필드
다른 테이블과 연관을 지어 줄 때 : ForeignKey

 

암튼 이렇게

ORM 형식으로 내가 원하는 데이터를 구성해서 models.py에 넣었으면,

이제 데이터베이스에 넣어주기 위해 신고 절차가 2개 있음.

첫째는 python manage.py makemigrations #데이터베이스가 변경됐다고 노크노크

둘째는 python manage.py migrate #변경된 데이터베이스 적용

 

이러면 화면우측 데이터베이스에 우리가 만든 데이터가 생김.

데이터 이름은 아까 ORM 형식으로 적은 Class Meta:의 db_table 변수에서 정한 이름. "my_user"

근데 난 모듈로 하고싶다.

3주차 강의를 보고 오자...