초보 개발자

flex를 사용하면 나누고 정렬하는 것은 쉽게 되어지는데 격자형태의 grid는 만들기 힘들다. 따라서 이렇게 구획을 나누기 위해서 grid라는 것이 나오게 되었다. grid역시 flex-box처럼 father 요소에서 display : grid를 해주면 된다. 그리고 grid design은 대부분 father에서 해야한다. father에 grid-template-columns: 20px 30px 40px 50px ; 이렇게 자신이 원하는 column의 수와 px까지 정할 수 있다. 나는 3개의 child를 두고 하였기에 마지막 50px 한칸이 빈채로 남아있다. 250px씩 3칸의 column을 만들고 column-gap과 low-gap을 주면 아래와같이 이쁘게 잘 나오게 된다. 이때 column-gap과..

UsercreationForm을 사용하면 알아서 이걸 실행시켜주는데 나는 아직 저 Form 사용법을 모르기 때문에 password_validator라는 모듈만 불러와서 우리가 만든 signup form에 적용시켜주려고한다. password_validator란 우리가 10자이상 적어야 하거나, 너무 단순하거나, 숫자로만 이루어져있거나할 때 django가 error메시지를 보내서 사용자에게 제대로 작성하라고 하는 것이다. clean_password method안에 이거 딱 한줄만 추가해주었다. password_validation 모듈안에 우리가 사용할 validate_password이다. 첫번째인자로 password를 받고, 두번째인자로 user을 받는 것 같다. 근데 기본값이 None이길래 안줘도되는건가?..

flex-grow, flex-shink도 children에게 줄 수 있는 옵션이다. flex-shrink flex-wrap옵션을 주지 않으면 우리가 children에게 주었던 width값들이 찌그러지면서 wrapper의 width에 맞추려고 한다. 이 때 flex-shrink를 주면 특정 child를 다른 child보다 더 찌그러지게 할 수 있다. flex-shrink의 기본값은 1이다. flex-shrink를 2로주면 다른 child보다 크키가 2배로 줄어들게 된다. 모든 box가 같은 크기로 찌그러지는 걸 원하지 않을 때 이걸 사용하면 된다. flex-grow flex-grow는 flex-shrink와 같지만 반대로 작용한다. flex-grow의 기본값은 0이다. 이건 줄어들 때는 똑같이 줄어든다. ..

wrap 각 box의 width를 200px로 주었지만 display: flex라고 하면 한 줄에 모든 요소들을 다 집어 넣으려고하는 습성이 있다. 만약 브라우저의 사이즈를 줄이게 되면 어떻게 될까? 어떻게든 브라우저의 width에 집어 넣기 위해 우리가 기존에 주었던 200px을 무시할 수 밖에 없다. 아래의 그림을 보면 83.34px로 줄어든 것을 볼 수 있다. 이를 온전히 유지하기 위해선flex-wrap : wrap을 주면 해결이 된다. default는 flex-wrap : nowrap이다. wrapper에 flex-wrap : wrap을 주면 아래와 같이 최대한 item의 너비를 지켜주고 초과되는 부분은 아래로 내려가게 한다. reverse flex-direction : row-reverse를 주..

flexbox 우리가 div를 여러개 만들고 일정한 간격을 두고 배치시키고 싶다면 display : inline-box로 지정 한 후 하나하나 margin-right를 주어 배치시킨다. 이렇게 어거지로 수동으로 맞추어도 화면이 작아지게되면 바로 깨져버린다. 이러한 문제를 해결하기 위해서 flex box라는 기술이 등장하였다. flexbox의 특징 항상 붙어있는 부모가 자식의 위치를 움직일 수 있다. .box들은 바로 위의 부모가 .wrapper이기에 wrapper의 display:flex가 적용이 된다 . 만약 .box들 위에 새로운 div를 하나 더 감싼다면 이제 이 .box들은 flex영향을 벗어난다. flex-direction ( justify-content, align-items ) flexbox..

Mailgun Sign Up Free | Mailgun Sign Up Free | Mailgun signup.mailgun.com 이메일을 발송하기 위해서 먼저 mailgun에 가입해주자. 장고 공식 문서를 보면 EMAIL_HOST, EMAIL_PORT, EMAIL_HOST_USER, EMAIL_HOST_PASSWORD, EMAIL_USE_TLS, EMAIL_USE_SSL 을 적어야 한다고 한다. Mailgun에 가입후 sending -> domain settings -> SMTPcredential 에 가면 이 정보들이 들어있다. 아래와 같이 settings.py에 맨 아래에 적어주자. PASSWORD같은 경우는 RESET PASSWORD 누르면 보여준다. 근데 이렇게 무턱대로 비밀번호를 settings..

li element를 DOM으로 만들어 input value를 하나하나 추가해나가는 경우, 새로고침을 하고나면 li 들이 전부 다 사라져버린다. 이 경우 어떻게 우리가 생성한 정보들을 저장하고 불러올 수 있을까?? 바로 localstorage에 담아두면 된다. js 리스트에 정보를 담아 두었는데 리스트 째로 localstorage에 저장할 수 있을까? 저장은 된다. 하지만 온전히 list형태로 저장이 되지 않는다. localstorage는 string format만 지원한다고 하기에 list의 내용물을 빼서 stirng으로 만들어버린다. 따라서 getItem으로 불러왔을 때는 string으로 읽혀온다. 그럼 어떻게 list형태로 보내고 다시 list형태로 받을 수 있을까? JSON을 활용하면 된다. li..

forms.Form으로 구현해보았지만 이번엔 ModelForm을 사용해보려고한다. model form은 자체에 clean함수와 save함수가 있다. 이전에는 clean함수를 만들어 우리가 직접 field값을 validate해주었다. (오류 발생 등) 하지만 model form을 사용하면 알아서 unique한 값을 validate해준다. 즉 User.obects.get(username=email)이런식으로 해주어 찾고 경우에 따라 에러를 발생시켜줬는데 이걸 알아서 해준다는 말이다. form.ModelFrom 을 상속하고나서 실행시키면 당연히 오류가 발생한다. 어떤 모델을 사용한다는지 장고는 모르기 때문이다. 따라서 Meta클래스에 정보를 주어야한다. model에 우리가 사용할 모델을 넣어주고 fields에..