🗝️소프트웨어/📗JavaScript

[웹서비스 배포] 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..

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

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

자바스크립트 객체 개념 총정리

자바스크립트 객체 기반 언어 기능, 속성 가짐 TV를 예를들면, TV는 객체(Object) 메서드(method) : 켜다(), 끄다(), 볼륨 높이기(), 볼륨 낮추기() 속성(Property) : 높이;, 너비;, 색상;, 무게; // 코드 기본 객체.메소드(); //객체의 메서드를 실행 객체.속성; //객체의 속성값을 가져옴 객체.속성 = 값; //객체의 속성값을 바꿈 객체의 종류 내장객체 브라우저 객체모델(BOM, Browser Object Model) 문서 객체 모델 (DOM, Document Object Model) 내장객체 자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용 가능 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등 브라우저 객체 모델(B..

중첩 for문 이용하여 테이블 만들기

자바스크립트 기본 예제를 통해 감을 익히는중이다. 결과물 이번 것에서 배운 내용 1. table 태그를 활용하기 2. 행은 tr 태그로 3. 열은 td 태그로 4. 항상 태그는 열었으면 닫는 태그도 같이 넣어주기 5. console.log 를 이용해서 잘 출력되는지 한번 더 확인해보기 6. 연산자 우선순위에서 가장 낮은 우선순위를 갖고 있는 : 대입 연산자(복합 대입) += 활용해보기 ( 변수 t에다가 html 죕다 집어 던지기 시전!)

홀짝에 따라 다른 색상 주기(span태그, p태그 color, style 지정)

코드는 style태그는 전체 p 태그에 한해서 색상을 정해줬기 때문에, 추후 밑에 홀수 번째를 p태그로 지정해놔도 색상 변경이 불가능하다. 그래서 따로 span 태그를 활용하면, 다음과 같이 특정 span 태그의 style을 지정해주면서 부분 수정이 가능하다.

연산자 우선순위

일반적인 산수를 계산할 때에도 우선 순위가 있는 것처럼, 연산자에도 우선순위가 있다. 6가지가 있으며, 암기 사항하기 좋게 무단산비논대 이렇게 알고 있으면 좋다. 1. 무 () 2. 단 - 단항 연산자( --, ++, !) 3. 산 - 산술 연산자(*, /, %, +, -) 4. 비 - 비교 연산자(>, >=,