Summary
HTML 이 구조, 뼈대를 만들고
CSS 가 스타일, 디자인을 구현하고
JavaScript가 동적 기능을 구현합니다.
Introduction
김자영 강사님
JavaScript에 대해서 소개합니다.
JavaScript와 Java는 다릅니다.
Code, Conept & Explanation
JavaScript
Frontend 프론트엔드
순수 JavaScript
-
웹브라우저에서 실행
JavaScript는 사용자의 웹 브라우저에서 바로 실행
버튼을 클릭하거나, 이미지를 보거나, 텍스트를 입력할 때 즉시 반응 -
DOM 조작
DOM(Document Object Model)은 웹 페이지의 구조를 JavaScript로 조작할 수 있게 해주는 구조
JavaScript로 HTML 요소를 추가, 수정, 삭제하거나 숨기고 보여줌
특정 버튼을 누르면 문구가 바뀌는 기능을 JavaScript로 구현 -
이벤트 처리
사용자가 클릭, 입력, 마우스 이동 같은 이벤트를 발생시키면 그에 맞는 기능을 실행버튼 클릭 시 경고 창을 띄우거나, 마우스를 올리면 색이 변경 가능 -
API 호출등
JavaScript로 외부 서버와 통신해서 데이터를 가져오거나 보낼 수 있어요. 예를 들어, 날씨 정보 API를 호출해서 현재 날씨를 가져와 화면에 표시할 수 있죠.
주요 프레임워크/라이브러리
• React : 가장 대표적
Facebook에서 만든 JavaScript 라이브러리
특히 사용자 인터페이스(UI)를 만들 때 유용
• Vue.js : 심플하고 배우기 쉬움
• Angular : 대규모 프로젝트에 적합한 구조
Backend 백엔드
• Node.js
브라우저 외부에서 실행할 수 있게 해 주는 런타임 환경
파일 읽기/쓰기, 데이터 베이스 연동
• 주요 프레임 워크
Express.js
Node.js 위에서 돌아가는 백엔드 프레임워크
사용자가 요청을 보내면 그 요청을 쉽게 받아서 처리하고, 필요한 정보를 돌려주는 일을 도움
Next.js
주로 프론트엔드용으로 사용되지만, 서버에서도 JavaScript를 실행할 수 있게 해 주는 프레임워크
백엔드 기능도 함께 제공
ECMAScript
JavaScript의 표준 규격, 규칙서 역할
ES6(ECMAScript 2015)는 JavaScript에 큰 변화를 가져온 버전
ES6 주요 추가 기능:
1) let, const 같은 새로운 변수 선언 방식
2) 화살표 함수 (Arrow Functions) : ()=>{} 형태로 간결한 함수 작성
3) 클래스(Class) : 객체를 더 쉽게 만들 수 있도록 도와주는 문법
4) 모듈(Module) : 파일 간 코드를 분리하고 재사용할 수 있도록 지원
변수
변수의 유형
var : ES6 이전에 많이 사용
let : ES6에서 도입
변수 재선언 불가
값 재할당 가능
변수를 선언하기 전에 참조 불가능
const
현대에는 var 대시 let과 const 사용 권장
변경이 필요한 let
변경이 필요 없는 const
Javascript 특징
-
인터프리터 언어
JavaScript는 코드가 실행될 때 바로 해석되고 실행
컴파일 과정(미리 코드를 번역하는 작업)이 따로 필요하지 않음
HTML에 JavaScript를 넣고 브라우저에서 바로 실행
-
싱글스레드&이벤트 루프
싱글스레드 : 한 번의 하나의 작업만 처리
이벤트 루프 덕분에 비동기 작업을 처리하면서 다른 작업도 계속 진행 가능 -
멀티 패러다임 언어
객체지향(Object-Oriented) 프로그래밍과
함수형(Functional) 프로그래밍을 모두 지원 -
일급 함수
함수도 데이터처럼 변수에 저장하거나, 다른 함수의 인자로 전달 가능 -
호이스팅 Hoisting
JavaScript는 변수를 선언하거나 함수를 작성하면, 코드의 맨 위로 끌어올린 것처럼 동작 -
동적 타입 Dynamic Typing
JavaScript의 변수는 값이 들어갈 때 타입(숫자, 문자열 등)이 결정 -
이벤트 기반 프로그래밍 (Event-Driven Programming)
JavaScript는 사용자가 발생시키는 이벤트(클릭, 입력 등)를 감지해서 실행 -
프로토타입 기반 상속 (Prototype-based Inheritance)
클래스 기반 상속 대신, 프로토타입(원형 객체)을 복사해서 상속받는 방식
javascript 식별자 작성 규칙
식별자란 : 변수, 함수, 클래스 등에 붙이는 고유한 이름
-
첫 글자는 영문자, 언더스코어(_), 달러기호($)로 시작
-
영문자, 언더스코어(_), 달러기호($), 숫자로 구성
-
키워드는 식별자로 사용할 수 없다.
-
두개 이상의 단어로 식별자를 구성하는 경우
1) 두 단어를 언더스코어(_)로 연결하거나(예:my_name)
2) 두번째 단어를 첫글자를 대문자로 시작한다.(예:myName)
javascript 주석
-
한줄주석 :
//주석문 -
여러 줄 주석 :
/'*
주석문
주석문
주석문
'**/
Console.log(출력할내용);
프로그래밍 과정에서
디버깅이나 코딩 실행 결과를 확인하기 위한 용도로 사용
문자열(string)
- 문장 전체를 벡틱`` 감싼다.
- 변수값을 넣고자 하는 위치에 ${변수명 또는 표현식}
논리형(boolean)
값만 비교 ==
값만 비교 !=
값과 자료형 비교 ===
값과 자료형 비교 !==
배열(array)
순서가 중요
배열 예시
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // "apple" (첫 번째 요소)
console.log(fruits[1]); // "banana" (두 번째 요소)
console.log(fruits.length); // 3 (배열의 길이)
배열에 값 추가 및 제거
fruits.push("orange"); // 배열 끝에 "orange" 추가
console.log(fruits); // ["apple", "banana", "cherry", "orange"]
fruits.pop(); // 배열 끝의 요소 제거
console.log(fruits); // ["apple", "banana", "cherry"]
객체 (Object)
- 키-값 쌍으로 데이터 저장
- 순서가 중요하지 않음
- 중첩 가능
객체 예시
let person = {
name: "John",
age: 30,
isStudent: true
};
console.log(person.name); // "John"
console.log(person["age"]); // 30
객체에 키-값 쌍 추가 및 수정
person.gender = "male"; // 새로운 키-값 추가
console.log(person); // {name: "John", age: 30, isStudent: true, gender: "male"}
person.age = 31; // 기존 값 수정
console.log(person.age); // 31
연산자
증감연산자
b = a++
a를 b에 할당한 후 1 증가
b = ++a
a를 1 증가시킨 후 b에 할당
반복문 활용할 때 사용
논리 연산자
|| : or. 피연산자 중 하나만 true이면 true
&& : and. 피연산자가 모두 true이면 true
! : not. 피연산자의 반댓값 지정
반복문
for문
for(제어변수 선언 ; 조건식 ; 증감식){
…
}
let rgb= ["red", "blue", "green"];
for (let i = 0; i< rgb.length; i++) {
console.log(rgb[i]);
}
for(제어변수 선언 in 배열){
…
}
let rgb= ["red", "blue", "green"];
for (let i in rgb) {
console.log(rgb[i]);
}
Challenges & Solutions
Results
What I Learned & Insights
JavaScript가 많이 활용된다는 사실이 신기했습니다.
Python, SQL, JavaScript를 자유자재로 활용한다면
시장 경쟁력이 높아집니다.
Conclusion
Python, SQL, JavaScript
Python, SQL, JavaScript
Python, SQL, JavaScript
