3 TIL & WIL

항해 1주차가 끝났다. 

정말 뜻 깊은 경험이었다.
생에 첫 협업 프로젝트  처음엔 불편하고 어색했지만 조원분들 다 너무 좋아서 프로젝트도 순조롭게 진행됐던 거 같다.
다음 프로젝트 때는 더 발전된 내가 되어야겠다.

주특기를 node.js로 하였고 그래서 자바스크립트 왕기초 문법 공부를 했다.

const 변수이름 = 값

const는 let과 달리 변수에 값을 재할당할 필요가 없을 때 쓴다. 해당 변수가 고정된 값을 계속 갖고 있을 때 쓰면 좋다.

 

데이터타입.

console.log('My' + ' car') // My car를 출력
console.log('1' + 2) // 12를 출력

'1' +2 는 string '12' 를 출력하게 된다.

console.log(2 + 1) // 3을 출력
console.log(2 - 1) // 1을 출력
console.log(4 / 2) // 2를 출력
console.log(2 * 3) // 6을 출력
console.log(10 % 3) // 나머지(remainder) 연산자. 1을 출력
console.log(10 ** 2) // exponentiation. 10의 2승인 100을 출력

 

증감연산자.

let count = 1
const preIncrement = ++count
// 증감연산자를 앞에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// 먼저 자기 자신에게 1을 더해서 재할당 한 후, 이를 preIncrement 에 할당했다는 의미입니다.
// count = count + 1
// const preIncrement = count
console.log(`count: ${count}, preIncrement: ${preIncrement}`) // count: 2, preIncrement: 2

let count = 1
const postIncrement = count++
// 증감연산자를 뒤에 놓게 되면 아래 주석으로 처리한 두 줄의 코드와 같은 내용입니다.
// postIncrement에 자기 자신의 값을 먼저 할당하고, 이후에 1을 더해서 재할당합니다. 
// const postIncrement = count
// count = count + 1
console.log(`count: ${count}, postIncrement: ${postIncrement}`) // count: 2, postIncrement: 1

 

대입연산자.

const shirtsPrice = 100000
const pantsPrice = 80000
let totalPrice = 0

totalPrice += shirtsPrice // totalPrice = totalPrice + shirtsPrice 와 동일
console.log(totalPrice)
totalPrice += pantsPrice // totalPrice = totalPrice + pantsPrice 와 동일 
console.log(totalPrice)

totalPrice -= shirtsPrice // totalPrice = totalPrice - shirtsPrice 와 동일
console.log(totalPrice)

 

일치연산자.

console.log(1 === "1") // false를 출력
console.log(1 == "1" // true를 출력

 

논리연산자.

let isOnSale = true
let isDiscountItem = true

console.log(isOnSale && isDiscountItem) // true && true 이므로 true
console.log(isOnSale || isDiscountItem) // true || true 이므로 true

isOnSale = false
console.log(isOnSale && isDiscountItem) // false && true 이므로 false
console.log(isOnSale || isDiscountItem) // false || true 이므로 true

isDiscountItem = false
console.log(isOnSale && isDiscountItem) // false && false 이므로 false
console.log(isOnSale || isDiscountItem) // false || false 이므로 false

console.log(!isOnSale) // !false 이므로 true

 

if 문.

const shoesPrice = 40000
if (shoesPrice < 50000) { // 신발 가격이 50000원보다 작으므로 해당 코드가 실행됨
	console.log('신발을 사겠습니다.')
}

const capPrice = 50000
if (capPrice < 50000) {
	console.log('모자를 사지 않겠습니다.') // 모자 가격이 50000원보다 작지 않으므로 해당 코드가 실행되지 않음
}

 

if else.

const shoesPrice = 50000
if (shoesPrice < 40000) { 
	console.log('신발을 사겠습니다.')
} else if (shoesPrice <= 50000) {
	console.log('고민을 해볼게요...')  // 신발 가격이 50000원보다 작거나 같으므로 않으므로 해당 코드가 실행됨
} else {
	console.log('너무 비싸요. 신발을 사지 않겠습니다.')
}

 

while.

let temperature = 20
while (temperature < 25) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
    temperature++ // 증감연산자를 활용해 온도 변화시킴
}

반복문의 조건이 계속해서 true 를 리턴한다면 무한루프에 빠져서 프로그램이 끝나지 않는다. 주의!

 

for.

for (let temperature = 20; temperature < 25; temperature++) {
	console.log(`${temperature}도 정도면 적당한 온도입니다.`)
}

for, if.

for (let number = 1; number <= 10; number++) {
	if (number % 3 === 0) {
		console.log(`${number}는 3으로 나눠서 떨어지는 숫자입니다.`)
	}
}

 

함수 선언 호출.

function 함수명(매개변수들...) {
이 함수에서 실행할 코드들
return 반환값
}

const 변수명 = 선언한 함수명(매개변수들...)

Class선언.

class Notebook {
	constructor(name, price, company) {
		this.name = name
		this.price = price
		this.company = company
	}
}

 

class 키워드와 클래스명
class는 클래스를 선언하는 문구이고 그 뒤에 바로 클래스 명이 나옵니다. 클래스명도 마치 변수명처럼 내가 표현하고자 하는 데이터를 잘 나타낼 수 있는 이름이 좋다. 위의 예에서 Notebook 대신 Person 같은 이름을 쓴다면 다른 사람들이 코드를 봤을 때 이상하다고 생각할 것이다.

생성자
중괄호 안에는 생성자라는 것을 적어줍니다. 혹시 생성자가 함수와 많이 비슷하다. 이 생성자는 말 그대로 나중에 객체가 '생성'이 될 때 자바스크립트 내부에서 호출이 되는 함수라고 생각하면 된다. 생성자를 좀 더 살펴보면 3개의 매개변수를 정의했고 각각의 이름은 name, price, company 이다.

생성자의 바디를 보면 this 라는 키워드가 등장한다 이 this는 클래스를 사용해 만들어질 객체 자기 자신을 의미하고 this 뒤에 붙는 name, price, company는 객체의 속성이다. 생성자의 바디에서는 함수 호출시 전달할 매개변수 name, price, compay를 객체의 속성 name, price, company에 각각 할당하고 있는 것이다.

 

메소드 method.

// 클래스 선언
class Product {
	constructor(name, price) {
		this.name = name
		this.price = price
	}

	printInfo() {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

// 객체 생성 및 메소드 호출
const notebook = new Product('Apple Macbook', 2000000)
notebook.printInfo() // 상품명: Apple Macbook, 가격: 2000000원

 

객체 리터럴(Object Literal).
자바스크립트에서는 객체 리터럴을 활용해서 바로 객체를 만들 수도 있다. 객체 리터럴은 크랠스와 같은 템플릿 없이 빠르게 객체를 만들 수 있는 방법이라고 생각하면 된다. 2개 이상의 속성과 메소드가 있을대는 쉼표로 구별해주고 가독성을 위해서 줄바꿈도 해주는게 좋다.

const 변수명 = {
속성명: 데이터,
메소드명: function () { 메소드 호출시 실행할 코드들 }
}

const computer = {
	name: 'Apple Macbook',
	price: 20000,
	printInfo: function () {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

computer.printInfo()

name, price라는 속성과 printInfo 라는 메소드를 가지고 있는 객체를 만들어서 computer라는 변수에 할당하는 코드이다. 해당 객체의 printInfo 메소드를 바로 호출까지 하였다.
결과적으로는 클래스를 활용해 객체를 만든 것과 동일하다. 그렇다면 왜 굳이 복잡하게 클래스를 정의할까? 바로 재사용성 때문이다. 한번 클래스를 만들어두면 같은 속성과 메소드를 갖고 있는 객체를 훨씬 더 간결한 코드로 만들 수 있다.
Ex)
의류 쇼핑몰을 만들려고 한다. 옷의 종류는 많지만 기본적으로 색깔, 싸이즈, 가격의 속성을 가지고 있다. 그리고 이 옷들의 세 속성을 바로 확인할 수 있게 출력해주는 메소드가 필요하다. 클래스와 객체를 활용해 작성해보자.

class Cloth {
    constructor(color, size, price) {
        this.color = color
        this.size = size
        this.price = price
    }

    printInfo() {
        console.log(`색깔: ${this.color}, 사이즈: ${this.size}, 가격: ${this.price}`)
    }
}

const shirts = new Cloth('white','M','50000')
const coat = new Cloth('navy', 'L', '200000')

shirts.printInfo()
coat.printInfo()

솔직히 앞에 있던 건 다 한번씩 훑어보면 됐지만 클래스는 다르다 여러 번 반복해서 써보고 익혀야한다.!!!!!!!!!

배열의 선언.

// 1번째 방법
const arr1 = new Array(1, 2, 3, 4, 5)

// 2번째 방법
const arr2 = [1, 2, 3, 4, 5]

반복문으로 배열 불러오기

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

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

const rainbowColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

for (const color of rainbowColors) {
	console.log(color)
}

열 개 데이터 가진 배열로 가격 합계와 평균 구하기

const priceList = [1000, 2000, 5000, 7000, 10000, 9000, 3000, 15000, 20000, 17000]
let sum = 0

for (const price of priceList) {
	sum += price
}

const avg = sum / priceList.length
console.log(`합계: ${sum}, 평균: ${avg}`)

 

JWT (JSON Web Token) 이란?
JSON 웹 토큰은 말그대로 JSON 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 web Token을 의미한다. JWT는 Token 자체를 정보로 사용하는 Self-Contained 방식으로 정보를 안전하게 전달한다. 주로 사용자 인증이나 정보 전달에 사용된다. JWT를 이용하면 Client는 자신의 정보를 보는 것은 가능하지만 수정은 불가능하다. 그 데이터를 수정하려면 반드시 Server를 통해서만 가능하다.

• 예를 들어, 로그인 기능을 생각해보면 사용자가 로그인하면 서버에서 회원임을 인증하는 토큰을 넘겨줌으로써 이후 회원만 접근할 수 있는 서비스 영역에서 신분을 확인하는 데 쓰일 수 있습니다.
  • 더 깊게 알아보기

[IT정보] JSON 웹 토큰(JSON Web.. : 네이버블로그 (naver.com)

[IT정보] JSON 웹 토큰(JSON Web Token, JWT) 개념

API란 무엇일까? API 쉽게 이해하기 (brunch.co.kr)

API란 무엇일까? API 쉽게 이해하기

API는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.

[JAVA] 자바 인터페이스란?(Interface)_이 글 하나로 박살내자 (tistory.com)

[JAVA] 자바 인터페이스란?(Interface)_이 글 하나로 박살내자

이건 인터페이스의 기본 알아두자!!!

이번 프로젝트에서는  파이썬부분(백)에서 디비불러와서 프론트로 GET POST하며 JSON형태로 값을 주고 받았다. 그것도 api일종이긴 한데 너무 기본적인거라고 한다.ㅎ ㅎ 넘 어렵쓰;

내일부터 주특기 강의가 열린다.
후... 노드js.... 이놈 딱 대!

앗 깜박하고 알고리즘 안올렸다;; 새벽에 일어나서 올림
연필 1다스는 12자루 학생 1인당 1자루씩 나누어준다고 할 때 N명의 학생수를 입력하면 필요한 연필의 다스 수를 계산하는 프로그램 짜시오.
넘 쉽다. 그냥 12로 나누어서 몫 나머지 구하는 함수 쓰면 되기도 하고
아에 함수 Math.ceil() 쓰면 바로 가능하다

function solution(n){
    let answer = Math.ceil(2.111)
    return answer
}
console.log(solution(25))

너무 쉬워서 하나 더
1에서 n까지의 합을 출력하는 프로그램 작성

function solution(n){
    let answer=0;
    for (i = 1; i<=n; i++){
        answer=answer+i
    }
    return answer
}
console.log(solution(6))

빨리 쉬운 문제들 넘기기 위해서 하나 더
7개의 수가 주어지면 그 숫자 중 가장 작은 수를 출력하는 프로그램

function solution(arr){
    let answer;
    // let min = Number.MAX_SAFE_INTEGER
    let min=arr[0];
    for (let i=1; i<arr.length; i++){
        if(arr[i]<min) min=arr[i]
    }
    answer=min
    return answer

}