hj_ki.log

JS___2

Fri, 20 May 2022 09:02:08 GMT

5.20

Javascript

객체 기반의 스크립트 프로그래밍 언어 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능합니다.

Javascript 자료형

숫자형 ( number )

정수 및 부동소수점 숫자(foationg point number)를 나타낸다. 숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 '특수 숫자 값(special numeric value)'이 포함된다. Nan : 계산 중 에러가 발생했다는 것을 나타내주는 값

ex :: 문자열 / 숫자

et s = "가";
et n = 123;
console.log(s/n) ---> NaN

BigInt

표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없이 정수를 나타낼 수 있다. 정수 리터럴 끝에 n을 붙이면 만들 수 있다.

const bigInt = 1234343143432353312545325345n;

문자형 ( string )

문자열을 따옴표로 묶는다. 큰따옴표: "Hello" 작은따옴표: 'Hello' 역 따옴표(백틱, backtick): hello 역 따옴표로 변수나 표현식을 감싼 후 ${…}안에 넣어주면, 아래와 같이 원하는 변수나 표현식을 문자열 중간에 쉽게 넣을 수 있습니다.

let name = "John";

// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` ); // Hello, John!

// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); // the result is 3

불린형 ( boolean )

불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형입니다. 불린형은 긍정(yes)이나 부정(no)을 나타내는 값을 저장할 때 사용합니다. true는 긍정, false는 부정을 의미합니다.

let isGreater = 4 > 1;

alert( isGreater ); // true (비교 결과: "yes")

null

null 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값입니다. null 값은 오로지 null 값만 포함하는 별도의 자료형을 만듭니다.

let age = null;

let age = null;은 나이(age)를 알 수 없거나 그 값이 비어있음을 보여줍니다.

undefined

undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다. undefined 값도 null 값처럼 자신만의 자료형을 형성합니다. 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.

let age;

alert(age); // 'undefined'가 출력됩니다.

개발자가 변수에 undefined를 명시적으로 할당하는 것도 가능하긴 합니다. ( 권장하지 않음 )

let age = 100;

// 값을 undefined로 바꿉니다.
age = undefined;

alert(age); // "undefined"

객체형 ( object )

객체(object)형은 특수한 자료형입니다. 객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라 부릅니다.

반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있습니다.

원시값 : 객체를 제외한 모든 타입은 불변 값(변경할 수 없는 값)을 정의합니다. (C언어와는 달리) 문자열은 불변합니다. 이런 일련의 타입을 "원시값"이라고 합니다.

심볼형 ( symbol )

심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용됩니다.

undefined , null

undefined -- 변수 선언 후, 값을 할당하지 않은 상태 ( 자료형이 없는 상태 )

선언만 하고 초기화 되지 않은 변수의 타입이나 값
객체에 정의 되지않은 속성의 타입이나 값

null -- 변수 선언 후, 빈 값을 할당한 상태 ( 빈 객체 )

명시적으로 아무것도 없는 비어있는 상태를 나타낸다.
typeof = Object이며 값은 null 이다.

== , ===

== )) value와 value를 비교한다 === )) value와 data type을 비교한다

let a = 5; 
a = 5 // true
a = "5" // true

a === 5 // true
a === "5" // false

++ typeof 연산자 typeof 연산자는 인수의 자료형을 반환합니다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용합니다. typeof 연산자는 두 가지 형태의 문법을 지원합니다.

연산자: typeof x 함수: typeof(x)

ypeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

Math는 수학 연산을 제공하는 내장 객체이므로 "object"가 출력됩니다.
typeof null의 결과는 "object"입니다. null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황입니다.
언어 자체의 오류*이므로 null이 객체가 아님에 유의합니다.
typeof는 피연산자가 함수면 "function"을 반환합니다. 그러므로 typeof alert는 "function"을 출력해줍니다.
그런데 '함수’형은 따로 없습니다. 함수는 객체형에 속합니다. * 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황입니다.

Javascript 문제점

브라우저에 종속적 브라우저에서 돌아가는 Javascript는 브라우저에 종속적일 수 밖에 없다. 내가 작성한 Javascript 코드가 어떤 브라우저에서 돌아가느냐에 따라 개별적으로 신경써줘야할 부분이 많다는 것을 의미한다. 문제가 없던 코드도 브라우저의 정책이나 지원에 따라 다르게 작동할 수 있다는 것이다.
불변성을 제공해주지 않는다는 것 함수형 프로그래밍을 지원하는 것이 장점인 Javascript, 함수형과 밀접한 관계인 불변성을 지원하지 않는다는 건 꽤 모순적이다. 함수형이 대세로 떠오르는 요즘 같은 때에는 치명적인 단점이라고 볼 수 있다.
동적 언제든 속성을 추가, 삭제, 수정할 수 있다. 클래스 밖에서도 언제든 클래스의 속성을 바꿀 수 있다. 함수형 프로그래밍에서 불변성은 아주 중요한 개념인데, Javascript는 너무 쉽게 객체를 변경시킬 수 있다.

const라는 키워드만으로는 함수형 프로그래밍이 요구하는 수준의 불변성을 실현하기 어렵다.

const*로 객체 선언 후 객체의 주소값 자체를 변경시킬 수는 없지만, 객체 내부의 속성이 변경되는 것 까지는 막지 못한다.

객체의 속성값에 어떤 값이 추가되든 수정되든 기존 객체의 주소값은 동일한데, 그것까지 const가 캐치할 수 없다. 정확히 얘기하면 const는 할당된 값이 상수가 되는 것이 아니고, 바인딩 된 값이 상수가 되는 것

Javascript 객체, 불변성

Immutability(변경불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다. Immutability은 함수형 프로그래밍의 핵심 원리이다.

객체는 참조(reference) 형태로 전달하고 전달 받는다. 의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 “레퍼런스를 참조한 다른 객체에서 객체를 변경”하기 때문이다.

var str = 'Hello';
str = 'world';

‘Hello’를 수정하는 것이 아니라 새로운 문자열 ‘world’를 메모리에 생성하고 식별자 str은 이것을 가리킨다. 이때 문자열 ‘Hello’와 ‘world’는 모두 메모리에 존재하고 있다. 변수 str은 문자열 ‘Hello’를 가리키고 있다가 문자열 ‘world’를 가리키도록 변경되었을 뿐이다.

데이터 타입 ( 기본형 , 참조형 )

기본(원시)형 : Number, String, Boolean, null, undefined, Symbol 기본형 데이터들은 그 자체로 비교가 가능하다.

참조형 : 대표적으로 객체(Object) 그 하위에 배열(Array), 함수(Function), 정규표현식(RegExp), Map, Set, WeakMap, WeakSet 참조형 데이터들은 프로퍼티(property)와 데이터(data), 즉 key = value로 묶인 쌍들로 이루어져 있습니다. 프로퍼티명은 변수와 비슷한 성질을 지니고 있고 변수명과 실제 데이터는 주소값을 통하여 연결되어 있는데 프로퍼티와 데이터 사이에서도 같은 동작을 합니다.

두 타입의 가장 대표적인 차이

기본형에는 바로 값을 그대로 할당한다는 것
참조형에는 값이 저장된 주소값을 할당(참조) 한다는 것

Javascript 형변환 ( 원시형의 형변환 )

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환 된다. 이런 과정을 형 변환이라고 한다. ex :: aleat가 전달받은 값의 자료형과 관계없이 이를 문자열로 자동 변환하여 보여주는 것 ex :: 산술 연산을 위해 전달받은 값을 숫자로 변환하는 경우

문자형 변환

String(value) 함수를 호출해 전달받은 값을 문자열로 변환 할 수도 있습니다.

let value = true;
alert(typeof value); // boolean

value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다.
alert(typeof value); // string

숫자형 변환

Number(value) 함수를 사용하면 주어진 값(value)을 숫자형으로 명시해서 변환할 수 있습니다.

let str = "123";
alert(typeof str); // string

let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다.

alert(typeof num); // number

숫자형 값를 사용해 무언가를 하려고 하는데 그 값을 문자 기반 폼(form)을 통해 입력받는 경우엔, 이런 명시적 형 변환이 필수입니다.
null과 undefined은 숫자형으로 변환 시 결과가 다르다는 점에 유의하시기 바랍니다. null은 0이 되고 undefined는 NaN이 됩니다.

불린형 변환

이 형 변환은 논리 연산을 수행할 때 발생합니다 숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로도 “비어있다고” 느껴지는 값들은 false가 됩니다. 그 외의 값은 true로 변환됩니다.

alert( Boolean(1) ); // 숫자 1(true)
alert( Boolean(0) ); // 숫자 0(false)

alert( Boolean("hello") ); // 문자열(true)
alert( Boolean("") ); // 빈 문자열(false)

불변 객체를 만드는 방법

어떤 객체 내부의 프로퍼티들을 변경할 수 없도록 되어있는 객체

Object.freeze()

Javascript에서 기본적으로 제공하는 메소드인 Object.freeze() 메소드 공식 문서에서는 "객체를 동결하기 위한 메소드"라고 적혀있다.

let test = {
    name : 'kim'
}
Object.freeze(test);

test변수에key value를 가진 객체를 바인딩 후 Object.freeze(test)를 사용해 바인딩 된 변수를 동결 객체로 만들었다. 때문에 test 객체는 객체의 속성을 변경하는 시도가 불가능하다.

test.name = 'Jung';
console.log(test) // {name: 'kim'}

▲▲▲위와 같은 속성을 변경하는 시도는 무시된다.

하지만... 객체의 재할당이 가능하다.

test = {
    age : 15
};
console.log(test);

때문에 Object.freeze()도 불변 객체라고 할 수는 없다..

const와 Object.freeze()를 조합한다면...?

const(재할당 불가) + Object.freeze() (개체속성 변경불가)

▼▼▼ 이렇게 사용 가능하다.

const test = {
    'name' : 'jung'
};

Object.freeze(test);

객체의 재할당, 객체의 속성 변경을 금지하는 불변 객체가 된다.

얕은 복사, 깊은 복사

얕은 복사 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다. 객체 안에 객체가 있는 경우 한 개의 객체라도 기존 변수의 객체를 참조하고 있다.

const a = 'a';
let b = 'b';
b = 'c';
console.log(a); // 'a';
console.log(b); // 'c';

기존 값에 영향을 끼치지 않는다.

깊은 복사 객체의 실제 값을 복사 깊은 복사된 객체는 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체이다.

const object = {
a: "a",
number: {
one: 1,
two: 2,
},
arr: [1, 2, [3, 4]],
};
const copy = JSON.parse(JSON.stringify(object));
copy.number.one = 3;
copy.arr[2].push(5);
console.log(object === copy); // false
console.log(object.number.one === copy.number.one); // false
console.log(object.arr === copy.arr); // false
console.log(object); // { a: 'a', number: { one: 1, two: 2 }, arr: [ 1, 2, [ 3, 4 ] ] }
console.log(copy); // { a: 'a', number: { one: 3, two: 2 }, arr: [ 1, 2, [ 3, 4, 5 ] ] }

출처: https://bbangson.tistory.com/78 [뺑슨 개발 블로그]

호이스팅, TDZ

호이스팅이란? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다.
let, const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.

다만, 선언과 초기화를 함께 수행하는 경우 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의해야 한다.

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

catName("호랑이");

/*
결과: "제 고양이의 이름은 호랑이입니다"
*/

↑ 결과는 같다 ↓

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/

선언만 호이스팅 대상

JavaScript는 초기화를 제외한 선언만 호이스팅합니다. 변수를 먼저 사용하고 그 후에 선언 및 초기화가 나타나면, 사용하는 시점의 변수는 기본 초기화 상태(var 선언 시 undefined, 그 외에는 초기화하지 않음)입니다.

console.log(num); // 호이스팅한 var 선언으로 인해 undefined 출력
var num; // 선언
num = 6; // 초기화

console.log(num); // ReferenceError
num = 6; // 초기화

선언 없이 초기화만 존재하기 때문에 호이스팅이 없고, 변수를 읽으려는 시도에서 ReferenceError 예외가 발생

TDZ

스코프의 시작 지점부터 초기화 시작 지점까지의 구간 ( Temporal Dead Zone )

변수 선언 3단계 선언 단계(Declaration phase)
공간을 확보하고 변수명과 주소를 매칭시키는 과정 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다.

초기화 단계(Initialization phase) 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계 입니다. 이 단계에서 할당된 메모리에는 undefined로 초기화 됩니다.

할당 단계(Assignment phase) 해당 변수가 가리키는 주소의 공간에 데이터를 저장하는 과정 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계 입니다.

함수 선언식, 함수 표현식

함수 선언식 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것

함수 표현식 정의한 function을 별도의 변수에 할당하는 것

함수 선언식과 함수 표현식의 차이 (호이스팅)

함수 선언식은 함수 전체를 호이스팅 합니다. 정의된 범위의 맨 위로 호이스팅 돼서 함수 선언 전에 함수를 사용할 수 있다는 것

함수 표현식은 별도의 변수에 할당하게 됩니다. 변수는 선언부나 할당부를 나누어 호이스팅 하게 됩니다.

:: ex

sum(50, 50); // 100
minus(100, 50) // Uncaught TypeError: minus is not a function

function sum(a, b) { // 함수 선언식
  return a + b;
}

var minus = function (a,b) { // 함수 표현식
  return a - b;
}

var minus = function (a,b) { // 함수 표현식
  return a - b;
}

sum(50, 50); // 100
minus(100, 50) // 50

function sum(a, b) { // 함수 선언식
  return a + b;
};

함수 선언식으로 작성한 함수는, 함수 전체가 호이스팅 된다고 하였는데, 전역적으로 선언하게 되면, 중복적으로 동명의 함수를 쓰게 될 수 있다. 이를 방지하려면 함수 표현식으로 작성하면 된다.

var 변수 라이프사이클 ▼▼▼

var 키워드 변수는 변수를 선언하기 전에 선언 단계와 초기화 단계를 동시에 진행한다.

그래서 Javascript는 실행 컨텍스트 변수 객체의 변수를 등록하고 메모리를 undefined로 만들어 버린다.

그렇기 때문에 변수를 선언하기 전에 호출을 해도 undefined로 호출이 되는 호이스팅이 발생한다.

let 변수 라이프사이클 ▼▼▼

let으로 선언된 변수는 var 키워드와는 다르게, 선언 단계와 초기화 단계가 분리되어서 진행된다.

그렇게 때문에 실행 컨텍스트에 변수를 등록했지만, 메모리가 할당 되지 않아 접근할 수 없어 참조 에러(ReferenceError)가 발생한다. 이것을 보고 우리는 호이스팅이 되지 않는다고 오해할 수 있었다.

let 또한 선언 전, 실행 컨텍스트 변수 객체에 등록이 되어 호이스팅이 되지만, TDZ 구간에 의해 메모리가 할당되지 않아서 참조 에러(ReferenceError)가 발생하는 것이다.

실행 컨텍스트 & 콜 스택

실행할 코드에 제공할 환경 정보들을 모아놓은 객체 Javascript의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.

Javascript는 실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생한다.

호이스팅 발생 ( 선언된 변수를 위로 끌어올린다 )
외부 환경 정보를 구성
this 값을 설정

이로 인해 다른 언어에서 발견할 수 없는 특이한 현상들이 발생한다.

실행 컨텍스트 구성

전역공간은 자동으로 컨텍스트로 구성
함수를 실행
eval() 함수를 실행
block을 생성 ▲▲▲▲▲ 위의 것을 이용하면 call stack에 쌓이게 된다.

var a = 1; // 전역 컨텍스트
function outer () { // outer 컨텍스트
  function inner () { // inner 컨텍스트
    console.log(a); // undefined
    var a = 3;
    console.log(a); // 3
  }
  inner();
  console.log(a); // 1
}
outer();
console.log(a); // 1

항해99 1주차 회고록

Sun, 15 May 2022 14:45:16 GMT

5.9 ~ 5.12

1. 미니프로젝트

첫 미니프로젝트라 걱정이 됐지만, 한편으로는 설레는 마음으로 한 주를 시작했다. 이런 복잡한 마음들 속에서 첫 팀원들을 만났고, 그렇게 프로젝트는 시작되었다. 시작하기 전에 토론을 하며 각자 아이디어를 늘어놓았다. 사전 공부를 할 때 한번씩 만들어봤던 '영화 포스터 리뷰 웹 사이트'를 구현하기로 결정했다. 프로젝트 결정 후, 와이어프레임을 작성하며 웹 페이지의 경로? 동작 방식을 작성했다. 미니 프로젝트의 내용은 이렇다. 네이버 영화의 url을 입력하여 영화 포스터를 등록할 수 있고 회원과 비회원을 구분하여 포스터 등록 및 리뷰 작성을 제한하는 main.html 페이지, 해당 포스터를 클릭했을 때 리뷰를 작성할 수 있는 detail.html 상세 페이지, ID, PASSWORD를 입력하여 중복확인 및 회원가입을 할 수 있는 signup.html 페이지, DB에 저장되어있는 회원정보를 비교하여 정보가 같은 회원만 로그인할 수 있는 login.html 페이지 총 4개의 html 페이지와 post, get 방식으로 사용자의 정보를 저장하고 전달하는 app.py python파일로 나누어져 있다. css는 부트스트랩을 이용해 해결하였고 필요한 이미지는 직접 img폴더에 저장해서 사용하였다. 4일동안 팀원들 모두 열정적으로 프로젝트에 임했고, 그 결과는 우리 모두를 뿌듯하게 만들어 주었다. 아쉬웠던 점은 구글링하며 필요한 기능을 찾고 에러가 나는 부분에서는 몇 시간이 걸려도 해결이 안될 때가 있었다. 완성하는 것에 너무 중점을 둬서, 중간 중간에 완벽하게 이해하지 못한 부분도 넘어가는 경우가 종종 있었고, 프로젝트가 끝난 시점에서 생각해보면 github 사용에 미숙한 부분도 많이 느껴졌다. 하지만 서툴고 부족했던 지식 덕분에 보완해야 될 부분들이 잘 부각되어서, 큰 성과를 얻었다고 생각한다. 미니 프로젝트를 경험으로, 앞으로 만들게 될 프로젝트는 더 나아질 것이라고 확신한다.

main.html

login.html

signup.html

detail.html

Github link :

5.13 ~ 5.14

2. Javascript 기초 및 알고리즘 문제해결 ( 코딩 문제 해결 및 풀이 )

React 주특기를 배우기 전, 같은 주특기를 선택한 팀원들과 새로운 학습을 시작하였다. VSCODE를 설치하여 개발환경을 세팅했고 Javascript의 간단한 기초 문법들을 공부하며, 프로그래머스 1단계 난이도에 해당하는 문제들을 풀어보았다. 얼마 전까지만 해도 파이썬 언어의 문법이 익숙해졌었는데, 그것도 아주 잠깐이었다. 프론트엔드 개발자가 되기 위해 React를 선택한 나로서는 파이썬 언어의 문법 보다는
Javascript의 문법과 메서드 등을 공부하여, Javascript 형식으로 코딩 문제를 푸는 것이 효율적이라고 판단하였다. 이때까지 문제를 풀면서 느낀 점은, 문제 해결을 하는 것보다 Javascript에 대한 지식이 나에겐 더 필요하다고 느껴진다.
문법이나 메소드를 알지 못하면 코드가 간결하지 못하고, 문제를 푸는데 있어서 어려움을 느낀다. 가끔 자신있게 풀었던 문제도 있지만, 어떤 문제는 해석만 하고 건드리지 못한 문제도 있었다. 다음 문제로 넘어갈 때, 늘 새로움을 느낀다는 것은 아직 풀어야 될 문제가 많이 남았다는 뜻이기도 하다. 꾸준히 문제를 풀어보고 익숙해져야겠다,,

JS___1

Fri, 13 May 2022 11:59:32 GMT

5.13(금)

실습환경 만들기

개발환경 세팅 ! React - Node.js를 이용한 VSCode JS 실행하기 :

Node.js 설치 먼저, 아래 사이트에서 최신 버전 Node.js를 다운로드 한다 https://nodejs.org/ko/

VS Code (Visual Studio Code) 설치 다음으로는 Node.js의 가장 많이 사용되는 개발 툴인 VS Code를 설치합니다. MS사에서 만든 오픈소스 IDE로 설치도 간편하고 가볍고 사용이 편리합니다. 아래의 공식 사이트에서 자신의 OS에 맞는 설치 파일을 다운로드합니다. https://code.visualstudio.com/download

Node.js 프로젝트 생성 및 실행

VS Code 프로그램으로 가서 상단 메뉴에 File > Open Folder를 선택하여, 방금 생성한 폴더를 선택합니다.

아래와 같이 Explorer 탭이 오픈이 되고, 방금 내가 오픈한 폴더가 리스트에 있는 것을 확인하실 수 있습니다.

상단 메뉴바에서 View > Terminal을 눌러서 터미널을 오픈해줍니다. 아래와 같이 하단에 터미널이 오픈이 됩니다. 이렇게 터미널을 보면서 VS CODE 내에서 진행을 하는 것이 창이동 없이 더 편합니다.

터미널 오픈 화면

이제 Node.js를 설치할 때 자동으로 설치되는 자바 패키지 관리 모듈인 NPM을 이용해서 프로젝트의 package.json 파일을 생성합니다. package.json 파일은 Node.js의 프로젝트 기본 정보, 의존성 정보 등을 저장하는 json 파일로 JAVA Maven 프로젝트의 pom.xml과 유사한 역할이라고 생각하시면 됩니다.

하단 터미널 창에 NPM init이라는 명령을 치면, 프로젝트의 기본정보를 작성하도록 여러 항목들이 나옵니다. 실제로 작성을 하셔도 되고, 엔터를 계속 클릭하셔서 Default 값으로 세팅된 파일을 만들도록 해도 됩니다.

다 작성이 되면 프로젝트 폴더에 package.json 파일이 생성됩니다.

npm init

프로젝트 최초 실행 자바스크립트 파일인 index.js 파일을 생성

생성된 index.js을 열어서 아래와 같이 콘솔 로그를 찍도록 간단히 코드를 작성 console.log("노드js 프로젝트 시작!!")

우측 Run and Debug 탭으로 이동을 하면, VS code에서 프로젝트 실행에 필요한 launch.json 파일이 아직 없기 때문에, 아래와 같이 create a launch.json file이라는 버튼이 보입니다. 이 버튼을 클릭하여 launch.json을 생성합니다

그러면 아래와 같이 Launch Type을 선택하도록 되어 있는데, 당연히 Node.js를 선택합니다. 그러면 launch.json 파일이 생성되는 것을 확인할 수 있습니다.

이제 VS code에서 프로젝트 실행은 Run and Debug 탭으로 이동하여 해당 Launch name을 선택 후 F5 버튼 혹은 아래 화살표 버튼을 클릭하면 Node.js 프로젝트가 정상적으로 실행이 되는 것을 확인할 수 있습니다.

JavaScript 실습 (코딩문제 풀기)

문제1) 두 개의 정수 n, m을 입력, 별(*)문자를 이용해 가로길이 n, 세로길이 m인 직사각형 형태를 출력하기

process.stdin.setEncoding('utf8');
process.stdin.on('data', data => { 
    const n = data.split(" "); // 입력값에 공백으로 구분

    const a = Number(n[0]); // 입력값 5
    const b = Number(n[1]); // 입력값 3

    const star = "*".repeat(a) // a 입력값만큼 *을 반복

    for(let i = 0; i < b; i++){
        console.log(star)
    }
});

실행 결과

"*".repeat(a) 메서드 : 주어진 횟수만큼 반복해 새로운 문자열 반환 !

문제2) 정수num이 짝수일 경우 "Even"을 반환, 홀수인 경우 "Odd"를 반환하는 함수 작성하기

function solution(num) {
    var answer = '';
    if(num % 2 == 0){
        return answer = "Even"
    } else {
        return answer = "Odd"
    }
}

num % 2 == 0 : 나머지 값을 구하는 산술 연산 !

문제3) 단어 s의 가운데 글자를 반환하는 함수, solution을 만들기 단어의 길이가 짝수라면 가운데 두글자를 반환

function solution(s) {
    var answer = '';
    if(s.length % 2 == 0) { 
        answer = s[s.length / 2 -1] + s[s.length / 2];
    } else { 
        answer = s[Math.floor(s.length / 2)]
    }
    return answer;
}

% 연산으로 홀수/짝수 구분 !
짝수 == 반으로 나눈 값과 그 값의 -1인덱스값을 함께 출력 ! ( 4 : 1,2 )
홀수 == Math.floor를 사용해 반으로 나눈 값의 소수점을 반내림한다. ( 3 : 1 )

문제4) 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수 완성하기 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다.

function solution(a, b) {
    var sum = 0;
    if(a < b){
        for(let i = a; i <= b; i++){ // 입력값a ~~ 입력값b 까지 반복 
            sum = sum + i; // a ~ b 값 sum에 더하기
        }
    } else if(a > b) { // 입력값b ~~ 입력값a 까지 반복
        for(let i = b; i <= a; i++){
            sum = sum + i; // a ~ b 값 sum에 더하기
        }
    } else {
        sum = a; // 같은 경우 a 출력
    }
    return sum;
}

간단하게 if문 안에 for문을 넣어 작성했다.

문제5) 문자열 s를 숫자로 변환하는 함수 작성하기

function solution(s) {
    var answer = 0;
    var answer = Number(s);
    return answer;
}

문제6) 없는 숫자 더하기

0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.

function solution(numbers) {
    var sum = 0;

    for(let i =0; i<=9; i++){
        if(!numbers.includes(i)) {  // numbers.includes(a) = numbers 안에 a가 포함되어 있는지 체크
            sum = sum + i;
        }
    }
    return sum;
}

.includes() = 괄호 안의 값을 포함하는지 확인한다 true , false 반환

5.14(토)

문제7) 음양 더하기

어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.

function solution(absolutes, signs) {
    var answer;
    var sum = 0;
    for(let i =0; i < absolutes.length; i++) { // absolutes의 값 읽기
        if(signs[i] == true) { // signs[index] 가 true이면
            sum = sum + absolutes[i]; // 변수 sum에 absolutes[index] 더하기
        } else { // false이면
            sum = sum - absolutes[i]; // 변수 sum에 absolutes[index] 빼기 
        }
    }
    return sum;
}

입력값이 가지는 타입을 정확히 파악하기

문제8) 평균 구하기 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요.

function solution(arr) { var answer = 0; let sum = 0; let avg = 0; for(let i =0; i

문제9) 핸드폰 번호 가리기

프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.

function solution(phone_number) {
    var answer='';
    for(let i = 0; i < phone_number.length; i++){
        if(answer.length < phone_number.length-4){
            answer = answer + "*";
        }
        else {
            answer = answer + phone_number[i];
        }
    }
    return answer;
}

길이를 -연산으로 구분하여 영역 나누기 / + repeat함수 사용 가능 ( * )

문제10) 행렬의 덧셈

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.

function solution(arr1, arr2) { var answer = []; for(let i =0; i

행과 열을 잘 구분하여 헷갈리지 않기 !

문제11) x만큼 간격이 있는 n개의 숫자

함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요.

function solution(x, n) {
    var answer = [];
    for(let i = 1; i<=n; i++){
        answer.push(x*i);
    }
    return answer;
}

.*push() *: 괄호 안의 값을 배열에 추가

문제12) 부족한 금액 계산하기

새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다.

놀이기구를 count번 타게텍스트 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를

return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요

function solution(price, money, count) {
    var result = 0;
    var price_sum = 0;
    for(let i = 1; i <= count; i++){
        price_sum = price_sum + i * price;
    }
    if(price_sum > money) {
        result = price_sum - money;
        return result;
    }

    return result;
}

입력값 구분, 계산, 결과값 정리해서 풀기

5/16(월)

문제14) 나누어 떨어지는 숫자 배열

array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요.

function solution(arr, divisor) {
    var answer = [];
    for(let i = 0; i < arr.length; i++){
        if(arr[i] % divisor == 0){ // 나눈 값의 나머지가 0이면 배열에 넣기
            answer.push(arr[i]);
        }
    }
    if(answer.length == 0) { // 배열에 값이 없다면 -1 넣기
        answer.push(-1);
    }
    answer.sort((a,b) => a - b); // answer 배열 오름차순 
    return answer;
}

.push()
.sort((a,b) => a - b) 오름차순 정렬

문제15) 내적

길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요.

이때, a와 b의 내적은 a[0]b[0] + a[1]b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이)

function solution(a, b) {
    var answer = 0;
    for(let i = 0; i < a.length; i++){
        answer = answer + a[i] * b[i] // a[i] * b[i] --> answer에 누적
    }
    return answer;
}

*각 배열의 인덱스 값을 곱하여 더하기 a[0] b[0] + a[1] b[1] *

문제16) 문자열 내 p와 y의 개수

대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다.

예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다.

function solution(s){
    var answer = true;
    var p = 0;
    var y = 0;
    for(let i = 0; i < s.length; i++) {
        if(s[i] == 'p' || s[i] == 'P') {
            p = p + 1;
        }
        else if(s[i] == 'y' || s[i] == 'Y') {
            y = y + 1;
        }
    }
    return (p == y) ? true : false;
}

for문을 이용해서 p,P y,Y 값 변수에 담아주기
( p == y ) ? true : false ::** [조건] ? [true] : [false] **

문제17) 문자열 다루기 기본

문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다.

function solution(s) {
    var answer = parseInt(s);

    if((s.length == 4 || s.length == 6) && s == answer) {
        return true;
    } else {
        return false;
    }
    return answer;
}

parseInt(s) : 문자열을 파싱하여 문자열에 포함된 숫자를 찾아서 number로 형변환, 문자열이 숫자로 시작한다면 숫자로 리턴, 숫자로 시작하거나, 숫자를 포함하지 않는 문자열의 경우는 NaN으로 반환

문제18) 서울에서 김서방 찾기

String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다.

function solution(seoul) {
    let kim = 0;
    for(let i = 0; i < seoul.length; i++){
        if(seoul[i] == "Kim"){
            kim = kim + i;
        }
    }
    var answer = '김서방은 ' + kim + '에 있다';
    return answer;
}

"kim" 문자를 찾는다면 해당 인덱스값을 변수에 저장
간결하게 하려면 indexOf() 사용할 것
indexOf() : 특정 문자 위치 찾기

5.17(화)

Javascript 기초

입력 및 메세지

console.log(name);
alert(age);
prompt('생년월일 입력하세요.');
confirm('삭제 하시겠습니까?);

조건문

if(user.name && user.age > 19){
    console.log('성인 입니다');
    } else {
        return false;
}

반복문

for(let i = 0; i < 10; i++){
   console.log(i);
}

함수

function add(num1, num2) {
    console.log(num1+num2);
}

Object

const user = {
    name : 'Mike',
    age : 30,
}

배열

const users = ['Mike', 'Jane'];

함수 표현식

let showError = function() {
  console.log('error');
}

함수 선언문

function showError() {
   console.log('error');
}

화살표 함수

let showError = () => {
   console.log('error');
}

변수의 생성과정

선언 단계
초기화 단계
할당 단계

var ( 함수 스코프 - function-scoped )

선언 및 초기화 단계
할당 단계

let ( 블록 스코프 - block=scoped )

선언 단계
초기화 단계
할당 단계

const ( 블록 스코프 - block=scoped )

선언 + 초기화 + 할당

코드 블록 함수, if문, for문, while문, try/catch 문 등 안에서만 사용 가능 ( 지역변수 )

let = "변하는 변수" const = "상수" ( 대문자로 표현할 것 ) prompt = "값을 입력받을 때 사용" prompt( "예약일을 입력하세요" , "2020-10-" ) default 값 입력가능 입력 없이 취소할 경우 null 값을 반환 confirm = "뭔가 확인 받을 때 사용" // 확인(true) 취소(false) 메세지박스

호이스팅 : 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동

5.18(수)

null, undefined

undefined - 아무 값도 할당받지 않은 상태 null - 비어잇는, 존재하지 않는 값 ( 값의 부재 )

객체, 함수

함수(Function) - 여러 개의 프로그램 명령들을 모아 놓은 것 객체(Object) - 프로그램이 실행 중 사용하는 데이터, 객체의 크기와 종류는 다양하다. 한편으론 값이 들어있는 즉 공간을 말하기도 한다.

*함수에 return 값을 주면 값을 반환하여 그 값을 다른 코드에서 사용할 수 있다. *

const caculator = {
    add: function(a,b){
        console.log(a+b);
    },
    minus: function(a,b){
        console.log(a-b);
    },
    times: function(a,b){
        console.log(a*b);
    },
    divide: function(a,b){
        console.log(a/b);
    },
    power: function(a,b){
        console.log(a**b);
    }
};
caculator.power(3,9);
caculator.divide(10,3);
caculator.add(4,5);

const plusResult = caculator.add(2,3); // 5
const minusResult = caculator.minus(plusResult, 3); // 5 - 3
const powerResult = caculator.power(plusResult, 2); // 5 * 5
const timesResult = caculator.times(minusResult, powerResult); // 2 * 25
console.log(plusResult, minusResult, powerResult, timesResult);

객체 안의 함수를 호출

console.log()
player.msg()
caculator.add(1,2)

함수와 메서드의 차이

함수(function)라는 것은 어떠한 기능을 수행하는 친구이다. 각 함수마다 나름의 기능을 가지고 있다. 지금도 누군가 함수를 만들고 있기 때문에, 함수의 수는 절대 셀 수 없다. 메소드(method)는 함수처럼 어떠한 기능을 수행하는 친구이다. 하지만 메서드는 클래스 및 객체(object)와 연관되어 있는 함수이다. 클래스 내에 선언되어 있는 함수가 바로 메소드이다.

클래스 및 객체와 연관되어 있는 것이라면 메소드, 그것들과 상관없이 독립적으로 존재하는 것은 함수이다. 함수가 메소드보다 더 큰 개념이라고 생각할 수 있다.

This

Javascript 예약어

자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.
this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
this는 Javascript 엔진에 의해 암묵적으로 생성된다.
this는 코드 어디서는 참조할 수 있다.
하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.
함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다.
함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다.
단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
크게 전역에서 사용할 때와 함수안에서 사용할 때로 나눌 수 있다.

👉 바인딩이란?

식별자와 값을 연결하는 과정을 말한다.
변수선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩하는 것이다.
this 바인딩은 this(키워드로 분류되지만 식별자의 역할을 한다)와 this가 가리킬 객체를 바인딩하는 것이다.

❗️this를 전역에서 사용한 경우

브라우저라는 Javascript 런타임의 경우에 this는 항상 window라는 전역 객체를 참조한다.
전역 객체란 전역 범위에 항상 존재하는 객체를 의미한다. (Node.js에서 전역 객체는 global)
브라우저라는 Javascript 런타임에서 모든 변수, 함수는 window라는 객체의 프로퍼티와 메소드이다.

❗️this를 함수 내부에서 사용한 경우

함수는 전역에 선언된 일반 함수와 객체 안에 메소드로 크게 구분할 수 있다.
객체안에 선언된 함수를 전역에 선언된 함수와 구분하기 위해 메소드라고 한다.
그런데 전역에 선언된 일반 함수도 결국 window 전역 객체의 메소드다.
즉, 모든 함수는 객체 내부에 있다.
이때 this는 현재 함수를 실행하고 있는 그 객체를 참조한다.
정리하면 함수 내부에서 this의 값은 함수를 호출하는 방법에 의해 바뀐다.
그리고 또한 엄격 모드 여부에 따라 참조 값이 달라진다.
엄격 모드에서 일반 함수 내부의 this는 undefinded 가 바인딩 된다.

⚡️ this의 사용

❗️전역에 선언된 함수에서 this

function myFn () {
    return this;
}

myFn(); // window 객체 출력

new 연산자를 사용해서 생성자 함수방식으로 인스턴스를 생성한 경우

생성자 함수 MyFn가 빈 객체를 만들고 이 생성자 함수에서 this가 이 빈 객체를 가리키도록 설정

function MyFn() {
this.title = 'Hello World!';
return this;
}
// new 연산자를 이용해서 새로운 객체를 얻는다.
const myfn = new MyFn();
myfn // MyFn {title: 'Hello World!'}

❗️객체의 메소드 함수에서 this

method → obj 인 경우이다.

showTitle() 메소드는 fn 객체의 메소드이기 때문에 this는 fn 객체를 참조

const fn = {
title: 'Hello World!',
showTitle() {
  console.log(this.title);
}
};
fn.showTitle(); // 'Hello World!'

고차 함수의 콜백함수 안에서 this는 콜백함수가 일반 함수이기 때문에 전역 객체를 참조

const fn = {
title: 'Hello World!',
tags: [1, 2, 3, 4],
showTags() {
  this.tags.forEach(function(tag) {
    console.log(tag);
    console.log(this); // window
  });
}
}
fn.showTags();
// 1
// window 객체 출력
// 2
// window 객체 출력
// 3
// window 객체 출력
// 4
// window 객체 출력

콜백함수 다음 인자로 참조할 객체를 전달

const fn = {
title: 'Hello World!',
tags: [1, 2, 3, 4],
showTags() {
  this.tags.forEach(function(tag) {
    console.log(tag);
    console.log(this); // fn
  }, this); // 여기는 일반 함수 바깥, fn 객체를 참조할 수 있다.
}
}
fn.showTags();
// 1
// fn 객체 출력
// 2
// fn 객체 출력
// 3
// fn 객체 출력
// 4
// fn 객체 출력

function 키워드로 생성한 일반함수와 화살표 함수의 가장 큰 차이점이 바로 this이다.
이를 Lexical this(렉시컬 this) 라고 한다.
화살표 함수 안에서 this는 언제나 상위 스코프의 this를 가리킨다.
일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되지 않고, 함수를 호출 할 때 함수가 어떻게 호출 되는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
화살표 함수의 this 바인딩 객체 결정 방식은 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프와 유사하다.
화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

const fn = {
  title: 'Hello World!',
  tags: [1, 2, 3, 4],
  showTags() {
    this.tags.forEach((tag) => {
      console.log(tag);
      console.log(this); // fn
    });
  }
}
fn.showTags();
// 1
// fn 객체 출력
// 2
// fn 객체 출력
// 3
// fn 객체 출력
// 4
// fn 객체 출력

⚡️ 결론

this는 이처럼 어떤 위치에 있느냐, 어디에서 호출하느냐, 어떤 함수에 있느냐에 따라 참조 값이 달라지는 특성이 있다.
그래서 사용할 때 주의해야 한다.

항해99 2조 미니프로젝트 #1

Mon, 09 May 2022 05:46:36 GMT

5.9 ~ 5.13

1) 프로젝트 제목

너의 영화는 ?

2) 소개

내가 봤던 영화를 올리고 리뷰를 작성해본다. 카테고리로 구분된 장르를 확인하고 관심있는 장르의 영화를 찾아본다. 여러 사람들의 리뷰, 전체 평점 순위를 참고한다.

3) 와이어 프레임

main 페이지
회원가입 페이지
로그인 페이지
포스터 페이지

4) 개발해야 하는 기능들

1. main 페이지

DB (GET) (/main) (url) (전체 리스트)
카테고리 네비게이션 ( 해당 장르의 포스터만 모아서 보여준다 )
로그인 버튼 및 회원가입 버튼
url 입력란 ( 회원과 비회원을 구분하여 활성화하기, 포스터 등록 )
생성된 포스터 버튼 ( 리뷰 등록 페이지 열기 )
현재 평점 순위 ( movies['rank'] get )
(장르별 조회) (GET) (/main/genre) (genre)
2. 회원가입 페이지 [POST] ( 회원정보를 입력, DB에 등록 )
(아이디중복확인) (POST) (/signup/check) (id, pw) (사용가능 메시지 + 회원가입 확인 버튼 활성화)
DB (POST) (/signup)
완료 시 (가입 완료 메시지)

3. 로그인 페이지 [GET] ( db내용과 입력값을 비교하여 main 페이지로 이동한다 )텍스트

DB POST (POST) (/login)
완료 시 (로그인 완료 메시지)

4. 포스터 페이지

DB (POST) (/detail/review) (comment) ()

public github repo 주소 : https://github.com/gaius365/hh99_mini1

5주차 웹 개발

Mon, 25 Apr 2022 21:18:25 GMT

Filezilla 설치 & 가비아 가입하기 + 도메인 구입

다운로드 클릭 후 가장 기본 버전 다운로드!

가비아에서 할인이벤트(500원/1년)를 진행하는 도메인을 구매해서 진행

1) 프로젝트 세팅

bucket 폴더 안에 static, templates, app.py 만들기!

패키지 설치 : flask, pymongo, dnspython

뼈대 준비

index.html, app.py 준비하기

index.html

버킷리스트 페이지

app.py

DB, 프레임워크 패키지 임포트
POST, GET 세팅

mongoDB Atlas

POST, GET을 이용하기 전 DB 준비

2) POST (기록)

요청 정보 : URL= /bucket, 요청 방식 = POST

클라(ajax) → 서버(flask) : bucket
서버(flask) → 클라(ajax) : 메시지를 보냄 (기록 완료!)

단! 서버에서 한 가지 일을 더 한다. → 번호를 만들어 함께 넣어주는 것. 그래야 업데이트가 가능!

클라이언트와 서버 연결 확인

서버 코드 app.py

@app.route("/bucket", methods=["POST"])
def bucket_post():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST(기록) 연결 완료!'})

클라이언트 코드 index.html

function save_bucket(){
    $.ajax({
        type: "POST",
        url: "/bucket",
        data: {sample_give:'데이터전송'},
        success: function (response) {
            alert(response["msg"])
        }
    });
}

서버부터 만들기 ( bucket 정보를 받아서 저장 )

버킷 번호와 완료여부를 함께 넣어줄 것 !!

count = list(db.bucket.find({},{'_id':False}))
num = len(count) + 1

vs

count = db.bucket.find({},{'_id':False}).count()
num = count + 1

@app.route("/bucket", methods=["POST"])
def bucket_post():
    bucket_receive = request.form["bucket_give"]

    count = db.bucket.find({},{'_id':False}).count()
    num = count + 1

    doc = {
        'num':num,
        'bucket': bucket_receive,
        'done':0
    }

    db.bucket.insert_one(doc)
    return jsonify({'msg':'등록 완료!'})

클라이언트 만들기 ( bucket 정보만 보내주기 )

function save_bucket(){
    let bucket = $('#bucket').val()
    $.ajax({
        type: "POST",
        url: "/bucket",
        data: {bucket_give:bucket},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

완성 확인하기

3) GET (보여주기)

요청 정보 : URL= /bucket, 요청 방식 = GET
클라(ajax) → 서버(flask) : (없음)
서버(flask) → 클라(ajax) : 전체 버킷리스트를 보여주기

클라이언트와 서버 연결 확인하기

서버 코드 app.py

@app.route("/bucket", methods=["GET"])
def bucket_get():
    return jsonify({'msg': 'GET 연결 완료!'})

클라이언트 코드 index.html

$(document).ready(function () {
    show_bucket();
});
function show_bucket(){
    $.ajax({
        type: "GET",
        url: "/bucket",
        data: {},
        success: function (response) {
            alert(response["msg"])
        }
    });
}

서버부터 만들기 ( 받을 것 없이

buckets에 주문정보 담아서 내려주기 )

@app.route("/bucket", methods=["GET"])
def bucket_get():
    buckets_list = list(db.bucket.find({},{'_id':False}))
    return jsonify({'buckets':buckets_list})

클라이언트 만들기 ( 응답을 잘받아서 for 문으로 붙여주기 )

function show_bucket(){
    $('#bucket-list').empty()
    $.ajax({
        type: "GET",
        url: "/bucket",
        data: {},
        success: function (response) {
            let rows = response['buckets']
            for (let i = 0; i < rows.length; i++) {
                let bucket = rows[i]['bucket']
                let num = rows[i]['num']
                let done = rows[i]['done']

                let temp_html = ``
                if (done == 0) {
                    temp_html = `
                                    ✅ ${bucket}
                                    
                                `
                } else {
                    temp_html = `
                                    ✅ ${bucket}
                                `
                }
                $('#bucket-list').append(temp_html)
            }
        }
    });
}

완성 확인하기

4) POST ( 완료하기 )

요청 정보 : URL= /bucket/done, 요청 방식 = POST
클라(ajax) → 서버(flask) : num (버킷 넘버)
서버(flask) → 클라(ajax) : 메시지를 보냄 (버킷 완료!)

클라이언트와 서버 연결 확인하기

서버 코드 app.py텍스트

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    sample_receive = request.form['sample_give']
    print(sample_receive)
    return jsonify({'msg': 'POST(완료) 연결 완료!'})

클라이언트 코드 index.html

function done_bucket(num){
    $.ajax({
        type: "POST",
        url: "/bucket/done",
        data: {sameple_give:'데이터전송'},
        success: function (response) {
            alert(response["msg"])
        }
    });
}

서버부터 만들기

버킷 번호를 받아서, 업데이트 할 것
num_receive는 문자열로 들어오기 때문에 숫자로 바꿔줄 것 !! ( int )

@app.route("/bucket/done", methods=["POST"])
def bucket_done():
    num_receive = request.form["num_give"]
    db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
    return jsonify({'msg': '버킷 완료!'})

클라이언트 만들기 ( 버킷 넘버를 보여주기 )

function done_bucket(num){
    $.ajax({
        type: "POST",
        url: "/bucket/done",
        data: {'num_give':num},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

완성 확인하기 ( 선 그어진 것 )

5) 내 프로젝트를 서버에 올리기

웹 서비스 런칭

웹 서비스를 런칭하기 위해 클라이언트의 요청에 항상 응답해줄 수 있는 서버에 프로젝트를 실행시켜줘야 한다.

항상 요청에 응답하려면

컴퓨터가 항상 켜져있고 프로그램이 실행되어 있어야하고,
모두가 접근할 수 있는 공개 주소인 공개 IP 주소(Public Address)로 나의 웹 서비스에 접근할 수 있도록 해야한다.
서버는 그냥 컴퓨터이다.
외부 접속이 가능하게 설정한다면 내 컴퓨터를 서버로 사용할 수도 있다.
AWS라는 클라우드 서비스에서 편하게 서버를 관리하기 위해서 항상 켜 놓을 수 있는 컴퓨터인 EC2 사용권을 구입해 서버로 사용한다.

6) AWS 서버 구매하기

AWE EC2 서버 사기

클릭 만으로 내가 원하는 서버(컴퓨터)의 설정을 정하고, 거기에 컴퓨터를 실행시키기 위해 운영체제(OS)를 설치한다.
OS는 리눅스의 Ubuntu를 설치한다.
윈도우와 같이, OS는 여러개 존재한다.
리눅스도 그 중의 하나, 오픈소스로 발전되는 OS이다.

Ubuntu Server 18.04 또는 20.04 버전을 구매한다.

EC2 서버 종료하는 방법( 1년 후 자동결제 방지! )

대상 인스턴스에 마우스 우클릭 후 인스턴스 상태를 '중지' 또는 '종료' 할 것

EC2 접속하기 (AWS EC2)

SSH(Secure Shell Protocol)

다른 컴퓨터에 접속할 때 쓰는 프로그램이다.
다른 것들 보다 보안이 상대적으로 뛰어나다.
접속할 컴퓨터가 22번 포트가 열려있어야 접속이 가능하다. AWS E22의 경우, 이미 22번 포트가 열려있다. (확인)

AWS EC2에 접속하기

Mac OS : Mac은 ssh가 있어서, 명령어로 바로 접근 가능!
Windows : ssh가 없으므로, gib bash라는 프로그램을 이용!

git bash를 실행하고, 아래를 입력한다!

ssh -i 받은키페어를끌어다놓기 ubuntu@AWS에적힌내아이피

ssh -i /path/my-key-pair.pem ubuntu@13.125.250.20

Key fingerprint 관련 메세지가 나올 경우 Yes를 입력
gib bash를 종료할 때는 exit 명령어를 입력하여 ssh 접속을 먼저 끊을 것

간단한 리눅스 명령어 연습하기

리눅스는 윈도우 같지 않아서, '쉘 명령어'를 통해 OS를 조작한다 ( 마우스 역할 )

가장 많이 쓰는 몇 가지 명령어

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 지우기

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다. sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)


---

# **7) 서버 세팅하기**

**서버 환경 통일하기 ( 구매한 컴퓨터 세팅 )**

## **EC2 한번에 세팅하기**

```jsx
# python3 -> python
sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10

# pip3 -> pip
sudo apt-get update
sudo apt-get install -y python3-pip
sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

# port forwarding
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

filezilla를 이용해서, 간단한 python 파일 올려보기

서버에 업로드 할 간단한 파일을 작성
파일질라 실행, 다음과 같이 설정

정보들을 입력하고, ok 누르면 서버의 파일들을 볼 수 있다 (Host : 내 EC2 서버의 ip // User: ubuntu로 입력)

마우스로 드래그 해서 파일을 업로드/다운로드하면 된다! 왼쪽이 내 컴퓨터 vs 오른쪽이 내가 방금 산 컴퓨터

8) 파이썬 파일 실행해보기

python test.py

서버 환경 세팅

1) 파이썬(python3 -> python)

python3 명령어를 python으로 사용할 수 있게 하는 명령어

*2) pip(pip3 -> pip) *

pip3 설치 sudo apt-get update sudo apt-get install -y python3-pip
pip3 명령어를 pip으로 사용할 수 있게 하는 명령어 sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1
한 줄 씩 복사 붙여넣기!

3) 포트포워딩(80포트 -> 5000포트)

80포트로 들어오는 요청을 5000포트로 넘겨주는 명령어 sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1

Flask 서버 실행

1) 팬명록 완성본을 filezilla로 EC2에 업로드 하기

파일질라에서 homework 폴더 째로 드래그 드롭으로 EC2 인스턴스의 home/ubuntu 폴더에 업로드
실행 - python app.py

2) pip로 패키지 설치

pip install flask

3) 그 외 패키지들 설치

pip install pymongo dnspython

4) 다시 flask 서버 실행

아래 명령어로 flask 서버 실행
python app.py*

서버 실행이 되면, 크롬에서 접속해보기

크롬 브라우저 창에 입력 - http://내 EC2 IP : 5000/
아직 작동하지 않는다 ( AWS에서 5000포트를 열어줘야 함 )

5) AWS에서 5000포트를 열어주기

EC2서버( 가상의 내 컴퓨터 )에서 포트를 따로 설정하는 것 외에도, AWS EC2에서도 자체적으로 포트를 열고/닫을 수 있게 관리를 하고 있다.
-> 그래서 AWS EC2 Security Group에서 인바운드 요청 포트를 열어줘야 한다.
EC2 관리 콘솔로 들어간다. 그리고 보안그룹( 영문:Security Group )을 눌러 들어간다.

해당 보안그룹을 클릭

Edit inbound rules를 선택

두 가지 포트를 추가 / Anywhere-IPv4를 클릭
80포트 : HTTP 접속을 위한 기본포트
5000포트 : flask 기본포트

6) 포트 번호 없애기 ( 기본 개념 )

현재 5000포트에서 웹 서비스가 실행되고 있다. 그래서 매번 :5000 이라고 뒤에 붙여줘야 한다.
http 요청에서는 80포트가 기본이기 때문에, 굳이 :80을 붙이지 않아도 자동 연결이 된다.
포트 번호를 입력하지 않아도 자동으로 접속되기 위해, 우리는 80포트로 오는 요청을 5000 포트로 전달하게 하는 포트포워딩(port forwarding) 을 사용
리눅스에서 기본으로 제공해주는 포트포워딩을 사용

7) 다시 접속해보기

http://내아이피
이제 app.py파일을 수정하고, 다듬어서 올리면 된다

nohup 설정하기

SSH 접속을 끊어도 서버가 계속 돌게 하기!

현재 상황 Git bash 또는 맥의 터미널을 종료하면 (=즉, SSH 접속을 끊으면) 프로세스가 종료되면서, 서버가 돌아가지 않고 있다.
원격 접속을 종료하더라도 서버가 계속 돌아가게 하기
nohup python app.py &*
서버 종료하기 ( 강제종료하는 방법 )
ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill*

9) 도메인 구입 / 연결

도메인 구입 / 연결

도메인을 구매한다는 것은, 네임서버를 운영해주는 업체에, IP와 도메인 매칭유지비를 내는 것 한국 또는 글로벌 업체 어디든 상관 없지만, 우리는 한국의 '가비아'라는 회사에서 구입해본다.

DNS 설정 클릭

호스트 이름에 @, IP주소에 IP주소를 입력

IP주소로 접근해보기

http://내AWS아이피/ --->** http://내도메인/**

10) og태그

og 태그 만들기

og:image, og:title, og:description

static 폴더 아래에 이미지 파일을 넣고, 각자 프로젝트 HTML의 head>~/head> 사이에 아래 내용을 작성하면 og 태그를 개인 프로젝트에 사용할 수 있다.

meta property="og:title" content="내 사이트의 제목" /> meta property="og:description" content="보고 있는 페이지의 내용 요약" /> meta property="og:image" content="이미지URL" />

참고 이미지를 바꿨는데 이전 ogimage가 그대로 나오는 것은 페이스북 / 카카오톡 등에서 처음 것을 한동안 저장해놓기 때문이다.
페이스북 og 태그 초기화 하기 : https://developers.facebook.com/tools/debug/
카카오톡 og 태그 초기화 하기 : https://developers.kakao.com/tool/clear/og

4주차 웹 개발

Wed, 20 Apr 2022 22:39:08 GMT

1) Flask

projects 폴더 아래에, 다섯개 만들고 시작

Flask 시작하기 - 서버만들기

1) new project → prac 폴더를 선택하고 create 를 클릭

2) Flask 패키지 설치하고 시작! 패키지 설치 화면 진입하기 윈도우 : 좌상단File → setting → Python interpreter 맥 : 좌상단Pycharm → Preference → Python Interpreter

flask로 검색한 후, Install package 클릭

1) Flask 프레임워크

서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있다.

app.py 파일을 만들어 아래 코드를 붙여본다.
파일 이름은 아무렇게나 해도 상관없지만, 통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름 짓는다!

from flask import Flask app = Flask(name)

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

if name == 'main':
app.run('0.0.0.0',port=5000,debug=True)

터미널에 아래와 같은 메시지가 뜨면 실행 성공!

크롬에서 http://localhost:5000/ 으로 접속!

--> 터미널 창을 클릭하고 ctrl+c 누르면 서버를 종료할 수 있다.

--> url 별로 함수명이 같거나, route('/')내의 주소가 같으면 안된다.

from flask import Flask app = Flask(name)

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

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

if name == 'main':
app.run('0.0.0.0',port=5000,debug=True)

Flask 시작하기 - HTML 파일 주기

Flask 서버를 만들 때, 항상,

프로젝트 폴더 안에, ㄴstatic 폴더 (이미지, css파일을 넣어둔다) ㄴtemplates 폴더 (html파일을 넣어둔다) ㄴapp.py 파일

이렇게 세 개를 만들어두고 시작한다

templates 폴더의 역할

1) 간단한 index.html 파일을 templates 안에 만들기 2) 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.0', port=5000, debug=True)

--> flask 내장함수 render_template를 이용 ( 프레임워크의 효율성 )

2) GET , POST

Flask 시작하기 - 본격 API 만들기

👉 GET, POST 방식

*GET * → 통상적으로! 데이터 조회(Read)를 요청할 때

                     예) 영화 목록 조회
            →     **데이터 전달** : URL 뒤에 물음표를 붙여 key=value로 전달
            →     예: google.com?q=북극곰

POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때

                     예) 회원가입, 회원탈퇴, 비밀번호 수정
            →     **데이터 전달 :** 바로 보이지 않는 HTML body에 key:value 형태로 전달

Jquery 임포트 script src="">https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> /script>

GET 요청 API코드

@app.route('/test', methods=['GET']) def test_get(): title_receive = request.args.get('title_give') print(title_receive) return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

GET 요청 확인 Ajax코드

$.ajax({ type: "GET", url: "/test?title_give=봄날은간다", data: {}, success: function(response){ console.log(response) } })

POST 요청 API코드

@app.route('/test', methods=['POST']) def test_post(): title_receive = request.form['title_give'] print(title_receive) return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

POST 요청 확인 Ajax코드

$.ajax({ type: "POST", url: "/test", data: { title_give:'봄날은간다' }, success: function(response){ console.log(response) } })

POST 연습(주문 저장)

API 만들고 사용하기 - 이름, 주소, 평수 저장하기(Create → POST)

요청 정보 : URL= /mars, 요청 방식 = POST
클라(ajax) → 서버(flask) : name, address, size
서버(flask) → 클라(ajax) : 메시지를 보냄 (주문 완료!)

1) 클라이언트와 서버 연결 확인하기

[서버 코드 - app.py] @app.route("/mars", methods=["POST"]) def mars_post(): sample_receive = request.form['sample_give'] print(sample_receive) return jsonify({'msg': 'POST 연결 완료!'})

[클라이언트 코드 - index.html] function save_order() { $.ajax({ type: 'POST', url: '/mars', data: { sample_give:'데이터전송' }, success: function (response) { alert(response['msg']) } }); }

button onclick="save_order()" type="button" class="btn btn-warning mybtn">주문하기/button>

2) 서버부터 만들기

name, address, size 정보를 받아서, 저장 @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.orders.insert_one(doc)

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

3) 클라이언트 만들기

name, address, size 정보를 보내기 function save_order() { let name = $('#name').val() let address = $('#address').val() let size = $('#size').val()

$.ajax({
    type: 'POST',
    url: '/mars',
    data: { name_give:name, address_give:address, size_give:size },
    success: function (response) {
        alert(response['msg'])
        window.location.reload()
    }
});

}

4) DB에 잘 들어갔는지 확인

GET 연습(주문 보여주기)

API 만들고 사용하기 - 저장된 주문을 화면에 보여주기(Read → GET)

요청 정보 : URL= /mars, 요청 방식 = GET
클라(ajax) → 서버(flask) : (없음)
서버(flask) → 클라(ajax) : 전체 주문을 보내주기

1) 클라이언트와 서버 확인하기

[서버 코드 - app.py] @app.route("/mars", methods=["GET"]) def mars_get(): return jsonify({'msg': 'GET 연결 완료!'})

[클라이언트 코드 - index.html] $(document).ready(function () { show_order(); }); function show_order() { $.ajax({ type: 'GET', url: '/mars', data: {}, success: function (response) { alert(response['msg']) } }); }

2) 서버부터 만들기

받을 것 없이 orders 에 주문정보를 담아서 내려주기만 하면 된다!

@app.route("/mars", methods=["GET"]) def mars_get(): orders_list = list(db.orders.find({},{'_id':False})) return jsonify({'orders':orders_list})

3) 클라이언트 만들기

응답을 잘 받아서 for 문으로! 붙여주면 끝!

function show_order() { $('#order-box').empty() $.ajax({ type: 'GET', url: '/mars', data: {}, success: function (response) { let rows = response['orders'] for (let i = 0; i < rows.length; i++) { let name = rows[i]['name'] let address = rows[i]['address'] let size = rows[i]['size']

            let temp_html = `
                                ${name}
                                ${address}
                                ${size}
                              `
            $('#order-box').append(temp_html)
        }

    }
});

}

3) 메타 태그 + 크롤링

조각 기능 구현해보기

1) 프로젝트 준비 - URL에서 페이지 정보 가져오기 (meta태그 스크래핑) URL만 입력했는데, 자동으로 불러와지는 부분들 '제목', '썸네일 이미지', '내용'

메타 태그 head>/head> 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그들입니다. 예) 구글 검색 시 표시 될 설명문, 사이트 제목, 카톡 공유 시 표시 될 이미지 등

그 중 og:image */ *og:title */ *og:description 을 크롤링

크롤링 기본 코드 import requests from bs4 import BeautifulSoup

url = 'https://movie.naver.com/movie/bi/mi/basic.naver?code=191597'

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(url,headers=headers) soup = BeautifulSoup(data.text, 'html.parser')

select_one을 이용해 meta tag를 먼저 가져오기 og_image = soup.select_one('meta[property="og:image"]') og_title = soup.select_one('meta[property="og:title"]') og_description = soup.select_one('meta[property="og:description"]')

print(og_image) print(og_title) print(og_description)

가져온 meta tag의 content를 가져오기 image = og_image['content'] title = og_title['content'] description = og_description['content']

print(image) print(title) print(description)

3주차 웹 개발

Wed, 20 Apr 2022 15:58:53 GMT

1) 파이썬 시작하기

파이썬 설치의 의미 파이썬 문법으로 된 것을 변환해줄 수 있도록, 번역 패키지를 설치하는 것

파이썬 기초

변수 & 기본연산

a = 3 --> 3을 a에 넣는다
b = a --> a를 b에 넣는다
a = a + 1 --> a+1을 다시 a에 넣는다
num1 = ab --> ab의 값을 num1이라는 변수에 넣는다
num2 = 99 --> 99의 값을 num2이라는 변수에 넣는다

숫자, 문자형

name = 'bob' # 변수에는 문자열이 들어갈 수도 있고, num = 12 # 숫자가 들어갈 수도 있고,

is_number = True # True 또는 False -> "Boolean"형이 들어갈 수도 있습니다.

리스트 형(Javascript의 배열형과 동일)

a_list = [] a_list.append(1) # 리스트에 값을 넣는다 a_list.append([2,3]) # 리스트에 [2,3]이라는 리스트를 다시 넣는다

a_list의 값 : [1,[2,3]] a_list[0]의 값 : 1 a_list[1]의 값 : [2,3] a_list[1][0]의 값 : 2

Dictionary 형 (Javascript의 dictionary형과 동일)

a_dict = {} a_dict = {'name':'bob','age':21} a_dict['height'] = 178

a_dict의 값 : {'name':'bob','age':21, 'height':178} a_dict['name']의 값 :** 'bob'** a_dict['age']의 값 : 21 a_dict['height']의 값 :** 178**

Dictionary 형과 List형의 조합

people = [{'name':'bob','age':20},{'name':'carry','age':38}]

people[0]['name']의 값 : 'bob' people[1]['name']의 값 : 'carry'

person = {'name':'john','age':7} people.append(person)

people의 값 : [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}] people[2]['name']의 값 : 'john'

2) 함수

수학문제에서 f(x) = 2*x+3 y = f(2) y의 값 : 7

참고: 자바스크립트에서 function f(x) { return 2*x+3 }

파이썬에서 def f(x): return 2*x+3

y = f(2) y의 값 : 7

함수의 응용

def sum_all(a,b,c): return a+b+c

def mul(a,b): return a*b

result = sum_all(1,2,3) + mul(10,10)

조건문

if / else 로 구성 def oddeven(num): --> oddeven이라는 이름의 함수를 정의한다. num을 변수로 받는다. if num % 2 == 0: --> num을 2로 나눈 나머지가 0이면 return True --> True (참)을 반환한다. else: --> 아니면, return False --> False (거짓)을 반환한다.

result = oddeven(20)

def is_adult(age): if age > 20: print('성인입니다') --> 조건이 참이면 성인입니다를 출력 else: print('청소년이에요') --> 조건이 거짓이면 청소년이에요를 출력

is_adult(30)

반복문

파이썬에서의 반복문은, 리스트의 요소들을 하나씩 꺼내쓰는 형태

fruits = ['사과','배','감','귤']

for fruit in fruits: print(fruit)

사과, 배, 감, 귤 하나씩 꺼내어 찍힙니다.

fruits = ['사과','배','배','감','수박','귤','딸기','사과','배','수박']

count = 0 for fruit in fruits: if fruit == '사과': count += 1

print(count)

사과의 갯수를 세어 보여줍니다.

def count_fruits(target): count = 0 for fruit in fruits: if fruit == target: count += 1 return count

subak_count = count_fruits('수박') print(subak_count) --> 수박의 갯수

gam_count = count_fruits('감') print(gam_count) --> 감의 갯수

딕셔너리 예제 people = [{'name': 'bob', 'age': 20}, {'name': 'carry', 'age': 38}, {'name': 'john', 'age': 7}, {'name': 'smith', 'age': 17}, {'name': 'ben', 'age': 27}]

모든 사람의 이름과 나이를 출력하기

for person in people: print(person['name'], person['age'])

반복문과 조건문을 응용한 함수를 만들기 이름을 받으면, age를 리턴해주는 함수

def get_age(myname): for person in people: if person['name'] == myname: return person['age'] return '해당하는 이름이 없습니다'

print(get_age('bob')) print(get_age('kay'))

파이썬 패키지 설치

👉 패키지? 라이브러리? → Python 에서 패키지는 모듈(일종의 기능들 묶음)을 모아 놓은 단위입니다. 이런 패키지 의 묶음을 라이브러리 라고 볼 수 있습니다. 지금 여기서는 외부 라이브러리를 사용하기 위해서 패키지를 설치합니다.

즉, 여기서는 패키지 설치 = 외부 라이브러리 설치!

가상 환경(virtual environment) 이란?

같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경 입니다. 프로젝트별로 패키지들을 담을 공구함

웹스크래핑(크롤링) 기초

패키지 추가 설치하기(beautifulsoup4) - bs4

크롤링 기본 세팅

import requests from bs4 import BeautifulSoup

타겟 URL을 읽어서 HTML를 받아오고, 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) << **naver 영화 페이지 soup = BeautifulSoup(data.text, 'html.parser')

HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
#이제 코딩을 통해 필요한 부분을 추출하면 된다.

select / select_one 영화 제목 가져오기

import requests from bs4 import BeautifulSoup

URL을 읽어서 HTML를 받아오고,

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)

HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
soup = BeautifulSoup(data.text, 'html.parser')*
select를 이용해서, tr들을 불러오기
movies = soup.select('#old_content > table > tbody > tr')*
movies (tr들) 의 반복문을 돌리기
for movie in movies:*
- movie 안에 a 가 있으면,
- - a_tag = movie.select_one('td.title > div > a') if a_tag is not None:**
    - a의 text를 찍어본다. print (a_tag.text)

beautifulsoup 내 select에 미리 정의된 다른 방법을 알아보기

선택자를 사용하는 방법 (copy selector) soup.select('태그명') soup.select('.클래스명') soup.select('#아이디명') soup.select('상위태그명 > 하위태그명 > 하위태그명') soup.select('상위태그명.클래스명 > 하위태그명.클래스명')

태그와 속성값으로 찾는 방법 soup.select('태그명[속성="값"]')
한 개만 가져오고 싶은 경우 soup.select_one('위와 동일')

3) DB

Database의 두 가지 종류

RDBMS(SQL) 행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사합니다. 데이터 50만 개가 적재된 상태에서, 갑자기 중간에 열을 하나 더하기는 어려울 것입니다. 그러나, 정형화되어 있는 만큼, 데이터의 일관성이나 / 분석에 용이할 수 있습니다.

No-SQL 딕셔너리 형태로 데이터를 저장해두는 DB입니다. 고로 데이터 하나 하나 마다 같은 값들을 가질 필요가 없게 됩니다. 자유로운 형태의 데이터 적재에 유리한 대신, 일관성이 부족할 수 있습니다.

DB의 실체는 우리가 쓰는 프로그램과 같은 것
요새는 Cloud 형태로 제공해주는 곳들이 많다
유저가 몰리거나 / DB를 백업해야 하거나 / 모니터링 하기가 아주 용이하기 때문

mongoDB 가입 및 연결

mongoDB - Atlas 가입

연결 준비하기

1) Allow Access from Anywhere 클릭 → Add IP address 클릭
2) Username, Password를 아래와 같이 입력 → Create Database User 클릭
3) Choose a connection method 클릭

mongoDB - Atlas 연결하기

*pymongo 라이브러리의 역할 * mongoDB 라는 프로그램을 조작하려면, 특별한 라이브러리, pymongo가 필요!
pymongo, dnspython 패키지 설치 후 잘 연결됐는지 테스트해보기

doc = { 'name':'bob', 'age':27 }

db.users.insert_one(doc)

pymongo로 DB조작하기

DB연결하기 & 데이터 넣기 (insert_one) 'users'라는 collection에 {'name':'bobby','age':21}를 넣습니다. db.users.insert_one({'name':'bobby','age':21}) db.users.insert_one({'name':'kay','age':27}) db.users.insert_one({'name':'john','age':30})
*모든 결과 값을 보기 (find) *

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

print(all_users[0]) # 0번째 결과값을 보기 print(all_users[0]['name']) # 0번째 결과값의 'name'을 보기

for user in all_users: # 반복문을 돌며 모든 결과값을 보기 print(user)
특정 결과 값을 뽑아 보기 (find_one) ** user = db.users.find_one**({'name':'bobby'}) print(user)
수정하기 (update_one) db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

user = db.users.find_one({'name':'bobby'}) print(user)
- 삭제하기 (거의 안 씀) (delete_one) db.users.delete_one({'name':'bobby'})
user = db.users.find_one({'name':'bobby'}) print(user)

pymongo 사용법 : 코드요약

저장 - 예시 doc = {'name':'bobby','age':21} db.users.insert_one(doc)

** 한 개 찾기 - 예시** user = db.users.find_one({'name':'bobby'})
여러개 찾기 - 예시 ( _id 값은 제외하고 출력) all_users = list(db.users.find({},{'_id':False}))
바꾸기 - 예시 db.users.update_one({'name':'bobby'},{'$set':{'age':19}})
지우기 - 예시 db.users.delete_one({'name':'bobby'})

insert 연습 - 웹스크래핑 결과를 DB에 저장하기

pymongo 기본 세팅

import requests from bs4 import BeautifulSoup

from pymongo import MongoClient client = MongoClient('mongodb+srv://test:sparta@cluster0.55vah.mongodb.net/Cluster0?retryWrites=true&w=majority') db = client.dbsparta__

URL을 읽어서 HTML를 받아오고,
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)*
HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
- soup = BeautifulSoup(data.text, 'html.parser')
*
select를 이용해서, tr들을 불러오기
*movies = soup.select('#old_content > table > tbody > tr')
*
movies (tr들) 의 반복문을 돌리기
- for movie in movies: a_tag = movie.select_one('td.title > div > a') if a_tag is not None:**
- img 태그의 alt 속성값을 가져오기
- rank = movie.select_one('td:nth-child(1) > img')['alt'] *
- a 태그 사이의 텍스트를 가져오기
- title = a_tag.text **
- td 태그 사이의 텍스트를 가져오기
- star = movie.select_one('td.point').text ** print(rank,title,star)

2주차 웹 개발

Wed, 13 Apr 2022 09:35:21 GMT

1) JQuery

HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해준 것. 라이브러리! Javascript로도 모든 기능을 구현할 수 있지만, 코드의 복잡도, 브라우저 간 호환성을 고려하여 JQuery라는 라이브러리가 등장하였다.

-Javascript- document.getElementById("element").style.display = "none";

-JQuery- $('#element').hide();

JQery 사용하기 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부른다.

head> script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" /script> head>

△△△ JQuery CDN 부분을 참고해서 임포트하기!

* *CSS에서는 선택자로 *class를 사용하였고** * JQuery에서는 **id값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 된다

$('#id값').val()

$('#id값').hide()

$('#id값').show()

2) 서버 클라이언트 통신 이해하기

JSON

Key, Value로 이루어져 있다. 자료형 Dictionary와 아주 유사하다.

OpenAPI 접속 후 크롬 익스텐션 JSONView를 설치하면 좀 더 예쁘게 JSON을 볼 수 있다.

RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있습니다.

클라이언트 ->> 서버 : GET 요청 이해하기

클라이언트가 요청할 때 "타입"이라는 것이 존재한다

GET → 통상적으로! 데이터 조회(Read)를 요청할 때

                     예) 영화 목록 조회

POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
```
                     예) 회원가입, 회원탈퇴, 비밀번호 수정
```

예) https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967 위 주소는 크게 두 부분으로 쪼개진다. 바로 "?"가 쪼개지는 지점 "?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 <영화 번호>

서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
영화 정보: code=161967

👉 GET 방식으로 데이터를 전달하는 방법

? : 여기서부터 전달할 데이터가 작성된다는 의미입니다. & : 전달할 데이터가 더 있다는 뜻입니다.

예) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8 위 주소는 google.com의 search 창구에 다음 정보를 전달합니다! q = 아이폰 (검색어) sourceid = chrome (브라우저 정보) ie = UTF-8 (인코딩 정보)

3) Ajax

Ajax는 JQuery를 임포트한 페이지에서만 동작 가능하다!

-Ajax 골격-

$.ajax({ type: "GET", url: "여기에URL을입력", data: {}, success: function(response){ console.log(response) } })

type: "GET" → GET 방식으로 요청한다.
url: 요청할 url
data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워둔다)

👉 리마인드
**GET** 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2 

**POST** 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },

success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

```jsx
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
  console.log(response) 
}
```

<예> 모든 구의 미세먼지 값을 찍어보기 $.ajax({ type: "GET", <<--- GET 방식 요청 url: "http://spartacodingclub.shop/sparta_api/seoulair", <<--- 값을 가져올 url data: {}, <<--- GET 활용시 비활성화 success: function (response) { <<--- 서버에서 준 결과를 response라는 변수에 담음 let mise_list = response["RealtimeCityAir"]["row"]; <<--- json 형식의 데이터를 변수 안에 담기 for (let i = 0; i < mise_list.length; i++) { let mise = mise_list[i]; let gu_name = mise["MSRSTE_NM"]; let gu_mise = mise["IDEX_MVL"]; console.log(gu_name, gu_mise); } } });

+++ Ajax 추가 연습 ( 이미지 바꾸기, 텍스트 바꾸기 )

이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

* -로딩 후 호출하기- *

$(document).ready(function(){
    alert('로딩완료!')
});

1주차 웹 개발

Thu, 10 Mar 2022 01:45:28 GMT

HTML, CSS, Javascript

1) HTML과 CSS의 개념

HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각합니다. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었습니다. HTML 코드 내에 CSS 파일을 불러와서 적용합니다.
또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 됩니다.
클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML+CSS+Javascript를 준다.

2) HTML

HTML은 크게 head와 body로 구성

head 안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다. head 안에 들어가는 대표적인 요소들: meta, script, link, title 등 body 안에 들어가는 대표적인 요소들: h, p, div, span 등

3) CSS

head ~ /head 안에 style ~ /style 로 공간을 만들어 작성합니다. 아래 코드를 통해 간단한 사용 방법을 알아봅니다. mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억할 것

자주 쓰이는 CSS h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding --> 암기X, 필요에 따라 사용할 것

구글 폰트 입히기

https://fonts.google.com/?subset=korean (1) 마음에 드는 폰트를 클릭합니다. (2) [ + Select this style ]을 클릭합니다. (3) 우측 상단의 모음 아이콘을 클릭합니다. (4) Embed 탭을 클릭합니다. (5) link 태그를 복사해서 ~ 사이에, CSS를 복사해서 사이에 넣습니다.

CSS 분리

style ~ /style 부분이 너무 길어지면, 보기가 어렵습니다. 이럴 땐 아래와 같이 파일을 분리해둘 수 있습니다. style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기! <.link rel="stylesheet" type="text/css" href = "(css파일이름).css">

부트스트랩, 예쁜 CSS 모음집

-bootstrap- 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다.) 남이 만들어 둔 것을 쓸 때는 잘 찾아다가 조금씩만 고쳐서 쓰는 게 답! 카테고리에서 원하는 디자인을 찾아 그 코드를 가져올 것

4) Javascript

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어 head ~ /head 안에 script ~ /script 로 공간을 만들어 작성합니다. script ~ /script 내에 자바스크립트를 작성

기초문법 변수 & 기본연산

변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다)

let num = 20 num = 'Bob' // 변수는 값을 저장하는 박스 // 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다. // 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다. // 쉽게 알아볼 수 있게 쓰는 게 중요 // 다른 특수문자 또는 띄워쓰기는 불가능합니다.

리스트 & 딕셔너리

리스트: 순서를 지켜서 가지고 있는 형태

  let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

  // 또는,

  let b_list = [1,2,'hey',3] // 로 선언 가능

  b_list[1] // 2 를 출력
  b_list[2] // 'hey'를 출력

  // 리스트에 요소 넣기
  b_list.push('헤이')
  b_list // [1, 2, "hey", 3, "헤이"] 를 출력

  // 리스트의 길이 구하기
  b_list.length // 5를 출력

딕셔너리: 키(key)-밸류(value) 값의 묶음

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_dict = {'name':'Bob','age':21} // 로 선언 가능 b_dict['name'] // 'Bob'을 출력 b_dict['age'] // 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기 b_dict // {name: "Bob", age: 21, height: 180}을 출력

- 리스트와 딕셔너리의 조합
```jsx
names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

*** 왜 필요한가?

순서를 표시할 수 있고, 정보를 묶을 수 있습니다. 👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다. let customer_1 = {'name': '김철수', 'phone': '010-1234-1234'}; let customer_2 = {'name': '박민수', 'phone': '010-4321-4321'};

👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다. let customer = [ {'name': '김철수', 'phone': '010-1234-1234'}, {'name': '박민수', 'phone': '010-4321-4321'} ]

✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.

함수

기본 생김새

// 만들기
function 함수이름(필요한 변수들) {
  내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);

예시

// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
  console.log('숫자', num1, num2);
  return num1 + num2;
}

sum(3, 5); // 8 sum(4, -1); // 3


**조건문**
- 20 보다 작으면 작다고, 크면 크다고 알려주는 함수

    ```jsx
    function is_adult(age){
        if(age > 20){
            alert('성인이에요')
        } else {
            alert('청소년이에요')
        }
    }

    is_adult(25)
    ```

- if, else if, else if, else if else

    ```jsx
    function is_adult(age){
        if(age > 20){
            alert('성인이에요')
        } else if (age > 10) {
            alert('청소년이에요')
        } else {
            alert('10살 이하!')
        }
    }

    is_adult(12)
    ```

**반복문**
- 예를 들어 0부터 99까지 출력해야 하는 상황이라면!

    ```jsx
    console.log(0)
    console.log(1)
    console.log(2)
    console.log(3)
    console.log(4)
    console.log(5)
    ...
    console.log(99)

    // 이렇게 쓰기엔 무리가 있겠다. 그래서, 반복문이라는 것이 존재!
    ```

- 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.

    ```jsx
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    ```

    ```jsx
    for (1. 시작조건; 2. 반복조건; 3. 더하기) {
        4. 매번실행
    }

    1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3
    -> 2체크하고 -> (괜찮으면) -> 4 -> 3

    와 같은 순서로 실행됩니다.
    i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
    ```

- 그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰입니다.
     **반복문 예제**




    ```jsx
    let people = ['철수','영희','민수','형준','기남','동희']

    // i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
    for (let i = 0 ; i < people.length ; i++) {
        console.log(people[i])
    }
    ```


        ```jsx
        let scores = [
            {'name':'철수', 'score':90},
            {'name':'영희', 'score':85},
            {'name':'민수', 'score':70},
          {'name':'형준', 'score':50},
          {'name':'기남', 'score':68},
          {'name':'동희', 'score':30},
        ]
        ```


    ```jsx
    let scores = [
        {'name':'철수', 'score':90},
        {'name':'영희', 'score':85},
        {'name':'민수', 'score':70},
      {'name':'형준', 'score':50},
      {'name':'기남', 'score':68},
      {'name':'동희', 'score':30},
    ]

    for (let i = 0 ; i < scores.length ; i++) {
        console.log(scores[i]);
    }

    // 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
    ```

    ```jsx
    for (let i = 0 ; i < scores.length ; i++) {
        if (scores[i]['score'] < 70) {
            console.log(scores[i]['name']);
        }
    }

    // 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.
    ```

hj_ki.log

JS___2

Javascript

Javascript 자료형

숫자형 ( number )

BigInt

문자형 ( string )

불린형 ( boolean )

null

undefined

객체형 ( object )

심볼형 ( symbol )

undefined , null

== , ===

Javascript 문제점

Javascript 객체, 불변성

데이터 타입 ( 기본형 , 참조형 )

Javascript 형변환 ( 원시형의 형변환 )

문자형 변환

숫자형 변환

불린형 변환

불변 객체를 만드는 방법

const와 Object.freeze()를 조합한다면...?

얕은 복사, 깊은 복사

호이스팅, TDZ

선언만 호이스팅 대상

TDZ

함수 선언식, 함수 표현식

var 변수 라이프사이클 ▼▼▼

let 변수 라이프사이클 ▼▼▼

실행 컨텍스트 & 콜 스택

항해99 1주차 회고록

1. 미니프로젝트

2. Javascript 기초 및 알고리즘 문제해결 ( 코딩 문제 해결 및 풀이 )

JS___1

실습환경 만들기

JavaScript 실습 (코딩문제 풀기)

문제1) 두 개의 정수 n, m을 입력, 별(*)문자를 이용해 가로길이 n, 세로길이 m인 직사각형 형태를 출력하기

문제2) 정수num이 짝수일 경우 "Even"을 반환, 홀수인 경우 "Odd"를 반환하는 함수 작성하기

문제6) 없는 숫자 더하기

문제7) 음양 더하기

문제9) 핸드폰 번호 가리기

문제10) 행렬의 덧셈

문제11) x만큼 간격이 있는 n개의 숫자

문제12) 부족한 금액 계산하기

놀이기구를 count번 타게텍스트 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를

문제14) 나누어 떨어지는 숫자 배열

문제15) 내적

문제16) 문자열 내 p와 y의 개수

문제17) 문자열 다루기 기본

문제18) 서울에서 김서방 찾기

Javascript 기초

입력 및 메세지

조건문

반복문

함수

Object

배열

** 함수 표현식**

함수 선언문

화살표 함수

변수의 생성과정

*null, undefined *

객체, 함수

객체 안의 함수를 호출

함수와 메서드의 차이

This

👉 바인딩이란?

❗️this를 전역에서 사용한 경우

❗️this를 함수 내부에서 사용한 경우

⚡️ this의 사용

❗️전역에 선언된 함수에서 this

❗️객체의 메소드 함수에서 this

⚡️ 결론

항해99 2조 미니프로젝트 #1

1) 프로젝트 제목

2) 소개

3) 와이어 프레임

4) 개발해야 하는 기능들

1. main 페이지

함수 표현식

null, undefined

완성 확인하기

9) 도메인 구입 / 연결