전체 글 315

[Django, AWS] EC2 에서 Nginx + Gunicorn + Django 배포하기

Nginx + Gunicorn 필요 이유 Django는 기본적으로 runserver 라는 개발용 내장 서버를 탑재하고 있으나, 실제 서비스용 (Production Level) 으로 사용하기에는 성능의 한계, 보안 이슈 등 다양한 문제점이 존재하여, Gunicorn을 통해 배포한다. Gunicorn 은 Django 로 작성한 Web Application 에 HTTP 요청을 전달해주는 역할의 WSGI HTTP Server 로서 사용하며, worker process 의 개수와 worker class(async 방식인 Gevent, Tornado 등)를 설정하여 요청 처리 성능을 높일 수 있다. Nginx는 Free OpenSource Webserver 소프트웨어로 가벼우면서도 높은 성능을 내며, Bufferi..

Python/Django 2022.07.12

[CI & CD] Github Action 정리

👉 Github Action 문법 Github Action을 정의하는 용어(개념)에는 Workflow, Event, Job, Step, Action, Runner 등이 있음 1. Workflow 최상위 개념으로 전체 자동화 하려는 과정들에 총칭 단일 or 복수개의 Job으로 구성되며, Event에 의해 trigger됨 Git Repo의 .github/workflows 폴더 아래에 저장됨 2. Event workflow를 Trigger하는 역할 특정 branch push / pull request / cronjob 등이 예시에 해당 3. Jobs Job은 여러 Step으로 구성되고, 가상 환경의 인스턴스에서 실행됨 다른 Job에 의존 관계를 가질 수 있고, 독립적으로 병렬 실행도 가능함 동일한 runner..

DevOps/CI-CD 2022.07.12

[Week I Learned] 22년 7월 2주차

금주 진행 사항 기간 : 22.07.04 (월) ~ 22.07.08 (금) 학습 내용 JavaScript 지식 정리 TroubleShooting & 기타 프로젝트 정리 및 신규 프로젝트 기획 JavaScript 지식 정리 프로젝트 진행 간 Javascript 알게 된 내용 정리 https://yubi5050.tistory.com/102 // 유용한 Library 정리 https://yubi5050.tistory.com/103 // 비동기 필요 이유와 fetch 함수 https://yubi5050.tistory.com/104 // 업로드 이미지 BE와 주고 받기(FE, by Blob 객체) https://yubi5050.tistory.com/105 // 로컬스토리지 vs 세션 스토리지 https://yub..

WIL (~22.09) 2022.07.11

[JavaScript, JQuery] HTML Import 하는 방법

Frontend 서버 프레임워크 없이 순수 JavaScript, JQuery, HTML, CSS 등으로만 작업하면서, HTML Import로 코드 분리 및 재활용을 하고 싶어, 여러 방법등을 고민해 보았으나, FE 서버 프레임워크를 사용 하지 않을 땐 JQuery가 가장 깔끔 한 것 같아, 해당 방법을 선택하였다. 모든 파일에서 공용으로 쓰고 싶은 nav영역의 nav.html을 작성 해두었다고 가정 main.html

HTML, CSS, JS 2022.07.10

[JavaScript] 로컬스토리지 vs 세션 스토리지

1. 웹 스토리지 Web 개발시 데이터를 BE(DB) 나 클라우드 등에 저장할 필요 없을 때 웹 브라우저에 저장하는 방식.. 웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 존재 단, 웹 스토리지는 문자열 형태로만 저장 지원 2. 로컬 스토리지 vs 세션 스토리지 로컬 스토리지 세션 스토리지 웹 페이지의 세션이 끝날 때 데이터가 안지워짐 웹 재접속시 데이터 유지 O 웹 페이지의 세션이 끝나더라도 데이터 안지워짐 웹 재접속시 데이터 유지 X 3. 로컬/세션스토리지 저장 예시 코드 // 로컬/세션스토리지 데이터 저장 local_session_Storage.setItem("key", value) // 로컬/세션스토리지 데이터 읽기 l..

HTML, CSS, JS 2022.07.10

[Javascript] 업로드 이미지 BE와 주고 받기(FE, by Blob 객체)

Blob 객체에 대한 자세한 설명은 아래 링크에 작성하였다. https://yubi5050.tistory.com/102 [Javascript] 유용한 Library 정리 1. Date Library # 날짜 및 시간 var date = new Date(); # getFullYear(), getMonth(), getDate(), getHours() .. # setFullYear(), setMonth(), setDate(), setHours() .. # Date를 문자열로 toLocaleSt.. yubi5050.tistory.com 👉 JS 에서 업로드 된 이미지 BE와 주고 받기 업로드 된 이미지를 보내고 받는 부분의 FE 이다. ex. AI 이미지 추론을 위해 이미지를 업로드 하고, 추론 결과 이미지를 ..

HTML, CSS, JS 2022.07.10

[Javascript] 비동기 필요 이유와 fetch 함수

동기 vs 비동기 동기 (Synchronous) 는 순차적으로 일을 처리하는 것 비동기 (Asynchronous)는 동시다발적으로 일을 처리 하는 것이다. 비동기가 필요한 이유는 서버(Backend)와 통신할 때 가장 많은 시간이 소요되므로 일반적으로 네트워크를 타는 작업들은 비동기적으로 구현. Fetch API JS 에서는 Fetch API 로 비동기를 처리한다. 1. 일반 fetch().then().then() 사용법 첫번째 then으로 response를 처리하고 두번째 then으로 해당 json 형태를 자유롭게 처리 fetch("https://jsonplaceholder.typicode.com/posts") .then(function(res){ return res.json(); }) .then(fu..

HTML, CSS, JS 2022.07.10

SidePro 팀 프로젝트 - 1

👉 1. 프로젝트 기간 2022.07.07 (목) ~ 2022.08.04 (목) 👉 2. 팀 구성 김선민, 김민기, 박재현, 황신혜 👉 3. 프로젝트 주제 주제 : 온라인 커피챗을 곁들인 개발자 사이드 프로젝트 모아보기 서비스 👉 4. 프로젝트 메인 기능 1. 사이드 프로젝트 게시판 (조회, 생성, 수정, 삭제) 2. 커피챗 실시간 Socket 통신 온/오프라인 3. 유저 Tag / 주제 기반 협업 필터링 👉 4. 프로젝트 진행 방식 화면 기획 (Figma) : 링크 (완료) API 설계 (Notion) : 링크 (완료) 일정 관리 (갠트 차트) : 링크 (완료) 기능 구현 관리 (Git Issue) : 링크 (진행중) 👉 5. 화면 와이어프레임 및 기능 범위 정의 (진행중) 화면 화면 이름 기능 첫 화..