슬로

<연산자> 

산술연산 : +(덧셈)   -(뺄셈)    *(곱셈)    / (나눗셈)      << ,  >> (비트연산자)

비교연산자 :   <,  >,  <=,  >=,   ==,    !=

논리연산자 :  &&(and) ,   ||(or),    !(not)

대입연산자 : =, ++, --

기타연산자: (type)(형 변환 연산자)   //   ? :  (삼항연산자)  //   instance of

연산자 우선순위 : 산술 -> 비교 -> 논리 -> 대입

피연산자 자동 형변환 : 타입이 다른 두 개의 연산을 진행할 때, 더 큰 type으로 맞춰주게됨

비트연산 : <<하면 왼쪽으로 자리수 옮기기 (0101 -> 1010) // >>는 오른쪽옮기기 (1010 -> 0101)

<switch - case문>

switch(month){

    case 1:

        monthString = "1월" ;

            break;

    case 2:

        monthString = "2월" ;

            break;

............

    defalut:

        monthString = "unknown";

}

swith안에 오는 연산자가 case (조건)일때, indentation 안의 코드를 실행한다.

각 case 안에 break가 있어야 switch문을 탈출할 수 있으며, case에 모두 해당되지 않을 때 실행할 default를 줘야한다.

if와 다르게 조건을 하나만 지정할 수 있다. 대신 가독성이 좋음

<반복문>

for문, while문, do-while문이 있다.

for문, while문은 C랑 문법 똑같음

iterable에서의 for문은

for (int num : number){ }와 같이 써주며, 이 때 콜론 오른쪽에는 배열이 오게됨.

=========do-while문=========

while문과 다르게, 작업을 먼저하고 조건을 비교

do{

    작업 ~~~

} while(조건);

<배열>

new 명령어를 통해서 생성

int[] arr = new int[8]

값을 주려면 {1,2,3} 이런식으로

int배열은 기본적으로 0, bool은 false, String은 null로 채워짐

======Arrays 유틸리티=====

Arrays.fill(intArr , 1)  : intArr의 값을 모두 1로 초기화

등등 좋은 메서드 많다.

<배열에서의 복사>

int[] arr1 = {a,b,c}   이런식으로 선언하면, arr1이라는 변수는 주소값만 담고있다.

따라서, int[] arr2 = arr1  과 같이 대입해주면, arr2는 arr1의 주소값을 담게되므로, arr2의 값을 수정하면 arr1도 수정됨.

이를 얕은복사라고 함(주소값을 복사)

값을 복사(깊은복사) 하고싶으면, for문으로 하나하나 element를 대입해주거나,

int[] arr2 = arr.clone(); 메서드를 사용  ==> arr과 같은 값, 다른 주소를 리턴. but, 2차원 이상 배열에서는 얕은복사됨

따라서, 완전히 깊은복사를 하고싶으면 Arrays 유틸리티의 copyOf(arr, arr.length) 메소드 사용

eg)

int[] a = {1,2,3,4};

int[] b = Arrays.copyOf(a, a.length);

<가변배열>

int [ ][ ] arr = new int[3][ ];

두번째 차원의 배열은 길이가 달라도 넣을 수 있음

<String 유용한 메소드>

str.length() // str.charAt(3)  // str.substring(0,3) // str.equals(str2) // str.toCharArray();

String(char[])  ==> String으로 바꿔줌

<Collection>

★컬렉션은 기본형 변수가 아닌 참조형 변수를 저장한다

배열만 사용했을때 아쉬운 부분들을 커버해줌

Collection에는 ArrayList, LinkedList Set, Stack, Queue, Map  있음

컬렉션의 기능 : 크기 자동조정 / 추가 / 수정 / 삭제 / 반복 / 순회 / 필터 / 포함확인 etc.....

-------List------- : 순서가 있는 데이터의 집합 (데이터의 중복 허용) ==> 배열과 비슷

변수의 타입을 명시할 때, 기본형이 아닌 그 Wrapper타입으로 명시해줌 (컬렉션은 참조형 변수만 담으니까)

1. ArrayList<Integer> intList = new ArrayList<Integer>();

intList.add(100)    intList.add(200)    intList.add(300)

intList.get(0)  ==> 100       intList.set(1,15)   ==>  intList의 두번째 요소가 15로 바뀜

intList.remove(0)   ==>  intList의 첫번째요소를 삭제     intList.clear()   ==>  intList의 값들을 모두 삭제

print(intList.toString());  ==>  intList의 요소들을 볼 수 있게 해줌 ?

2. LinkedList<Integer> linkedist = new LinkedList<Integer>();   ==> 값을 조회할때는 느리지만, 추가/삭제는 빠름

linkedList.add(index : 2, element : 4)  ==> linkedList의 2번인덱스에 4를 추가

linkedList.set(index : 1, element : 10)  ==> linkedList의 1번인덱스의 값을 10으로 바꿈

remove, clear 등 ArrayList와 메소드들은 비슷함

-------Stack------- : FILO(first in last out)  ==> 최근 저장한 데이터를 나열하거나, 데이터의 중복처리를 막고싶을때

Stack<Integer> intStack = new Stack<Integer>();   ==> 선언 및 생성

intStack.push(10)    ==> 스택에 10을 넣음

intStack.isEmpty()   ==>  비었으면 true, 아니면 false

intStack.pop()   ==>  stack의 맨 위에거 꺼내고, 그것을 return

intStack.peek() ==> 맨위에거 리턴해줌. 하지만, pop하진않음

intStack.size() ==> 크기 return

-------Queue------- : FIFO(first in first out)   ==>   생성자가 없는 인터페이스 (new로 만들지 않음)

Queue<Integer> intQueue = new LinkedList<>();    ==> 생성자가 없기때문에 생성자있는애로 만들어줌

.add(10)  ==> Stack과 같음    .isEmpty()도,   .size()도 같다

intQueue.poll()  ==> Queue의 제일 아래 (먼저들어간) element를 빼주고, 이 값을 리턴

intQueue.peek() ==> 보기만 함. poll과 같은값이 return되지만, 이 값이 Queue에서 빠지지 않음

-------Set------- : 순서가 없는 데이터의 집합 (데이터 중복 X) ==> 순서가 보장되지 않지만, 중복X,  생성자 없음

*HashSet, TreeSet 등으로 응용해서 같이 사용 가능

Set<Integer> intSet = new HashSet<>();     ==>  Set은 생성자가 없기때문에, 생성자가 있는 HashSet으로 생성

                                                                                                                             ≫생성자는 별도로 공부

.add(10)  //  .contains(10)  //  .remove()     etc....

-------Map------- : 순서가 없는 (Key, Value) 쌍으로 이루어진 데이터의 집합 ==> 파이썬의 dictionary와 비슷

★Key는 유니크한 값들

HashMap, TreeMap 등으로 활용가능

Map<String, Integer> intMap = new HashMap<>();

intMap.put('일', 11)    intMap.put('이', 22)     ==> .put('key', value) Set에 값을 넣어줌. 중복된 key에 대해서 덮어쓰기함

intMap.get('key')  ==> key값에 해당하는 value를 가져옴

intMap.keySet()  ==> Map에서 key만 빼서 배열로 리턴(Map을 순회해야할 때 for문에 활용)

======>  for (String key: intMap.keySet()) { }   이런식으로 활용

intMap.values()   ==>  Map에서 value들만 빼서 배열로 리턴

<Java 개요>

A언어 : 입,출력 // 문맥

==> B언어 : A언어기능 + 기계식 데이터 타입, 연산기능, methods 

==> C언어 : B언어기능 + 자료형 데이터 타입, 자료구조(분류통)

이후에 등장한 것이 Java. C언어의 많은 특징들을 가지고왔다

1990년대에 등장, 어디서나 마시는 커피(Java)처럼 어디서나 동작 가능한 언어

==> 공통 실행환경 필요 : JVM (Java Virtual Machine) -> 운영체제 위에 올리는 토퍼같은것

==> C언어기능 + JVM, 클래스, 객체

Java 장점 : 공통 실행환경의 존재로, 쓰임이 많다. 대표적인 객체지향 언어

                   안정성이 높다, 보안성이 좋다 컴파일러가 오류를 체크하고, 각종 보안이 들어가있음

                   커뮤니티가 크다 -> 다양한 개발 도구와 라이브러리 존재

<JVM>

JVM : 자바가 구동될 수 있는 가상의 기기

byte code : Java코드를 운영체제가 읽을 수 있게 .class 코드로 바꾼 코드

compiler : 변환기

interpreter : 운영체제가 읽은 바이트코드를 기계가 실행할 수 있는 기계어로 번역

JIT컴파일러(Just In Time) : 빠른 Java .class 코드 해석기 -> 인터프리터의 효율을 높여준다?

메모리영역 : Java의 데이터를 저장하는 영역 -> 운영체제로부터 JVM이 할당받은 메모리 영역

클래스 로더 : .class 바이트코드를 메모리영역에 담는 운반기

가비지컬렉터(GC) : 메모리영역에서 안쓰는 데이터를 주기적으로 청소

--------JRE, JDK-------

JRE: Java Runtime Environment  ==> 자바를 "실행"할 수 있는 환경

JDK: Java Development Kit  ==> JRE를 포함하고, .java파일을 .class파일로 변환해주는 Java compiler(javac) 기능이 있음

                                                      ==> 코드를 디버깅하는 jdb 등의 기능이 있음

지금으로서는 JDK만 알아두고, JDK와 IntelliJ(IDE) 를 설치할 것.

class : .class파일을 만드는 영역. Main 클래스의 이름은 .java파일의 이름과 일치시켜줘야함

public : 제어자. Main class를 public으로 만들어놓으면 어디서든 접근 가능

static : 이 프로그램이 시작될 때, 무조건 실행되는 상태가 된다? (추가공부 필요)

void : output의 타입이 void인 것을 선언. 자바에서는 input과 output의 타입을 선언해줘야한다.

          ==>void는 출력이 없다는 것을 말함

(String[] args)  :  input의 타입과 변수명을 선언하고있음

System.out.println("~~") : System이라는 클래스의 out 객체의 println이란 메소드를 실행

<변수와 상수>

--------변수----------

int num;    :  num이라는 이름의 integer type 저장공간을 선언

String name;    :   name이라는 이름의 String type 저장공간을 선언

int num = 10;    :  선언과 동시에 10이라는 값으로 "초기화"

int num;   이후  num = 10       :   선언을 해놓고 나중에 값을 대입

--------상수----------

final int num = 10;         :      final이라는 키워드를 추가하여 상수로 선언

num = 20;                : 상수는 값 변경이 안되기 때문에 에러가 난다.

--------변수의 타입----------

1.기본형

=> int, char, string, boolean etc....

=> string은 "쌍따옴표로 감싸고"  //  char은 '작'은 따옴표로 감싼다

=> 정수형 변수

byte byteNumber = 127; // byte 는 -128 ~ 127 범위의 숫자만 저장 가능합니다.

short shortNumber = 32767; // short 는 -32,768~32,767 범위의 숫자만 저장 가능합니다.

int intNumber = 2147483647; // int 는 -21억~21억 범위의 숫자만 저장 가능합니다.

long longNumber = 2147483647L; // long 은 숫자뒤에 알파벳 L 을 붙여서 표기하며 매우 큰수를 저장 가능합니다.

=> 실수형 변수는 float(4byte), double(8byte)

float (4byte) : 3.4 * -10^38 ~ 3.4 * 10^38(long 보다 큼)범위의 숫자 저장이 가능합니다.

double (8byte) : 1.7 * -10^308 ~ 1.7 * 10^308(long 보다 큼)범위의 숫자 저장이 가능합니다.

2.참조형 : 레퍼런스가 있음. 어떤 공간의 주소값을 바라보고 있는 녀석

String, Object, Array, List .... 등 단일공간에 담을 수 없는 값을 저장

배열 선언 방식 :    int[ ] arr = {1, 2, 3}

참조형 변수는 주소값을 가진다고 했다. 이상한 값이 나오는 이유는 arr 배열이 시작되는 메모리 주소값을 주기 때문.

따라서 값을 출력하려면 Java에서 제공하는 Arrays 유틸리티의 toString 메소드를 사용해야한다.

*참고 : Stack영역은 주소값을 저장, Heap 영역은 원본 값을 저장. 참조형 변수의 경우 Stack에 주소값이 있고, 이를 참조하여 Heap의 저장공간에 접근함. Heap은 동적으로 할당된 메모리 영역이기 때문에 크기가 계속 늘어날 수 있는 참조형 변수의 원본을 저장함. Stack은 정적으로 할당된 메모리 영역이므로 크기가 몇 byte인지 정해져있는 기본형 변수를 저장. 참조형변수의 주소값은 크기가 정해져있기 때문에 Stack에 저장된다.

숫자형 변수타입의 크기 순서 :  byte(1) -> short(2) -> int(4) -> long(8) -> float(4) -> double(8)

3.Wrapper Class : 기본형 변수를 클래스로 한번 wrapping(감싸다) 하는 변수

----boxing----  

==> num.methods()    : 다양한 메소드를 사용할 수 있다.

----unboxing----

int n = num.intValue() ;

============= 변수 입력받기 ============

import java.util.Scanner ;

Scanner sc = new Scanner(System.in);

int asciiNumber = sc.nextInt();      //입력받는 부분, 변수이름에 대입

char ch = (char)asciiNumber;       //입력받은 아스키코드를 문자로 형변환

nextLine().charAt(0);  :  Line을 입력받고 0번째 char 가져옴

** 형변환 하는 방법 : (char)변수이름   //  (int)변수이름  등등

============= 문자, 문자열 ============

문자 : 기본형 변수, 홑따옴표,  문자 뒤에 \0  (Null문자)가 없다.

문자열 : 참조형 변수(), 쌍따옴표, 문자 뒤에 \0 (Null문자)가 있다. (끝을 알려주기위해)

============= 입력, 출력 ============

Java 프로그램은 기본적으로 Scanner.in 객체의 next~~ 메소드를 이용해서 입력을 받음

Java프로그램은 기본적으로 System.out 객체의 print~~ 메소드를 이용해서 출력함

<형 변환>

float, double -> int : 소수점 버려짐

int -> double, float : 소수점 생김

eg)

double doubleNumber = 10.5

int intNumber = (int)(doubleNumber)          ===> intNumber : 10

위처럼 (int)같은 타입을 명시해서 typecasting하는 것을 명시적 형 변환이라고 한다.

But, 자동으로 바꿔주는 케이스도 있다.

===========자동으로 형변환되는 경우==========

- int형으로 선언된 변수에 byte자료형을 넣어주면 int로 자동 형변환되어 저장됨

- char타입 값을 미리 선언해놓은 int형 변수에 할당하면 자동으로 아스키코드로 바꿔서 할당됨

- int타입 값을 long 변수에 넣으면 long으로 형변환되어 저장됨

- int타입 값을 double 변수에 넣으면 double로 형변환

===> 작은 크기의 타입에서 큰 크기의 타입으로 할당될 때 자동 형변환이 일어남

===> 마찬가지로, 작은 크기의 type과 큰 크기의 type이 계산이 될 때, 자동으로 큰 크기의 type에 맞춰 형변환되어 계산됨

eg) int + double = double    근데이걸 int에 할당하면 소수점 버려짐

==========================================================================================

토이프로젝트 구현 중, 로그인 토큰을 관리하는 쿠키를 저장하고, 특정 조건에서 이 쿠키를 활용하여 로그인 여부를 확인하는 Auth() 함수를 만들었다. 활용되는 곳에서 return을 받아보니 계속 undefined가 받아와져서 return의 위치가 잘못됐다고만 생각하고있었는데, ajax의 async 옵션을 false로 설정해줘야 하는 경우였다.

관련내용 : https://recollectionis.tistory.com/167

==========================================================================================

AWS elastic beanstalk의 경우 한달에 750시간의 무료 호스팅을 제공한다. 웹페이지 하나를 deploy하면 한달에 720시간이니 사실상 하나의 웹만 유지할 수 있다는 것. 내가 만들어본 페이지랑 부트캠프 입과시험 배포, 토이프로젝트 배포 등 다 내 AWS 계정으로 진행했어서 일단 다 내렸다. 시간날 때 내 페이지만 AWS에 올리고, 나머지 프로젝트는 https://www.netlify.com/    에서 무료 호스팅을 제공한다고 하니 여기에 올려보도록 하자

==========================================================================================

<토이프로젝트 진행 중 낙서>

HTML로 체크박스 체크/해제 기능은 <input> 태그의 옵션 중 type=checkbox를 통해서 구현 가능하다

<input> 태그의 옵션 중 type=password는 패스워드 입력 시 이를 가려줌

웹페이지를 이동시키는 JS코드는 window.location.href = 'url'      그밖에 window.location의 함수들 공부해보자

GET요청에도 파라미터를 쿼리형식으로 담을 수 있다. 요청을 보낼 url 뒤에 ?id=asdf 이런식으로 썼던걸로 기억

=> requests.args.get('파라미터이름')

Pymongo DB의 객체 중 _id필드는 고유id를 담고있는데, 이는 ObjectId 클래스여서 json형식으로 내려보내줄 수가 없다.

이걸 string으로 바꿔서 쓸일이 있을지 모르겠지만, 있다면 str()에 넣어줘서 바꿔주고, 다시 ObjectId로 만들어주고 싶으면 from bson import ObjectId      ==>  ObjectId(str)

로그인 토큰 저장 방식은 쿠키, 세션스토리지, 로컬스토리지

다이어트 시작 후로 7KG 감량했다. 2023년 목표를 총 15KG 감량으로 잡았는데 절반 조금 못 되게 왔다.

운동을 꾸준히 해왔으니 아직은 식단을 따로 하지 않아도 술만 안마시면 살이 빠지는 상태인 것 같다.

급하게 뺄 필요 없으니 당분간은 이 상태 유지해야겠다.

약 한달 전에 클라이밍하다가 땅을 잘못 짚어서 손목을 조금 다쳤는데, 계속 하니까 데미지가 쌓이는 것 같아서

체외충격파 받으면서 한 2~3주 쉬어볼 계획이다.

미국 J1인턴은 오퍼가 와서 비자수속 진행만 하면 되었는데, 안가기로 했다. 비자수속에 지불할 돈으로 부트캠프 등록했다. 

부트캠프 본 과정 들어가기 전에 사전과정 느낌으로 웹개발 수업을 빠르게 듣고, 조를 짜서 협업 토이프로젝트를 진행해보았다. 웹개발의 개념을 이해하기 위해 처음부터 끝까지 맛보기 식으로 진행해보고, 이를 활용해 협업을 경험하는 것 같았다. 개발에 대해 아무것도 모르던 상태에서 강의만 빠르게 듣고 바로 협업을 한다는게 부담스럽기도 했는데, 막상 되돌아보면 실제로 프로젝트를 진행하면서 배운게 훨씬 많은 것 같아 보람찼다.

AWS Elastic Beanstalk 무료버전을 사용해 지금까지 만든 웹페이지를 배포해보았다.

1.해외결제 가능한 카드 준비

2.Root 유저 가입

3.모든 권한이 있는 Root유저로 작업할 시 위험요소가 있으므로 IAM 사용자 생성

4.IAM 사용자 권한 부여

5.IAM 사용자로 로그인하여 작업

로컬에서 html, css, javascript를 사용해 웹페이지를 띄울 때 app.py파일, templates 폴더에 index.html파일이 있었다.

터미널의 프로젝트 폴더 작업공간에서

1. mkdir deploy    (deploy라는 폴더 만들어주기)

2. cp app.py deploy/application.py   (app.py를 deploy폴더 안의 application.py라는 파일로 복사)

3. cp -r templates deploy/templates   (templates 폴더를 deploy폴더 안의 templates 폴더로 복사)

4. pip freeze > deploy/requirements.txt    (내 가상환경에 설치된 라이브러리를 deploy 폴더안의 requirements.txt로 정리)

이후, 터미널의 작업공간을 deploy 폴더로 이동(cd deploy)후, aws에 올리는 작업 시작

1. application.py에 들어가서 app = Flask(__name__)  부분을 application = app = Flask(__name__)으로 바꿔준다

2. application.py의 마지막에 app.run('0.0.0.0', port=5000, debug=True) 부분은 로컬에서 작업할 때 썼던 부분이므로

     이 부분을 app.run()  으로 바꿔준다

3. 터미널에 pip install awsebcli

4. eb init

5. 위치는 서울찾아서하기 (mongoDB DB설정이랑 맞춰주는듯?)

6. 액세스 키 입력, application 이름 입력, 언어확인 나오는대로 하기

7. ssh key 만들기

8. eb create myweb

aws elastic beanstalk 서비스 가서 환경탭 눌러서 상태가 ON으로 나오면 완료!

이후 코드 수정은, 로컬에서 작업한 뒤, 변경사항을 deploy 폴더 안에 반영하고, 터미널에서 eb deploy myweb 해주면 끝

====================================문제발생===================================

AWS에 업로드가 되었는데 서버상태 심각으로,

100% requests are failing이라고 떴다. 그냥 페이지에 로드되는게 없다는 뜻인듯.

로컬에서는 아무 문제가 없었는데, 뭔지 모르겠다

==============================================================================

AWS에서 제공하는 로그탭에 나오는 로그의 에러메세지를 아무리 검색해도 해결방법을 찾을 수 없어 포기했었는데,

누군가가 터미널에 eb logs 로도 로그를 볼 수 있다고 알려주었다.

해당 에러메세지를 보고 application.py를 봤더니 

가 안되어있는걸 발견했다. 아마 바꾸고 저장을 안한 것 같다.

코드한줄에 3시간을 태운게 너무 허무했다.

myweb.eba-tr6mkvut.ap-northeast-2.elasticbeanstalk.com

오랜 삽질끝에 배포에 성공!

내일은 다른페이지 배포해보고, 기존에 만들었던 것들 기능추가 해줘ㅜ야겟다

<MongoDB>

몽고DB가입, 데이터베이스 생성후

파이썬 라이브러리 pymongo, dnspython 설치

[기본코드]

[삽입]

db.users.insert_one('dictionary')

[추출]

데이터 다 가져오기 : 

<Flask>

[기본 코드]

from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return 'This is Home!'

@app.route('/mypage')
def mypage():
   return 'This is mypage!'

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

- 실행시켜놓고 브라우저 열어서 localhost:5000 하면 페이지 뜸. 남들에게 배포된상태는X 나만볼수있음

- mypage함수의 route를 보면 /mypage임. localhost:5000/mypage하면 mypage함수를 불러옴

- route에 해당하는 함수 return 값에 html 태그를 넣어주면 페이지에 html이 표시되는데, return부분에 페이지 html을

다 담는 것은 좋지 않으므로 html파일과 연결시켜주어야 한다.

==> templates 폴더를 만들고 html파일 넣어놓고, app.py에서 flask의 render_template를 import해준다.

       이제 함수 return값에 render_template( '템플릿폴더안의파일이름.html' )

*프론트와 백엔드의 소통 방식*

GET방식 : 통상적으로 데이터를 조회(Read) 요청할 때 사용, 주소에 ?로 시작하는 부분

- get방식은 formData에 데이터를 태워서 보낼 수 없어서 query를 파라미터로 넘겨주는 방법을 사용해야한다는데,

아직 모르겠다. (추후 공부해서 업데이트)

POST방식 : 통상적으로 데이터를 생성(Create), 변경(Update), 삭제(Delete) 할 때 사용

eg) 회원가입, 회원탈퇴, 비밀번호 수정 등

-> 데이터 전달이 바로 보이지 않는 HTML

formData에 데이터를 태워서 보낼 수 있다.

=================== GET 요청 정리=====================

fetch요청의 기본값은 GET방식이며, /test에 GET 요청을 보내면 백엔드의 /test route에 해당하는

test_get()함수가 호출되고, 이 함수의 return값인 json데이터가 /test에 표시됨. 이 데이터는 fetch에 담겨 fetch 안 매개변수에 전달된다.

=================== POST요청 정리=====================

let formData = new FormData();

formData.append("video_submit", "video_url");

해당 코드는 /test라는 페이지로 POST요청을 보낼거고, 보낼 데이터는 formData임. 이게 request에 담겨서 보내짐.

보내게 되면 백엔드의 /test route에 해당하는 함수가 호출되고, 이 함수 내부에서 request.form['video_sumbit']을 찍어보면  "video_url"이 나옴.

이제 함수 내에서 서비스의 논리에 따라 video_url을 처리하고, return에 사용자에게 보낼 데이터를 return해주면, 프론트에 fetch 함수의 data 변수(위 코드상)에 이것이 담겨나오게 됨. 이제 프론트에서 이걸 사용자에게 보여주거나 하면됨

#############버튼을 클릭하면 사용자 입력이 백엔드로 전송되게 하고싶을때#############

사용자입력칸을 <input>태그 또는 <select>태그로 하고 id를 달아놓는다.

전송버튼을 만들어두고, button 태그의 onclick= "함수이름"에서 let temp = $(#'id이름')으로 데이터를 가져올 수 있고,

여기서 let 임시변수 = new FormData()        임시변수.apend('key값', temp) 이런식으로 FormData에 값 저장해서 백엔드로 날리기.

[FormData 메소드]

let formData = new FormData()

formData.append( name, value )

formData.append( name, blob, fileName )   : input type이 file인경우

formData.delete( name )

formData.get( name )

formData.getAll( name )

formData.has( name )     :  주어진 name에 해당하는 값이 있을경우 true, 없을경우 false 반환 

formData.set( name, value ) : 

formData.set( name, blob, fileName ) :     set도 append와 비슷하지만, append는 중복 가능, set은 덮어씌움

예시

<API 활용>

Youtube API로 영상 받아오기 : https://imslo.tistory.com/17

JSON으로 받아온 영상목록 forEach, append로 붙이기

결과

<웹스크래핑>

beautifulsoup4, selenium과 같은 파이썬 라이브러리들이 있음.

나는 beautifulsoup4 사용했다. Selenium은 동적 웹 크롤링에 좋은듯 ? (확실x)

네이버 플레이스 '클라이밍짐' 검색 후 나온 암장 리스트를 받아올 생각이었으나,

네이버 플레이스의 html에 iframe이 있어서 이를 크롤링하려면 Selenium을 이용해 크롬 드라이버를 변경 하고 ...~~~~.... 과정이 복잡해 그냥 비지니스 검색을 크롤링 하기로 함.

빨간 부분에 마우스 우클릭 -> 검사

몇 개 더 해보면, 비지니스 이름이 담긴 곳은 span 태그에 OSrXXb 클래스인 것을 알 수 있다.

import requests

from bs4 import BeautifulSoup

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}

data = requests.get('내가 검색한것의 주소',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

a = soup.find_all('span', {'class' : 'OSrXXb'})

 

requests 라이브러리 설치하고, requests.get('주소')를 통해 페이지 정보 받아오고,

BeautifulSoup(data.text, 'html.parser')를 통해 html로 파싱해준다.

 

a는 리스트인데, 각 element를 프린트 해주면

 

OSrXXb라는 이름을 포함한 클래스도 가져와버렸다.

클래스 이름이 OSrXXb가 유일한 것만 남기기

 

==================사고 발생========================

위와 같은 방법으로 검색되는 암장 이름과, 해당 암장의 별점, 위치, 전화번호를 가져오는데는 성공하였으나,

구글 지도 검색시 한 페이지에 사진이 같이 나오는 것이 아니고, 이름을 클릭하면 사진이 나오는 창(모달)이 새로 나오는 형태였다. Beautifulsoup4로 정적인 웹페이지는 쉽게 크롤링 할 수 있지만, 이렇게 클릭해야 정보가 새로 로드되는 경우 request로 받아온 url이 바뀌기 때문에 이를 처리해줄 수가 없었다. 약 5시간의 삽질 후, Selenium으로 하기로 결정, 이후 약 5시간의 삽질 끝에 성공한 내용을 다음 글에 쓸

Git Bash란?

Bourne Again SHell

==> Steve Bourne이 개발한 유닉스 쉘 프로그램의 확장판

리눅스는 유닉스 운영체제를 기반으로 만들어짐

Git Bash를 설치하면 우리가 사용하는 운영체제인 윈도우 OS환경에서도 리눅스 커맨드를 사용할 수 있게 된다.