클론코딩 튜토리얼
-
Django 클론코딩으로 인스타그램을 ! 4탄공부 !/Django·Web 2022. 4. 2. 19:26
게시글 업로드 구현하기 이번 게시글에서는 인스타그램의 새 게시물 만들기 기능에 대해 공부해보자 ! 실제 인스타그램 pc 버전의 화면을 캡처해왔다 ! 사진을 업로드한 후 이후 글을 작성하여 업로드 하는 간단한 UI/UX 를 제공하고 있다 기존 화면 위에 새로운 화면이 그려지는 모달로 새 게시물을 생성하는 화면을 제공한다 우리도 피드 생성 모달을 만들어보자 아래 순서대로 css 와 html 추가하자 .modal_overlay { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; backgroun..
-
Django 클론코딩으로 인스타그램을 ! 2탄공부 !/Django·Web 2022. 3. 31. 14:56
이전 포스팅에서 ... 이번 포스팅에서는 인스타그램의 피드를 구현해보자 ! 피드 구상하기 왼쪽 오른쪽 피드 왼쪽에는 사진과 글 내용이 오른쪽에는 추천친구가 뜨도록 화면을 분할해야한다 div 로 화면을 분할하고 css 의 display 옵션을 사용하여 좌우로 정렬하면된다 왼쪽과 오른쪽 div 에 각 배경색을 넣어 확인하면 좌우 영역이 분할된 것을 확인할 수 있다 글씨에 맞는 영역은 우리가 원하던 영역 분리가 아니므로 영역을 수동으로 설정해보자 ! 왼쪽 오른쪽 width와 height 옵션을 사용하면 수동으로 영역의 크기를 조정할 수 있다 왼쪽 width 영역이 1000px 이 되며 스크롤이 생성되었다 ! 실제 인스타그램은 상단바와 오른쪽 노란부분이 고정되어 있다 때문에 이를 수정해야한다 ! fixed 옵션..
-
Django 클론코딩으로 인스타그램을 ! 1탄공부 !/Django·Web 2022. 3. 24. 16:16
Clone Coding 클론코딩 .. 정의부터 알아보자 클론코딩이란 인스타그램, 유튜브 등 실제 서비스를 따라 만들어보는 공부방식이다 상용화된 서비스를 직접 구현해보며 기획적인 요소나 개발적 요소를 이해하는데 도움이 될 것 같아 시작한다 ! 이 포스팅에서는 장고로 인스타그램을 클론코딩한다 프로젝트 생성하기 프로젝트를 시작하기 앞서 가상환경을 만들고 새 프로젝트를 생성한다 가상환경은 instavenv 프로젝트명은 instaprj 앱명은 instapp 으로 정했다 여러 기능을 가진 앱들이 하나의 프로젝트 내에 존재할 때 프로젝트의 urls.py 가 복잡해진다 url 를 app 별로 관리해주면 이를 해결할 수 있다 ! 장고 url 이 제공하는 include() 함수를 사용하면 편리하게 기능별로 urls.py ..