전체 글 315

[Week I Learned] 22년 5월 1주차

금주 진행 사항 기간 : 22.05.02 (월) ~ 22.05.06 (금) 학습 내용 Instagram Clone Project Flask 관련 내용 정리 CSS 정렬 Instagram Clone Project 인스타그램 클론 프로젝트 개인, 팀 프로젝트 진행 https://yubi5050.tistory.com/19 // 인스타그램 클론 프로젝트 (개인, Django, Sqlite, FE 등 플젝 맛보기 느낌) https://yubi5050.tistory.com/21 // 인스타그램 클론 Team Project - 1 (팀, Flask, MongoDB, FE 역할분담 진행) https://yubi5050.tistory.com/23 // 인스타그램 클론 프로젝트 Team - 2 (팀, API 설계 및 기능..

WIL (~22.09) 2022.05.07

[Flask] Jinja 정리

Flask에서는 Jinja2 라는 템플릿 엔진을 통해 웹 화면 구성을 보다 동적으로 가능하게 함 애플리케이션 내 변수, 조건문, 반복문 등을 랜더링 함 Jinja2 홈페이지 https://jinja.palletsprojects.com/en/3.1.x/ Jinja — Jinja Documentation (3.1.x) jinja.palletsprojects.com 예제 1. 변수 / 변수 함수 / 조건문 적용 {{변수명}}, {{변수명 | 함수}} {% if %}, {% elif %}, {% else %}, {% endif %} # app.py from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): ..

Python/Flask 2022.05.07

[Flask] Error Handling 방법

1. Flask Error Handling 처리 방법 @app.errorhandler(status code) 사용자 정의 에러 핸들러 (데코레이터)가 존재함. 2. Example code from flask import Flask, jsonify app = Flask(__name__) @app.errorhandler(401) def page_not_found(error): return redirect("https://developer.mozilla.org/ko/docs/Web/HTTP/Status/401", code=401) @app.errorhandler(500) def error_handling_500(error): return jsonify({'Error': " 500 Error.."}, 500) ..

Python/Flask 2022.05.06

인스타그램 클론 Team 프로젝트 - 2

1. 프로젝트 기간 2022.05.03 (화) ~ 2022.05.11 (수) 2. 팀 구성 김선민, 김민기, 박재현, 황신혜 3. 프로젝트 진행 방식 Figma 활용 구현 화면 관리 : 링크 Git Project / Gantt Chart 일정 관리 : Git 프로젝트 링크, 간트차트 링크 Git Issue 기반 프로젝트 관리 : 이슈 링크 API 설계도 Notion 작성 : 링크 개발 도구 FE : HTML, CSS, JS BE : Flask DB : MongoDB (Atlas MongoDB) 4. 프로젝트 진행 4.1 Instgram 화면 조사 / 기능 구현 범위 정의 화면 화면 이름 기능 담당자 회원가입 필수기능 회원가입, 로그인 JWT 토큰 활용 세션 관리 추가기능 아이디/비밀번호 찾기, SNS(F..

팀 공용 MongoDB-Atlas-Robo 3T 셋팅

팀 프로젝트간 협업을 위해 팀 공용 DB (무료)를 사용하는 방법 1. Mongo DB - Atlas 클라우드형 무료 (Free 옵션 선택시) Mongo DB Atlas 이다. https://cloud.mongodb.com/ MongoDB Cloud MongoDB Cloud is a unified data platform for modern applications and includes a global cloud database, search, data lake, mobile, and application services. www.mongodb.com 2. Atlas 팀 버전 셋팅 방법 + 핵심은 IP 0.0.0.0/0 으로 하는 것 https://moonsupport.tistory.com/262 3. ..

DB/기본 실습 2022.05.04

인스타그램 클론 Team 프로젝트 - 1

1. 프로젝트 기간 2022.05.03 (화) ~ 2022.05.11 (수) 2. 팀 구성 김선민, 김민기, 박재현, 황신혜 3. 프로젝트 진행 방식 Figma 활용 구현 화면 관리 : 링크 Git Issue 기반 프로젝트 관리 : https://github.com/SeonminKim1/lucky-seven/issues 4. 프로젝트 진행 일정 4.1 Instgram 화면 조사 / 기능 구현 범위 정의 (2022.05.03 화 ) 화면 화면 이름 기능 회원가입 필수기능: 회원가입, 로그인 추가기능: 아이디/비밀번호 찾기, Facebook 로그인 메인(피드) 페이지 필수기능: 포스팅 헤더(프로필) 게시물(포스팅 글) 조회 댓글 조회 및 작성 좋아요 , 더보기 모달 aside: 팔로워/팔로잉 추가기능: 북마..

[CSS] 문제의 div 정렬 - Flex

1. Flex 란 Flexible Box, Flexbox 라고 불리며, 레이아웃 배치 전용 기능으로 고안됨. 기존 레이아웃에 사용 되던 float / inline-block 등의 기존 방식보다 훨씬 효율적이고 편리한 기능들이 많음 2. Flex 적용 가능한 기본 HTML 구조 부모 (Flex Container) : div.container 자식 (Flex Item) : div.item item 1 item 2 item 3 3. 컨테이너(.container) 에 적용되는 속성들 /* 아이템들은 기본적으로 '내용물'의 width 만큼 차지 '컨테이너'의 height 만큼 차지 */ .container{ display: flex; display: inline-flex; /* 배치 방향 설정 */ flex-di..

HTML, CSS, JS 2022.05.02

인스타그램 클론 프로젝트 (개인)

1. 프로젝트명 인스타그램 클론 프로젝트 2. 프로젝트 개요 FE(HTML, CSS) & BE (Flask or Django) & DB(Sqlite)를 이용한 인스타그램 클론 코딩 https://www.youtube.com/watch?v=M8UPyeF5DfM&t=11171s 해당 레퍼런스 참조하여 구현 전체 프로젝트 구조에 대한 맛보기 느낌으로 진행 3. 프로젝트 기간 1차 스프린트 기간 : 2022.04.26 (목) ~ 2022.05.02 (월) 4. 프로젝트 진행 1. 인스타그램 FE 구현 메인 기능 Navigation Bar => 구현 완료 스토리 (미구현) 피드 (게시글) => (HTML 완료 / CSS 60%) 댓글 작성 => (HTML 완료 / CSS 80%) 프로필 / 친구 추천 => (HT..

[Week I Learned] 22년 4월 4주차

금주 진행 사항 기간 : 22.04.25 (월) ~ 22.04.29 (금) 학습 내용 Pygame Project Python WebFramework 조사 Git, VSCode-DB 연동, Font Awesome 활용 Pygame Project Pygame Library 활용 순발력 테스트 게임 '1 to 50' 개발 https://yubi5050.tistory.com/11 // Pygame 순발력 테스트 1 to 50 (1) https://yubi5050.tistory.com/12 // Pygame 순발력 테스트 1 to 50 (2) Python WebFramework 조사 Web Framework 개요 및 종류별 특징 파악 https://yubi5050.tistory.com/13 // Python We..

WIL (~22.09) 2022.05.01

VSCode - Sqlite DB 연결하기

VSCode IDE 에서 SQLite DB 연결하기 1. 'VS Code Extension'에서 'SQLite' 설치 2. 메뉴바 'View'에서 'Command Palette' 선택 3. 'SQlite Open DataBase' 선택 후 원하는 가지고 있는 DB 파일 선택 (.sqlite, .sqlite3 등) 4. 좌측 메뉴에 'SQLITE EXPLORE' 탭이 뜬 것을 확인 가능 (처음에 해당 부분을 못찾아서 한참 아무 반응 없는 줄 알고 해맸다.) 5. DB 오른쪽 마우스로 'Show Table' 클릭하여 내용 확인 가능하다.

DB/기본 실습 2022.04.29