본문 바로가기
몽고디비 주소를 그대로 깃에 올려버렸다고??? 파이썬 MongoDB 환경변수 설정하기 플라스크 등의 라이브러리를 사용할 때, 배포 전에 깃허브에 올려둘 때, 몽고디비 클라이언트의 주소와 아이디 비밀번호를 그대로 노출해서 곤란한 상황을 겪을 수 있다. (AWS 키 파일은 말할 것도 없다.) 보통 일반적으로는 from flask import Flask, request, jsonify, render_template, Response from pymongo import MongoClient # 몽고디비 app = Flask(__name__) # client = MongoClient('localhost', 27017) # 배포 전에 원격 db로 교체! # 01 client = MongoClient("mongodb://id:password@localhost:27017") # 02 client = M.. 2021. 10. 4.
[WIL1003] "오늘뭐먹지" 프로젝트 후기 완전히 끝난 프로젝트가 아니라 어떻게 써야할지 잘 모르겠다. 처음에 프로젝트 아이디어를 정할 때까지는 꽤나 소통이 활발했었는데, 초반에 내가 "이렇게 하면 힘들이지 않고 사용자가 검색할 때마다 리스트를 (타 사이트의) 데이터베이스에서 받아올 수 있을 것 같다!"라는 얘기를 한 후, 그에 맞는 프로그램 기반에 대한 코드를 짜서 다른 팀원들에게 보여주고, 이렇게 가져온 데이터를 화면에 그려볼 방법을 '생각해 와 달라'는 부탁/지시를 하고, 이후에도 내부 api와 데이터베이스 구조를 설계하는 것을 내가 대부분 했다. 사실 다른 팀원분들이 웹개발에 어느 정도 경험을 가지고 있는지, 또 자바스크립트나 플라스크의 rest api 구성하는 방법 그런 것을 얼마나 알고 계신지 모르고, 캠프 기간 동안 웹개발 종합반과 .. 2021. 10. 3.
내가 만든 웹사이트, 잘 만든걸까? 객관적으로 어떨까? lighthouse + thinkwithgoogle Lighthouse는 웹 페이지의 품질을 개선하기 위한 자동화된 오픈 소스 도구입니다. 공개 또는 인증이 필요한 모든 웹 페이지에 대해 실행할 수 있습니다. 성능(보통 렌더링 속도), 접근성(장애인 접근성), 프로그레시브 웹앱(PWA), SEO(검색엔진최적화) 등에 대한 감사가 있습니다. Lighthouse는 Chrome DevTools, 명령줄 또는 노드 모듈로 실행할 수 있습니다. Lighthouse에 감사할 URL을 지정하면 Lighthouse에서 페이지에 대해 일련의 감사를 실행한 다음 페이지가 얼마나 잘 수행되었는지에 대한 보고서를 생성합니다. 거기에서 실패한 감사를 페이지 개선 방법에 대한 지표로 사용하십시오. 각 감사에는 감사가 중요한 이유와 수정 방법을 설명하는 참조 문서가 있습니다. 구글.. 2021. 10. 3.
VSCODE 익스텐션 어디까지 알고 있나요?? 나만 알고싶은 확장기능 총정리!! 안녕하세요 오늘은 VS Code (이하 VSC) 확장 플러그인 중 제가 사용하는 것들을 나열해 보고자 해요. 저는 파이썬을 다룰 떄는 커뮤니티 버전이라 해도 파이참을 선호하는 편이예요. 그런데 파이썬을 뺸 나머지는 대부분 VSC를 사용합니다. 써보신 분들은 알겠지만, 기본적으로 지원해주지 않는 프로그래밍언어도 사용하려고 하면 그에 맞는 익스텐션을 추천해주고, 그래서 웬만한 서비스는 유료인 젯브레인의 파이참, 인텔리제이보다 확실히 가성비가 좋지요. 서브라임텍스트나 다른 에디터에 적응되신 분들도 많겠지만 저는 첫 코드를 이것으로 작성해서인지 너무 잘 맞는 것 같아요. 일단 코드를 쓸 때 가장 중요한 린트 기능이 잘 지원되거든요!! 이거는 진짜 뺴놓을 수 없는 장점..! 그리고 협업을 위한 툴도 젯브레인 프로.. 2021. 10. 3.
[파이썬으로 웹개발] flask를 wsgi 서버에서 구동하기 (https 프로토콜) 네 앞 과정을 잘 따라오셨을 것이라 믿고 다음 단계를 진행합니다. nohup 등으로 직접적으로 flask 서버를 돌리는 것이 아닌 안전하고 안정적인 환경에서 작동시키고, 또 접속 프로토콜을 443포트로 받을 수 있도록 해 더 많은 기능과 보안을 제공할 수 있습니다. 우분투에서 필요한 파이썬 환경을 위해 몇가지 프로그램을 설치하겠습니다. 중간에 Enter를 기입하라거나 Y를 입력하라는 문구가 나올 수 있습니다. sudo apt update sudo apt install python3-pip python3-dev build-essential libssl-dev libffi-dev python3-setuptools 다음으로는 파이썬 가상환경 패키지를 설치합니다. sudo apt install python3-v.. 2021. 10. 2.
KPT 프로젝트 리뷰 여기 링크를 들어오시면 사이트 확인 가능합니다!!! 영상 시청 가능합니다!! KPT에 대해서 설명 KPT를 팀에서 진행하자고 하면 다들 처음 듣는 키워드에 어렵게 느낄 수도 있다. 나는 PM(또는 팀 리더)이 먼저 KPT에 대해서 공부하고 간략하게 공유할 자료를 만들었으면 한다. 자료의 내용은 대략 이렇다. 팀 및 프로젝트 회고의 목적 KPT Goal : KPT가 끝나는 조건을 한 문장으로 작성 KPT 설명 : 개요, Keep, Problem, Try에 대해서 타임 스케줄 KPT: Keep, Problem, Try keep (이번 프로젝트에서 좋았던 점, 유지해 나가고 싶은 부분) 서로의 코드를 리뷰해줬던 과정 과한 컨벤션을 지정하지 않고 기존 회사들의 컨벤션에서 차용한것 주석을 통해 코드를 설명해 준 .. 2021. 10. 1.
[파이썬으로 웹개발] 플라스크 NGINX 서버를 우분투 18.04에 설치하기 NGINX는 세계에서 가장 인기있는 웹서버다. whatruns 같은 크롬 익스텐션을 사용해보면 상당히 많은 수의 웹사이트가 이 서버를 사용해 웹사이트를 배포하고 있다는 것을 알 수 있다. 따라서 플라스크를 사용하지 않더라도 배워두면 쓸모 있는 기술이다. 대표적으로 사용하는 Apache나 Tomcat 보다 리소스 친화적이라고 한다. (그게 무슨 말인지는 나도 모르는게 비밀) AWS에서 우분투 18.04(이 글은 당연히 정확히 이 버전에만 해당) 인스턴스를 만들고 키 파일을 발급받아, 윈도우즈의 경우 ssh -i ubuntu@를 입력하면 우분투에 접속할 수 있다. 키파일은 뜻을 알 수 없는 텍스트 쪼가리일 뿐이지만 실수로라도 깃에 업로드하거나 타인에게 노출되면 당신의 서버를 자기것처럼 드나들 수 있는 중요한.. 2021. 10. 1.
[파이썬으로 웹개발] 플라스크 geolocation api 사용하기: Use a producttion WSGI server instead. 플라스크는 꽤나 좋은 웹개발 프레임워크다. 사용법도 직관적이고, 폴더 구조도 까다롭지 않게 정리할 수 있는 툴을 제공하며, 기본적으로 갖추고 있는 기능이 많지만 그만큼 해야할 일도 많은 장고랑 비교하면 천사나 다름없다. 플라스크는 스파르타코딩클럽에서 수업을 들으면서 알게 된 라이브러리이다. 그만큼 외부에서 주요 스택으로 다뤄지는 모습을 못봤다는 얘기일 수도 있고, 아니면 파고들어서 배울만큼 복잡하고 어렵지 않아서 그런 것일 수도 있다. 스파르타코딩클럽의 웹개발 종합반과 웹개발 심화반은 모두 파이썬 플라스크를 웹프레임워크로, 몽고디비를 데이터베이스로 사용해서 직관적이고 접근하기 쉬운 커리큘럼을 가지고 있다. 그리고 내가 아는 바로는 스파르타코딩클럽 홈페이지 자체가 플라스크로 운영되는 것으로 알고 있다.수천.. 2021. 10. 1.
[자바스크립트 웹개발] 마성의 룰렛은 처음이지? Math.random() 함수를 이용한 리스트형 룰렛 구현하기 어느 정도 사이트의 주요기능이 자리를 잡고, 엔터테인먼트적인 요소를 추가하고 싶어서 룰렛을 만들었습니다. 이름은 룰렛이지만, 개발자스럽게 리스트 형태로 for 문을 돌게 만들었어요!!ㅎㅎㅎ 딱 내 스타일.. 자바스크립트로 리스트를 셔플하는 메소드는 구글링해보면 대부분 비슷한 답을 가지고 있어요. 알고리즘에 관해 잘 아는 편은 아니지만 어느 정도 이해를 할 수 있는 선을 넘는 코드는 사용을 주저하는 편이라 개중에 가장 마음에 드는 셔플 함수를 골랐어요. // 리스트의 순서를 뒤섞는 함수입니다. function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { let j = Math.floor(Math.random() * (i + 1)); [arr.. 2021. 9. 28.
[CSS] 스크롤 따라다니는 사이드 바 만들기 (display: sticky) 요 사이트를 만들 때 사용한 CSS를 몇가지 정리해두는 글을 쓴다!! 적용하면서 블로그에도 메뉴바가 같이 따라내려오면 그럴싸할 것 같아서 똑같은 방법으로 적용했다!ㅎㅎ 공식 문서는 아래를 참조!! position - CSS: Cascading Style Sheets | MDN CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다. developer.mozilla.org CSS에서 블록요소에 포지션을 정하는 것은 너무도 간단한 일이다. 다만 여러가지 요소들이 겹쳐질때 한 자식요소가 다른 요소의 부모요소가 되는 부분이 많으면 많을 수록 각 .. 2021. 9. 25.
[CSS+JS] 클릭하면 페이지 최상단으로 이동하는 버튼! 단, 부드~럽게! 이번에 프로젝트는 내용을 담은 카드가 한번에 50개 이하 정도가 나오기 때문에 스크롤을 아래로 내리면 좌우의 컨텐츠가 비고 다시 최상단으로 올라오기 힘들기 때문에, 첫번째로 position: sticky를 적용한 즐겨찾기 바가 함께 내려오고, 두번째로 스크롤을 최상단으로 올려버리는 버튼을 만들었다. 사실 이렇게 세로로 긴 형태의 페이지가 아니더라도 많은 블로그와 웹사이트가 이런 버튼을 사용한다. 다음 사진은 워드프레스에서 제공하는 최상단 이동 버튼인 듯 하다. 자바스크립트보다 파이썬을 먼저 배운 사람이지만, 셀레니움 웹스크래핑을 자주 해서 자바스크립트로 페이지를 조작하는 것은 꽤나 익숙하다. 간단하게 그 방법을 소개하고, 또 플러스로 이런 스크롤 이동이 애니메이션 효과로 부드럽게 오르내리게 하는 CSS를.. 2021. 9. 24.
[팀프로젝트] 1인 가구를 위한 배달/포장 식당 추천 사이트 만들기!! 2021.04.23TIL 제가 그리고 팀원 서재원님이 정리해주신 팀 프로젝트입니다. 처음으로 아이디어 구상을 할 때 ㅅ재환님은 맛집 데이터를 크롤링해 지도 API 위에 마크업해주는 사이트를, ㅁ지혜님은 영수증으로 진짜 인증된 맛집 리뷰만 모아 지도 API로 그려주는 사이트를 ㅅ주현님은 크롬 북마크(즐겨찾기탭) 일목요연하게 보여주는 서비스를 제안하셨다. 저는 예전에 아웃백에서 일할때 기억도 나고, 요즘 ㅁㅁ 알바생이 알려주는 ㅁㅁ 알짜꿀팁 이런 글 자주 보는 편이라 처음 가는 맛집(or 프랜차이즈) 맛있게 즐기는 팁 공유하기 사이트를 제안했어요 각자 두개씩은 제안한 것 같은데 하나씩만 공개해야겠다..ㅎㅎ 아이디어는 소중하니깐 이러저러한 토의를 하면서 자료조사도 하고 하다보니 시간이 금방 갔네요. 본격적으로.. 2021. 9. 23.

티스토리툴바