1주차

김민지·2024년 5월 18일

Codeit Boost 스터디 | BE | Express

목록 보기

1/25

프로그래밍 오버뷰

서비스의 동작원리: 클라이언트, 서버 구조

클라이언트: Chrome, Safari 등의 웹브라우저
HTML: 어떤 내용이 어디에 들어갈 지의 구조 구축
CSS: 색, 디자인
Javascript: 동작 지정
그러나 이러한 코드들이 내 로컬 컴퓨터에 있지는 않다. 예를 들어 유튜브를 실행하기 위해 유튜브의 html, css, javascript 코드를 내가 가지고 있지는 않다.
서버: 항상 켜져있는 컴퓨터로, DNS에 저장된 IP주소를 통해서 접근함.
서버로부터,
사이트에 처음 들어갈 때에는 html, css, javascript 등의 코드를 불러옴
사이트를 사용중에는 데이터를 불러옴
데이터베이스가 있음: 새 포스트를 올리거나 좋아요, 댓글 등을 작성하면 서버의 데이터베이스에 저장되어서 다른 사람들도 불러와서 볼 수 있음

서비스의 구현

라이브러리, 프레임워크: 사람들이 가져다 사용할 수 있도록 미리 작성해둔 코드

프로그래밍 분야들

웹 개발 분야

클라이언트 쪽 개발 (= 프론트엔드 개발)
기본 언어들: HTML, Javascript, CSS
추가적인 프레임워크들: React(가장 많이 쓰임), Angular, Vue
서버 쪽 개발 (= 백엔드 개발)
핵심개념: 데이터베이스, API(Aplication Programming Interface: 클라이언트와 서버가 서로 소통할 수 있도록 해주는 프로그램)
API 개발툴: Java, Python, Kotlin, php, Ruby, Javascript(Node.js)
데이터베이스 개발툴: SQL(규칙이 엄격, 역사가 깊어서 안정적), NoSQl(자유로움, 덜 안정적)

usa의 인구수를 1 증가시키는 sql 코드

백엔드 언어, 프레임워크, 데이터베이스 추천: JavaScript, Nodejs, SQL

Java, Spring이 한국 기업 점유율은 높은 편임

모바일 개발 분야

클라이언트 대상이 브라우저에서 앱으로 변경됨
개발언어: IOS(apple) - Swift, Android - Kotlin
장점: 각 모바일에 최적화된 형태로 개발이 가능함
크로스 플랫폼: React Native(페이스북), Flutter(구글)
장점: IOS, Android를 동시에 다룰 수 있어 개발비용을 줄일 수 있고 서비스가 복잡하지 않은 경우 적합함

데이터 분야 (주로 python)

데이터 엔지니어: 데이터에 대한 지식 + 활용 지식
데이터 애널리스트: 데이터 분석 (SQL, Python)
데이터 사이언티스트: 머신러닝을 통해 미래 예측

프로그래밍 프리뷰

업무 자동화

파이썬으로 모든 수강생에게 메일 보내기

주소록 내보내기 → csv 파일 다운로드
pandas를 통해 csv 파일 불러와서 데이터 확인
각 회원 별 이메일 작성하기

import pandas as pd
contacts_df = pd.read_csv('./contacts.csv')

for index, contact in contact_df.interrows(): 
	name = contact['Given Name']
    email = contact['Email 1 - Value']
    subject = f'{name}님 수료를 축하드려요!'
    body = ( '메일 내용' )
print(f'받는 사람: {email}\n제목: {subject}\n본문: {body}\n\n')
# 출력해서 내용이 잘 만들어진건지 확인

파이썬으로 이메일 보내기

import yagmail
email = "보낼 메일 주소"
yag = yagmail.SMTP(발송 메일 주소, 발송 메일 비밀번호) # from
yag.send(보낼 메일 주소(email), 제목(subject), 내용(body)) # to (받는사람)
# 이 때 짧은 시간 내에 메일을 연달아보내면 스팸계정으로 분리되기 때문에 딜레이 주기
from time import sleep
sleep(30)

이력서 300개 직군별 폴더로 분류하기

import os
from shutil import copy

for file in os.listdir('./data'): 
	file, ext = file.split('.')
    name, position = file.split('__')
    src = f'./data/{file}.{ext}'
    dest_path = f'./data/{position}'
    if not os.path.exists(dest_path): 
    	os.makedirs(dest_path)
    dest = f'./data/{position}/{file}.{ext}'
    copy(src, dest)

파이썬 티켓팅 매크로

from selenium import webdriver
from time import sleep

selenium 공식 웹사이트 참고: https://www.selenium.dev/documentation/

데이터 사이언스

그래프로 대량 데이터 분석하기: 파이썬 시각화
SQL로 우리회사 데이터 직접 쿼리하기
머신러닝으로 손글씨 인식하기

웹개발

넷플릭스 클론코딩 (html, css)
클론코딩이란? 사이트를 하나 정해서 개발자 코드 및 사이트 이미지를 참고해가며 동일한 웹페이지 하나를 copy해서 제작해보는 학습법
틱택토 게임 만들기 (JavaScript)
디스코드 ChatGPT봇 만들기

프로그래밍 시작하기 in JavaScript

자바스크립트 첫 걸음

연습문제: 화면에 15를 3번 출력하기

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

프로그래밍 기본 개념

세미콜론 ;

세미콜론은 문장의 마침표처럼 작동하는 프로그래밍 언어의 마침표
JavaScript는 한 줄에 한 문장씩 출력할 경우 ;를 자동으로 붙여주는 기능이 존재함
따라서 반드시 작성할 필요는 없으나, 배우는 단계에서는 예상치 못한 오류를 줄이기 위해 명시적으로 작성하는 것을 원칙으로 두기로 함

코멘트 (주석) //, /* 주석내용 */

어떤 의도로 코드가 작성되었는지를 설명할 때
구현한 코드가 어떤 동작을 하는지 기록할 때

자료형(Data type)

숫자: 정수(int), 소수(float) ← 사칙연산 가능
문자열(string): "Hello", 'Hello' ← 더하기 기호는 문자열 데이터를 연결하는데에 사용됨
불린(Boolean): True, False의 값을 가짐, 주로 어떤 조건문에 대한 결괏값으로 사용됨

추상화(Abstraction) 개요

복잡한 것들을 목적에 맞게 단순화해서 핵심을 명확히 함

변수

지나치게 주관적인 코드, 오차를 방지하기 위해 명확한 의미를 담은 변수 활용
변수 선언 및 값 할당

let name; // 변수 선언
name = "minji"; // 값 할당
let name = "minji"; // 동시에도 가능

변수 작명 가이드
꼭 지켜야 하는 규칙 (지키지 않으면 오류)
(1) JavaScript 식별자는 '문자(a-z, A-Z)', '밑줄(_)' 혹은 '달러 기호($)'로 시작해야함. 두 번째 글자부터는 '숫자(0-9)'도 가능.
(2) '대문자'와 '소문자' 구별
myname과 myName은 다른 이름
(3) 예약어는 사용 불가
예약어 예시: if, for, let 같은 것들이 있습니다.
지키면 좋은 규칙 (더 좋은 스타일을 위해)
(1) 아래와 같은 의미 없는 이름은 가독성을 떨어트리므로 지양

let a, b, c, d;

(2) 너무 추상적인 이름 지양

let name; // 여러 이름이 나오는 상황이라면 어떤 이름인지, 더 구체적으로 사용하는 것이 보다 바람직함

(3) camelCase 활용
첫 번째 글자는 소문자로, 띄어쓰기가 있는 각 단어의 첫 문자를 대문자로 표기하는 방식

let bad_variable_name; // 비추천 방식
let goodVariableName; // 추천 방식

자바스크립트에서는 변수를 선언만 하고 사용하지 않는다고 해서 오류가 발생하지는 않음, 그러나 이러한 방식은 가독성, 성능 저하의 원인이 될 수 있으므로 지양하는 것을 권장함
기타 스타일 가이드 링크
https://github.com/ParkSB/javascript-style-guide
https://google.github.io/styleguide/jsguide.html
https://www.w3schools.com/js/js_conventions.asp
https://standardjs.com/rules-kokr.html
https://github.com/rwaldron/idiomatic.js/tree/master/translations/ko_KR
indent(들여쓰기) VScode 에디터 설정
- 설정창(Settings) - editor tab 검색 - Editor: Detect Indentation 체크 해제, Editor: Tab Size 를 2로 변경
- 기존 작성 코드에 변경사항 적용 방법
기존 작성 파일 접근 - Ctrl + a - 우클릭 - Format Document 클릭
연습문제

// 변수 설정
let espresso = 10; 
let milk = 170; 
let chocolateSyrup = 50; 
let whippedCream = 60;
// 메뉴별 칼로리 테스트
console.log(espresso); // 에스프레소 칼로리
console.log(espresso + milk); // 라떼 칼로리
console.log(espresso + chocolateSyrup + milk); // 모카 칼로리
console.log(espresso + chocolateSyrup + milk + whippedCream); // 모카(휘핑 추가) 칼로리

함수

변수가 값을 저장하는 것이라면, 함수는 명령을 저장하는 개념

// 함수 선언
function 함수이름(){
  	명령; 
  	명령; 
};
// 함수 호출
함수이름();

지금까지 출력을 위해 사용하던 consol.log() 도 개발자들이 미리 작성해둔 함수임!
연습문제

// 여기에 코드를 작성하세요
function printChorus(){
  console.log('무궁화 삼천리 화려 강산');
  console.log('대한 사람 대한으로 길이 보전하세');
}

// 애국가 가사
console.log('1절');
console.log('동해 물과 백두산이 마르고 닳도록');
console.log('하느님이 보우하사 우리나라 만세');
printChorus();

console.log('2절');
console.log('남산 위에 저 소나무 철갑을 두른 듯');
console.log('바람서리 불변함은 우리 기상일세');
printChorus();

파라미터

// 함수 선언
function 함수이름(파라미터){
  	명령; 
  	명령; 
};

연습문제

// 여기에 코드를 작성하세요
function teraToGiga (tera) {
  let giga = tera * 1024
  console.log(tera + "TB는\n" + giga + "GB 입니다.")
}
function teraToMega (tera) {
  let mega = tera * 1024 * 1024
  console.log(tera + "TB는\n" + mega + "MB 입니다.") 
}

// TB -> GB 테스트
teraToGiga(2);
// TB -> MB 테스트
teraToMega(2);

여러개의 파라미터: ,를 사용해서 구분함
연습문제

// 여기에 코드를 작성하세요
function bmiCalculator(name, weight, height){
  let bmi = weight / (height * height / 10000)
  console.log(name + "님의 체질량지수는 " + bmi + "입니다.")
}

// 테스트 코드
bmiCalculator('홀쭉이', 43.52, 160);
bmiCalculator('코린이', 61.25, 175);
bmiCalculator('통통이', 77.76, 180);

return문

연습문제

// 여기에 코드를 작성하세요
function interestCalculator(amount, term, rate){
  let interest = amount * term * rate / 100;
  return interest;
}

// 조건 입력 테스트
let myMoney = 3650000; // 맡긴 금액 (원)
let saveTerm = 1; // 맡기는 기간 (년)
let interestRate = 4; // 이자율 (%)

// 수령액 계산 테스트
let myInterest = interestCalculator(myMoney, saveTerm, interestRate);
let totalMoney = myMoney + myInterest;

// 출력 테스트
console.log('맡긴 금액은 ' + myMoney + '원 입니다.');
console.log('이자는 ' + myInterest + '원 입니다.');
console.log('최종 받을 금액은 ' + totalMoney + '원 입니다.');

프로그래밍 언어 이해하기

프로그래밍 언어 살펴보기

컴퓨터: 사람의 일을 대신해줌
프로그램: 컴퓨터가 어떤 일을 해야할지 알려주는 설명서
프로그래밍 언어: 프로그램을 구성하는 언어
TIOBE에서 프로그래밍 언어 인기 순위 확인 가능

프로그래밍 언어를 분류하는 두 가지 기준

(1) 객체지향인가 아닌가

객체지향 도입 배경
Top-down 방식: 전체 프로그램을 기능만을 기준으로 작은 task들로 쪼갠 후 개발자들이 각각 task 하나씩을 맡아 작업하는 식으로 협업하는 방법 → 문제점: 모두의 task를 모두 함께 합쳐봐야 전체프로그램이 잘 동작하는지 아닌지를 확인할 수 있고, 기능 수정시에도 하나만 수정하기 어려움, 결국 전체 코드를 매번 점검해야 하는 불편함이 있음
Bottom-up(객체지향) 방식: 데이터와 데이터가 필요한 함수끼리를 묶어서 객체를 형성하면 각 객체별로 테스트도 가능하고, 수정도 가능함.

⭐ 즉, 작업 단위를 나누는 기준이 기준 / 데이터로 서로 다름
객체 지향의 장단점
장점: 유지 보수에 용이하다, 가독성이 높다, 재사용하기 좋다, 테스트가 쉽다
단점: 설계가 어렵다, 작은 규모의 프로그램에서는 객체 지향적으로 작성하는 것이 더 오래 걸릴 수 있다, 극도로 빠르거나, 주어진 자원을 극도로 활용해야 하는 경우에는 좋지 않다, 임베디드와 같은 특정 분야에는 부적합하다.
객체지향 언어 vs 절차지향 언어

객체지향프로그래밍: Java, Python, C#, C++, Kotlin, Ruby 등등
절차지향프로그래밍: C언어 등

(2) 변수선언 시 데이터타입이 정해지는가 아닌가
1. Dynamic typing: Python, Ruby, JavaScript, php
간결, 편리함. 작은 사이즈의 프로그램을 금방 만들기 좋음. 그러나 실행속도는 비교적 느림
2. Static typing: C, C++, Java
비교적 제약이나 규제가 많아 사람의 실수를 방지함, 크고 복잡한 프로젝트에 적합함, 실행속도가 비교적 빠름
→ 임베디드, 실시간 투자, 인공 지능 분야에서 활약

Dynamic typing과 Static typing의 장단점

프로그래밍 언어 Overview

High level programing language: 사람과 가까움 - Python, Ruby
추상화가 많이 될 수록 사람에 가까워짐
속도가 느리고 컴퓨터 수준이 높아야 함
Low level programing language: 컴퓨터와 가까움 - C, Java, 더 나아가 기계어, 어셈블리어
신경쓸게 많고 유지보수에 노력이 많이 듦
특히 에어컨, 전광판 등의 전자제품에 사용함

프로그래밍 언어 제대로 사용하기

가독성 높히기

주석(comment) 잘 활용하기
변수, 함수의 작명을 적절히 수행하기
snake 표기 math_score, pascal 표기 MathScore, camel 표기 mathScore
언어 + style guide로 검색해서 권장 코드 작성 방식 확인하기
Python 공식 스타일 가이드(일명: PEP8): https://www.python.org/dev/peps/pep-0008/
Google Python 스타일 가이드: https://github.com/google/styleguide/blob/gh-pages/pyguide.md
JavaScript 표준 스타일 가이드: https://standardjs.com/
Airbnb JavaScript 스타일 가이드: https://github.com/airbnb/javascript
Google JavaScript 스타일 가이드: https://google.github.io/styleguide/jsguide.html
Java를 소유한 회사 오라클의 스타일 가이드: https://www.oracle.com/technetwork/java/codeconvtoc-136057.html
Google Java 스타일 가이드: https://google.github.io/styleguide/javaguide.html
파일 분리: 객체지향프로그램 활용!
Design Pattern: 쉽게 말하자면 '자주 묻는 질문'의 프로그래밍 버전. 자주 발생하는 오류들과 그에 대한 해결책을 정리해둔 도서.

라이브러리
도서관에서 필요한 책을 찾아보듯, 내가 필요한 코드를 다른 사람이 만들어둔 내용을 그대로 가져올 수 있도록 하는 개념
프레임워크
이미 완성된 프로그램에 내가 원하는 내용들 몇가지만 추가해서 만드는 것
예: Ruby on Rails
장점: 개발자가 미처 생각하지 못한 부분 (보안, 암호화)까지 이미 완성되어있어서 편리함
라이브러리 vs 프레임워크
카페를 창업했다고 생각하자. 이 때 유명 레시피, 커피머신 등을 도입하는 것은 라이브러리다. 그러나 스타벅스같은 프렌차이즈를 창업한다면 가게 디자인, 재료 등등 하나부터 열까지 전부 프렌차이즈 본사에서 정해준다.

프로그래밍 핵심 개념 in JavaScript

자료형 종류

숫자형
사칙연산(+, -, *, /), 나머지연산(%), 거듭제곱 (**)
문자열
"문자열", '문자열'
문자열 중간에 따옴표를 사용하고 싶으면

역슬래쉬(\) + 따옴표 (' or ")로 사용
Tab 위에 있는 backtick으로 전체 문자열을 감싸줌

console.log(`한국 영화 역사상 아카데미상을 받은 것은 '기생충'이 처음이다.`)
console.log(`아리스토텔레스는 "인간은 사회적 동물이다."라고 말했다.`)

불린형 (Boolean) ← 수학자 조지 불의 이름을 따옴

숫자가 아닌, 진리값을 사용해서 표현함
비교연산자: 같다 - ===, 다르다 - !==로 사용 (파이썬과 다른 부분, 나머지는 동일) -
AND: &&, OR: ||, NOT: !
자료형 확인: typeof 확인하고 싶은 수 - 문자열 형태의 string 등으로 나옴

console.log(typeof 8 - 3) // typeof 연산자가 제일 우선순위가 높음 - NaN 발생
console.log(typeof (8 - 3)) // number 결과로 나옴

연산자 순위 및 형변환

연산자 우선순위 표: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/%EC%97%B0%EC%82%B0%EC%9E%90_%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84

예제:

typeof (6 * 2 === 11 || 13 - 7 < 7 && !true);
typeof (6 * 2 === 11 || 13 - 7 < 7 && false);
typeof (12 === 11 || 6 < 7 && false);
typeof (false || true && false);
typeof (false || false);
typeof false; // 최종 결과: false

형변환: 문자열로 바꾸려면 String(), 숫자형으로 바꾸려면 Number(), 진리형으로 바꾸려면 Boolean()을 사용하면 됨

Boolean에서 false로 변환되는 값들: 숫자에서는 0, 문자에서는 빈문자열
Boolean값을 숫자로 변화시키려면 false = 0, true = 1로 변함
Number에서 숫자가 아닌 문자열을 숫자로 변화시키려면 NaN으로 변함

자동 형변환

+는 양쪽 값 중 하나라도 문자열이라면 나머지 하나도 문자열로 변환해서 문자열 붙이기 기능으로 사용됨
나머지 연산자들은 숫자로 변환해서 계산
비교연산자도 숫자로 바뀌어서 연산됨
같음 비교 연산:
===, !== 일치 / 불일치: 형변환 발생 X 상태로 비교
==, != 동등 / 부등: 숫자형태로 형변환 발생 후 비교

템플릿 문자열

function calcWage(name, time, wage) {
  let total = time * wage;

  console.log(`${name}님의 근무 시간은 총 ${time}시간이며, 최종 급여는 ${total}원 입니다.`);  // 괄호 안에 코드를 작성하세요
}

// 테스트 코드
calcWage('김윤식', 208, 11340);
calcWage('성규재', 175, 12160);
calcWage('손태웅', 161, 13070);
calcWage('허우선', 222, 10980);

null, undefined

null: 개발자가 의도적으로 값이 없다는 것을 표현하기 위한 개념
의도적으로 할당함 (의도적인 없음)
undefined: 실행하며 값이 없다는 것을 알려주는 개념 (처음부터 없음)
선언만 하고 아무 값도 할당하지 않음

추상화

할당 연산자 (=)

복합 할당 연산자: +=, *=, -=

// 다음 두 줄은 같습니다
x = x + 1;
x += 1;
// 다음 두 줄은 같습니다
x = x * 2;
x *= 2;
// 다음 두 줄은 같습니다
x = x - 3;
x -= 3;
// 다음 두 줄은 같습니다
x = x / 2;
x /= 2;
// 다음 두 줄은 같습니다
x = x % 7;
x %= 7;

증가, 감소 연산자: ++, --

// 다음 세 줄은 같은 의미입니다
x = x + 1;
x += 1;
x++;
// 다음 세 줄은 같은 의미입니다
x = x - 1;
x -= 1;
x--;

return문

또다른 역할: 함수를 종료함
따라서 return문 아래에는 코드를 작성하는 것이 무의미함
console.log()과의 차이
return값이 없는 함수를 실행하면 undefined값을 return받음

function first() {
    let message = "코드잇"; 
    return message;
}

function second() {
    let message = "codeit";
    console.log(message);
}

function third() {
    let message = undefined;
    console.log(message);
    return message;
}
// 출력부분
console.log(first()); // 코드잇
second(); // codeit
console.log(third()); // undefined undefined

optional parameter
기본으로 undefined가 아닌, 기본값을 설정할 수 있는 파라미터

function orderSetMenu(sandwich, drink = '스프라이트'){
  console.log(`주문하신 ${sandwich}, ${drink} 세트 메뉴 나왔습니다!`)
}
// 테스트 코드
orderSetMenu('코드웨잇 클럽');
orderSetMenu('터키베이컨 아보카도', '코카콜라');
orderSetMenu('코드웨잇 멜트');
orderSetMenu('이탈리안 비엠티', '닥터페퍼');
orderSetMenu('에그마요', '환타 오렌지');

변수의 scope

지역변수: 블록문({...}) 안에서 정의된 변수는 블록문 안에서만 유효함
전역변수(글로벌변수): 블록문 밖에서 선언된 변수
블록문 안에서 변수를 실행하기 위해서는 첫번째로 지역변수가 존재하는지를 체크하고, 두번째로 전역변수가 존재하는지를 확인함

상수: 변하지 않고 일정한 값으로, 어떤 경우에도=을 통해 다른 수로 변경이 불가함
예: const MY_NAME;
값이 할당되지 않으면 오류 발생

제어문

if문

if (조건부분) {
  동작부분;
} else{
  동작부분;
}

예제

function checkHeight(height) {
	// 여기에 코드를 작성하세요
	if (height >= 140){
	  console.log("탑승이 가능합니다.")
	} else{
	  console.log("탑승이 불가능합니다.")
	}
}
checkHeight(140);
checkHeight(135);
checkHeight(170);

function printGrade(midtermScore, finalScore) {
  let totalScore = midtermScore + finalScore;

  if (totalScore >= 90) {
    console.log('A');
  } else if (totalScore >= 80) {
    console.log('B');
  } else if (totalScore >= 70) {
    console.log('C');
  } else if (totalScore >= 60) {
    console.log('D');
  } else {
    console.log('F');
  }
}

switch문

switch (비교할 값) {
  case 조건값_1:
    동작부분;
    break;
  case 조건값_2:
    동작부분;
    break;
  default: 
    동작부분;
}

if문으로 switch문을 대체할 수도 있음

let myChoice = 2;
// switch문: 암시적 형변환을 허용하지 않음 
switch(myChoice) {
  case 1:
    console.log('토끼를 선택한 당신, ...');
    break;
  case 2:
    console.log('고양이를 선택한 당신, ...');
    break;
  case 3:
    console.log('코알라를 선택한 당신, ...');
    break;
  case 4:
    console.log('강아지를 선택한 당신, ...');
    break;
  default:
    console.log('1에서 4사이의 숫자를 선택해 주세요.'); 
}
//if문
if (myChoice === 1) { // 조건식에서 반드시 등호를 3개 입력해야 함
  console.log('토끼를 선택한 당신, ...');
} else if (myChoice === 2) {
  console.log('고양이를 선택한 당신, ...');
} else if (myChoice === 3) {
  console.log('코알라를 선택한 당신, ...');
} else if (myChoice === 4) {
  console.log('강아지를 선택한 당신, ...');
} else {
  console.log('1에서 4사이의 숫자를 선택해 주세요.');
}

function checkPrice(grade) {
  switch (grade) {
    case 'VIP':
      동작부분;
      break;
    case 'R':
      동작부분;      
      break;
    case 'S':
      동작부분;
      break;
    case 'A':
      동작부분;
      break;
    default:
      동작부분;
  }
}

for 반복문

for(초기값; 조건; 가감) {
  동작부분;
}

for (let i = 1; i <= 10; i++) { // 이 때 i는 로컬변수!! 블록 밖에서 사용 불가!
  console.log(`${i} 코드잇 최고!`);
}
// 추가동작, 초기화 부분 생략 가능
for (let i = 1; i <= 10;) {
  console.log(`${i} 코드잇 최고!`);
  i++;
}
let i = 1; 
for (; i <= 10; i++) {
  console.log(`${i} 코드잇 최고!`);
}

예제: 1 ~ 100까지 짝수만 출력

for (i = 1; i <= 50; i++) {
  console.log(2 * i);
}

높이를 input받아서 삼각형 그리기

function printTriangle(height) {
  let message = '';
  for (let i = 0; i < height; i++) {
    message += '*';
    console.log(message);
  }
}

// 테스트 코드
console.log('높이: 1');
printTriangle(1);

console.log('높이: 3');
printTriangle(3);

console.log('높이: 5');
printTriangle(5);

while 반복문

while(조건부분) {
  동작부분;
}

for문과의 차이: i(초기값)가 블록 밖에서도 사용될 수 있다.

continue: 아래의 동작들을 무시하고 조건부분으로 넘어가게 됨

let previous = 0;
let current = 1;

for (let i = 1; i <= 10; i++) {
  console.log(current);
  let temp = previous;  // previous를 임시 보관소 temp에 저장
  previous = current;
  current = current + temp;  // temp에는 기존 previous 값이 저장돼 있음
}

프로그래밍과 데이터 in JavaScript

객체

객체 만드는 법

let codeit = {
	속성명: 속성값,
    속성명: 속성값,
    ...
  	속성명: { // 객체 안의 객체도 생성 가능
      속성명: 속성값, 
      속성명: 속성값, 
      ...
    }
}

속성값 명명 규칙
첫번째 글자는 반드시 문자, 밑줄(_), 달러기호($) 중 하나로 시작해야 함
띄어쓰기 금지
하이픈(-) 금지 → 만약 규칙을 반드시 어겨야 하는 경우에는 ''를 씌워서 문자열로 만들어줄 것

객체 접근 방법

점 표기법: codeit.속성명
대괄호 표기법: codeit[속성명] ← 문자열 속성명의 경우 반드시 이 표기법을 사용해야 함
예제

let myVoca = {
	// 여기에 코드를 작성하세요
  function: '함수',
  variable: '변수',
  constant: '상수',
  local: '지역의',
  global: '전반적인'
};

console.log(myVoca);
console.log(myVoca.local);
console.log(myVoca.constant);
console.log(myVoca.function);

수정: codeit.특성명 = "새로운 특성값"처럼 원래 존재하던 특성명으로 접근해서 새 특성값 할당하기
추가: codeit.ceo = "김민지" 처럼 원래는 존재하지 않던 특성명으로 접근해서 새 특성값을 할당해주기
삭제: delete codeit.worstCourse; 처럼 delete 명령어로 삭제하기
객체에 특성명이 존재하는지 검사하는 방법

undefined 활용

console.log(codeit.name !== undefined);

in 연산자

console.log('name' in codeit); // 'name': 특성명을 문자열로 표현해야함

예제

let myVoca = {
  function: '함수',
  variable: '변수',
  constant: '상수',
  local: '지역의',
  global: '전반적인',
};

// 이미 외운 단어 3개를 삭제해 주세요
// 여기에 코드를 작성하세요
delete myVoca.function;
delete myVoca.constant;
delete myVoca.local;

console.log(myVoca);
console.log(myVoca.constant);

// 오늘 외울 단어 4개를 추가해 주세요
// 여기에 코드를 작성하세요

console.log(myVoca);
console.log(myVoca.export);

// 3. default value의 뜻을 출력해 주세요
// 여기에 코드를 작성하세요

메소드: 특성값 자리에 들어가는 함수

greetings.sayHello(); // 함수명: sayHello, 객체명: greetings
greetings['sayHello']();

let myVoca = {
  // 여기에 코드를 작성하세요
  addVoca: function (key, value) {
    myVoca[key] = value;
  },
  deleteVoca: function (key) {
    delete myVoca[key];
  },
  printVoca: function (key) {
    console.log(`"${key}"의 뜻은 "${myVoca[key]}"입니다.`);
  },
};

// addVoca메소드 테스트 코드
myVoca.addVoca('parameter', '매개 변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);

// deleteVoca메소드 테스트 코드
myVoca.deleteVoca('parameter');
myVoca.deleteVoca('element');
console.log(myVoca);

// printVoca메소드 테스트 코드
myVoca.printVoca('property');

for ... in 반복문

for (let key in codeit){
  console.log(key) // 특성명 출력
} // 특성값 출력? codeit[key]

객체 특성값의 정렬 순서:

let myObject = {
  '2': '알고리즘의 정석',
  '3': '컴퓨터 개론',
  '1': '자바스크립트 프로그래밍 기초',
};

for (let key in myObject) {    // 자바스크립트 프로그래밍 기초
  console.log(myObject[key]);  // 알고리즘의 정석
} 							   // 컴퓨터 개론

내장객체 → 예: 날짜(Date 객체)

배열 (결국 객체의 일종)

특성값들이 순서를 나타내는 수라면 객체보다는 배열로 나타내는 것이 더 바람직하다.
인덱싱(인텍스를 통해 요소에 접근): console.log(courseRanking[2])
배열의 요소 추가: members[5] = "sweetheart" 이런 식으로 객체와 유사하게 추가 가능
이 때, 인덱스를 배열의 크기 + 1인 수로 설정하지 않을 경우 중간에 비는 값이 생김
배열의 요소 삭제: delete members[4] - 완전한 삭제가 아님
splice 메소드를 사용해야 함
members.splice(4) : 4번 인덱스의 요소부터 끝까지 쭉 삭제
members.splice(삭제할 인덱스, 삭제할 개수, 추가하고자 하는 요소들): 하나만 삭제할거라면 삭제할 개수 = 1로 설정해야 함

members.splice(1, 0, "apple", "banana") // 삭제 없이 1번 인덱스 뒤에 요소 두개 삽입 가능
members.splice(1, 2, "apple", "banana") // 2개 삭제

배열의 첫 요소 삭제: 배열명.shift()
배열의 마지막 요소 삭제: 배열명.pop()
배열의 첫 요소로 값 추가: 배열명.unshift(추가할값)
배열의 마지막 요소로 값 추가: 배열명.push(추가할값)
for ... of 반복문: 간결한 코드 작성 가능

for (변수 of 배열){
  동작부분;
}

for...in문보다는 for...of 문이 더 안전하고 적합한 방식임

다차원 배열: 배열의 요소에 배열이 들어가는 형태
각 요소에 접근하는 법: 배열명[0][2] - 첫번째 배열의 세번째 원소

자료형 심화

다양한 숫자 표기

1e9 ← e 왼쪽의 수에 10의 9제곱을 곱한 만큼의 수
2진법: 0b(2진수)
8진법: 0o(8진수)
16진법: 0x(16진수)

숫자도 객체다

변환하고자하는수.toFixed(n) 메소드: 소수점 n자리수에서 반올림하거나 0으로 채워서 소수점 n자리로 자릿수를 맞추기
주의점: output이 string이라서 만약 연산을 하고자 한다면 Number()를 이용해 숫자로 사용해줘야한다.
변환하고자하는수.toString(n) 메소드: 변환하고자하는수를 n진수로 변환해줌
주의점: 변환하고자하는수를 변수에 담지 않고 수로 직접 사용할 경우, ..을 두개 찍어줘야 함

문자열을 객체처럼 다루기

길이 구하기: .length
인덱스로 요소 찾기: indexOf()(앞부터), lastIndexOf()(뒤부터)
대소문자 변환: toUpperCase(), toLowerCase()
양 끝 공백 제거: trim()
부분문자열 접근: slice(a, b) - a ~ b-1번 인덱스까지 접근

기본형(Number,String, Boolean, Null, Undefined) 과 참조형(객체)

기본형: 변수에 담아 사용하면 값이 그대로 할당
참조형: 해당 객체를 가리키는 주소가 할당

const로 변수 선언하기: 코드가 동작하는 동안에는 변수들이 상수로 활용되어야 하기 때문!

const는 재할당이 불가하고 대문자로 작성함 (변하지 않는 고정된 값에 사용)
let으로 선언된 변수들은 언제 값이 바뀔지 모르는 불확실성이 존재하므로 가독성이 낮아짐

김민지

다음 포스트

1주차