Application/Python-Django

Django 에어비앤비 클론 3부 (21.04.05 ~ 12.06)

winney916 2021. 4. 5. 23:51
728x90

#15 Sign Up

 - forms.Form, forms.ModelForm [04/05]

  form을 만드는 방법에는 여러가지가 있는데, 그 중에 두가지를 다뤄볼 수 있었다.

 Form : 각각의 field를 내가 직접 정의한다.

 ModelForm : 장고에서 정의해놓은 field를 잘 사용하면 된다. model이라는 이름이 붙은 이유는

class SignUpForm(forms.ModelForm):
    class Meta:
        model = models.User
        fields = (
            "first_name",
            "last_name",
            "email",
        )

 Meta SubClass를 통해서 fields를 정의해 줄 때, 앱 내의 model에 정의된 field를 그대로 사용할 수 있기 때문이다.

 

 - mailgun.com [04/06]

  : 이메일을 보내는 기능을 수행해준다. django내부에도 같은 기능이 있는데 (장고는 대부분의 기능을 가지고 있다.) 장고가 단독으로 수행할 경우에는 스팸처리가 되버리기 때문에, 일종의 인증기관을 거치는 거라고 보면 된다. 이 인증기관에서는 key와 password같은 정보를 공개하지 못하게 하는데, 이걸 실수로 git에 올려버렸고... 오늘 개발이 중단되었다.. (살려줘....) 리셋절차 밟고 문의했는데.. 내일을 기다려 봐야지..

 

 전부 진행을 했고.. 음... 뭐 딱히 적을게 없던걸?... 그 뒤에 깃허브 로그인과 카카오 로그인을 구현했는데, 이는 전부 각 회사의 다큐먼트에 잘 나와있어서 따라한게 전부. 그럼 이제 스타일링

(너무 축약된 감이 있는 듯 하지만,,, 이는 전부 나의 귀찮음 때문)

 

#19 Intro to tailwindcss

 스타일링을 도와주는 프레임은 여러가지가 있는데, 기존에 사용했던 부트스트랩은 너무 비슷비슷한 결과물들이 나온다는 느낌이 있었다. 반면 테일윈드는 아니라고 그러네?(니꼬샘 기준)

 믿고 보는 니꼬쌤!

 

  - Setting Up! [04/11]

 : 세팅은 어렵지 않다. node.js, gulp.js, tailwind를 다운받으면 된다. 자세한건 노마드코더 아카데미의 gulp무료강의에 잘 나와있다. 이걸 수강하지 않아서그런지 하나도 모르겠더라..

 

- npm init

- package.json 파일에서 main, script, author, lisence 를 지워준다.

- npm i gulp gulp-postcss gulp-sass gulp-csso node-sass -D

 : gulp, gulp-postcs, gulp-sass, gulp-csso, node-sass를 Developer모드로 다운받는다.

- npm install tailwindcss -D

- npx tailwindcss init

 : tailwind.config.js 파일이 생성된다.

 

 

  이후, ./gulp.js를 작성하고

- npm install autoprefixer

: css parsing을 위한 플러그인이다.

 

  ./package.json  ./assets/scss/styles.scss 를 작성하고

(이 파일들을 작성하는 방법은 정확히 모르겠다. 이건 gulp에 대한 강의를 수강해야할듯)

 

gulpfile.js

const gulp = require("gulp");

const css = () => {
  const postCSS = require("gulp-postcss");
  const sass = require("gulp-sass");
  const minify = require("gulp-csso");
  sass.compiler = require("node-sass");
  return gulp
    .src("assets/scss/styles.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(postCSS([require("tailwindcss"), require("autoprefixer")]))
    .pipe(minify())
    .pipe(gulp.dest("static/css"));
};

exports.default = css;

 강의에서 들을 수 있었던건 return 부분의 4개의 pipe인데, 

 첫번째 라인은, sas코드를 가져와서 css코드를 만들고,  ---> sas가 뭔지 모름

 두번째 라인은 tailwind 파일을 가져와서 real css로 만들어주고

 세번째 라인이 minify. css파일의 용량을 축소시켜준 뒤,

 네번째 라인에서 static/css 파일로 작성한다.

 

npm run css

 터미널에서 위 명령어를 실행하면, static/css/styles.css 가 자동으로 생성된다. 이런식으로 스타일링을 진행한다.

 

프론트 작업을 위해 수정해야하는 파일은 scss 파일이고, 이 파일을 수정하고 나서는 npm run css 명령어를 실행해 css로 반영되도록 해야한다.

 

+) 에러 처리

 

다음과 같은 에러가 발생했다.

 

고정 플러그인이 지원되지 않아 발생한 문제로 보인다.

 

 

 

 

 

1. gulp.js 파일에서

const sass = require("gulp-sass");   이 부분을
var sass = require('gulp-sass')(require('sass')); 이렇게 수정한다.

 

2. npm install --save-dev sass 

일단 해보래서 했는데,, 이거 덕분에 작동했는지는 잘 모르겠다.

아무튼 오류를 해결했다.

 

- Static Files on Django [07/20]

장고에서 static파일에 접근할 수 있도록 설정한다.

settings.py

 

 

 

STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")] 이 부분이 추가됐다.

STATIC_URL은 Django에서 static파일에 접근하는 url이라고 보면 되고, STATICFILES_DIR은 그 URL로 접근했을 때 보여질 파일들이라고 생각하면 된다. 주소와 파일을 설정하는 것이다.

 

그러면 template/base.html에서 다음과 같은 링크를 통해 스타일을 적용할 수 있다.

<link rel="stylesheet" href="{% static "css/styles.css" %}"/>

물론 최상단부에 

{% load static %}

이부분을 추가해야한다.

 

그러면 스타일 코드를 적용할 수 있다.

 

#20 Make it beautiful [04/26]

 ㅋㅋㅋㅋ 평일에는 챌린지 하느라 진도를 많이 못빼서, 주말에 몰아서 해야겠다는 생각을 2주 연속으로 했다. 근데 이거.... 한 챕터가 가지고 있는 양이 너무 방대해서 진짜 겨우 하나 끝낸 수준 ㅋㅋㅋㅋㅋ

 점점 양이 많아진다. 그래도 67%성공... 이제 챌린지 하고 다른공부 하러 가자^^..

 

 tailwind를 작성하는 방법은 딱히 메모할 생각이 없다. 일반적인 css를 작성하는 방법과 유사하기 때문인데, 모든 속성을 class로 작성한다는게 편리하다. (이전에 css 수업에서 언급됐던 적이 있다. class, id 등 한가지를 기준으로 놓고 스타일링을 해야한다고..) 뭐 더 다양한 커스터마이징은 더 공부를 해야겠지만 일단은 만족스러운 프레임워크이다.

 

 - templates with variables.

 템플릿을 작성할 때, include문법을 통해서 다른 템플릿과 연결할 때가 많다. 이 때 특정 변수들을 넘겨줘야한다면 with를 사용하도록 하자

{% include 'mixins/auth/form_input.html' with field=field %}

 

 - Form.py with templates

 템플릿을 편하게 만들 수 있도록 해주는 장치가 form.py 라는 것은 알고 있을 것이다. 두 파일의 상호작용을 잘 파악하고 있을 필요가 있다. 예를 들면

 

form.py

password = forms.CharField(
        widget=forms.PasswordInput(attrs={"placeholder": "Password"})
    )

 

이렇게 정의된 필드를 템플릿에서 {{form.field}} 형태로 호출할 수 있는데, 이 코드는

<input type="password" placeholder="Password"></input>

대충 이런? 구조로 작동하게 된다. 여러 다큐먼트를 참고하면서 작성하면, 굉장히 유용한 도구가 될 것 같다.

 

#21 USER PROFILE, EDIT PROFILE, CHANGE PASSWORD

 

 어우.. 양이 너무많아..

- models.get_absolute_url(self):

  이 함수는 정의된 모델로 만들어진 각각의 값들을 개별 페이지로 만들 때 유용하다. 특정 url+고유값(primary key) 형태로 url을 구성한다.

 

- interaction backend and frontend

 프론트에 form을 이용해서 image를 업로드 하는 input을 만들었다. 문제는, 이 인풋을 사용해도 백앤드로 이미지가 전달되지 않는다는 점이다. 이는 인코딩 타입이 달라서 생기는 문제라고 하는데(니코쌤..) 나는 여전히 잘 모르겠다. 이걸 해결하는 방법은 frontend에서 form태그에 enctype="multipart/form-data" 옵션을 추가하는 것이다. 그러면 전달이 된다.

 

- mixins 믹스인

 객체 지향 프로그래밍 언어에서 믹스인은 다른 클래스의 부모 클래스가 되지 않으면서 다른 클래스에서 사용할 수 있는 메서드를 포함하는 클래스.

 메소드를 확장해서 사용하고 싶을 때, 상속 없이 사용할 수 있는 메서드를 말한다. 장고를 비롯한 여러 프레임워크에서 자주 사용하는 방식이다.

 

 

-- 12.06 다시 시작하기

#22 Room Detail

 - html include 인자 전달

mixin 형태로 사용하는 html을 다른 html에서 사용하고 싶을 때 쓰는 방법이

{% include 'path/ .html' %}

인데, 이 뒤에 with를 통해서 인자를 전달할 수 있다.

{% include 'path/ .html' with uesr=user%}

근데 만약, 값이 입력되지 않을 경우 고정값(default value)을 갖고싶다면 스타일 코드에 이렇게 작성하면 된다.

 

<span class="{{text|default:'text-3xl'}}">{{user.first_name|first}}</span>

신기한 점 하나를 발견했다. default:뒤에 값을 넣을 때 딱 붙여서 넣어야한다. 한 칸의 공백을 만들 경우 2가지 value를 받아야 한다고 인식하더라... (이거 찾는데 5분걸림 하하)

 

  - 

 

저작자표시