초보 개발자

클래스 바인딩 Vue에서 클래스 바인딩 하는 것을 알아보자!! 먼저 red라는 클래스에 컬러를 red로 지정해두고, p태그를 보면 class를 괄호로 감싼뒤 red(클래스명) : isRed로 key value형식으로 만들어 둔 것을 확인할 수 있다. isRed의 값이 true, false에 따라서 red라는 클래스가 적용이 될 수도, 안 될 수도 있다. false라면 적용이 안되고, true라면 적용이 된다. 따라서 버튼을 클릭하면 isRed값을 반대로 바꿔줌으로써 클래스를 적용할 수 있다. 버튼을 클릭 하면 아래와 같이 바뀐다, 클래스를 여러개 사용하고 싶다면 class="{ red : isRed, bold : isBold }"이렇게 오브젝트 형식으로 늘려나가면 된다. 이 때에 bold라는 클래스를 사..

간단히 CDN으로 VUE script를 추가하여 html에서 바로 VUE를 사용할 수 있다. 아래의 주소를 html에 넣으면 된다. 뷰 생성 먼저 div#hello를 만든 뒤 script에 new Vue를 통해 인스턴스를 만들고, 그 안에 el에 css 셀렉터로 div의 아이디 값인 #hello를 적어주면 div#hello안에는 이제 Vue를 사용할 수 있게 된다고 한다. 따라서 hi라는 data를 넣어서 잘 동작하는지 확인해보자! 아래는 html을 브라우저에서 실행시킨 화면이다. 잘 출력이 되는 걸 확인할 수 있다. 메서드 메서드도 만들어서 사용할 수 있다. 데이터를 조금 수정한 뒤에 메소드에서 데이터를 사용해보려고 한다. 다른 곳에서 data나 method에 접근하려면 this 키워드를 적어주면 가능..

데이터 바인딩 데이터 바인딩이란 JS데이터를 HTML에 꽂아넣는 문법이다. 바닐라 자바스크립트의 데이터 바인딩 스타일은 아래와 같다. document.getElementById().innerHTML = ?? vue에서는 간단히 데이터바인딩을 할 수 있다. data(){ return{ } } 이러한 형태로 object를 리턴해주면 이걸 바로 위의 template에서 사용할 수 있다고 한다. props 더보기 props라는 곳에서는 변수명과 타입을 명시해주는 것 같다. ByeBye.vue를 App.vue에 import 해와서 컴포넌트 형식으로 채워 넣었더니 화면에도 잘 출력이 되는 것을 확인할 수 있다 데이터 바인딩 쓰는 이유? 1. 하드코딩 해놓으면 나중에 변경이 어렵다. ( 쇼핑몰 상품처럼 변동이 생길 ..

먼저 eb 즉 elastic beanstalk를 사용하지 않는다면, 인프라를 일일이 만들어 주어야한다. EC2, 로드밸런서, 오토 스케일링 등등... 전에 eb를 사용하지 않고 일일이 하나하나 만들어 보는 과정을 포스팅 하다가 중간에 갑자기 다 날라가 버려서.. 포기한 적이 있었다...😥 지금부터 간단한 장고 서버를 하나 배포해보려고한다. EB CLI설치 🔨 eb를 사용하려면 먼저 eb-cli를 설치해야한다. EB CLI 설치 - AWS Elastic Beanstalk (amazon.com) EB CLI 설치 - AWS Elastic Beanstalk 이 페이지에 작업이 필요하다는 점을 알려 주셔서 감사합니다. 실망시켜 드려 죄송합니다. 잠깐 시간을 내어 설명서를 향상시킬 수 있는 방법에 대해 말씀해 주..

git을 지우면(혹은 git이 없으면) eb deploy 명령어를 사용했을 때 현재 폴더에 있는 파일 상태 그대로 반영됨, 그리고 git이 없으니 당연히 gitignore에 어떤 파일이 적히든 말든 무시하고 다 배포됨하지만 ebignore가 있다면 이 경우에는 여기에 적힌 파일은 무시되고 배포됨 git을 생성하는 순간부터는 eb deploy시 파일이 수정되든 말든 최신 commit에 올라와 있는 파일들만 반영하여 배포됨gitignore에 적힌 파일은 배포된 서버에서 못읽어옴,하지만 ebignore파일을 생성하면 gitignore 파일에 뭐가 적히던 ebignore에 적힌 파일들만 무시된 채로 배포 따라서 eb deploy의 공통점은 ebignore에 적힌 파일을 무시한다. 근데 파이프라인을 통해 배포를한..

room app안에 templatetags라는 이름의 폴더를 하나 만들자. 반드시 이름을 templatetags라고 해주어야 한다! 거기에 __init__.py 파일을 만들어서 파이썬이 인식할 수 있도록 해주자. 먼저 아래와 같이 {{ }} 안의 | 뒤에 존재하는 것을 filter라고 한다. 앞의 내용을 필터해준 다는 말이다. 여기서 우리는 기존에 내장되어있는 upper를사용해보자 우리는 분명 소문자로 썼는데 화면에서는 아래와 같이 대문자로 나타난 것을 확인할 수 있다. 우리는 이 필터를 커스텀 하려고한다. 먼저 위에서 만든 templatetags폴더안에 sexy_capital.py이라는 파일을 만들고 아래와 같이 만들어주자. 이렇게 한 뒤에 html파일로 가서 위에 {% load sexy_capital..

session에 정보를 넣어 현재 사용자의 상황?에 따라 다르게 페이지를 보이도록 할 수 있다. 먼저 start hosting, stop hosting 이 두 버튼을 만들어보겠다. nav.html인데 여기서 만약 세션에 is_hosting이라는 것이 있다면 Stop 없다면 Start로 보이도록 해주었고, 아래를 보면 세션에 is_hosting이 있는 경우에 Upload Room을 클릭할 수 있도록 해주었다, 아래와 같이 url을 설정해주고 view에는 try except를 사용하여 하나의 함수만으로도 동작할 수 있도록 하였다. del request.session['asdfasdf'] 은 session의 내용을 지우는 역할이고 request.session['asdfasdf']는 세션에 내용을 넣는 역할이다..

createview를 사용하여 photo를 추가하려고한다. create view를 사용하여 아래와 같이 만들어 준 뒤 아래와 같이 잘 뜨는 것을 확인할 수 있는데 우리는 Photo모델에서 foreign key로 room을 지정해주도록 해야한다. 하지만 현재 create view가 제공해주는 기본 form으로는 room을 지정해줄 수가 없다. 따라서 직접 form을 만든 뒤에 form의 save를 override해주는 방식을 사용해야한다. ModelForm을사용해서 아래와 같이 만들어주었다. save함수를 잘보면 인자로 pk값을 받아와서 그걸로 room을 찾는 역할을 한다. form이 정상이라면 form_valid이 실행이된다. pk값은 여기서 밖에 구하지 못한다. form에서는 구할 수 없다. 따라서 여..