🗝️소프트웨어

json 데이터 vscode로 깔끔하게 보는 방법(feat.정렬)

확장자 : beautify 설치 후 json 파일을 생성해서, f1 키 + beautify file 클릭하면 정렬되지 않았던 텍스트가 다음과 같이 깔끔하게 정렬되는 것을 확인할 수 있음 before after

[AWS + Filezila] 웹서비스 배포 시현 영상

다른 것보다 시현 영상(사진)과 코드이다 코드 1. app.py 2. index.html app.py from flask import Flask, render_template, request, jsonify app = Flask(__name__) # DB from pymongo import MongoClient client = MongoClient('mongodb+srv://test:test@cluster0.wpvuwzi.mongodb.net/Cluster0?retryWrites=true&w=majority') db = client.dbsparta @app.route('/') def home(): return render_template('index.html') @app.route("/homework",..

[웹서비스 배포] AWS EC2 + Filezila 이용하기

스파르타 코딩 웹개발 5주차 마지막 강의 내용을 듣고 작성한 내용이며, 참고 바랍니다. 사용한 것 : AWS EC2(Linux Ubuntu 22.04 LTS Server), Git Bash, Filezila, HTML , CSS , JS, Bootstrap, Ajax 1. 웹서비스란? 웹 서비스 런칭이란 클라이언트 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시키는 것을 의미 언제나 요청에 응하려면 다음 2가지가 충족되어야 함 컴퓨터는 항상 켜져있고, 프로그램이 실행되어 있어야 하고 모두가 접근할 수 있는 공개 주소인 공개 IP 주소 ( Publick IP Address)로 나의 웹 서비스에 접근할 수 있도록 해야함 가비아에서 IP 주소를 신청하여 주소를 하나 만듬 gs-tom.shop 이라는 주..

[Ajax, Flask] 버킷리스트 웹 페이지 만들기

사용 스택 : HTML, CSS, Javascript, bootstrap, Ajax, Flask, MongoDB Post 방식 연습 ( 기록하는 방법) API 를 만들고 사용해보자 버킷리스트 기록 API ( CREATE 은 POST 방식으로) 요청정보는 URL = /bucket 이며 요청방식은 POST 방식으로 클라이언트 (ajax) 에서 서버(flask) 로 보내며 bucket 을 보내려고 한다 templates 안에 있는 index.html 이 프론트엔드 부분이므로 통상 클라이언트로 칭함 bucket은 사용자로부터 인풋 폼에서 받은 버킷리스트 텍스트 데이터이며 기록하기 버튼을 클릭하게 되면 해당 내용을 서버에 보내게 됨 참고로 ajax란 간단히 말하면 페이지 전체를 리프레시 하지 않고서도 수행할 수 ..

[ajax] post, get 방식 이용한 웹사이트 만들기

사용 스택 : html, css, bootstrap, ajax, mongoDB 자료 구조 : templates의 index.html 코드 김승민 팬명록 현재기온: 36도 닉네임 응원댓글 응원 남기기 app.py 코드 - mongoDB 는 본인의 DB 계정에서의 데이터베이스 URL 을 이용하면 접속 가능합니다 from flask import Flask, render_template, request, jsonify app = Flask(__name__) # DB from pymongo import MongoClient client = MongoClient('mongodb+srv://test:test@cluster0.wpvuwzi.mongodb.net/Cluster0?retryWrites=true&w=majo..

[python] 음원 정보 크롤링하기(feat.친구 추천 이벤트)

스파르타 웹개발 코스 3주차 과제 관련 내용 - 사용해보고 싶었던 기능은 아래 참조 였으니, 사용해보지는 못해서 아쉬움 .next_siblings() - 초기에 ssl 인증 관련에러가 있어서, requests 에서 verify = False 로 설정함 사용한 코드 # genie 크롤링 # 가상환경 conda env sparta_py38 ## 크롤링 관련 라이브러리 import requests from bs4 import BeautifulSoup # 의존성 에러 import ssl ## DB # from pymongo import MongoClient headers = { 'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36..

[html + css + js] 공공기온 API 활용 - ajax

사용 기능 - 화면 접속 성공시 alert 창 띄울 수 있도록 함 - 기온 API 활용하여 온도 데이터 불러와서 화면에 동적으로 띄움 - 정적인 온도가 대치됨 - 나머지는 기존에 만들어놓은 김승민 랩퍼 팬명록에서 구현하였음 스파르타 웹개발 개발 일지 작성으로 인하여 글 작성 사용한 코드 사용한 코드는 아래와 같음 김승민 팬명록 현재 기온 : 1도도 닉네임 응원 댓글 응원 남기기 새로운 앨범 너무 멋져요!!!!!!!! Tom 새로운 앨범 너무 멋져요!!!!!!!! Tom 새로운 앨범 너무 멋져요!!!!!!!! Tom 코드에 관한 질문은 언제든지 댓글 바랍니다.

[html/css] 스파르타코딩 1주차:웹개발

완성 화면 - 폰트는 구글 폰트를 활용 - 버튼, 이미지, Quote 들은 부트스트랩 활용 - 필요에 맞게 커스토마이징함 - 커버 이미지를 어둡게 처리하여, 흰색 제목이 돋보이게 구성 - 마진 처리를 여유롭게 설정하여 공간감을 갖기 위해 노력 팬클럽 화면 페이지 간단하게 구성해봄 (시간 : 20분) 코드 김승민 팬명록 닉네임 응원 댓글 응원 남기기 새로운 앨범 너무 멋져요!!!!!!!! Tom 새로운 앨범 너무 멋져요!!!!!!!! Tom 새로운 앨범 너무 멋져요!!!!!!!! Tom

[Vue.js] 문법 기초 2편(props, v-bind, v-on, router, axios)

💡 watch 속성 data의 변화에 따라서 특정 로직을 실행 우선 vue 인스턴스 내부에 들어가는 속성 순서 el, data, watch, methods 등 watch 안에 data 값인 num을 고정해둠 watch랑 computed는 비슷한 느낌을 갖고 있음 가장 기본적인 서비스 구현에 있어서의 차이점은??? computed 는 단순한 계산, 텍스트 입력 값을 받아서 validation watch는 무거움, 매번 실행되는 것이 부담스러운 것들!!!!!!!!( 중요) 값의 변화를 계속 추적함 function(newValue, oldValue) 라는 구조를 갖고 있음 this.fetchUserByNumber(newValue) 💡 computed 속성을 이용한 클래스 코드 작성바 boolean 타입에 대한..

[Vue.js] 문법 기초 1편(props, v-bind, v-on, router, axios)

이벤트 속성에 대해서 다뤄보고자 한다. 물론, 그 외에도 전반적으로 Vue.js 를 공부하면서 정리한 내용을 적는 블로그 글을 연재하려고 한다. 두서없이 배운 내용을 정리한 거라, 잘못된 내용이 있다면 언제든지 피드백 주길바라며, 읽어주셔서 미리 감사드립니다. Thanks for you guys. 웹개발을 쉽게 하기 위해서 선택한 프레임워크인 만큼, React나 Angular 만큼은 아니지만, Vue.js 도 충분히 매력적인 도구인 것 같아서 재밌다. inputfiled + prop 관련 개념 잘 정리되어 있음 https://whitepro.tistory.com/255 자바스크립트 - forEach 배열을 순회하는 방법 중 하나 기존 코드 const numbers = [1,2,3,4,5] for (i =..