초보 개발자

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에..

Sign up login form 처럼 sign up form을 만들어 보려고 한다. 역시 forms.Form을 상속받아 SignUpForm을 만들어주고 django 기본 User에서 제공해주는 last_name, first_name, email, password만 간단하게 넣어보려고 한다. username을 따로 받지 않은 이유는 email의 값을 넣으려고 하기 때문이다. 이렇게 form을 만들고 View에서 FormView를 상속하여 만들어보자. form_class에 form 방금 만든 폼을 success_url에는 reverse_lazy를(일반 reverse를 쓰면 View가 읽힐 때 urls를 읽은 상태가 아니라 찾지 못함) template_name에는 우리의 html을 적어준다. 이렇게 해주면 ..

FormView를 사용하여 좀 더 간편하게 만들 수 있다. 먼저 View를 상속하지 않고 FormView를 상속하였다. 이전에는 get 요청일 때와, post요청일 때 나눠서 생각하였는데 이렇게 하면 알아서 get일때와 post일 때를 구분하여 form을 뿌려주는 것 같다. form_class등 정보를 적어주는데 success_url에는 reverse가 아닌 reverse_lazy를 적어주는 이유는 CBV가 정의될 때 url은 순서상 읽히기 전이기에 core:home이라는 url을 읽어올 수가 없다. 하지만 reverse_lazy는 실행이 되는 순간 읽히기 때문에 이 문제를 해결해줄 수 있다. 우리가 해줄 것은 def form_valid를 오버라이딩 해주는 것이다. 훨씬 깔끔하게 잘 된 것 같다. Vie..