목록웹 개발 (60)
가수면
AttributeError: module 'jwt' has no attribute 'decode' AttributeError: module 'jwt' has no attribute 'encode' 등이 뜨는 에러는 PyJWT 모듈 설치로 해결할 수 있다. pip install PyJWT

목표 - 카카오 맵 검색 결과로 뜨는 정보들 크롤링하기. 원래는 카카오 맵 api를 가져와 브라우저에 띄운 지도에서 정보를 긁어오려고 했는데, 여러 방법을 시도해봤지만 아무래도 불가능한 것 같다...(내가 못 찾은 것일 수도) 그래서 카카오 맵에 들어가서 긁어오기로 결정. 그런데 문제가 생겼다. 검색 결과에 따른 값들은 나오는데 map.kako.com이라는 주소에 변화가 없어 beautiful soup만으로는 크롤링이 불가능한 상황. 이러한 동적 페이지를 크롤링하는 데는 셀레니움이라는 것을 활용할 수 있다. 기본 세팅 from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.chrome..
.forEach() 가장 기본적인 콜백 함수. 배열 내부의 요소를 사용해 콜백 함수를 호출 const numbers = [273, 52, 103, 32, 57] # array는 잘 쓰이지 않음 numbers.forEach(function (value, index, array) { console.log(`${index}번째 요소 : ${value}`) }) .filter() 리턴 값이 true인 것들만 모아서 새로운 배열을 만드는 함수 # const는 재할당이 안돼서 오류남 let 배열 = [273, 52, 103, 32, 57] 배열 = 배열.filter(function (value, index) { return value % 2 === 0 }) console.log(배열) [52, 32] .map() ..
함수의 기본 작동 원리 const f = function (아무거나) { # 점프 return 아무거나 + 5 } consol.log(f(1)) # 6 1. 함수는 건너뛰고 consol.log를 인식한다. 2. 점프 구간으로 넘어가 내용물을 리턴값으로 리턴한다. 간단한 응용 const sum = function (limit) { let output = 0 for (let i = 1; i value) { output = value } console.log(`= ${output}`) } return output } console.log(min([52, 273, 32, 103, 275, 24, 57])) # 처음 실행 때의 output = 52 # 현재 비교 대상 52과 52 중에 더 작은 것은? # = 52..

.splice() 배열 중간에 요소 추가하기: splice(인덱스, 0, 요소) 배열 요소 제거하기 .splice(인덱스, 1) .indexOf() 배열 내부에서 값의 위치 찾기 a = [52, "추가", 273, "안녕", "하세요", 100] a.indexOf('안녕') 3 # 없는 요소를 찾을 경우 a.indexOf('777') -1 둘의 응용 const index = a.indexOf('하세요') a.splice(index, 1) [52, "추가", 273, "안녕", 100] slice( ) vs splice( ) slice() - 원본을 복사한 배열객체를 반환 splice() - 원본 배열객체를 직접 수정 for of const 배열 = ['바나나', '사과', '귤'] for (const 요..

프로젝트 중이던 폴더의 경로를 바꾼 경우, 아래 사진과 같이 '프로젝트에 잘못된 Python 인터프리터가 선택되었습니다'라는 문구가 뜸과 동시에 파일이 먹통이 된다. 해결하는 방법은 다음과 같다. 인터프리터 없음으로 설정해준 뒤 확인을 누르면, 위와 같은 메시지가 뜨는데 파란색 밑줄쳐진 부분을 누르면 패키지들이 자동으로 설치되며 해결된다. 인터프리터 구성으로 직접들어가 설정을 해보려고 했지만 이 방법은 무엇 때문인지 먹히질 않았다.
switch 조건문 이제는 잘 쓰이지 않지만, 남이 써 놓은 코드를 보는 게 일인 개발자로선 알아둬야 할 필요가 있음. 아래는 기본 형태. const x = Number(prompt('숫자를 입력해주세요', '')) switch (x) { case 1: alert('입력한 값이 1입니다.') break case 2: alert('입력한 값이 2입니다.') break case 3: alert('입력한 값이 3입니다.') break default: alert('입력한 값이 1-3이 아닙니다.') } 조건부 연산자 (=삼항 연산자) ㅇㅇ ? ㅇㅇ : ㅇㅇ 불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과 예시1) const x = Number(prompt('숫자를 입력해주세요', '')) alert((x >..

기본 용어 및 개념 표현식 = 값을 만들어내는 간단한 코드 문장 = 표현식이 모인 것 키워드 = 특별한 의미가 있는 단어들 (ex. for, if ····.) 식별자 = 변수명, 함수명(숫자로 시작하면 안 됨) 문자열 자료형 큰따옴표("), 작은따옴표('') 문자열 의미 통일 권장 (내부 외부에 동시 사용하고자 할 경우 혼용 가능) 이스케이프 문자 \n = 줄 바꿈 >'동해물과 백두산이\n마르고 닳도록' "동해물과 백두산이 마르고 닳도록" \t = 탭 >'이름/t나이/t지역 "이름나이지역" \\ = \ 불 자료형 true, false, 비교 연산자, &&(논리곱), ||(논리합) 템플릿 문자열 백틱으로 감싼 문자열 내부에 ${표현식}을 넣으면 문자열 내부에서 표현식이 계산됨 자료형 변환 prompt() ..
목표. 메인페이지(index.html)에서 버튼 등을 클릭해 premovies.html의 화면으로 넘어가기 1) app.py에 추가 @app.route('/') def home(): return render_template('index.html') 위와 같은 기본 코드 아래로 다음과 같은 내용을 추가해준다. # 'pre-movies'는 넘어갈 페이지 주소 @app.route('/pre-movies') def premovies(): return render_template('premovies.html') 2) html에 반영 상영예정작 보너스) 새로고침 상영예정작 상영예정작 페이지에서 다시 상영예정작을 눌렀을 때 새로고침이 된다.
1. repository 만들기 2. git bash 에서 환경설정 하기 (한 번만 하고 이후부턴 3번 과정부터 하면 되는 듯)2-1.유저이름 설정git config --global user.name "your_name"2-2. 유저 이메일 설정하기git config --global user.email "your_email"2-3. 정보 확인하기git config --list 3. github에 업로드하기 (터미널에 입력)3-1. 초기화 (처음 한 번만)git init3-2. 추가할 파일 더하기# 전부git add .# 지정 파일git add 파일명.확장자3-3. 상태 확인 (선택사항)git status3-4. 히스토리 만들기git commit -m "first commit"3-5. Github repo..
전체적으로 어렵진 않았으나 함수, 클래스와 객체, 배열 연습 부분은 다시 복습해볼 필요가 있음. *문자열 붙이기* 문자열과 숫자를 이어붙이면 숫자가 문자로 인식된다 console.log('1'+2) 12 *증감연산자* 증감연산자의 위치 # 증감연산자를 앞에 놓을 때 let count = 1 const preCount = ++count console.log(`count: ${count}, preCount: ${preCount}`) count: 2, preCount: 2 # 증감연산자를 뒤에 놓을 때 let count = 1 const preCount = count++ console.log(`count: ${count}, preCount: ${preCount}`) count: 2, preCount: 1 *대..

1. '가비아'에서 사이트 구매하기 2. Amazon EC2 만들기 2-1. Amazon EC2 들어가기 2-1. 인스턴스 시작>이름 입력>Ubuntu Server 20.04>t2.micro 새 키 페어 생성>이름, RSA, .pem으로 생성>인스턴스 시작 ※ 인스턴스 중지(컴퓨터 끄기), 인스턴스 종료(컴퓨터 반납), 1년 1대 무료(무료 기간 후 결제가 되기 전 종료 필요) 3. Git Bash 세팅 (처음에만. 이후에는 ↑ 방향키 눌러 3-3 명령어로 접속하면 됨. 띄어쓰기 주의!) 3-1.Git Bash 실행 3-2. sudo chmod 400 (400뒤로 .pem파일 끌어넣기. 맥 전용) 3-3. ssh -i (키페어 끌어넣기) ubuntu@(인스턴스 '퍼블릭 IPv4 주소' 붙여넣기) 3-4...
*여러 페이지 만들기* # http://localhost:5000/ @app.route('/') def home(): return render_template('index.html') # http://localhost:5000/mypage @app.route('/mypage') def mypage(): return render_template('mypage.html') *서버 준비* 1. html 읽어오기 from flask import Flask, render_template app = Flask(__name__) @app.route('/') def home(): return render_template('index.html') if __name__ == '__main__': app.run('0.0.0..

-자바스크립트- 홀짝 함수 let count = 0 function hey() { count += 1 if (count % 2 == 0) { alert('짝수입니다') } else { alert('홀수입니다') } } -JQuery- *JQuery 추가* *기타 메모* class = css id = JQuery *JQuery 코드들* # 가져오기 $('#url').val() # 보이기 $('#post-box').show() # 숨기기 $('#post-box').hide() $('#id')(id에 JQuery를 먹인다).val('홍길동')(id에 홍길동이라는 value를 넣는다) *연습 1* function q1() { let a = $('#input-q1').val() if (a == '') { aler..

드디어 코로나의 마수로부터 어느 정도 해방되어 살만해졌다. 혼미했었던 정신을 털어내고 복습하는 시간을 갖도록 해보자. html 기본 양식 # 브라우저 네모 창 안에 들어가는 애들 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요? *연습1* 로그인 페이지 ID: PW: 로그인하기 보완해야 ..

-리눅스 명령어- mkdir = 새 폴더 ls = 현재 폴더 확인 cd 폴더 명(다 쓸 필요 없이 Tab버튼 누르면 자동 완성) = 들어가기 cd .. = 나오기 cp -r 복사할 것 / 붙여넣기 할 것 = 복사 붙여넣기 rm -rf 지울 것 = 지우기 sudo 실행 할 명령어 = 명령어를 관리자 권한으로 실행 sudo su: 관리자 권한으로 들어가기 (나올 때는 exit) 패키지 설치 pip install flask pip install pymongo pip install dnspython python app.py = app.py 켜기 nohup python app.py & = 항상 켜두기 ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill =..
from pymongo import MongoClient client = MongoClient('mongodb+srv://test@cluster0.q4umm5t.mongodb.net/?retryWrites=true&w=majority') db = client.dbsparta(폴더명) *데이터 저장하는 방법들* 1. 한 개 저장 doc = {'name':'bob','age':27} db.users.insert_one(doc) 2. 여러 개 저장 db.users.insert_one({'name':'bobby','age':27}) db.users.insert_one({'name':'john','age':20}) db.users.insert_one({'name':'ann','age':21}) *데이터 찾기* 1..
단순 지칭 및 첨언 *requests 패키지* import requests (requests 라이브러리 설치 필요) r = requests.get('http://spartacodingclub.shop/sparta_api/seoulair') rjson = r.json() rows = rjson['RealtimeCityAir']['row'] for row in rows: gu_name = row['MSRSTE_NM'] gu_mise = row['IDEX_MVL'] if gu_mise 검사>복사>selector 복사)) print(title) 밥정 print(title['href']) /movie/bi/mi/basic.naver?code=186114 print(title.text) 밥정 *영화 제목, 순위, ..
-자바스크립트- 단순 지칭 중요 *빈칸 채워서 그거 알림 띄우기* function q1() { //입력값 지정하기 let 아무이름 = $('#input-q1(빈칸id임)').val(); //비어있다면 if (value == '') { //알림 띄우기 alert('입력하세요!')} //아니면 임의 값 띄우기 else { alert(value)} } *빈칸에 입력한 yhhnnmm@gmail.com에서 gmail만 띄우기* function q2() { //입력값 지정하기 let 아무이름 = $('#input-q2(빈칸 id임)').val(); //만약 입력값에 @가 있다면 if (email.includes("@") == true) { //@로 나누고, .으로 다시 나눠서 띄우기 alert(email.split..
-프론트 관련- *간격, 여백* margin (외부 간격) padding (내부 간격) *주석 (임시 생략)* 컨트롤+/ *style 세트들* 스타일 백그라운드 이미지 background-image: url("https://w.namu.la/s/385693ee286b4bac439fa5c333d820817d0ad49a150f43f1c4f6aaac1d22a77b7c64865c856ce1ee54b483f8599b252d0dc452041a444108ec1268d1e1efb2794edb7605a195e12d417fa3aba8e038792ea650dc547e98a66e2c76d045fa9734"); background-position: center; background-size: cover; 스타일 글씨 displ..