멋쟁이사자처럼 2일차 정리 (6월 18일)

6월 18일 학습 내용은 JavaScript의 핵심적인 개념과 데이터 조작 방법에 중점을 두었으며 연산자, 함수, 배열, 객체, 그리고 JSON에 대해 깊이 있게 다루었습니다.

1. 데이터 분석을 위한 연산 (Operator)

• Truthy/Falsy 값: JavaScript에서는 if (3 + 4)와 같은 값도 truthy 또는 falsy로 판단합니다. C나 Java에서는 0이 아닌 모든 값이 참으로 인식됩니다.
  Truthiness examples: true, {}, [], 42, "0", "false", -3.14, new Date(), Infinity, -42, -Infinity, 12n, 3.14 Falsiness examples: false, null, undefined, 0, -0, 0n, NaN, ""
   
• 논리 OR (||) 연산자: 둘 중 하나라도 true이면 true를 반환하며, 첫 번째 truthy 값을 반환합니다 (참을 찾습니다).
   
• 논리 AND (&&) 연산자: 둘 중 하나라도 false이면 false를 반환하며, 첫 번째 falsy 값을 반환합니다 (거짓을 찾습니다. 만약 거짓을 찾지 못하면 마지막 값을 반환합니다).
   
• 기본값 설정 방법:
  || (OR) 연산자를 사용: var name = null || 'default string';
  Nullish coalescing operator (??): 좌항이 null 또는 undefined일 때 우항의 값을 반환합니다.
   
• 숫자 산술 연산 및 타입 변환:
  덧셈 (+): 숫자를 문자열로 변환하여 문자열 연결을 수행할 수 있습니다 ('3' + 3 결과 33). 
  곱셈 (*): 문자열을 숫자로 변환하여 연산을 수행합니다 ('3' * 3 결과 9).
  숫자와 문자열('a')의 덧셈은 문자열 연결 ('3a'), 곱셈은 NaN을 반환합니다.
   
• NaN과 Infinity 비교: isNaN()과 같은 전역 함수를 활용하여 비교해야 합니다.
   

2. Array Collections (배열 컬렉션)

• 배열은 객체: JavaScript에서 배열은 컬렉션으로, 객체의 일종입니다.
   
• 배열 초기화: new Array(), new Array(5) (비어있는 배열, 길이는 5.)
                      new Array(1, 2, 3) (요소 초기화)
   
• 데이터 구조 활용:
  스택 (Stack): 후입선출 (LIFO - Last In First Out) 구조로, pop()을 이용하여 뒤에서부터 자료를 수정할 때 사용합니다.
  큐 (Queue): 선입선출 (FIFO - First In First Out) 구조로, push()와 shift()를 이용합니다. 전송과 관련된 경우(버퍼)에 활용됩니다.
   
  • splice(): 배열 요소를 추가, 삭제, 교체하는 다목적 메서드입니다.
    splice(index): index부터 끝까지 모든 요소를 제거합니다.
    splice(index, deleteCount): index부터 deleteCount만큼 요소를 제거합니다.
    splice(index, 0): index 위치에 아무것도 제거하지 않고 삽입할 수 있습니다.
• 배열 순회 및 변환 메서드 (Loop over):
  forEach: 배열의 각 요소에 대해 함수를 실행합니다.
  for...of: 반복 가능한 객체 (배열 포함)를 순회합니다.
  find: 조건을 만족하는 첫 번째 요소를 반환합니다.
  filter: 조건을 만족하는 모든 요소를 포함하는 새 배열을 반환합니다.
  map: 배열의 각 요소에 함수를 적용하여 새로운 배열을 반환합니다. (배열 변환)
  join: 배열의 모든 요소를 연결하여 하나의 문자열로 만듭니다.
  reduce: 배열의 모든 요소를 단일 값으로 "축소"합니다 (예: 총합 계산).
   

3. Object 객체

• 속성 사용하기: object.property 또는 object['property'] (특수 문자가 포함된 속성명에 유용).
   
• delete: 객체 속성을 삭제합니다.
   
• Proto Type: JavaScript 객체는 프로토타입을 통해 속성과 메서드를 상속합니다. 모든 생성자는 객체를 가지며, 동일한 기능을 공유합니다.
   
   
• 생성자 함수: function Exam(kor, eng, math) { ... }와 같이 생성자를 정의하여 객체를 생성합니다. new 키워드를 사용하여 호출하면 this는 새로 생성될 객체를 가리킵니다.
   

4. Function Object (함수 객체)

• 함수는 객체: JavaScript에서 함수는 일급 객체입니다.
   
• 함수 재사용: 함수는 반복적으로 생성하기보다는 가능한 한 재사용하는 것이 바람직합니다.
   
• 매개변수 (Parameter)
  arguments 객체: 함수 내부에서 전달된 모든 인수에 접근할 수 있는 유사 배열 객체입니다.
  Rest Parameter (...rest): 남은 인자들을 배열로 묶어줍니다.
   
• 클로저 (Closure): 외부 함수의 변수에 접근할 수 있는 내부 함수를 의미합니다.
   
• 화살표 함수 (Arrow Function)
  일반 함수와 매개변수 처리에 차이가 있습니다.
  arguments 객체가 없습니다.
  this 바인딩이 없습니다 (렉시컬 스코프의 this를 따릅니다). 즉, 객체가 없습니다.
  생성자로 사용할 수 없습니다 (new 키워드 사용 불가).

5. JSON (JavaScript Object Notation)

• 자바스크립트의 기본형: Boolean, Number, String, Array, Object 등은 값이 존재하고 타입이 존재합니다.
   
• JSON의 역할: JavaScript의 모든 객체를 쉽게 표현할 수 있게 해줍니다.
   
• XML vs JSON: JSON은 XML (태그로 마크업하는 방식) 보다 가볍고 읽기 쉬운 데이터 교환 형식입니다.
   
• JSON 파싱: JSON.parse()를 사용하여 JSON 문자열을 JavaScript 객체로 변환합니다. 이때 JSON 문자열의 키는 반드시 큰따옴표로 감싸야 합니다.
   
• 객체 속성 정의: 키와 값이 동일할 때 간결하게 표현할 수 있습니다.
   
• 데이터 구조 및 Destructuring (구조 분해 할당):
  데이터 구조는 중첩을 낮춰서 사용하는 것이 좋습니다.
  객체 속성을 연산에 직접 사용하는 것보다 Destructuring을 통해 새로운 변수로 생성하는 것이 바람직합니다.
  ES6에서 지원하는 기능으로, 속성의 복잡도를 낮추어 사용할 수 있습니다.
   

멋쟁이사자들 프론트엔드 심화과정 5기 1일차 정리

1. 기본 용어 이해

• 프로그램 (Program)이란?
  컴퓨터가 특정 작업을 수행하도록 만드는 절차와 명령어의 집합입니다.
  
  
• 애플리케이션 (Application)이란?
  프로그램에 사용자 인터페이스(UI)가 추가되어, 특정 업무를 가진 '사용자'가 직접 상호작용할 수 있도록 만든 소프트웨어입니다.
  
  
• UI (User Interface)와 UX (User Experience)
  UI: 기술자/개발자 관점에서 사용자가 마주하는 시각적인 화면, 버튼, 레이아웃 등을 의미합니다.
  UX: 사용자 관점에서 애플리케이션을 사용하며 느끼는 모든 경험(편리함, 만족도, 불편함 등)을 의미합니다.
  
  
• 개발자 (Developer)란?
  단순히 코드를 짜는 프로그래머를 넘어, 사용자의 업무를 이해하고 해결하기 위한 응용 프로그램(애플리케이션)을 만드는 사람입니다. 

2. 웹 페이지의 종류와 변화

• 정적(Static) 웹 페이지란?
  미리 만들어진 HTML, CSS 파일이 그대로 사용자에게 전달되는 페이지입니다. 실행 중에는 내용이 바뀌지 않고, 서버는 단순히 파일을 전달하는 역할만 합니다.
  
  
• 동적(Dynamic) 웹 페이지란?
  사용자의 요청(Request)이 있을 때마다 서버가 데이터를 처리해 새로운 페이지를 생성해서 보여주는 방식입니다. 실행 중에 내용이 바뀔 수 있습니다.
• CSR (Client Side Rendering)이란?
  서버는 최소한의 HTML과 번들링된 JavaScript 파일만 보냅니다. 그러면 클라이언트(웹 브라우저)가 JavaScript를 실행해 동적으
  로 DOM을 만들고 화면을 그리는 방식입니다. 초기 로딩은 느릴 수 있지만, 초기 로딩이 끝나고 JavaScript 파일이 모두 준비되면 그 이후에는 빠릅니다. (SPA에서 사용)
  
  
• SSR (Server Side Rendering)이란?
  서버에서 미리 렌더링 가능한 페이지를 완성해 클라이언트에 보냅니다. **검색 엔진 최적화(SEO)**에 유리하고 초기 로딩 속도가 빠르다는 장점 때문에 과거의 기술이 아닌, Next.js를 통해 다시 주목받는 현재의 기술입니다.

3. 핵심 기술 스택과 프레임워크

• 리액트(React): UI를 만들기 위한 '라이브러리'입니다.
• 타입스크립트(TypeScript): JavaScript에 타입을 더해 안정성을 높인 언어입니다.
• Next.js: 리액트 기반의 풀스택 프레임워크입니다. SSR, 라우팅, API 등 기업형 프로젝트에 필요한 기능들을 쉽게 구현할 수 있게 해 프론트엔드 개발의 패러다임을 바꾸고 있습니다.
• Tailwind CSS: 미리 정의된 클래스를 조합하여 빠르고 일관성 있게 UI를 개발하는 CSS 프레임워크입니다.

4. 아키텍처와 프로그래밍 패러다임

• DOM (Document Object Model)이란?
  웹 브라우저가 HTML 태그들을 해석해서 만든 객체 모델입니다. JavaScript는 이 DOM API를 통해 HTML 요소를 제어(추가, 변경, 삭제)할 수 있습니다. (Fat Client: 서버 요청 없이 클라이언트 측에서 DOM을 조작해 화면을 바꾸면서 클라이언트의 역할이 커진 것을 의미)
  
  
• 컴포넌트화를 하는 이유
  UI를 독립적인 부품 단위로 만드는 것. 코드의 집중화, 재사용성 향상, 거대한 코드의 분리를 통해 유지보수를 쉽게 하기 위함입니다.
• MVC, Flux란?
  복잡한 애플리케이션의 코드를 역할에 따라 분리하는 설계 패턴(아키텍처)입니다.
  
  MVC: Model(데이터/로직), View(UI), Controller(중재자)로 나눕니다. (Angular, Vue에서 주로 사용)
  Flux: 단방향 데이터 흐름을 강조하는 패턴으로, 리액트와 함께 사용됩니다.
   리액트는 스파게티라는 표현은, 별도의 아키텍처 없이 사용하면 데이터 흐름이 복잡하게 얽힐 수 있다는 의미입니다.
  
  
• 리액트 프로젝트에 아키텍처를 더하는 이유?
  유지보수성을 높이기 위해서 리액트 프로젝트에 아키텍처를 더합니다. 사용자의 기능 요구사항인 업무 로직과 화면을 그리는 컴포넌트, 그리고 데이터(DB)를 각각 분리(계층 분리)하면 나중에 수정하거나 백엔드를 연결할 때 훨씬 수월해집니다.

5. 데이터베이스와 배포

• 데이터베이스 모델링이란?
  애플리케이션에서 다룰 데이터를 어떤 구조(테이블)로 저장할지 설계하는 과정입니다.
  
  
• On-premise (온프레미스)란?
  AWS, Vercel 같은 클라우드 서비스를 이용하지 않고, 회사나 개인의 자체 서버에 직접 시스템을 설치하고 운영하는 방식입니다.
  
  
• 배포 자동화 (CI/CD)
  Git에 코드를 push하는 순간, 테스트와 빌드, 배포가 자동으로 이루어지는 것을 말합니다. Git Action을 이용해 설정할 수 있습니다.
  
  CI (Continuous Integration): 지속적인 통합 (코드 변경분을 자동으로 통합하고 테스트)
  CD (Continuous Deployment): 지속적인 배포 (테스트 통과 시 자동으로 배포)

조건문, 반복문, 함수 활용

조건문 (if문)

기본 구조

if 조건:
    실행문

조건이 참일 때만 실행문이 실행됩니다.

예시

a = 99
if a < 100:
    print("100보다 작다")

if-else문

if 조건:
    실행문1
else:
    실행문2

조건이 거짓이면 실행문2가 실행됩니다.

중첩 if문

if 조건1:
    실행문1
elif 조건2:
    실행문2
else:
    실행문3

여러 조건을 순차적으로 검사합니다.

예시: 점수에 따른 학점 부여

score = int(input("점수가 몇 점인가요? : "))
if score >= 90:
    print("grade = A")
elif score >= 80:
    print("grade = B")
elif score >= 70:
    print("grade = C")
elif score >= 60:
    print("grade = D")
else:
    print("grade = F")

예시: 장학생/합격/불합격 판별

score = int(input("점수가 몇 점인가요? : "))
if score >= 90:
    print("장학생", end=' ')
elif score >= 60:
    print("합격", end=' ')
else:
    print("불합격", end=' ')
print("입니다")

end=' ' 옵션으로 print문을 연결할 수 있습니다.

반복문

for문

for 변수 in 범위:
    실행문

range(시작, 끝+1, 증가)로 반복 횟수 지정 가능합니다.

예시: 1~10까지 합

sum = 0
for i in range(1, 11):
    sum += i
print(sum)

예시: 구구단

dan = int(input("단을 입력하세요: "))
for i in range(1, 10):
    print(f"{dan} × {i} = {dan*i:2d}")

예시: 전체 구구단

for i in range(2, 10):
    for j in range(1, 10):
        print(f"{i} × {j} = {i*j:2d}", end=" ")
    print()

while문

while 조건:
    실행문

조건이 참인 동안 반복합니다.

예시: 1~10까지 합

i = 1
sum = 0
while i <= 10:
    sum += i
    i += 1
print(sum)

continue, break

• continue: 반복문 내에서 이후 코드를 건너뛰고 다시 반복문 처음으로 돌아감
• break: 반복문을 종료함

예시: 5의 배수 제외하고 1~100까지 합

sum = 0
for i in range(1, 101):
    if i % 5 == 0:
        continue
    sum += i
print(sum)

함수

함수 정의

def 함수명(매개변수):
    실행문
    return 결과

예시: 두 수의 합

def add(m1, m2):
    result = m1 + m2
    return result
hap = add(100, 200)
print(hap)

지역 변수와 전역 변수

• 지역 변수: 함수 내에서 선언, 해당 함수 내에서만 사용 가능
• 전역 변수: 함수 외부에서 선언, 모든 곳에서 사용 가능

예시

def ssing1():
    a = 10  # 지역 변수
    print("ssing1()에서 a값", a)
def ssing2():
    print("ssing2()에서 a값", a)
a = 20  # 전역 변수
ssing1()
ssing2()

출력 결과:

ssing1()에서 a값 10
ssing2()에서 a값 20

4. 문자열 함수

정렬 함수

ss = "파이썬"
print(ss.center(10))      # 가운데 정렬, 빈칸은 공백
print(ss.center(10, '-')) # 가운데 정렬, 빈칸은 '-'
print(ss.ljust(10))       # 왼쪽 정렬
print(ss.rjust(10))       # 오른쪽 정렬

출력 예시:

   파이썬    
---파이썬----
파이썬      
      파이썬

파이썬이란?

파이썬(Python)은 1991년 네덜란드의 프로그래머 귀도 반 로섬(Guido van Rossum)이 개발한 고급 프로그래밍 언어입니다. 파이썬은 쉽고 간결한 문법, 강력한 확장성, 다양한 라이브러리 지원 덕분에 전 세계적으로 가장 인기 있는 프로그래밍 언어 중 하나로 자리잡았습니다.

파이썬의 주요 특징

• 오픈 소스이자 무료로 제공되어 누구나 자유롭게 사용할 수 있습니다.
• 인터프리터 언어로, 코드를 한 줄씩 입력하고 즉시 실행 결과를 확인할 수 있습니다.
• 간결하고 읽기 쉬운 문법을 제공해 초보자도 배우기 쉽고, 코드 유지보수가 편리합니다.
• 변수 선언 시 자료형을 명시하지 않아도 되고, 값이 할당되는 순간 자동으로 자료형이 결정됩니다.
• 다양한 운영체제(Windows, Mac, Linux)에서 사용할 수 있습니다.
• 강력한 외부 라이브러리와 서드파티 모듈이 풍부해 데이터 분석, 웹 개발, 인공지능, 사물인터넷 등 다양한 분야에 활용됩니다.
• 파이썬 파일의 확장자는 .py입니다.

파이썬의 역사와 활용

• 파이썬은 C언어로 제작되었으며, 발표 이후 꾸준히 발전해왔습니다.
• 웹 개발, 데이터 과학, 인공지능, 자동화, 교육 등 다양한 분야에서 널리 사용되고 있습니다.
• 라즈베리파이와 같은 사물인터넷(IoT) 기기 제어에도 많이 활용됩니다.

파이썬의 기본 문법

# 변수 선언 없이 값 할당
a = 100
b = 3.14
c = "Hello, Python!"

# 출력
print(a)           # 100
print(b)           # 3.14
print(c)           # Hello, Python!

파이썬의 자료형

• 정수형(int): a = 100
• 실수형(float): b = 3.14
• 불형(bool): flag = True
• 문자열(str): msg = "파이썬"

정리

• 초보자도 쉽게 접근할 수 있는 직관적인 문법입니다.
• 코드를 빠르게 작성하고 결과를 바로 확인할 수 있어 실습과 학습에 최적화 되어있습니다.
• 방대한 커뮤니티와 자료, 예제, 오픈소스 프로젝트가 활발합니다.

윈도우 프로그래밍이란?

• 텍스트 기반이 아닌, 윈도우 창(GUI)이 나오는 프로그램을 만드는 기법
• 파이썬에서는 tkinter 모듈을 사용해 윈도우 프로그래밍을 할 수 있음
• 윈도우 창에는 위젯(Widget)이라 불리는 버튼, 라디오 버튼, 체크박스, 레이블 등 다양한 요소를 배치할 수 있음

 tkinter 기본 사용법

from tkinter import *
window = Tk()
window.mainloop()

• from tkinter import *: tkinter 모듈 전체를 불러옴
• window = Tk(): 기본 윈도우(루트 윈도우) 생성
• window.mainloop(): 이벤트 루프 실행 (마우스/키보드 입력 등 처리)

버튼(Button) 위젯 만들기

button1 = Button(window, text="IDLE 종료하기", fg="green", command=quit)
button1.pack()

• Button(부모윈도우, 옵션...) 형식으로 사용
• text: 버튼에 표시될 글자
• fg: 글자색(foreground color)
• command: 버튼 클릭 시 실행할 함수
• pack(): 버튼을 윈도우에 배치

라디오 버튼(Radiobutton) 위젯 만들기

var = IntVar()
radi1 = Radiobutton(window, text="파이썬", variable=var, value=1, command=radiFunc)
radi2 = Radiobutton(window, text="Scratch", variable=var, value=2, command=radiFunc)
radi3 = Radiobutton(window, text="Java", variable=var, value=3, command=radiFunc)
radi1.pack()
radi2.pack()
radi3.pack()

• IntVar(): 라디오 버튼의 선택 값을 저장하는 변수(정수형)
• variable=var: 같은 그룹의 라디오 버튼은 동일한 변수로 묶음
• value: 각 버튼이 선택될 때 var에 저장될 값
• command: 버튼 선택 시 실행할 함수 지정

라디오 버튼 선택 시 동작 함수 예시

def radiFunc():
    if var.get() == 1:
        label1.configure(text="파이썬")
    elif var.get() == 2:
        label1.configure(text="Scratch")
    else:
        label1.configure(text="Java")

• var.get(): 현재 선택된 라디오 버튼의 value 값 반환
• label1.configure(text="..."): 레이블의 텍스트를 변경

정리

• tkinter는 파이썬에서 GUI(윈도우) 프로그래밍을 위한 표준 라이브러리
• 기본적으로 window = Tk(), window.mainloop() 구조를 사용
• 버튼, 라디오 버튼 등 다양한 위젯을 만들고 pack() 등으로 배치
• 이벤트(클릭 등) 처리는 command 옵션과 함수 연결로 구현