'분류 전체보기' 카테고리의 글 목록 (2 Page)

Javascript : 연산자 - 4. 논리 연산자

4. 논리 연산자

논리 연산자에는 ||(or), &&(and), !(not)이 있으며, 피연산자가 논리형 데이터인 true 또는 false로 반환한다.

종류	설명
\|\|	or 연산자, 피연산자 중 값이 하나라도 true면 true로 반환한다.
&&	and 연산자, 피연산자 중 값이 하나라도 false면 false로 반환한다.
!	not 연산자, 단항 연산자, 부정 논리 연산자, 피연산자 값이 true면 반대로 false 값을 반환한다.

논리 합(||) 연산자

피연산자 값 중 하나라도 true인 경우 true로 반환한다.
두 값이 모두 false라면 false로 반환한다.

console.log(true || true);

console.log(true || false);

console.log(false || true);

console.log(false || false);

논리 곱(&&) 연산자

피연산자 값이 모두 true일때 true를 반환하고, 둘 중 하나라도 false라면 false로 반환한다.

console.log(true && true);

console.log(true && false);

console.log(false && true);

console.log(false && false);

논리 부정(!) 연산자

피연산자 값이 true면 false로 반대 값을 반환한다.

console.log(!true);

console.log(!false);

let a = true;

console.log(!a);

저작자표시

'Programming > Javascript' 카테고리의 다른 글

Javascript : 연산자 - 5. 삼항 조건 연산자 (0)	2023.04.01
Javascript : 연산자 - 7. 연산자 우선 순위 (0)	2023.04.01
Javascript : 연산자 - 3. 비교 연산자 (0)	2023.04.01
Javascript : 연산자 - 2. 할당 연산자(대입 연산자) (0)	2023.04.01
Javascript : 연산자 - 1. 산술 연산자 (0)	2023.04.01

Javascript : 연산자 - 3. 비교 연산자

3. 비교 연산자

비교 연산자는 '크다', '작다', '같다' 등 비교할 때 사용하는 연산자
연산 된 결과 값을 true(참) 또는 false(거짓)의 논리형 데이터로 반환한다.

종류	설명	비고
A > B	A가 B보다 크다.
A < B	A가 B보다 작다.	A가 B보다 작으면 true A가 B보다 크면 fasle
A >= B	A가 B보다 크거나 같다.
A <= B	A가 B보다 작거나 같다.	A가 B보다 작거나 같으면 true A가 B보다 크거나 같으면 fasle
A == B	A와 B는 같다.	데이터 type이 숫자형, 문자형 관계없이 숫자만 비교해서 일치하면 true를 반환한다. (예) 숫자형 10 == 문자형 10 / 숫자만 비교하고 일치하면 true
A != B	A와 B는 다르다.	숫자를 비교할 경우 자료형은 숫자형, 문자형 관계없이 표기 된 숫자만 다르면 true를 반환한다. (예) ① 숫자형 10 == 문자형 20 은 두 값이 다름으로 true ② 숫자형 10 == 문자형 10 은 두 값이 같은 것으로 인식되어 fasle로 반환한다.
A === B	A와 B는 같다.	숫자를 비교할 경우 반드시 표기 된 숫자, 데이터 type도 일치해야만 true를 반환한다. 10과 "10"을 비교했을 경우 하나는 숫자형 10, 하나는 문자형 10 이므로 fasle를 반환한다. (예) ① 숫자형 10 === 숫자형 10 두 값이 숫자와, type이 일치함으로 true 숫자 10이 숫자 10과 같은가? true
A !== B	A와 B는 다르다.	숫자를 비교할 경우 반드시 표기 된 숫자 또는 자료형이 일치하지 않아야 fasle를 반환한다. (예) ① 숫자형 10 !== 숫자형 15 는 표기 된 숫자가 다름으로 true를 반환한다. 숫자 10과 숫자 15가 다른가? / true ② 숫자형 10 !== 문자형 "10" 은 type이 다름으로 true를 반환한다. 숫자 10과 문자형 10은 다른가? / true ③ 숫자형 10과 !== 숫자형 10은 숫자, type이 같음으로 fasle를 반환한다. 숫자 10과 숫자 10은 다른가? / fasle

비교 연산자 - '==', '!='

==와 !=는 피연산자의 데이터 type이 비교 연산자의 실행 결과에 영향을 미치지 않는다.

let a = 10

let b = "10"

console.log(a == 10); // true

console.log(b == 10); // true

비교 연산자 - '===', '!=='

===와 !==는 피연산자의 데이터 type에 따라 결과가 달라진다.

let a = 10

let b = "10"

console.log(a === 10); // true

console.log(b === 10); // false

저작자표시

'Programming > Javascript' 카테고리의 다른 글

Javascript : 연산자 - 7. 연산자 우선 순위 (0)	2023.04.01
Javascript : 연산자 - 4. 논리 연산자 (0)	2023.04.01
Javascript : 연산자 - 2. 할당 연산자(대입 연산자) (0)	2023.04.01
Javascript : 연산자 - 1. 산술 연산자 (0)	2023.04.01
Javascript : 형 변환 (0)	2023.04.01

Javascript : 연산자 - 2. 할당 연산자(대입 연산자)

2. 대입, 복합 연산자

대입 연산자(=)는 연산 된 데이터를 변수에 저장할 때 사용한다.
복합 대입 연산자(+=, -=, *=, /=, %=)는 산술 연산자와 대입 연산자가 복합적으로 적용 된 것을 뜻한다.
연산한 뒤에 다시 변수에 값을 재할당 한다.

종류	풀이
A = B	A = B
A += B	A = A + B
A *= B	A = A * B
A /= B	A = A / B
A %= B	A = A % B

// 등호 연산자(=)

let a = 10;

console.log(a);

// 더하기 등호 연산자(+=)

a += 5; // a = a 5 5와 동일

console.log(a);

// 빼기 등호 연산자(-=)

a -= 5; // a = a - 5와 동일

console.log(a);

// 곱하기 등호 연산자(*=)

a *= 5; // a = a * 5와 동일

console.log(a);

// 나누기 등호 연산자(/=)

a /= 5; // a = a / 5와 동일

console.log(a);

// 나머지 등호 연산자(%/)

a %= 3; // a = a % 3와 동일

console.log(a);

저작자표시

'Programming > Javascript' 카테고리의 다른 글

Javascript : 연산자 - 4. 논리 연산자 (0)	2023.04.01
Javascript : 연산자 - 3. 비교 연산자 (0)	2023.04.01
Javascript : 연산자 - 1. 산술 연산자 (0)	2023.04.01
Javascript : 형 변환 (0)	2023.04.01
Javascript : 데이터 타입 - Boolean, undefined, null (0)	2023.04.01

Javascript : 연산자 - 1. 산술 연산자

연산자란?

덧셈, 뺄셈, 곱셈, 나눗셈과 같이 계산 작업을 뜻한다.
자바스크립트에서는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있다.

1. 산술 연산자

종류	기본형	설명
+	A+B	더하기
-	A-B	빼기
*	A*B	곱하기
/	A/B	나누기
%	A%B	나머지

더하기 연산자

더하기 연산은 피연산자에 문자형 데이터가 한개라도 포함된다면 자동으로 문자형 데이터 타입으로 형 변환된다.

console.log(1 + 1);

console.log(1 + "1");

빼기 연산자

피 연산자에 문자열이 포함되어있더라도 산술연산된다.

console.log(1 - "2");

console.log(1 - 2);

곱하기 연산자

피 연산자에 문자열이 포함되어있더라도 산술연산된다.

console.log(5 * 3);

console.log("5" * 3);

나누기 연산자

피 연산자에 문자열이 포함되어있더라도 산술연산된다.

console.log(10 / 2);

console.log("10" / 2);

나머지 연산자

피 연산자에 문자열이 포함되어있더라도 산술연산된다.

console.log(7 / 2);

console.log("7" % 2);

저작자표시

'Programming > Javascript' 카테고리의 다른 글

Javascript : 연산자 - 3. 비교 연산자 (0)	2023.04.01
Javascript : 연산자 - 2. 할당 연산자(대입 연산자) (0)	2023.04.01
Javascript : 형 변환 (0)	2023.04.01
Javascript : 데이터 타입 - Boolean, undefined, null (0)	2023.04.01
Javascript : 데이터 타입 - 문자(String) (0)	2023.04.01

Javascript : 형 변환

형 변환
형태를 바꾼다.

1. 암시적 형 변환

문자형(String)

문자열과 다른 타입의 데이터형태가 만나면 문자열로 변환된다.
문자와 숫자가 만나면 문자열로 변환된다.

let result = 1 + "2";

console.log(result);

console.log(typeof result);

문자열과 논리형의 타입이 만나면 문자열로 변환된다.

let result2 = "1" + true;

console.log(result2);

console.log(typeof result2);

숫자형(Number)

더하기 연산자가 아닌 +, -, * 연산자가 붙으면 숫자 연산자로 변환된다.

let result3 = 1 - "2";

console.log(result3);

console.log(typeof result3);

let result4 = "2" * "2";

console.log(result4);

console.log(typeof result4);

2. 명시적 형 변환

논리형(Boolean)

6번 : 문자은 값이 있는 문자열은 빈 문자열이 아니라면 true라고 나온다.
7번 : 객체라는 것은 값이 비어있어도 true라고 나온다.

console.log(Boolean(0));

console.log(Boolean(""));

console.log(Boolean(null));

console.log(Boolean(undefined));

console.log(Boolean(NaN));

console.log('---------------------');

console.log(Boolean("flase"));

console.log(Boolean({}));

문자형(String)

숫자형, 논리형, null, undefined를 넣어줘도 string을 붙여줬기 때문에 모두 문자형으로 형 변환 된다.

let result5 = String(123);

console.log(typeof result5);

console.log(result5);

let result6 = String(true);

console.log(typeof result6);

console.log(result6);

let result7 = String(false);

console.log(typeof result7);

console.log(result7);

let result8 = String(null);

console.log(typeof result8);

console.log(result8);

let result9 = String(undefined);

console.log(typeof result9);

console.log(result9);

숫자열(Number)

let result10 = Number("123");

console.log(result10);

console.log(typeof result10);

저작자표시

'Programming > Javascript' 카테고리의 다른 글

Javascript : 연산자 - 2. 할당 연산자(대입 연산자) (0)	2023.04.01
Javascript : 연산자 - 1. 산술 연산자 (0)	2023.04.01
Javascript : 데이터 타입 - Boolean, undefined, null (0)	2023.04.01
Javascript : 데이터 타입 - 문자(String) (0)	2023.04.01
Javascript : 데이터 타입 - 숫자(Number) (0)	2023.04.01

Javascript : 데이터 타입 - Boolean, undefined, null

데이터 타입의 종류를 알아보자
1. Javascript의 데이터 타입의 선언 특징
2. 숫자
3. 문자
4. 논리형(Boolean)
5. undefined
6. 빈 데이터(null)

4. 논리형(Boolean)

논리형(Boolean)이란?

Boolean은 true(참) 또는 false(거짓) 두 가지 값 중 하나를 나타내는 데이터 타입이다.

let bool1 = true

let bool2 = false

console.log(bool1);

console.log(typeof bool1);

console.log(bool2);

console.log(typeof bool2);

5. undefined

undefined 란?

값이 할당/정의되지 않은 것(un : not , define : 정의하다.)
변수에 값이 등록되기 전 상태를 말한다.

let x;

console.log(x);

6. 빈 데이터(null)

null 이란?

값이 존재하지 않음을 '명시적'으로 나타내는 것
null ≠ undefiend
null은 변수에 저장 된 데이터를 비우고자 할 때 사용한다.

let y = null

console.log(y);

5. object(객체)

object 란?

{key : value pair}

let chulsoo = {

firstname : 'lee',

age : 20,

isMarried : true

}

console.log(chulsoo.firstname)

console.log(chulsoo.age)

console.log(chulsoo.isMarried)

console.log(typeof chulsoo.firstname)

console.log(typeof chulsoo.age)

console.log(typeof chulsoo.isMarried)

6. array(배열)

array 란?

여러 개의 데이터를 순서대로 저장하는 데이터 타입
배열은 모두 index(위치 데이터)를 가지고있다.
index의 순서는 0부터 시작한다.

저작자표시

'Programming > Javascript' 카테고리의 다른 글

Javascript : 연산자 - 1. 산술 연산자 (0)	2023.04.01
Javascript : 형 변환 (0)	2023.04.01
Javascript : 데이터 타입 - 문자(String) (0)	2023.04.01
Javascript : 데이터 타입 - 숫자(Number) (0)	2023.04.01
Javascript : 변수와 상수 (0)	2023.04.01

Javascript : 데이터 타입 - 문자(String)

데이터 타입의 종류를 알아보자
1. Javascript의 데이터 타입의 선언 특징
2. 숫자(Number)
3. 문자(String)
4. 논리형(Boolean)
5. undefined
6. 빈 데이터(null)

3. 문자열(string)

문자열로 선언할 때

' ', " " 로 감싸주어야 문자열로 선언된다.

let str = "hello world"

console.log(str);

console.log(typeof str);

string의 기능 - 문자열의 길이를 확인할 때

변수.length

let str = "hello world"

console.log(str.length);

string의 기능 - 문자열 결합하기

변수1.concat(변수2);

let str1 = "Hello World "

let str2 = "Welcome"

let result = str1.concat(str2);

console.log(result);

string의 기능 - 문자열 자르기
① substr

변수.substr(7,5)
7번째부터 5개의 글자를 자르자

② slice

변수.slice(7,15)
7번째부터 12번째 글자까지 자르자

string의 기능 - 문자열을 검색할 때

변수.search("검색할 문자")
대상 변수에 검색할 문자가 몇번째부터 시작하는지 찾는 기능

let str3 = "Hello World Welcome"

console.log(str3.search("Welcome"));

string의 기능 - 문자열 대체

변수.replace("대상문자", "변환할 문자")

let str5 = "Hello World Welcome"

let result01 = str5.replace("Welcom", "Javascript")

console.log(result01);

string의 기능 - 문자열 분할

변수.split("문자열을 자를 기준이되는 문자")

let str6 = "apple, banana, kiwi"

let result02 = str6.split(",")

console.log(result02);

저작자표시

'Programming > Javascript' 카테고리의 다른 글

Javascript : 연산자 - 1. 산술 연산자 (0)	2023.04.01
Javascript : 형 변환 (0)	2023.04.01
Javascript : 데이터 타입 - Boolean, undefined, null (0)	2023.04.01
Javascript : 데이터 타입 - 숫자(Number) (0)	2023.04.01
Javascript : 변수와 상수 (0)	2023.04.01

Javascript : 데이터 타입 - 숫자(Number)

데이터 타입의 종류를 알아보자
1. Javascript의 데이터 타입의 선언 특징
2. 숫자(Number)
3. 문자(String)
4. 논리형(Boolean)
5. undefined
6. 빈 데이터(null)

1. Javascript의 데이터 타입의 선언 특징

데이터 타입이 선언될 떄

데이터 타입은 runtime(코드가 실행될 때) 데이터 타입이 실행된다.
예를들어 JAVA에서는 선언할 때 매번 데이터 타입을 지정해주어야하지만,
Javascript 는 데이터 타입을 지정하지 않고 코드가 실행될 때 데이터 타입이 결정된다.

// JAVA

string A = "ABC"

// Javascript

const A = "ABC"

2. 숫자(Number)

정수

데이터 타입.

let num1 = 10;

console.log(num1);

console.log(typeof num1);

실수(float)

데이터 타입.

let num2 = 3.14;

console.log(num2);

console.log(typeof num2);

지수형(Exp)

데이터 타입.

let num3 = 2.5e5; // 2.5 x 10^5(10의 5승)

console.log(num3);

console.log(typeof num3);

NaN(Not a Number)

데이터 타

let num4 = "hello" / 2;

console.log(num4);

console.log(typeof num4);

무한대(Infinity)

데이터 타

let num5 = 1 / 0;

console.log(num5);

console.log(typeof num5);

let num6 = -1 / 0;

console.log(num6);

console.log(typeof num6);

저작자표시

'Programming > Javascript' 카테고리의 다른 글

Javascript : 연산자 - 1. 산술 연산자 (0)	2023.04.01
Javascript : 형 변환 (0)	2023.04.01
Javascript : 데이터 타입 - Boolean, undefined, null (0)	2023.04.01
Javascript : 데이터 타입 - 문자(String) (0)	2023.04.01
Javascript : 변수와 상수 (0)	2023.04.01

Javascript : 변수와 상수

변수와 상수에 대해 공부한다.

1. 변수(variable)와 상수(constant)

변수란 무엇일까?

변수(Variables)는 변하는 데이터(값)를 저장할 수 있는 메모리 공간이며, 데이터를 담을 수 있는 방이다.
변수에는 오직 한개의 데이터만 저장되며, 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워진다.
변수에 저장할 수 있는 데이터의 종류는 문자형(string), 숫자형(number), 논리형(boolean), 빈데이터(null)이 있다.
변수는 변하는 값을 저장하는 식별자로 let을 사용한다.
메모리에 저장하고 저장된 값을 읽어들여 재사용하기 위해 변수를 사용한다.
변수의 5가지 주요 개념

변수 5가지의 주요 개념
변수 이름	저장 된 값의 고유 이름 (예) A
변수 값	변수에 저장 된 값 "Hello word"
변수 할당	변수에 값을 저장하는 행위 만들어진 변수 A에 "Hello word"를 저장하는 것
변수 선언	변수를 사용하기 위해 컴퓨터에 알리는 행위 var 라는 키워드를 이용하여 A 에 저장하는 것을 알리는 행위
변수 참조	변수에 할당 된 값을 읽어오는 것 var c = a + b;를 구할 때 var a와 var b 를 참조하는 것

var A = "hello world";

var a = 10;

var b = 20;

var c = a + b;

상수란 무엇일까?

변하지않는 값을 저장하는 식별자로 상수 선언할 때에는 const를 사용한다.

변수를 선언할 수 있는 방법

변수를 선언하는 방법은 var, let, const가 있다.

var A = "hello world var";

console.log(A);

let B = "Hello world let";

console.log(B);

const C = "Hello world const";

console.log(C);

변수를 선언하고, 할당을 나중에 할 수도 있다.

// var D = 3 과 동일하다.

var D;

D = 3

var, let, const의 차이점

① 변수를 선언 후 다시 선언할 때

var는 동일 변수에 여러번 선언할 수 있지만 let과 const는 여러번 선언할 수 없다.


var	이미 선언 된 값에 다시 선언 가능
let	이미 선언 된 값에 다시 선언 불가능
const	이미 선언 된 값에 다시 선언 불가능

① 변수에 선언 후 변수 이름에 다시 재할당 할 때

var와 let은 재할당이 가능하지만 const는 여러번 할당할 수 없다.


var	이미 할당 된 값에 재 할당 가능
let	이미 할당 된 값에 재 할당 가능
const	이미 할당 된 값에 재 할당 불가능

var A = "hello world var";

A = "var test 1"

console.log(A);

let B = "Hello world let";

B = "let test 2"

console.log(B);

const C = "Hello world const";

C = "cosnt test 2"

console.log(C);

변수 선언 시 주의사항
1) 변수명의 첫 글자로는 영문자, $, _(언더바) 만 올 수 있다.

2) 변수명 첫 글자 다음은 영문자, 숫자, $, _(언더바)만 포함할 수 있다.

3) 변수명으로는 예약어(document, location, window 등..) 약속어를 사용할 수 없다.
예약어란 이미 자바스크립트에서 사용하기로 약속하고 사용 중인 단어를 말한다.

4) 변수명을 지을 때에는 되도록 의미를 부여해 작성하는 것이 좋다.

5) 변수명을 사용할 때에는 대/소문자를 구분해야 한다.

저작자표시

'Programming > Javascript' 카테고리의 다른 글

Javascript : 연산자 - 1. 산술 연산자 (0)	2023.04.01
Javascript : 형 변환 (0)	2023.04.01
Javascript : 데이터 타입 - Boolean, undefined, null (0)	2023.04.01
Javascript : 데이터 타입 - 문자(String) (0)	2023.04.01
Javascript : 데이터 타입 - 숫자(Number) (0)	2023.04.01

글자태그

제목글자<h1~>, 본문<p>, 앵커태그<a>, 글자 형태

1. 제목글자 태그

제목글자 태그(heading)

각각의 숫자는 크기 및 우선 순위를 나타낸다.
h1이 가장 크고, h6가 가장 작다.

태그명	설명
h1	첫번째 큰 제목 글자 태그
h2	두번째 큰 제목 글자 태그
h3	세번째 큰 제목 글자 태그
h4	네번째 큰 제목 글자 태그
h5	다섯번째 큰 제목 글자 태그
h6	여섯번째 큰 제목 글자 태그

<!DOCTYPE html>

<head>
    <html lang="ko">
    <meta charset="UTF-8">

    <title>Document</title>

    <script>
    </script>

    <style>
    </style>
</head>


<body>
    <h1>첫번째 큰 제목 글자 태그</h1>
    <h2>두번째 큰 제목 글자 태그</h2>
    <h3>세번째 큰 제목 글자 태그</h3>
    <h4>네번째 큰 제목 글자 태그</h4>
    <h5>다섯번째 큰 제목 글자 태그</h5>
    <h6>여섯번째 큰 제목 글자 태그</h6>
</body>

</html>

본문 태그

태그명	설명
p	본문 글자 태그 (paragraph : 단락) 단락을 나눠주는 태그로 <p></p>태그 안에 들어간 내용은 모두 한줄로 작성된다.
br	줄바꿈 태그
hr	수평 줄 태그

<!DOCTYPE html>
<head>
    <html lang="ko">
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <p>p태그 안에는 엄청 긴 내용을 한줄로 작성할 수 있어요. paragraph : 단락을 나타내는 태그에요.</p>
    <br>br태그는 줄 <br>← 바꿈 태그에요.
    <hr>hr은 수평 줄을 만들어줘요.
</body>

</html>

앵커 태그(Anchor)

앵커태그는 서로 다른 웹 페이지를 이동하거나, 웹 페이지 내부에서 특정 위치로 이동할 때 사용하는 태그이다.

태그명	설명
a	앵커 태그 <a href="url, ./위치"></a>

저작자표시

'Programming > html, css' 카테고리의 다른 글

HTML5 : 페이지 구조 - html, head (0)	2023.03.29

HTML5 페이지 구조

html, head

1. lang 속성값

실제 웹브라우저가 동작하는데 어떠한 영향도 끼치지 않지만 구글과 같은 검색엔진에서 웹 페이지를 탐색할 때 어떤 페이지로 만들어져 있는지 쉽게 인식하기 위한 목적을 가지고 있다.

국가	속성값
한국	ko
일본	ja
중국	zh
미국	en
러시아어	ru
독일어	de

2. head 태그

태그명	설명
<!DOCTYPE html>	현재 웹 브라우저가 HTML5 문서임을 선언하는 태그
<html>	html 태그는 모든 HTML 페이지의 루트 요소로 lang 속성을 입력할 수 있다. <html lang = "ko">
meta	브라우저의 검색엔진이 작동 가능하도록 웹 페이지의 추가 정보 제공
title	브라우저의 검색엔진이 작동 가능하도록 웹 페이지의 제목 정보 제공
script	스크립트를 추가
link	웹 페이지에 link를 통해 파일을 추가
style	웹 페이지에 style 시트를 추가
base	웹 페이지의 기본 경로를 지정한다. <base href="/images/" target="_blank" />

meta tag 설명

속성명	설명
charset	문자코드 종류 설정 문자 깨짐이나 오류가 생길 수 있어 방지하기 위해 인코딩 선언한다. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
Description	검색결과에 표시되는 설명 <meta name="discription" content="YI_DADA의 웹페이지입니다.">
Keywords	검색엔진에 검색되는 키워드 <meta name="keyword" content="YI_DADA">
author	웹페이지 제작자 명 <meta http-equiv="Author" content="홍길동">
publisher	제작사 <meta http-equiv="publisher" content="제작사">
other agent	웹 책임자 <meta http-equiv="other Agent" content="웹 책임자">
copyright	저작권 <meta http-equiv="copyright" content="저작권">
distribution	배포자 <meta http-equiv="distribution" content="배포자">
build, last-modified	제작년월일 <meta http-equiv="build" content="date"> <meta http-equiv="last-modified" content="Fri, 05 Jul 2020 20:07:00">
email, reply-to	이메일 <meta http-equiv="email" content="메일 주소"> <meta http-equiv="reply-to" content="메일 주소">
title	문서 제목 <meta http-equiv="title" content="YI_DADA의 웹페이지">
viewport	모바일 반응 페이지 <meta name="viewport " content="width=device-width, initial-scale=1.0">
generator	제작도구 <meta http-equiv="generator" content="제작도구">
filename	파일명 <meta http-equiv="filename" content="파일명">
imagetoolbar	그림 위 마우스 오버 시 이미지 관련 툴바 생성하지 않는다. <meta http-equiv="imagetoolbar" content="no">
cache-control	캐쉬를 가져오지않아 사용자에게 항상 바뀐 내용을 보여줄 수 있지만 페이지 출력 속도가 오래 걸리는 단점을 가지고 있다. </meta http-equiv="cache-control" content="no-cache">
refresh	60초마다 새로고침 <meta http-equiv="refresh" content="60"> 60초 후 설정 된 url 주소로 자동 이동 </meta http-equiv="refresh" content="60; url="주소">

※ meta 태그 설명 출처(🏷️ 메타(meta) 태그 종류 & 사용법 (tistory.com))

<!DOCTYPE html>

<head>
    <html lang="ko">
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="styles.css">

    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>

    <style>
        h1 {
            color: red;
        }

        p {
            color: blue;
        }
    </style>
</head>


<body>
</body>

</html>

저작자표시

'Programming > html, css' 카테고리의 다른 글

HTML5 : 글자태그 (0)	2023.03.29

Git Assingment

git assingmnet를 통해 파일 관리하기

Sourcetree를 통해 파일 commit, push하기
Issue 등록 및 관리하기

1. Git

git은 프로젝트의 버젼 관리 프로그램
하나의 프로젝트를 협업하여 작업 단위를 나누어 작업 후 mergy하거나 작업 이력을 살펴볼 수 있다,
스냅샷처럼 기존 내역과 수정 내역의 정보를 볼 수 있다.
코드(Python, HTML, JavaScript, Java,...) text 파일, markdown파일(text 파일의 일종), CSV 파일 등
Github 은 Git 으로 된 프로젝트 저장 공간을 제공하고,Git 커뮤니티 서비스를 제공한다.
프로젝트, 회사에 따라 Git만 Github만 또는 동시에 사용하기도 한다.
Sourcetree 설치 파일(https://product-downloads.atlassian.com/software/sourcetree/windows/ga/SourceTreeSetup-3.4.3.exe)

Point of Realization

: )

저작자표시

'To day I learn' 카테고리의 다른 글

TodayILearn 2023-03-24 (0)	2023.03.24
TodayILearn 2023-03-23 (0)	2023.03.24
TodayILearn 2023-03-22 (0)	2023.03.23
TodayILeaun 2023-03-21 (0)	2023.03.21
TodayILearn 2023-03-20 (0)	2023.03.20

python post 삭제 기능 만들어보기

스파르타 코딩클럽 웹개발 종합반 - 스파르피디아 복습

javascript, python 라이브러리를 이용하여 post get API 구현하기
post 삭제 기능 만들어보기

1.

2.

Point of Realization

function open_postbox(){

$('#posting_box').show()

}

function hide_postbox(){

$('#posting_box').hide()

}

</script>

아무리 해도 버튼을 눌렀을 때 posting_box 영역이 전부 열리지 않았는데,
'_' 문제인가 싶어서 '-' bar로 변경해주었더니 정상적으로 동작했다.

id를 정의해줄 때 어떤 규칙이 있는걸까?
검색을 해봐도 뚜렷한 해답이 나오지 않으니 책을 찾아봐야겠다.

영화 기록하기(버튼)을 누르면 전체 posting-box 영역이 잘 열린다.

저작자표시

'To day I learn' 카테고리의 다른 글

TodayILeurn 2023-03-25 (0)	2023.03.25
TodayILearn 2023-03-23 (0)	2023.03.24
TodayILearn 2023-03-22 (0)	2023.03.23
TodayILeaun 2023-03-21 (0)	2023.03.21
TodayILearn 2023-03-20 (0)	2023.03.20

POST, GET API 구현하기

스파르타 코딩클럽 웹개발 종합반 - 복습

POST방식으로
GET 방식으로

1.

2.

Point of Realization

졸려서 내일 쓸게요

저작자표시

'To day I learn' 카테고리의 다른 글

TodayILeurn 2023-03-25 (0)	2023.03.25
TodayILearn 2023-03-24 (0)	2023.03.24
TodayILearn 2023-03-22 (0)	2023.03.23
TodayILeaun 2023-03-21 (0)	2023.03.21
TodayILearn 2023-03-20 (0)	2023.03.20

팬명록 만들기

스파르타 코딩클럽 웹개발 종합반 5차 - 팬명록 만들기

POST방식으로 닉네임, 댓글 기록하기
GET방식으로 DB에 저장 된 닉네임, 댓글 보여주기
AWS에 파일 업로드하기
결과 : 나의 팬명록(eba-mwbwphkk.ap-northeast-2.elasticbeanstalk.com)

1. POST 댓글 저장하기

from flask import Flask, render_template, request, jsonify

application = app = Flask(__name__)

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

@app.route('/')

def home():

return render_template('index.html')

# request.form을 통해 name, comment를 받고 fan db에 doc 딕셔너리 데이터를 저장한다.

@app.route("/guestbook", methods=["POST"])

def guestbook_post():

name_receive = request.form['name_give']

comment_receive = request.form['comment_give']

doc = { 'name' : name_receive,

'comment' : comment_receive }

db.fan.insert_one(doc)

return jsonify({'msg': '댓글 등록 완료!'})

if __name__ == '__main__':

app.run()

--- 로컬에서 실행할 때 ---

app.run('0.0.0.0', port=5000, debug=True)

/* 문서가 열리면 set_temp, show_comment 함수 실행 */

$(document).ready(function () {

set_temp();

show_comment();

});

/* 실시간 서울 기온 함수 */

function set_temp() {

fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {

let number = data['temp']

$('#temp').text(number)

});

}

/* 닉네임, 댓글 DB에 저장하기 */

function save_comment() {

let name = $('#name').val()

let comment = $('#comment').val()

let formData = new FormData();

formData.append("name_give", name);

formData.append("comment_give", comment);

fetch('/guestbook', {method: "POST",body: formData,}).then((res) => res.json()).then((data) => {

alert(data["msg"]);

/* 화면 Refresh */

window.location.reload();

});

}

</script>

<body>

</div>

<textarea

class="form-control"

placeholder="Leave a comment here"

id="comment"

style="height: 100px"

></textarea>

</div>

2. GET 댓글 가져오기

@app.route("/guestbook", methods=["GET"])

def guestbook_get():

all_guestbook = list(db.fan.find((), {'_id' : False}))

return jsonify({'result': all_guestbook})

/* 닉네임, 댓글 DB에서 불러오기 */

function show_comment() {

fetch('/guestbook').then((res) => res.json()).then((data) => {

let rows = data['result']

$('#comment-list').empty()

rows.forEach((gst) => {

let name = gst["name"]

let comment = gst["comment"]

let temp_html = `<div class="card">

<p>${comment}</p>

</blockquote>

</div>

</div>`

$('#comment-list').append(temp_html)

});

})

}

</script>

<body>

</blockquote>

</div>

<body>

Point of Realization

웹개발 종합반 5주차까지 끝나고 AWS에 파일 업로드까지 진행했다.
따라가기에 급급했던것 같은데 닉네임, 댓글까지 DB에 저장되고 Refresh되어 바로 눈에 보이니까 신기하다..!
frontend, backend, db 연결까지 어떻게 동작하는지 궁금했는데 일단 한꺼풀 풀어본 느낌
강의만 보며 이해할때에는 이게 왜 저기서 동작한다는 거지? 했는데 부끄럽지만 따라 써보면서 해보니 이해가 됐다.
언젠가 이런 시절이 있었구나 돌아보려 남긴다.

저작자표시

'To day I learn' 카테고리의 다른 글

TodayILeurn 2023-03-25 (0)	2023.03.25
TodayILearn 2023-03-24 (0)	2023.03.24
TodayILearn 2023-03-23 (0)	2023.03.24
TodayILeaun 2023-03-21 (0)	2023.03.21
TodayILearn 2023-03-20 (0)	2023.03.20

POST방식으로 데이터를 저장하고, GET 방식으로 데이터 조회하기

스파르타 코딩클럽 웹개발 종합반 4차 - 화성 땅 구매하기 구현

Client에서 POST방식으로 이름(name), 주소(address), 평수(size) 데이터를 받아 Server를 통해 DB에 저장하기
화면이 Refresh되면 GET 방식으로 DB에 저장 된 데이터 표현해주기

1. New Project 생성 후 POST 방식으로 API를 만들고 사용하기

1) '2.mars' 폴더 생성
2) VS Code > 확장으로 이동하여 python 설치
사전에 python git-bash, python 3.8.6.exe 설치 필요!
3) 2.mars 폴더에 app.py 파일 생성하기
4) 새 터미널 추가 > 'python -m venv venv' + Enter
5) 인터프리터 : 3.8.6(venv':venv) 선택하기
6) 기존 터미널 종료 후 새 터미널 열어서 (venv)가 나오는지 확인하기
7) 라이브러리 설치
① pip install pymongo : DB 연결(저장/한개 찾기/바꾸기/지우기)
② pip install requests
③ pip install flask

8) API를 만들고 사용하기
Client에서 저장한 '이름(name)', '주소(adress)', '평수(size)' 저장하기 (Creat → POST방식)
① 데이터 명세
- 요청정보 : URL = /mars
- 요청방식 : POST(데이터 생성 방식)
- Client가 fetch를 통해 데이터를 주고, Server가 flask를 통해 → client에게 mesage를 보냄

② Client와 Server 연결 확인하기

▼ Server Code - app.py

@app.route("/mars", methods=["POST"])

def mars_post():

name_receive = request.form['name_give']

address_receive = request.form['address_give']

size_receive = request.form['size_give']

doc = {

'name': name_receive,

'address': address_receive,

'size': size_receive

}

db.mars.insert_one(doc)

return jsonify({'msg': '주문 완료!'})

- /mars를 통해 POST 방식으로 데이터를 보낸다.
- name, address, size를 name_re, address_re, size_re 변수에 담고 이것을 doc 딕셔너리에 저장 > mars DB에 저장한다.

insert_one() 메서드

이것은 MongoDB의 컬렉션 또는 데이터베이스 내에 단일 항목을 삽입 할 수있는 방법입니다. 컬렉션이 없는 경우 이 메서드는 새 컬렉션을 만들고 이 컬렉션에 데이터를 삽입합니다. 사전을 컬렉션에 삽입하려는 문서의 각 필드 이름과 값을 포함하는 매개 변수로 사용합니다.
이 메서드는 삽입된 문서의 ID를 보유하는 "_id" 필드가 있는 "~pymongo.results.InsertOneResult" 클래스의 인스턴스를 반환합니다. 문서에 "_id"필드가 지정되지 않은 경우 MongoDB는 "_id"필드를 추가하고 삽입하기 전에 문서에 고유 한 개체 ID를 할당합니다.

[참고링크] 파이썬 몽고DB – insert_one 쿼리
[참고링크] Pymongo에서 insert(), insertOne() 및 insertMany()의 차이점

▼ Client Code - index.html

fetch('/mars', {method: "POST",body: formData,}).then((res) => res.json()).then((data) => {

alert(data["msg"]);

window.location.reload();

});

}

</script>

- Client가 fetch를 통해 데이터를 주고, Server가 flask를 통해 → client에게 mesage를 보냄
- window.location.reload();를 통해 화면 새로고침

③ Server 만들기(DB연결)
- pymongo import 한다.

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbspart

④ Client 만들기
- input의 값을 가지고 오기
- name, address, size 정보를 FormData에 넣고 보내준다.

function save_order() {

let name = $("#name").val();

let address = $("#address").val();

let size = $("#size").val();

let formData = new FormData();

formData.append("name_give", name);

formData.append("address_give", address);

formData.append("size_give", size);

fetch('/mars', {method: "POST",body: formData,}).then((res) => res.json()).then((data) => {

alert(data["msg"]);

window.location.reload();

});

}

2.

Point of Realization

localhost:5000을 입력했는데, 열리지 않았다.
뭐지.. 뭘 잘못한거지 당황했는데, 완성 코드와 전체 코드를 다 비교해봐도 전혀 다른게 없었다.
TemplateNotFoud를 검색했더니 나와 같은 사람들이 엄청 많은 것 같다 ㅎㅎ

오타를 조심하자.. 지나간 자리도 다시 잘 보자 ㅎㅎ

저작자표시

'To day I learn' 카테고리의 다른 글

TodayILeurn 2023-03-25 (0)	2023.03.25
TodayILearn 2023-03-24 (0)	2023.03.24
TodayILearn 2023-03-23 (0)	2023.03.24
TodayILearn 2023-03-22 (0)	2023.03.23
TodayILearn 2023-03-20 (0)	2023.03.20

Monthly Plan 2023, March

SUN	MON	TUE	WED	THU	FRI	SAT
19 ① 웹개발 종합반 3주차 수강 完	20 ① 스파르타코딩 부트캠프 시작 ② 웹개발 종합반 4주차 Start	21	22	23	24	25
		① 웹개발 종합반 4주차 수강完	① 웹개발 종합반 5주차 수강完	① 웹개발 종합반 1~3주차 반복	① 웹개발 종합반 4~5주차 반복
26	27	28	29	30	31

Weekly I Learn

주차	배운것
3월 3주차	* * *
3월 4주차	* * *

Point of Realization

저작자표시

'Monthly Plan & WIL' 카테고리의 다른 글

Monthly Plan 2023, April (0)	2023.04.01

Frontend와 Backend 연결하기

스파르타 코딩클럽 웹개발 종합반 4차 - Flask로 본격 API 만들기

GET : 통상적으로 데이터를 조회(Read)할 때 사용한다.
POST : 통상적으로 데이터 생성(Creat), 수정(Update), 삭제(Delete) 할 때 사용한다.

1. GET 방식으로 Client에서 데이터 받기

app.py

from flask import Flask, render_template, request , jsonify

app = Flask(__name__)

@app.route('/')

def home():

return render_template('index.html')

@app.route('/test', methods=['GET'])

def test_get():

title_receive = request.args.get('title_give')

print(title_receive)

return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

if __name__ == '__main__':

app.run('0.0.0.0',port=5000,debug=True)

① GET으로 데이터를 요청하기위해 render_template 뒤에 request , jsonify 를 붙인다.

② @app.route('/test', methods=['GET'])

GET 요청으로 /test라는 창구로 들어온다.

③ request.args.get('title_give') 가져온 것을 title_receive 변수에 넣는다.

④ 그리고 개발자가 알 수 있게 print(title_receive) 하자.

⑤ return jsonify({'result':'success', 'msg': '이 요청은 GET!'}) 결과는 success, masage는 '이 요청은 GET!'하자

index.html

function hey() {

fetch("/test").then(res => res.json()).then(data => {

console.log(data)

})

}

</script>

fetch를 통해 데이터가 들어오는 것을 확인해보자.

① "/test"로 받아서 data를 console에 찍자.

localhost:5000으로 이동해서 버튼을 눌러보자.

버튼을 누르면 object가 생성되고 그 안에 python에서 return jsonify({'result':'success', 'msg': '이 요청은 GET!'}) 결과가 console 창에 찍히게 되는 것이다.

2. POST 방식으로 Client에서 데이터 받기

app.py

from flask import Flask, render_template, request , jsonify

app = Flask(__name__)

@app.route('/')

def home():

return render_template('index.html')

@app.route('/test', methods=['POST'])

def test_post():

title_receive = request.form['title_give']

print(title_receive)

return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

if __name__ == '__main__':

app.run('0.0.0.0',port=5000,debug=True)

① 버튼을 누르면 hey() 함수가 실행되면서 formData에 쌓인다.

② formData 데이터는 POST형식으로 담아 "/test"에 보낸다

③ fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {

console.log(data)

④ app.py의 'title_give' 데이터 꾸러미를 보내면

⑤ title_receive = request.form['title_give']

'title_give'는 '블랙펜서가 되고,

⑥ 'title_give' 는 title_receive니까 print(title_receive) 하면 '블랙펜서'가 파이썬 터미널에 뜬다.

⑦ 그리고 다 끝났으니까 return jsonify({'result':'success', 'msg': '이 요청은 POST!'}) 처리한다.
⑧ 이후에 'result':'success', 'msg': '이 요청은 POST!' 가 data 에 담기고 console.log(data) 처리를 한다.

index.html
<script>

function hey() {

let formData = new FormData();

formData.append("title_give", "블랙팬서");

fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {

console.log(data)

})

}

</script>

Point of Realization

Flask 설치부터 GET, POST 방식으로 Frontend와 Backend의 데이터 흐름에 대해 배웠다.
Frontend와 Backend로 데이터가 흘러가는 방식이 생소해 여러번 강의를 돌려서 들었는데, 그래도 헷갈리는 부분이 존재한다.

전체 4주차 강의를 모두 듣고 여러번 반복해서 이해가 필요할 것 같다.

무엇보다 개발을 배워보고싶었던 궁극적인 목표인 Frontend에서 데이터를 받아서 Backend에 어떻게 쌓이는지? 에 대한

궁금증이 한꺼풀 벗겨지는 것 같아서 흥미롭다.

Backend에 쌓인 데이터가 DB에 처리되는 것 까지 얼른 배워야 겠다 : )

'To day I learn' 카테고리의 다른 글

TodayILeurn 2023-03-25 (0)	2023.03.25
TodayILearn 2023-03-24 (0)	2023.03.24
TodayILearn 2023-03-23 (0)	2023.03.24
TodayILearn 2023-03-22 (0)	2023.03.23
TodayILeaun 2023-03-21 (0)	2023.03.21

1. python

크롤링 : 웹에 접속하여 솎아내는 작업
Venv 라이브러리가 실행 상태인지 확인 후 진행한다.

pip install bs4(beautifulsoup4) 설치

Spartaprac 파일 선택하고 pip install bs4 + enter

크롤링 기본 format 코드

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('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

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

# 코딩 시작

네이버 영화 페이지(https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829)

Select 복사

<그린북> 요소만 가져온다.

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('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

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

# 코딩 시작

a = soup.select_one('#old_content > table > tbody > tr:nth-child(3) > td.title > div > a')

print(a)

그린북 텍스트만 가져오기

a = soup.select_one('#old_content > table > tbody > tr:nth-child(3) > td.title > div > a')

print(a.text)

그린북의 url만 복사하기

a = soup.select_one('#old_content > table > tbody > tr:nth-child(3) > td.title > div > a')

print(a['href'])

네이버 영화의 제목만 가져오기
영화 제목 → F12(검사) → 복사(copy) → selector 복사(selector copy)

영화제목 2~3개 selector copy 후 공통 값을 찾기

#old_content > table > tbody > tr:nth-child(3)

#old_content > table > tbody > tr:nth-child(4)

# 코딩 시작

#old_content > table > tbody > tr:nth-child(3)

#old_content > table > tbody > tr:nth-child(4)

trs = soup.select('#old_content > table > tbody > tr')

for tr in trs : #tr에서 하나씩 꺼내서 trs에 넣자

print(tr)

영화 제목만 가져오자

# 코딩 시작

#old_content > table > tbody > tr:nth-child(2) > td.title > div > a

trs = soup.select('#old_content > table > tbody > tr')

for tr in trs : # tr에서 하나씩 꺼내서 trs에 넣자

a = tr.select_one('td.title > div > a') # tr까지 가져왔으니까 td~a까지 가져와서 a에 담자

print(a)

None은 a태그를 찾았는데 a태그가 없을 때 none이라고 뜬다.

바(bar)도 tr태그로 만들었기 때문이다.

# a is not None, a != None : a가 None과 같지 않다.

# a is None, a == None : a가 none과 같다

trs = soup.select('#old_content > table > tbody > tr')

for tr in trs :

a = tr.select_one('td.title > div > a')

if a is not None :

print(a.text)

영화 페이지의 순위, 제목, 평점만 가져오자

아래 두가지는 똑같이 작동한다.

# 코딩 시작
#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(3) > td:nth-child(1) > img
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs :
a = tr.select_one('td.title > div > a')
if a is not None :
title = a.text
rank = tr.select_one('td:nth-child(1) > img')
print(rank['alt'])

# 코딩 시작
#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(3) > td:nth-child(1) > img
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs :
a = tr.select_one('td.title > div > a')
if a is not None :
title = a.text
rank = tr.select_one('td:nth-child(1) > img')['alt']
print(rank)

# 코딩 시작
#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(3) > td:nth-child(1) > img
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs :
a = tr.select_one('td.title > div > a')
if a is not None :
title = a.text
rank = tr.select_one('td:nth-child(1) > img')['alt']
star = tr.select_one('td.point')
print(star.text)

# 코딩 시작
#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(3) > td:nth-child(1) > img
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs :
a = tr.select_one('td.title > div > a')
if a is not None :
title = a.text
rank = tr.select_one('td:nth-child(1) > img')['alt']
star = tr.select_one('td.point').text
print(star)

# 코딩 시작
#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(3) > td:nth-child(1) > img
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs :
a = tr.select_one('td.title > div > a')
if a is not None :
title = a.text
rank = tr.select_one('td:nth-child(1) > img')['alt']
star = tr.select_one('td.point').text
print(rank,title,star)

# 코딩 시작
#old_content > table > tbody > tr:nth-child(2) > td.point
#old_content > table > tbody > tr:nth-child(3) > td:nth-child(1) > img
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs :
a = tr.select_one('td.title > div > a')
if a is not None :
title = a.text
rank = tr.select_one('td:nth-child(1) > img')
star = tr.select_one('td.point')
print(rank['alt'],title,star.text)

2. DB 종류와 뜻

DB란 저장한 데이터를 잘 가져오기 위한 것이다.
SQL : RDBMS
틀(정해진 칸)에 정보를 넣는 것이다. / 대기업 용 등
NoSQL : not only SQL (SQL 뿐만이 아니다.)
MongoDB 내 마음대로 저장하는 것 / 비즈니스 유연성에 편리함
(예) A : 이름, 연락처, 이메일
B : 이름, 연락처, 나이, 주소
창업할때에는 NoSQL로 사용하다가 기업이 커지면 SQL로 사용하기도 한다.

3. MongoDB 설치하기

회원가입 : https://account.mongodb.com/account/register

내컴퓨터(python)과 MongoDB 연결하기

Pymongo 설치
pip install pymongo + enter

② dnspython 설치
pip install dnspython + enter

Pymongo 기본 탬플릿

from pymongo import MongoClient

client = MongoClient('여기에 URL 입력')

db = client.dbsparta

Pymongo로 이동하여 Connect → connect your application을 누른다.

DRIVER : Python 선택

VERSION : 3.6 or later 선택

복사 버튼 선택

[Close]한다.

복사한 url을 붙여넣어준다.

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:<password>@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

비밀번호 입력

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

Sparta DB에 딕셔너리 데이터 저장하기
아래 코드 입력 후 ctrl+save → '터미널에서 파이썬 실행하기'

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

doc = {

'name' : '영수',

'age' : 24

}

db.users.insert_one(doc)

Python에서는 아무일도 일어나지 않는다.

아래와 같이 오류가 나는 경우 비밀번호에 <>가 포함되었기 때문이다..

MongoDB에서 Browse Collections를 클릭한다.

sparta dbspace안에 Users라는 소그룹이 생성되었다.

4. pymongo로 mongoDB 조작하기(요약코드)

Pymongo 코드 요약

저장	doc = {'name':'bobby','age':21} db.users.insert_one(doc)
한 개 찾기	all_users = list(db.users.find({},{'_id':False}))
바꾸기	db.users.update_one({'name':'bobby'},{'$set':{'age':19}})
지우기	db.users.delete_one({'name':'bobby'})

DB에 데이터 저장하기

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

doc = {'name' : '영희','age' : 30}

db.users.insert_one(doc)

doc = {'name' : '철수','age' : 32}

db.users.insert_one(doc)

마우스 오른쪽 → 터미널에서 Python 파일실행

Python은 아무일도 일어나지 않는다.

REFRESH 해주면 영희, 철수 데이터가 추가된다.

Pymongo(find) 다 가져오기

all_users = list(db.users.find({},{'_id':False}))

{} : 조건
{'_id':False} : _id는 안보겠다.

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

all_users = list(db.users.find({},{'_id':False}))

for a in all_users:

print(a)

모든 유저 정보를 list형태로 담자

all_users를 프린트하자

1개만 가져오기

user = db.users.find_one({'name':'bobby'})

user = db.users.find_one({})

print(user)

데이터 변경하기
name이 '영수'를 찾아서 age를 19로 변경해라

db.users.update_one({'name':'영수'},{'$set':{'age':19}})

from pymongo import MongoClient

client = MongoClient('mongodb+srv://sparta:test@yi12dada.jjhctyy.mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

db.users.update_one({'name':'영수'},{'$set':{'age':19}})

데이터 삭제하기

name이 '영수'인 데이터를 찾아서 삭제하라

db.users.delete_one({'name':'영수'})

3주차 후기 : DB에 데이터까지 저장하다니!

너무 신기하고 재미있다 ㅎㅎ

단, 오타가 너무 심해서 진도가 안나간다 ㅎㅎㅎ

문법에 맞게 작성하고, 오타를 조심해야겠다

'BootChamp' 카테고리의 다른 글

웹개발종합반 1주차 개발일지 (0)	2023.03.19
웹개발종합반2주차 개발일지 (0)	2023.03.19

분명히 이미 해봤던건데 기억이 나지 않는다 ㅎ

이번 기회에 제대로 익혀서 내것으로 만들어야겠다.

html, css 주석 : Ctrl + /
콘솔 창 줄 바꿈 : shift + enter
코드 정렬 : Shift + Alt + F
들여쓰기 : Tap
그림 삽입 시 3줄이 세트

background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');

background-position: center;

background-size: cover;

가운데 정렬 시킬 때 4줄이 세트

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

이미지 어둡게 하기
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) , url

'BootChamp' 카테고리의 다른 글

웹개발종합반 3주차 개발일지 (0)	2023.03.20
웹개발종합반2주차 개발일지 (0)	2023.03.19