잉여개발자

프로젝트를 진행 하다보니 긴 html 코드 파일을 분리할 방법을 찾아보다가, Flask의 Jinja2 에서 제공하는 {% Include %} 와 {% extends %} 를 알게 되었고, 두 기능이 유사하여 차이점을 정리 해보았다. 1. Jinja Include 문법 {% Include 'a.html' %} 코드를 작성하고 nav.html, div1.html 등으로 저장 main.html 에서 {% include 'nav/nav.html' %} 등으로 사용 복잡한 div 구조를 가지거나 공통되는 영역 (nav 등)이 있을 때 빼서 쓰기 좋다. 사용 예시 1) nav.html 을 작성해두고 각 page에서 nav를 참조해 쓴다. GIt 코드 링크 GitHub - SeonminKim1/Python: Pyth..

프로젝트 간 모달 창을 만드는데 굉장히 애를 많이 먹었기에. (인터넷에 있는 오픈 소스도 원리나 코드를 이해하는데 어려웠다) 다음에 재활용하기 위해 코드를 정리해서 남겨 두었다. 모달 창 원리 모달 창의 가장 큰 원리는 Block을 미리 만들어 놓고 보였다, 안보였다 하는 것이다. 몇가지 Key는 다음과 같다. 1. Overlay Div와 Modal Div를 만드는 것 2. CSS 'Display' 속성을 'none'과 'block(flex)' 등으로 바꾸는 것 (JS Event) 3. CSS Position 으로 Modal 위치 조정 하는 것 (absolute, top:0, left:0 ) 4. CSS Z-Index : Overlay Div를 Z축 최상단으로 조정하는 것 소스 코드 GitHub - Se..

로그인, 회원가입, JWT Token 등은 웹 페이지 개발 간 항상 많이 쓸 것 같아서 기존 프로젝트에 사용한 코드를 정리하여 예시 템플릿 코드로 작성해 보았다. 1. Flask 로그인 / 회원 가입 기능 구현하기 Github 링크 GitHub - SeonminKim1/Python: Python Framework & Libary Python Framework & Libary. Contribute to SeonminKim1/Python development by creating an account on GitHub. github.com 2. Flask 로그인 / JWT Token 으로 쿠키 유지 관리 Github 링크 GitHub - SeonminKim1/Python: Python Framework & L..

CSR (Client-Side Rendering) 작동 방식 1. 웹 브라우저(클라이언트)에서 요청 2. 웹 서버에서 데이터가 없는 HTML, Static 파일을 우선 반환 (빈페이지) 3. 2. 진행 중 클라이언트가 서버에 데이터를 요청 4. 불러온 데이터를 JS로 View를 컨트롤하며 화면이 나타나게 됨. 특징 - 모든 작업을 Clinet Side에서 수행하는 방식 - TTI (Time to Interaction, 페이지 요청시 활동 시작 가능 할 때까지 걸리는 시간)과 TTV(Time to View, 페이지가 보일 때 까지 걸리는 시간)이 동시에 이루어지기 때문에 효율적인 Loading 고려 필요 - Low SEO (Search Engine Optimization) : Body가 대부분 비어있어 S..

웹페이지는 '유저와 데이터를 주고받는지' 여부에 따라 정적 웹페이지와 동적 웹페이지로 나뉘며 대부분의 웹페이지는 동적 웹페이지로 코드 유지보수나 자유도 측면에서 월등히 유리 동적웹페이지 = 웹페이지 (HTML, CSS, JS) + 동적 (Templates) 템플릿 엔진이란? 지정된 템플릿 양식과 데이터를 합쳐 HTML 문서를 출력하는 것. 주로 Server 사이드 / Clinet 사이드 엔진으로 구분됨 웹 템플릿 엔진 종류 각 템플릿 엔진에 따라 다양한 문법을 구사하고 있으며, 대표적인 엔진으로는 Python Flask(Jinja2), Django (Django Template Engine), JavaScript (JSP, Freemaker, Vue, React) 등 존재. (기타. Mako, HamlP..

1. 프로젝트 구성 팀이름 : Lucky Seven, 7조 팀원 : 김선민, 김민기, 박재현 황신혜 프로젝트 명 : 인스타그램 클론 코딩 프로젝트 (7Instagram) 프로젝트 PDF : 2. 프로젝트 진행 https://yubi5050.tistory.com/29 3. Keep 기획(Mock Up), 와이어 프레임, 웹 개발 순서의 진행을 적절하게 진행함 간트 차트나 Github Project 이슈 등으로 일정 관리를 적절하게 함 Github 시스템 이용, 코드 Merge / Branch 관리 등 팀원 간 코드 리뷰 프로젝트 범위(처음 목표한 범위)에서 최종 프로젝트 구현 범위가 크게 벗어나지 않은 것 정기적인 상호 피드백 및 논의 시간을 가졌음 (오전 9시, 오후 2시, 저녁 6시) 초기 파트 분배 ..

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..

1. HTML 분리하기 기본적으로 Templates 안에 같이 있어야 됨. (Templates 내에서 폴더 구분 가능) {% include 'nav/nav.html' %} ex) {% include 'header.html' %} {% include 'nav.html' %} {% include 'article.html' %} {% include 'footer.html' %} 2. CSS 분리하기 url_for를 이용하여 분리 # CSS 파일 body { font-family: 'Noto Sans KR', sans-serif; } 3. JS 분리하기 url_for를 이용하여 분리 // js 파일 function includeHTML() { //... a = document.getElementsByTagNam..

금주 진행 사항 기간 : 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 설계 및 기능..

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(): ..