📚 Contents (클릭하면 해당 게시글로 이동합니다🙆🏻♂️) 🔗00 첫 토이프로젝트 소감, AWS EC2, 도커, AWS RDS로 배포해보며 느낀점 🔗01 웹 프레임워크 정하기 🔗02 django 개발환경 세팅, 나만의 페이지 띄워보기 🔗03 내비 바, 피드화면 만들기 (왼쪽) 🔗04 화면 만들기 (오른쪽) 🔗05 DB에서 피드 글 불러오기 🔗06 피드 생성 화면 만들기 🔗07 피드 생성하여 Django 서버로 업로드하기 🔗08 장고 유저 모델 이용해 사용자 정보 모델 만들기 / 로그인,회원가입API 만들기 / 세션 정보에 데이터 받아오기 🔗09 로그아웃, 프로필 페이지, 프로필 사진 변경 만들기 🔗10 댓글, 좋아요, 북마크 모델 만들기
👨🏻💻 Django 토이프로젝트를 마친 소감 어느덧 블로그 100번째 포스팅이다. 첫 토이프로젝트를 마친 소감에 대한 포스팅이 우연히 블로그 100번째 포스팅이 되어버렸는데, 그동안 열심히 달려온 내게 박수를 보낸다.👏🏻👏🏻 코딩테스트를 준비하면서, '단순 코딩테스트 공부를 위한 것이 아닌, 내가 공부한 파이썬을 활용하여 토이프로젝트를 만들어보면 참 뿌듯하고 의미있을 것 같다.' 라는 생각에 시작한 첫 토이프로젝트는 나에게 많은 것을 가져다 주었다. 예상한대로 어려운 점이 많았지만, 그것을 해결하면서 느낄 수 있었던 성취감은 개발자로서 첫걸음을 내딛은 나에게 결코 작지 않은 '경험치'를 안겨주었다. 특히, 개발자 업무의 전반적인 사이클이 어떻게 돌아가는지 궁금했었는데, 이번 토이프로젝트를 통해 웹 개발..
지금까지 나는 Feed 테이블, User 테이블을 만들어서 사용했다. Feed 테이블은 피드 화면을 표시하기 위해 필요한 필드들을 저장한 곳이고, User 테이블은 회원가입, 로그인 사용자 정보를 표시하기 위한 테이블이다. 이제 좋아요, 댓글, 북마크 기능을 만드려고 하는데 이것은 피드 테이블에 영향이 가지 않게 따로 만들어야 한다. 즉, 하나의 피드를 구성하는 데에는 Feed 테이블, 댓글 테이블, 좋아요 테이블, 북마크 테이블 이렇게 최소 4개의 테이블이 필요하게끔 테이블을 따로 만들어주려고 한다. 기존에 views.py에서 main.html에 feed_list를 내려줄 때, Feed 테이블에서도 데이터를 찾고 User 테이블에서도 데이터를 찾아서 내려줬는데, 마찬가지로 Reply 테이블, Like ..
📌 01. 프로필/로그아웃 버튼 만들기 로그인 하는 기능을 만들었으니 이제 로그아웃하는 기능을 만들 차례이다. 실제 인스타그램처럼 프로필 이미지 아이콘을 누르면 선택 박스가 나오게 하고, 박스 안에 프로필/로그아웃 버튼을 달려고 한다. 바로 아래와 같이! 어느정도 원하는 형태의 버튼을 만들었다. 이러한 버튼 형식을 "드롭다운" 버튼이라고 부르는데 부트스트랩에 올라와 있는 소스를 활용하였다. 복사, 붙여넣기만 하면 돼서 간단하겠구나 생각할 수도 있었지만, 사실 되게 애먹었다. 드롭다운 버튼을 만드는 것까지는 쉽게 성공했는데 자꾸 드롭다운 버튼이 여러 요소들의 뒤쪽에 위치하였다.. ㅠㅠ 이것을 해결해주기 위해 position : relative를 먹이고, z-index의 속성값을 높게 설정해주면 된다고 하여..
장고에 사용자 정보를 관리하는 유저 모델이 존재한다. db.sqlite3에 auth_user에서 확인 가능하다. 이 auth_user을 상속 받아 커스텀된 유저 모델을 만들 수 있다. 다만, 주의할 점은 원래 장고 프로젝트를 시작하면서 가장 먼저 유저 모델을 어떻게 사용할지 결정해야 한다는 점이다. 장고에서 디폴트로 사용하는 유저모델은 무조건 한 개여야 하기 때문에 프로젝트 진행 중에 DB를 만들고, 유저 모델을 만드려고 할 때엔 진행 중에 만든 DB는 필수로 삭제해야만 한다. 이러한 번거로움 때문에 초기에 유저 모델을 기획하는 것이 중요하다. 📌 01. 커스텀 유저 모델 만들기 장고에서 제공하는 기본적인 사용자 모델을 사용하기 위해서는 AbstractBaseUser라는 클래스를 상속받으면 된다. use..
강의에 따르면 이번 챕터가 제일 어렵다고 한다. (그래도 뭐 별거 있을까 까짓거 열심히 따라해보자.) 지금까지는 웹사이트 화면을 구성하기 위해 브라우저 즉, 클라이언트에 직접적으로 피드와 관련된 필드를 작성했다. 백엔드 즉, 모델에 데이터를 넣어서 뷰를 통해 템플릿으로 이동시켜 웹사이트 화면도 구성해봤으나, 웹사이트에서 피드를 작성하여 피드를 작성하는데에 필요한 데이터가 DB에 저장이 되고, DB에 저장된 데이터들이 올바른 데이터라면 다시 웹사이트에 화면이 표시되는 것을 구현해보도록 하겠다. 인스타그램처럼 동작하는 나만의 웹사이트를 구현하는 것이 나의 목적이니까.. 📌 01. 화면에서 데이터 끌어오기 피드를 작성하는데에 필요한 데이터는 "프로필 이미지, 프로필 이름, 피드 이미지, 피드 내용, 좋아요 개..
📌 01. 빈 모달창 만들기 우선, 피드를 생성하는 화면을 만들기 위해서는 플러스 아이콘을 눌렀을 때, 사진을 업로드 할 수 있는 화면을 띄우는 기능을 만들어야 한다. 이렇게 새로운 브라우저를 열지 않고 띄우는 화면을 "모달" 이라고 한다. 모달을 만드는 소스를 html에 추가한다. 그리고 태그에 css 를 작성하여 모달창에 어떠한 속성을 줄 것인지 작성한다. blur : 흐릿한 효과를 넣기 위한 함수 rgba : 컬러와 Alpha 값을 조정 (Alpha 값을 조정하여 투명도를 조절할 수 있다.) 실행시키게 되면 빈 모달창이 생성되는데 항상 떠있게 되는데, 이 때 작성한 css의 modal_overlay 속성의 display 속성값을 none으로 주게 되면 모달창이 보이지 않게 된다. 이 점을 활용하여 ..
