어느새 삼성 청년 SW아카데미 1학기도 1달밖에 남지 않고 django를 통한 WEB 개발에 대한 어느정도의 숙련도가 쌓이자 웹페이지를 만들어보고 싶다는 욕구가 끓어올랐다!
그래서 같이 공부하는 용재님!과 함께 인스타그램 클론 코딩을 하기로 하였다!
우선은 백엔드단의 로직을 구현하고 프론트엔드의 디자인 부분은 후에 차근차근 구현하기로 했다
그래서 첫 날 우리의 목표는
- 초기 django 설정 및 로그인, 회원가입 구현 // 초기의 설정이라 구글미트를 통해 화면을 공유하며 같이 코드를 작성해 나갔다.
- 기본이 되는 Navbar 구현 및 약간의 디자인 ? // 내가 맡은 파트!
- 게시글 CRUD + 간단한 프로필 페이지 만들기 // 용재님이 맡은 파트! ( 뭔가 더 많아 보이는..?)
1. 초기 django 설정 및 로그인, 회원가입 구현
인스타그램 web페이지를 보면 딱 들어가자 보이는 화면이 아래와 같다!
그래서 우리도 첫 페이지를 로그인 or 회원가입을 유도하는 페이지를 만들고 싶었다. django 코드를 잠깐 보자면
http://127.0.0.1:8000/instargram/ 이런 홈페이지 주소를 입력하면 로그인창이 뜨게 하고 싶은데 로그인 함수는 instargram 경로와 다르게 로그인함수는 accounts 앱에 있어서 조금 복잡하게 로직을 짰다. 이 부분이 막혔었는데 함수를 토스하는(?) 방법을 통해 해결을 하였다.
그래서 결과물은 ...! ( 아직 디자인은 안하기로 )
http://127.0.0.1:8000/instargram/을 주소창에 쳤을 때 로그인이 되어 있지 않은 사용자의 경우 자동으로 아래와 같은 로그인 주소로 옮겨지며 로그인 창을 보여준다.
로그인을 하게 되면 아래와 같이 메인페이지로 이동하게 된다.
2. 기본이 되는 Navbar 구현 및 약간의 디자인
Navbar는 최대한 인스타그램의 Navbar와 비슷한 디자인으로 만들려고 노력하였다. 부트스트랩을 통해서 만들었고 DM페이지나 좋아요 알림 페이지 등을 만들기 전에 우선 필요할 것 같아서 먼저 만들었다.
부트스트랩의 Navbar는 다 글자로 되어있어서 어떻게 아이콘으로 바꾸는지 몰라서 한참을 해멨었는데 부트스트랩 내의 Icons 페이지에서 차근히 읽어보니 되게 쉬웠다! 부트스트랩 짱! 아래의 드래그한 부분이 아이콘에 해당되는데 부트스트랩에서 제공하는 svg태그에 감싸있는 아이콘을 가져와서 버튼 태그안에 넣기만 하면 되었다.
내 정보에는 로그아웃 기능도 만들어서 로그아웃을 누르면 다시 초기의 로그인 페이지로 돌아간다.
3. 게시글 CRUD + 간단한 프로필 페이지 만들기
용재님이 맡아주신 부분으로 간단한 페이지 소개만 하고 넘어가겠다
요렇게 글을 작성하면!
메인페이지에 뙇!
프로필을 클릭하면 !
내가 쓴 글의 제목과 내용과 함께 프로필 페이지가 뙇!
4. 마무리
각자의 구현을 끝낸 후 깃헙 Repository를 이용해 서로의 코드를 합쳤다! branch로 올린 다음 github 내에서 merge를 했는데.....! 뭔가 문제가 생겨서 한참 고생했다. 다행히 깃헙에서 이런 경우를 대비해 수정할 수 있게 되있어서 수정을 하고 마무리를 했다. 오늘은 말을 너무 많이 했으니 다음에 github을 통한 협업에 대한 글을 써보기로 하겠다...... 그럼 이만
'WEB🛫 > Django' 카테고리의 다른 글
| [django] 인스타그램 클론 코딩 #3 : 댓글 기능 (0) | 2021.05.04 |
|---|---|
| [django] 인스타그램 클론 코딩 #2 : 좋아요 기능 / 팔로우 기능 (0) | 2021.05.01 |