본문 바로가기

LIKELION 9th

(12)
[멋쟁이 사자처럼] 자바스크립트 세션 시작 (feat. 투두리스트 만들기) 멋사 세션에서 자바스크립트 사용법을 배운 지 2주째. 세션은 운영진님의 코드를 따라치는 식으로 진행되는데 하다 보니 뭔가 만들고 싶어 졌다. 그래서 만들어본 투두리스트 일요일에 시간 가는 줄 모르고 만들었다. 기획 및 디자인 디자인 작업 전 구현할 기능을 아래와 같이 정리했다. 1) 할 일을 입력하고 추가 버튼을 누르면 리스트에 추가 2) 리스트에서 삭제 버튼을 누르면 요소 삭제 3) 리스트에서 체크 박스를 누르면 완료 표시 4) 날씨 API 사용해서 지역 및 현재 날씨 표시 디자인은 Figma를 사용했다. 이제 PPT로 디자인은 그만😇 사용 폰트: Open Sans 사진 출처: @Seokiski_film 디자인 아이디어는 친구가 며칠 전 찍은 사진에서 얻었다. 김작가 넌 최고야 사진에 맞춰서 체크박스도..
[멋쟁이 사자처럼] 토이프로젝트 TRIP-LOG 완성과 회고 목요일 발표를 마지막으로 첫 번째 팀 프로젝트가 끝났다. 우선 결과물을 보자❗ TRIP-LOG 여행 동선을 지도에 표시해서 공유하고, 도움이 될 정보들을 사용자끼리 공유하는 커뮤니티 웹사이트 사용 폰트 S-CoreDream-3Light S-CoreDream-6Bold S-CoreDream-9Black 주요 CSS 정리 요소 정 가운데로 이동 top: 50%; left: 50%; transform: translate(-50%, -50%); /* .wrapper의 절반 만큼 다시 이동해서 중앙에 위치 */ 커서 손가락 모양으로 바꾸기 cursor: pointer; * cursor: 요소 위에 마우스 커서가 올라갔을 때 모양 지정 요소 채우기 object-fit: cover /* 내용이 종횡비를 유지하면서 정..
[Django] SECRET_KEY 분리하기(Django Secret Key exposed on GitHub 메일) 낮에 메일을 확인하던 중 어마 무시한 메일을 발견했다. Django Secret Key exposed on GitHub😮 알고 보니 장고에서 사용하는 AWS 시크릿 코드, 장고 시크릿 키 등의 값은 보안을 위해 프로젝트 코드에 포함하면 안 된다고 한다. 반성의 의미로 settings.py의 SECRET_KEY 분리하는 법을 복습해보겠다. 1) Django 프로젝트 폴더 내 secret.json 파일 새로 만들기 2) settings.py에서 복사한 SECRET_KEY값 딕셔너리 형태로 붙여 넣기 *key와 value는 큰 따옴표로 감싸주는 거 잊지 말기 3) settings.py에서 JSON파일 불러오기 #settings.py import os, json from django.core.exceptions..
[멋쟁이 사자처럼] 토이프로젝트 아이디어 발표🌊 10주 차(2021.05.31-2021.06.03) 10주 차 목요일에는 토이 프로젝트 아이디어 발표가 있었다! 지난 아이디에이션이 각자 아이디어를 내고 간단한 웹페이지를 구현해보는 거였다면, 이번 토이 프로젝트는 팀원 넷이서 한 웹페이지를 만들고 배포까지 진행한다. 부산 여행 동선 공유 웹사이트 | 아이디어 열심히 여행 계획을 짰는데 막상 가보니 관광지의 출입이 제한된 경우, 유명한 맛집이라길래 갔는데 영업이 종료된 경우, 여행을 좋아하는 사람이라면 이렇게 계획에 차질이 생긴 경우가 한 번쯤 있었을 것이다. 또 계획을 짜는 도중에도 아이와 함께 가려는데, 또는 반려동물이랑 함께 가려는데 마땅한 여행 장소를 못 찾는 경우도 있을 것이다. 그래서 우리 팀이 기획한 '부산 여행 동선 공유 웹사이트'. 여행 ..
[Django] 템플릿 상속 및 css 파일 적용하기(feat. 내비게이션 바) 지난 멋사 세션에서 게시판을 만들고 귀찮은 마음에 css작업은 미뤄뒀던 나... 내비게이션 바를 만들어서 상속을 해볼까 하던 차에 템플릿 상속이랑 css 파일 적용 개념이 엉망진창인걸 깨달았다. 이번 글은 2시간 동안 싸우면서 배운 템플릿 상속 및 css 파일 적용 정리 글이다. 1. 장고 프로젝트 및 앱 만들기 toy_project라는 이름으로 프로젝트를 만들고 그 안에 main앱을 만들었다. * 여기까지의 자세한 과정은 지난 글 참고 2. 템플릿 상속 1) 프로젝트 폴더에 base.html 만들기 프로젝트 이름 로그인 회원가입 {% block content %} {% endblock %} 모든 페이지에 적용될 네비게이션 바를 구현하기 위해 base.html을 만들었다. * 이때 base.html은 부..
[멋쟁이 사자처럼] Django로 블로그 만들기3 (댓글 쓰기) 지난 이야기🌿 7주 차에는 장고(Django)에서 CRUD기능을 구현했다. 8주 차(2021.05.17-2021.05.20) 8주 차에는 프로젝트에 새 앱을 만들어 회원가입, 로그인, 로그아웃 기능을 만들었다. 그리고 모델에 Comment 클래스를 추가해 댓글 기능을 추가했다. ForeignKey 댓글 기능을 알기 전 ForeignKey에 대해 알아보자. ForeignKey(외래키)란 테이블 필드 중에서 다른 테이블의 행과 식별할 수 있는 키를 의미한다. => 테이블과 테이블을 연결하기 위해 사용하는 키 ForeignKey는 model간의 1:N 관계를 나타낼 때 사용한다(게시글과 댓글 관계). 1:N 중에서 N인 쪽 관계를 선언하며, 두 개의 인자를 필요로 한다(대상이 되는 클래스 및 삭제 설정). 장..
[멋쟁이 사자처럼] Django로 블로그 만들기2 (회원가입, 로그인, 로그아웃) 지난 이야기🌿 7주 차에는 장고(Django)에서 CRUD기능을 구현했다. 8주 차(2021.05.17-2021.05.20) 8주 차에는 프로젝트에 새 앱을 만들어 회원가입, 로그인, 로그아웃 기능을 만들었다. 그리고 모델에 Comment 클래스를 추가해 댓글 기능을 추가했다. 이번 포스팅에서는 회원가입, 로그인, 로그아웃 기능을 만들어보자. 1. 새로운 앱 만들기 유저 관련 기능을 담당할 새로운 앱 accounts를 만들었다. 기능별로 앱을 만들면 유지 보수하기 좋다. $ python manage.py startapp accounts 앱을 만든 후에는 꼭 프로젝트 폴더 settings.py에 아래와 같이 등록해주자. #settings.py INSTALLED_APPS = [ 'django.contrib...
[멋쟁이 사자처럼] Django로 블로그 만들기(CRUD 기능 구현하기) 지난 이야기🌿 6주 차에는 장고(Django)를 시작했다. 7주 차(2021.05.10-2021.05.13) 7주 차에는 지난 세션에 이어서 장고에 대해 배웠다. blog라는 이름의 프로젝트를 만들고 CRUD 기능을 구현했다. * CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다.(출처 위키백과) 장고로 블로그 만들기 제목과 내용을 넣을 수 있는 글쓰기 기능 구현 글을 쓰면 제목과 내용, 작성일로 글 생성 글 수정 및 삭제 기능 구현 1. 장고 프로젝트와 앱 생성하기 1) 가상환경 만들고 프로젝트와 앱 생성하기 $ python -m venv myven#가상환경 생성 $ . my..