현재까지는 html에 직접 피드를 생성해서 보여줬다. 피드를 5개 올리고 싶으면 5개의 피드 html 소스를 만들어야 된다. 즉, 현재까지는 서버 없이 클라이언트(프론트)에서 알아서 데이터를 생성해서 피드 리스트를 만들고 있다. 이제 이것을 백엔드 쪽에서 피드 데이터를 내려주도록 바꿔보도록 하자. 📌 01. DB를 구성하는 데에 필요한 필드 정하기 먼저 DB에서 피드 리스트를 불러와야 되니까 당연히 피드에 대한 DB를 만들어야 하는 것이 우선이다. 이 때, 먼저 고려해주어야 하는 것은 DB를 만드는 데에 필요한 피드의 필드를 정하는 것이다. 🤔 하나의 피드를 구성하는 데에는 어떤 정보들이 필요할까? 피드 테이블 - 피드 ID, 프로필 사진, 글쓴이 이름, 피드 이미지, 글 내용 댓글 테이블 - 피드 ID..
📌 01. 우측 상단 프로필 박스 만들기 이제 왼쪽 화면의 틀을 어느정도 잡았으니 오른쪽 화면을 만들어 볼 차례이다. 인스타그램의 오른쪽 화면을 보면 제일 상단에 내 프로필 박스가 있고, 하단에 "회원님을 위한 추천" 박스가 있다. 하지만 나는 약간 응용하여 나의 깃허브 주소와 블로그 주소에 접속 가능하도록 만들어 볼 생각이다. 먼저, 만들 프로필 박스는 오른쪽 화면에 들어가야 하기 때문에 의 오른쪽 화면에 해당하는 속성을 주어야한다. 프로필 박스에 들어갈 프로필 사진을 동그랗게 만들기 위해서, border-radius(둥근 테두리) 속성을 주고, object-fit : cover을 활용하여 만든 둥근 테두리 크기에 맞게 프로필 사진이 비율을 유지하며 확대될 수 있도록 했다. 또한 닉네임 부분은 굵은 검..
📌 01. 부트스트랩 설치 https://getbootstrap.kr Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr 부트스트랩이란 쉽게 설명하면 웹페이지 템플릿 모음이다. PPT를 만들 때 템플릿을 찾아서 다운받는 것처럼, 웹페이지를 만들기 위한 템플릿들이 부트스트랩 안에 있다. 부트스트랩의 "스타터 템플릿"을 장고의 html에 복붙하여, 우리가 부트스트랩을 사용할 수 있도록 css와 js파일을 추가시킨다. 스타터 템플릿을 붙여넣게 되면 부트스트랩으로 원하는 기능을 구현할 수 있다. 이제 인스타그램 화면 ..
📌 01. 파이참 설치하고 웹페이지 띄워보기 이번 토이프로젝트는 JetBrains가 만든 개발자용 파이썬 IDE인 파이참(Pycharm)을 사용하기로 했다. 장고는 설치하자마자 바로 웹페이지를 실행할 수 있다. 장고는 python manage.py runserver라는 메뉴를 통해 개발 모드로 웹서버를 지원해준다. 🤔 어떻게 실행이 될 수 있을까? python manage.py runserver를 하게 되면 장고 서버가 내 컴퓨터에서 실행이 되게 된다. 그렇다면 내 컴퓨터에서 실행되고 있는 서버에는 어떻게 접속할까? 보통 서버에 접속하기 위해서는 ip주소를 알아야 한다. 하지만 ip는 숫자로 되어있고, 우리가 외우기 쉽지 않다. 따라서 "도메인 이름" 이라는 것을 사용하는데, 우리가 아는 google.c..
약 한 달 가량 파이썬을 공부하면서 코딩에 대해 흥미를 더 가질 수 있었고, 잘 풀리지 않는 문제를 스스로 해결하면서 코딩이 이렇게나 재밌는 것이었구나 느낄 수 있었다. 그렇게 백준, SWEA 문제만 풀던 어느 날, 기왕이면 내가 습득한 파이썬 지식들을 어딘가에 활용해보면 좋겠다는 생각이 들었고, 토이프로젝트를 통해 결과물을 남기면 참 뿌듯하고 좋겠다 싶었다. 🤔 내가 습득한 파이썬 지식들을 어떻게 활용해볼까? 우선, 나는 웹사이트를 만들어보고 싶다. 아무래도 글로써는 나를 소개하기엔 부족하니까 나를 소개할 수 있는 하나의 웹사이트를 만들고, 거기에 내 깃허브 주소와 블로그 주소를 기재하여 나만의 포트폴리오를 만들고 싶었다. 또한 토이프로젝트를 통해 웹 사이트를 만들고 배포하는 전반적인 과정들을 한번 보..
