AI개발자가 되기위한 개발일지

장고로 프로젝트를 진행하다보면 table에 새로운 칼럼을 추가하는 경우가 발생할 수 있다. 이는 프로젝트 초반에 회의를 통해 가능한 수정없이 진행하는 것이지만 프로젝트를 진행하다보면 추가 해야 하는 경우가 충분히 발생가능하다.

이유는 자체 개발 하는 거라도 주인이 아니면 아니 주인이더라도 진행하다보면 이기능이 있으면 좋을거 같다라는 생각이 들면 기능 추가가 들어가고 그에 해당되는 테이블에 컬럼이 추가 될 수 있다

그러다보니 초기값을 입력해 주지 않을 경우 해당 부분을 데이터베이스에 적용할 때 따로 장고에서 현재 진행중에 디폴트 값을 입력해줄 것인지 아니면 따로 models.py에서 정의를 해줄지 물어본다

이때 models.py에 정의를 할경우 따로 유저의 입력이 없으면 우리가 정의한 값이 들어가게 된다

만약 현재 진중에 디폴트값을 넣어 주게 될경우에는 해당 데이터베이스에 해당 되는 테이블에 컬럼값을 추가 될때 디폴트랎을 넣어 주게 된다

처음 강의를 들었을 때에는 이해가 되었는데 막상 직접 해당 부분을 경험을 하게 되니 강의에 따라 치다가 오류가 생겼다.

이류는 migrations를 진행하면서 디폴트값을 지정하는데 이때 디폴트값을 내가 지정하는게 아닌 장고가 해준다고 이해를 하고 있어 디폴트값을 비워두면서 문제가 발생했다.

결국 해당부분을 이해하지 못해 데이터베이스를 삭제후 다시 진행을 하였다. 그러니 정상적으로 동작을 되는것을 확인 할 수 있었다.

기계적으로 하고 이해도 잘 못 되어 디폴트값을 내가 지정해줘야 함을 잊게 되었다. 자동으로 해주는 부분의 경우 강의에서는 날짜 관련된 부분이였느데 내가 할려는 부분은 아이디 값을 줘야 하는 부분이였다. 그런데 그렇게 하지 않고 그냥 exit를 입력하고 진행을 하였으니 오류가 발생한 것이다

데이터베이스를 다 지우고 다시 설치를 했을 때의 경우는 처음부터 만드는 부분이라 당연히 디폴트값이 필요가 없어서 되니 정상적으로 동작이 되었던 것이다.

이달 오류가 발생해서 해결을 하는것 까지는 좋으나 왜 해결이 되었는지까지 하는게 가장 베이스인것 같다

Bootstrap

Bootstrap이란?

• Bootstrap은 Twitter에서 개발된 오픈 소스 프론트엔드 프레임워크. CSS, JavaScript 기반의 다양한 도구를 제공해 웹 개발을 쉽게 할 수 있게 제공
• 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것 뿐만이 아니라, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있고, 입맛에 따라 재사용을 할 수 있다
• 주요 기능과 장점
  • 반응형 디자인: 하나의 코드베이스로 다양한 디바이스에 대응 가능
  • 그리드 시스템: 레이아웃 구성이 매우 쉬움
  • 다양한 구성 요소: 버튼, 네비게이션 바, 폼 등 자주 사용하는 UI 요소들을 미리 정의된 스타일로 사용 가능
  • 커뮤니티와 문서: 전 세계적으로 사용되기 때문에 문서와 지원이 풍부
• Bootstrap 사용 이유
  • 시간 절약: 기본적인 UI를 빠르게 구성할 수 있어 개발 시간이 단축
  • 일관성: 일관된 디자인을 유지 가능
  • 확장성: 필요에 따라 쉽게 커스터마이징 가능

Bootstrap 설정

• Bootstrap을 사용하기 위한 방법은 2가지가 있다
• 첫번째는 Bootstrap에서 제공하는 CDN을 이용하여 별도의 설치없이 사용하는 방법
• 두번째는 Bootstrap에서 제공하는 css, js 파일을 직접 받아 사용하는 방법
• 둘다 간단히 사용할 수 있지만 CDN을 사용할 경우 만약 사용하고 있던 CDN 주소가 사라지거나 참조하고 있던 파일이 변경이 될 경우 따로 우리가 해결할 방법이 없다.
• 가능하면 프로젝트 진행 시 CDN 보다는 css, js 파일을 직접 받아 프로젝트 안의 경로로 사용하는게 좋을 것 같다
• 기본 HTML 템플릿 만들기
  • 간단한 HTML 문서 구조를 만들고 Bootstrap을 포함하여 기본 설정
  • container, row, col 클래스를 활용하여 기본 레이아웃을 구성
  • 클래스를 사용하면 웹 페이지가 자동으로 반응형으로 동작

그리드 시스템과 레이아웃

• 그리드 시스템 개념
  • Bootstrap의 그리드 시스템은 페이지를 12개의 가상 열로 나누어, 각 열에 맞게 콘텐츠를 배치
• container, row, col 클래스 사용법
  • container: 전체 페이지의 가로 폭을 제한
  • row: 그리드 시스템의 행을 정의합니다. 행은 하나 이상의 열을 포함
  • col: 열을 정의합니다. 기본적으로 12개의 열이 있으며, 이를 분할하여 다양한 레이아웃을 생성
• 반응형 레이아웃 만들기
  • col-, col-sm-, col-md-, col-lg- 등의 클래스는 화면 크기에 따라 레이아웃이 자동으로 조정. 이를 통해 다양한 디바이스에서 일관된 UI를 유지

기본 구성 요소

• Bootstrap component(구성 요소) 소개
  • Component(구성 요소) 개요
    • Bootstrap에는 수십 가지의 기본 UI 구성 요소가 포함
    • 이 구성 요소들은 웹 페이지를 구성하는데 자주 사용됨
  • 주요 구성 요소 설명
    • 버튼: 다양한 스타일과 크기의 버튼을 쉽게 생성 가능
    • 네비게이션 바: 페이지 상단에 위치하는 네비게이션 바를 쉽게 생성 가능
    • 카드: 콘텐츠를 시각적으로 구분하는 카드 컴포넌트
    • 폼: 입력 필드, 체크박스, 라디오 버튼 등을 포함한 사용자 입력 폼을 쉽게 구성 가능

기본적으로 무료로 Bootstrap 을 사용할 때에는 https://getbootstrap.com/docs/5.3/examples/ 부분에서 필요한 것들을 가져와 사이트에 적용을 한다.

해당 주소로 들어가면 친절하게 Header, Sidebars, Footers, Modals등등 카테고리별로 예제를 모아 둔 데모사이트 및 전체적으로 간략히 디자인 된 데모사이트를 제공하고 있다

디자인이 따로 필요없이 간단히 웹 사이트를 제작할 때에는 디자인이 입혀진 부분을 참고하여 제작하면 쉽게 웹 사이트에 대한 디자인을 끝날 수 있다.

물론 필요하면 하나하나 쪼개서 가져와 붙여서 제작 해도 무관하나 만약 시간이 부족하다면 전체적으로 디자인 된 부분을 가져온디 필요한 부분만 수정하는게 시간절약에 유용하다

오늘 특강에 배운 부분중 내가 생각하는 가장 중요했던 부분은 그리드시스템이 였다.

기본적으로 Bootstrap을 이용할 때 따로 공부하기보다는 그냥 소스를 그대로 가져다 사용하기에 분석을 하지 않았다.

그런데 오늘 특강을 듣고 난 뒤 조금은 Bootstrap의 구조를 쉽게 이해할 수 있고 이제는 커스텀을 잘 할 수 있을거 같다.

기존에는 배치때 내가 원하는 부분으로 맞추기위해 col부분을 삭제 한뒤 내가 임의로 주거나 했었는데 가상의 12개의 열로 배치하는 것을 알게 되니 이제는 쉽게 배치를 내 입맛에 맞게 수정이 가능해 질걸로 생각된다.

★☆ CSS, JavaScript 는 둘다 선택자(id, class, tag_name)를 이용하여 속성을 주어 디자인을 적용하거나 기능을 동작하게 된다!!!☆ ★

1. 패키지 설치 및 환경 설정

• python -m venv .venv
• pip install django==4.2
• pip install pillow
• 기본적으로 사이트내에서 유저에게 파일을 전송 받지 않는 다면 마지막 pillow를 받지 않아도 무관하다

2. 프로젝트 생성 및 초기 셋팅

• django-admin startproject ProjectName .
• 프로젝트 이름 후 경로 설정을 따로 하지 않으면 해당 위치에서 프로젝트폴더를 생성하고 해당 폴더 안쪽으로 프로젝트가 셋팅된다. 그렇게 될경우 해당 위치로 이동이 필요하기에 가능하면 경로 위치에 . 을 입력하에 현위치에 생성하게 하는게 편하다
• python manage.py startapp AppName
• ProjectName/settings.py 수정
  • 앱을 생성 할 경우 아래 코드 처럼 INSTALLED_APPS에 등록을 해주어야지만 장고가 해당 앱의 내용을 인식할 수 있다
  • 그리고 우리가 만든 html 파일을 장고에게 인식 시키기 위해  TEMPLATES에 DIRS 경로를 잡아 주어야 한다
  • 회원기능이 필요할 경우 장고에서 제공하는 기본적인 회원이 아닌 우리가 만든 부분으로 변경하기 위해서는 AUTH_USER_MODEL 부분을 등록하면 우리가 만든 부분으로 기본적으로 잡아 준다.(그러니 초기 셋팅때 기본적인 앱을 생성하고 해당 앱 중 회원쪽 앱에 회원 테이블을 선언해 놓자)
  • static의 경우에는 주로 css, js 파일을 같은 정적인 파일을 관리하기 위해 경로 지정하며 아직은 배우지 않은 배포시의 경로까지 잡아주면 된다.(이부분은 추후 배우게 되면 추가로 설명을 하겠다)
    • static 경로에 있는 파일들을 불러오기위해서는 html 상단에 {% load static %}을 선언하고 이후 불러올 위치에 {% stacic '파일경로/파일이름' %}으로 불러오면 된다
  • 다음 MEDIA의 경우는 사용자에게 파일을 받아 저장하기 위하여 경로를 설정한다

INSTALLED_APPS = [
	....
    "AppName",
]


TEMPLATES = [
   ....
        "DIRS": [BASE_DIR / "templates"],
   ....
]

# 추가 생성
AUTH_USER_MODEL = 'AppName.User'

STATICFILES_DIRS = [BASE_DIR / "static"]
STATIC_ROOT = BASE_DIR / "staticfiles"

#Media files
MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR / "media"

3. namespace 설정

• 프로젝트를 진행하다보면 동일한 이름을 지정하는 경우가 많은데 이때 중복된 이름으로 호출 할 경우 settings에 INSTALLED_APPS의 순서대로 찾아 오기에 먼저 선언된 이름으로 불러온다
• 이러한 현상을 방지하기위하여 앱 안에 있는 urls.py 에 app_name='AppName'을 설정한다
• 프로젝트 중간에 설정 할 경우 해당 주소를 호출 하는 모든 곳을 수정해야 하니 처음에 설정을 잘해 놓자..
• 그리고 각각의 app 안에 있는 urls.py를 메인 urls.py에 인식 시키위해서는 include를 이요하면 된다

urlpatterns = [
	.....
    path("accounts/", include("accounts.urls")),
    .....
]