Project21

• 

  DevelUP 퀘스트1 - 반응형 웹(Disqus, Naver Map, 레이아웃 반응형) Disqus https://newbiecs.tistory.com/182 Django - Dstagram part3-댓글 기능 구현하기 DISQUS 가입하기 댓글 시스템을 직접 만들지 않고 DISQUS라는 온라인 소셜 댓글 시스템을 빌려서 사용할 것이다. 이 시스템을 사용하려면 사이트에 가입해야 한다. 사이트(https://disqus.com/) DISQUS 앱 설치 $.. newbiecs.tistory.com Django 에서 라이브러리로 제공되는 Disqus 를 사용하였다. 처음 설계 시 간단하게 만들어보자는게 목표였기 때문에 이번 프로젝트는 각종 라이브러리들을 적극적으로 활용하려고 하였습니다. > pip install django-disqus # settings.py INSTALLED_APPS = [.. Project/DevelUP 2019. 10. 24.

• 

  DevelUP 퀘스트1 - 반응형 웹(icons) https://www.youtube.com/watch?v=KYo62fhaR7M&list=LLiL8uphIhspU0n1mUzPGkFQ&index=2&t=0s 반응형 자기소개 웹사이트 따라 만들기 | 티티하우스 | 빔캠프 # 스피드코딩 미리보기 https://www.youtube.com/watch?v=RbYrzl8uLs0 # 본 예제 보기 및 다운로드는? http://t.veam.me/aboutme/ 🚩 오프라인 강의는? https://veamcamp.com www.youtube.com icons 영상에서는 이미지 스프라이트를 사용하여 픽셀별로 짤라서 사용하는 방법을 사용하고 있었다. 하지만 나는 업로드하는 이미지도 적다고 판단하여 개인적으로 icon 이미지를 찾아 업로드하였습니다. 다운로드 한 icon 들.. Project/DevelUP 2019. 10. 22.

• 

  DevelUP 퀘스트1 - 반응형 웹 https://www.youtube.com/watch?v=KYo62fhaR7M 반응형 자기소개 웹사이트 따라 만들기 | 티티하우스 | 빔캠프 # 스피드코딩 미리보기 https://www.youtube.com/watch?v=RbYrzl8uLs0 # 본 예제 보기 및 다운로드는? http://t.veam.me/aboutme/ 🚩 오프라인 강의는? https://veamcamp.com www.youtube.com .portrait padding-top: 100%; 여기의 % 의 기준은 portrait 의 부모의 너비 기준으로 크기를 잡는다. 하지만 사람들이 많이 쓰는 비율 16:9로 만들어보고 싶다. 이럴 땐 9/16을 하면 0.5625‬ 라는 값이 나오는데 이것을 %로 변경해주면 56.25%가 된다. pad.. Project/DevelUP 2019. 10. 21.

• DevelUP 퀘스트1 - 구성 주제: "본인의 동네와 관련된 서비스를 만들자!" 휴식기를 가지면서 건강을 되찾고, 여행을 갔다왔습니다. DevelUP 퀘스트 10.27일 까지 제출이라는 기한 안에 "본인의 동네와 관련된 서비스를 만들자"라는 주제로 저는 제가 살고 있는 송추 라는 곳의 서비스를 만들어보려고 합니다. 이번엔 무작정 만들기 보다 웹페이지에 내가 구상하고자하는 것과 기능들을 사전에 미리 생각해보고 정리하고자 글을 포스팅합니다. 1. 송추에 대한 소개 평소 사람들에게 어디 사냐는 질문을 받으면 저는 당당하게 송추라고 대답하지만 대다수의 사람들이 송추가 어디인지 정확히 알지못하고, 양주시에 속하기 때문에 그 큰 양주에서도 송추의 위치를 설명하기에 많이 어렵고, 그래서 저는 송추IC, 송추가마골, 북한산, 우이령길 등등으로 설명.. Project/DevelUP 2019. 10. 21.

• 

  Django - Vue(Json연동, Vue.js Directive, axios) Todo 앱 설계 1. 첫 페이지는 Django 에서 생성해서 클라이언트에게 보내준다. 2. 이 후 화면 렌더링은 Vue.js 코드에서 수행 3. Data 저장은 서버 측의 DB 에 저장(SQLite) 4. Client-Server 간 Data 연동은 JSON 포맷으로 5. Vue.js 의 directive/axios 기능 사용 6. DRF(Django Rest Framework) 대신에 Django 에서는 JsonResponse 사용 Server Rendering 1. 브라우저에서 처음으로 페이지를 요청(request)하면 2. DJango 에서는 첫 화면을 위해 HTML과 CSS를 생성해서 클라이언트에 응답 3. 첫 화면에 대한 응답 index.html Client Rendering 4. 버튼 클릭 .. Project/Django & Vue.js 2019. 9. 7.

• 

  Django - Vue(Client vs Server Rendering, SPA vs SSR, 4) Client Rendering과 Server Rendering의 차이점에 대해 알아보자 Client Rendering Server Rendering Vue.js 코드로 작성, 즉 클라이언트에서 렌더링 한다. Django 코드로 작성, 즉 서버에서 렌더링 한다. Rendering 이란? *DOM(HTML) + CSSOM(CSS Object Model) = Rendering Tree *Layout(요소들의 위치를 잡아주는 Layout) *Painting(요소들을 화면에 보여주는 Painting) 이런 Rendering은 항상 브러우저, 즉 클라이언트에서 처리되는 과정이다. -> DOM/CSSOM 에 필요한 HTML 및 CSS를 누가 생성하느냐에 따라 Client, Server Rendering으로 나뉘게된다.. Project/Django & Vue.js 2019. 9. 6.

• 

  Django - Vue(Mixin 사용하기, bootstrap 팝업창 만들기 , 4) Mixin 사용하기 한개의 템플릿 내에 CreateView의 영역이 있고, ListView의 영역이 있다. 두 개의 제네릭뷰를 한 개로 조합하는 믹스인 기능이 필요하다. 체크해야 할 점은 View에서 넘겨주는 Context변수가 뭔지 확인해야 한다. CreateView 에서는 따로 Context로 넘겨주는 값이 없고, ListView에서는 object_list를 넘겨준다. 위 점을 기억하고 View를 생성해보자. class TodoMOMCV(ListView, CreateView): # (mixin, main) template_name = 'todo/todo_form_list.html' 여기서 중요한 점은 List와 Create View를 상속받을 때 순서도 중요하다는 것이다. ccbv.co.uk 로 가면.. Project/Django & Vue.js 2019. 9. 4.

• Django - Vue(Django 뼈대 만들기 , 2) 뼈대 만들기는 너무 간단하기 때문에 정리하지 않고 넘어가겠습니다. 프로젝트 디렉터리 mysite와 todo App을 생성해주면 됩니다. 코딩 순서는 settings.py -> models.py -> urls.py -> views.py -> templates 1. settings.py todo App을 INSTALLED_APP 에다가 추가 'todo', template 디렉터리 지정 'DIRS': [os.path.join(BASE_DIR, 'templates')] static 디렉터리 지정 STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] 2. models.py 테이블을 추가할 사항이 없으므로 pass 3. mysite/urls.py path('todo/', .. Project/Django & Vue.js 2019. 9. 2.

• 

  Django - Vue(Todo App, 1) 1. 게시글 추가 2. 게시글 삭제 × methods: { remove_todo: function(index) { // index를 인자를 넣어준다. console.log("remove_todo()..."); this.todoItems.splice(index,1); // splice 함수 사용 index에서 한 개 }, }, 3. name 없이 ADD를 눌렀을 때 '홍길동'이 default로 출력 if (this.name == '') this.name = '홍길동'; // name이 입력이 되어있지 않으면 '홍길동' 을 this.name으로 설정 if (this.newTodoItem == '') return; // newTodoItem이 입력되어있지 않으면 return 4. ADD 한 이후에도.. Project/Django & Vue.js 2019. 9. 1.