생활코딩 - Javascript

suliver·2025년 2월 19일

JAVASCRIPT

목록 보기

3/4

번외 1. 웹 페이지 기본 구조

HTML : 웹 페이지의 구조를 만든다 (뼈대)
CSS : 만든 구조를 이쁘게 만든다 (피부 및 외모)
Javascript : 웹 페이지가 동적으로 움직이게 만든다 (근육)

번외 2. 아무 의미 없는 태그

<div> - 줄 바꿈됌
<span> - 줄 바꿈 안됌

1. Javascript(동적 타입 언어)

정적 타입 언어는 컴파일 시점에 타입이 결정 (C, C#, C++, Java 등)
동적 타입 언어는 런타임 시점에 타입이 결정
html은 웹페이지를 묘사하는 목적의 언어이기 때문에 시간에 순서에 따라서 무엇을 할 필요가 없다.
그래서 html은 시간의 순서에 따라 실행되는 기능을 가지고 있지 않다.
하지만 javascript는 사용자와 상호작용하기 위해서 고안된 컴퓨터 언어이고 그러기 위해서는 시간의 순서에 따라서 웹브라우저의 여러 기능이 실행되어야 하기 때문에 프로그래밍이라는 형태를 띠고 있고 바로 이런 점이 html과 javascript를 다르게 하는 중요한 특징이라고 생각한다.

2. 데이터 타입

1) 원시 타입

Boolean
- true
  - Boolean(100);
    -> 결과 : true
  - Boolean(3.14);
    ->결과 : true
  - Boolean(-15);
    -> 결과 : true
  - Boolean("Hello");
    -> 결과 : true
  - Boolean("false");
    -> 결과 : true
  - Boolean(" ");
    -> 결과 : true
  - Boolean(7 + 1 + 3.14)
    -> 결과 : true
- false
  - Boolean(undefined);
    -> 결과 : false
  - Boolean(null);
    ->결과 : false
  - Boolean(-0);
    -> 결과 : false
  - Boolean(0);
    -> 결과 : false
  - Boolean(NaN);
    -> 결과 : false
  - Boolean(false);
    -> 결과 : false
  - Boolean(‘’)
    -> 결과 : false
  - Boolean(“”)
    -> 결과 : false
  - Boolean()
    -> 결과 : false
Null
Undefined
Number
String
Symbol

2) 객체 타입

함수
객체
배열 등…

3. 데이터 변환

데이터 타입은 정해져 있지만 변환할 수 있다(암시적, 명시적 형변환)
- Number(값)
- String(값), 값.toString()
- Boolean(값)
- parseInt(문자열) — 문자열을 정수로 변경

4. 변수

1) 변수 란?

어떤 값을 저장하기 위해 확보한 메모리 공간 그 차체 혹은 그 메모리 공간을 식별하기 위해 붙인 이름
변수를 사용하려면 반드시 변수 선언을 해야한다.
변수는 var, let, const 키워드를 사용해 선언한다.
선언한 변수는 외부에서, 즉 다른 코드에서 접근할 수 있다.
변수는 기본적으로 초기화가 진행되면 호출이 가능하다.

2) 호이스팅

변수나 함수의 선언이 해당 스코프에서 가장 최상위로 끌어 올려지는 현상 (자바스크립트의 코드 진행은 기본적으로 위에서 아래로 흐른다.)
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

3) var(실제 개발시 사용하지 않는 것을 권장)

초기화 시점 : 선언과 동시( 초기화 시점 : 선언과 동시)
재선언 가능, 재할당 가능
함수 레벨 스코프 적용(함수 레벨 스코프는 변수가 함수 내에서만 유효하고, 함수 외부에서는 접근할 수 없는 범위를 의미해. 즉, 함수 안에서 선언된 변수는 그 함수 내에서만 사용이 가능하고, 함수 외부에서는 그 변수를 참조할 수 없다.)
호이스팅 적용으로 인해, 할당하지 않아도 호출 가능

4) let

초기화 시점 : 선언문에 도달하면 진행
재선언 불가능 / 재할당 가능
블록 레벨 스코프 적용 (모든 코드 블록(함수,if문,for문,while문,try/catch문 등)내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.)
호이스팅이 발생하지만, 선언문 이후에만 접근 가능(ReferenceError 발생) —> 원인은 초기화 시점

5) const

선언 + 초기화 + 할당을 한 번에 진행해야함
재선언 불가능 / 재할당 불가능
블록 레벨 스코프 적용
호이스팅이 발생하지만, 선언문 이후에만 접근 가능

- 결론적으로 모든 변수를 const 키워드로 사용하되, 값의 변경이 꼭 필요한 변수는 let 키워드 사용(var 키워드는 절대 쓰지마셈)

5. 제어할 태그 선택하기

document.querySelector() - ‘태그이름’ , ‘#ID이름’, ‘.class이름’
document.querySelectorAll() - ‘태그이름’ , ‘#ID이름’, ‘.class이름’ -> 배열로 나옴
document.getElementsByClassName() - ‘class이름’ -> 배열로 나옴
document.getElementById() - ‘ID이름’

6. 연산자

산술 연산자

    - +     //더하기
    - -     //빼기
    - *     //곱하기
    - /     //나누기
    - %   //나머지

단항 산술 연산자

    - x++   //후위
    - ++x   //전위

피연선자 중 하나 이상이 문자열인 경우 “문자열 연결 연산자”로 동작한다
할당 연산자는 우항의 값을 좌항의 변수에 할당한다
- +=
- -=
- *=
- /=
- %=

6. 비교 연산자

“동등 비교 연산자’와 “일치 비교 연산자”는 양쪽의 값이 같은 값으로 평가되는지 Boolean 값으로 반환한다.
“동등 비교 연산자”를 사용 시, 두 피연산자의 타입이 다르면 비교를 위해 강제로 형변환을 진행한다.
위와 같은 경우, 개발자의 의도와 다르게 동작할 수 있기 때문에 “동등 비교 연산자”는 절대 사용하지 않는다.
동등 비교 연산자(==) -> 느슨한 비교
일치 비교 연산자(===) -> 엄격한 비교
==은 타입이 달라도 값이 같으면 true로 반환되고 ===는 값하고 타입까지 같아야 true로 반환된다.

7. 조건문

조건문과 반복문으로 코드 흐름을 제어할 수 있다.
괄호안의 값을 참/거짓으로 판단해 코드를 진행한다.
if 조건 이외 다른 조건을 넣고 싶을 땐 else문을 사용한다. else문은 if 조건이 거짓일 때의 케이스며, 좀 더 세부적인 조건은 else if로 설정한다.
조건이 많을 땐 switch문을 사용하기도 한다.

8. 배열 (array)

배열이라는 것은 데이터 많아짐에 따라서 그 많은 데이터를 그냥 둘 수 없기 때문에 그 데이터 중에 서로 연관된 데이터를 잘 정리정돈해서 담아 두는 일종의 수납상자이다
[] 안에 값들을 적을 수 있다
값과 값 사이는 , 로 구분한다
배열은 0번부터 시작한다
배열.length은 배열 안에 몇개가 담겨 있는지 알려준다
배열에 쓸 수 있는 명령어 찾을때 검색어 “javascript array” -> mozilla 사이트

9. 반복문

반복문도 하나의 제어문으로써 같은 명령을 일정 횟수만큼 계속 반복할 수 있게 만드는 실행문입니다. 대부분의 프로그램이 반복을 해야하는 경우가 많기 때문에 엄청 많이 사용되는 실행문이라고도 할 수 있다
for문(주로 사용함)
- 반복 횟수가 확실할 때
  
  for (초기화식; 조건식; 증감식) { 반복문 }

while문
- 불확실해서 원하는 결과가 나올때까지 반복해야할 때
- 특정 조건으로 반복이라고 생각하면 됌
  
  while (조건식) { 반복문 }

do… while문
- 한 번 이상은 무조건 실행되어야하는 while문일 때(처음엔 무조건 실행됨)
  
  do { 반복문 } while (조건식);

10. 함수 (function)

function 키워드로 함수를 정의 가능하며, 이름과 괄호를 사용해 호출한다. 함수 선언문, 함수 표현식, 화살표 함수가 있다.
매개변수(parameter) : 함수가 받는 값
인자(Argument) : 함수를 호출할 때 함수에 전달하는 값
반환(return) : return을 사용하면, 값을 외부에서 사용 가능
return은 함수 종료의 의미로 사용할 수도 있다.
표현식과 화살표 함수는 변수에 할당해야 한다.
함수는 호출되기 전까지 실행되지 않는다.
코드를 재사용할 수 있다. (코드를 한 번 정의하고, 여러 번 사용)
다른 인자를 사용하여 동일한 코드를 여러 번 사용할 수 있으며, 다른 결과를 도출할 수 있다.

11. 객체 (object)

우리가 프로그래밍을 하다보면 코드가 많아지고, 코드가 많아지면 코드를 잘 정리정돈하기 위해 우리는 함수라는 것을 쓴다. 그리고 그 함수뿐만 아니라 그 함수와 연관된 변수들이 엄청나게가 많아지면 역시나 똑같이 복잡도의 한계에 도달하게 된다. 바로 그러한 한계 상황에서 서로 연관된 함수와 서로 연관된 변수를 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구를 객체라고 말할 수 있다
이름 있는 정리정돈 상자라도 생각하면 된다
객체를 반복문을 가져오는 방법(for…in)

객체에 소속된 함수를 메소드(method)라고 부르고 객체에 소속된 변수를 프로퍼티(property)라고 불른다

12. 라이브러리

내가 만들고자하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈해놓은 재사용하기 쉽도록 되었는 소프트웨어이다
내가 만들고 있는 프로그램에 사용할 부품을 가져오는 느낌이다
대표적인 라이브러리로는 JDBC, jQuery, Lombok, Guava 등이 있다.

13. 프레임워크

만들고자 하는 것이 무엇이냐에 따라서 그것을 만들려고 할때 언제나 필요한 공통적인 것이 있고 만들고자 하는 것에 대한 기획 의도에 따라서 달라지는 부분이 있을거다. 그 중에 공통적인 부분은 프레임워크라는 것이 만들어 놓고 우리는 만들고자 하는 것의 기능에 따라 또는 개성에 따라 달라지는 부분만 살짝 살짝 수정하는 걸 통해서 만들고자 하는 것을 처음부터 끝까지 만들지 않도록 해주는 거늬 반제품과 같은 것이다
라이브러리는 내가 라이브러리를 당겨 와서 쓰는 느낌이라면 프레임워크는 프레임워크 안에 들어가서 작업하는 느낌이다
대표적인 프레임워크로는 Spring, Django, React, Angular 등이 있다.

14. UI (User Interface)

사용자가 시스템을 제어하기 위해서 사용하는 조작 장치

15. API(Application Programming Interface)

애프리케이션을 만들기 위해서 프로그래밍을 할때 사용하는 조작 장치
SOAP, RPC, REST API, GraphQL 등 아키텍처 스타일에 따라 다양한 API가 존재한다.

16. 검색어 추천

document : 웹페이지에 있는 어떤 태그를 삭제하고 싶거나 어떤 태그에 자식 태그를 추가하고 싶다면

dom : document 객체를 통해서 찾을 수 없다면

window : 웹페이지가 아니라 웹브라우저 자체를 제어해야한다면

ajax : 웹페이지를 리로드하지 않고 정보를 변경하고 싶다면

cookie : 웹페이지가 리로드 되어도 현재 상태를 유지하고 싶다면

offline web application : 인터넷에 끊겨도 동작하는 웹페이지를 만들고 싶다면

webRTC : 화상 통신 웹 앱을 만들고 싶다면

speech : 사용자의 음성을 인식하고 음성으로 정보를 전달하고 싶다면

webGL : 3차원 그래픽으로 게임과 같은 것을 만들고 싶다면

webVR : 가상현실 같은 것을 만들고 싶다면

후기

변수 const 재활당 안된다고해서 객체, 배열에서 쓰면 안되는 줄 알았지만 문자열처럼 자체가 값이 아니고 참조값이라 const 써도 안에 내용을 바꿀 수 있다는 것을 알게되었다.

obj = {}   // 재할당 안됌(요런식으로 한꺼번에 변경 불가능)
obj.name = "lee"     // 요런식으로 하나씩 지정해서 값 자체는 변경 가능

suliver

이전 포스트

JAVASCRIPT ON THE BROWSER

다음 포스트

생활코딩 - Javascript

JAVASCRIPT

번외 1. 웹 페이지 기본 구조

번외 2. 아무 의미 없는 태그

1. Javascript(동적 타입 언어)

2. 데이터 타입

1) 원시 타입

true

false

2) 객체 타입

3. 데이터 변환

4. 변수

1) 변수 란?

2) 호이스팅

3) var(실제 개발시 사용하지 않는 것을 권장)

4) let

5) const

- 결론적으로 모든 변수를 const 키워드로 사용하되, 값의 변경이 꼭 필요한 변수는 let 키워드 사용(var 키워드는 절대 쓰지마셈)

5. 제어할 태그 선택하기

6. 연산자

6. 비교 연산자

7. 조건문

8. 배열 (array)

9. 반복문

10. 함수 (function)

11. 객체 (object)

12. 라이브러리

13. 프레임워크

14. UI (User Interface)

15. API(Application Programming Interface)

16. 검색어 추천

후기

JAVASCRIPT ON THE BROWSER

생활코딩 - Node.js(JavaScript) & 웹 애플리케이션 만들기

0개의 댓글