[신한투자증권 프로디지털아카데미] 클라우드 기반 프론트엔드 기초(JavaScript) 프로그래밍 - 1

 

신한투자증권 프로 디지털 아카데미 (프디아) 6기 교육 중 배운 내용을 작성한 글입니다

Day 23 (20250528)

 

---

 

GET POST DELETE PUT

Http Method 란? (GET, POST, PUT, DELETE)

 

4xx : 요청 오류 (오류의 원인은 클라이언트 너한테 있어)

5xx : 서버 오류

 

응답을 json 형태로 줘서 json은 태그가 없어서 데이터 양도 적고 중복된 데이터 빼고 새롭게 랜더링할 데이터만 가져오고,

앵귤러, 리액트, 뷰js 등등이 나옴.

비로소 프론트엔드와 백엔드가 분리가 되었다.

요즘의 움직임은 맘에 안드는 게 생겨서 → 또 다시 합치려는 움직임이 있음

js는 원래 html을 동적으로 만들기 위해 시작됨 / html을 핸들링 하기 위해 시작함.

[Frontend] 리액트 vs 뷰 vs 앵귤러, 무엇을 익혀야 할까?

 

 

 

절차적 프로그래밍

객체지향 프로그래밍 : 모든 것을 객체로 본다 // 객체로 만들어서 관리하자.

함수형 프로그래밍 : 모든 것을 순수 함수로 만들자

 

절차지향 & 객체지향 & 함수형 프로그래밍 ?

 

 

함수 : input이 있고 output이 있음

 

 

이건 순수함수에서 위배됨

import * as fs from 'node:fs'

function createAdeeDoc (a, b){
	const result = a + b;
	
	fs.writeFile(
		'sample.txt',
		result)
		return
}

input을 가공해서 output을 써야지 왜 코드 흐름 내에서 input으로 받지 않는 애들을 output 으로 쓰고 있냐의 차이

 

cf. 순수함수

순수 함수란? (함수형 프로그래밍의 뿌리, 함수의 부수효과를 없앤다)

 

 

---

자바스크립트 실행시키는 방법

1. 자바스크립트를 브라우저에서 실행시킬 수 있음

ctrl + shift + i : 개발자도구 → 여기 콘솔에서 쓸 수 있는 곳이 나옴

 

2. 자바스크립트를 노드js에서 사용할 수 있음

같은 언어이지만 사용할 수 있는 리소스가 다름 (nodejs 환경에서는 우리가 운영체제에 있는 자원을 사용할 수 있다. 대표적으로 filesystem 같은거,, 파일 읽고 쓸 수 있어야 하니까,,

but 브라우저에서 작동하는 자바스크립트는 파일 시스템에 접근할 수 있으면 안돼. )

반대로 nodejs 환경에서는 브라우저에서 할 수 있는 환경을 사용할 수 없음

브라우저의 리소스나,, html dom 등등도 사용 못해. + 브라우저에서 관리하고 있는 스토리지 같은 것도 접근 못해.

내가 어디서 작업하고 있는지를 인지하고 있어야 해

자바스크립트의 실행 환경은 크게 2가지로 나뉨:

• 브라우저 환경: HTML DOM 조작, 브라우저 API 사용 가능, 파일시스템 접근 불가
• Node.js 환경: 파일시스템 접근 가능, 운영체제 자원 사용 가능, 브라우저 관련 기능 사용 불가

따라서 프로젝트의 목적과 필요한 기능에 따라 적절한 환경을 선택해야 함

 

 

[Node] NVM 이란? : 노드(Node.js) 버전 관리하는 법

[Node] NVM 이란? : 노드(Node.js) 버전 관리하는 법

[electon 03] NodeJs 개발에 유용한 nvm 간단히 알아보고 갑시다

[electon 03] NodeJs 개발에 유용한 nvm 간단히 알아보고 갑시다

npm (nodejs package manager) nodejs 패키지 관리자 ,, js 오픈소스 라이브러리 생태계

 

 

 

변수의 자료형

 

var

• 수선언 (값 변경 가능)
• 전통적인 옛날 js에서부터 존재. 최근에는 거의 안씀
• 함수 스코프

var로 하면 에러가 나야할 것 같은데 안나는 문제가 있음..

 

let

• 변수선언 (값 변경 가능)
• 거의 let만 사용
• 블록 스코프

에러 나는 거 확인 가능

 

const

• 상수선언 (값 변경 불가)

스코프 → 변수가 보이는 범위

함수 스코프는 함수 내에서 동작

블록 스코프는 블록 내에서 동작

변수 (변할 수 있는 값)

상수 (변할 수 없는 값)

js의 세미콜론 붙여도 되고 안붙여도됨(웬만하면 붙이자!)

 

 

원시 자료형

자료형	자료형설명
Number	숫자형
String	문자열
Boolean	true/false
BigInt	BigInt값
underfined	변수가 선언되었으나 값이 할당되지 않은 상태 정의되지 않은 값 > typeof(<정의하지 않은 변수>) undefined
null	null값 (명시적으로 값이 없음) ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값 typeof시 object (js 버전 업데이트 후 하위 호환성을 위해 수정을 하지 않음.)

 

typeof 함수로 자료형 가져오기

object는 키와 value로 이루어진 값.

 

배열은 const arr1 = [1,2,3]

typeof(arr1)

‘object’

1. int, float 구분안하고 전부 다 number다
2. object든 array든 typeof로 찍어보면 다 object다

 

숫자형

• + 덧셈
• - 뺄셈
• * 곱셈
• / 나눗셈
• ** 거듭제곱
• % 모듈러 연산
• ++ 1씩 더하기
• - - 1씩 빼기

 

Boolean형

• true 참
• false 거짓

 

비교연산자

• < 작다
• <= 작거나 같다
• == 같다
• ≠ 같지 않다
• 크다
• = 크거나 같다
• === 같다
• !== 같지 않다

 

데이터타입까지 포함해서 같은지 비교하는 연산은 === 씀

 

논리연산자

• || or 연산자 (하나만 true면 true)
• && and 연산자 (모두가 true 이면 true)
• ! NOT (반대)

 

Boolean의 형 변환

• 숫자 자료형은 0이면 false 나머지는 true
• 문자열은 값의 요소가 있으면 true 빈 문자열은 false
• 그 외에는 null 혹은 undefined 이면 false 그 외 object, array이면 true

 

문자열 리터럴

` ` (틱으로 감싸서 표현 가능)

 

이스케이프 코드

• \n 개행
• \t 탭
• \\ 역슬래시
• \” 큰따옴표
• \’ 작은따옴표

 

문자열 관련 함수 및 속성

.length : 문자열의 길이 반환

charAt (indexing) / at(indexing) : index에 해당하는 문자 반환

toUpperCase : 대문자로 변경

toLowerCase : 소문자로 변경

indexOf (char) : 찾는 문자의 index 반환 없을 시 -1 반환

includes (str) : 문자가 포함되어 있는지 여부 (true,false 반환)

startsWith(str) : 주어진 str으로 시작하는지 여부

endsWith (str) : 주어진 str으로 끝나는지 여부

slice(start [, end]) : 문자열 자르기 : start와 end 모두 index

split(token) : 토큰을 기준으로 문자열 쪼개기 : 배열 반환

trim() / trimStart() / trimEnd() : 양쪽 공백 제거

repeat(n) : 문자열 반복

 

 

변수의 자료형 - 객체와 배열 - Object와 Array

Object

obj1 = {‘key’: ‘value’, city: ‘seoul’, age:12}

typeof(obj1)

Array

arr1 = [‘a’, ‘b’, ‘c’];

typeof(arr1); // 배열도 결국 object의 일종 (특수한 object)

Array.isArray(arr1);

 

함수와 클로저

자바스크립트의 함수 - 기본 함수 형태

처음에 전체 파싱하고 시작하기 때문에

console.log를 그 선언문 저의 되기전에 코드를 호출해도 상관없음

 

[Javascript] 호이스팅(Hositing)이 무엇인가?!

[Javascript] 호이스팅(Hositing)이 무엇인가?!

 

자바스크립트의 함수 - 함수표현식과 화살표 함수

 

 

 

함수의 이름이 없는데 그걸 변수에 할당했음

 

함수선언식과 함수표현식의 차이

 

표현식은 변수에 할당하는 형태이기 때문에 변수가 할당되기 전에는 하면 안되겠지

함수를 정의해서 변수에 할당하는 형태

const 함수이름 = (인자)=>{
	 ..코드
}
const 함수이름 = function(인자) {
	 ..코드
}

 

위 함수 형태는 모두 함수를 정의하여 변수에 할당하는 형태

함수 선언문 정의 되기 전에 코드를 호출 불가능.

 

화살표 함수 형태

const min2 = (num1, num2) ⇒ {

	return ________; 

}

 

return 을 바로 할 경우에는 중괄호 생략 가능!!

const min3 = (num1, num2) ⇒ num1 < num2 ? num1 : num2; 

 

함수의 return type에 대해서

 

함수의 Return Type은 원시 데이터타입, 배열 혹은 객체만 있는 것이 아니다.

함수의 return 타입이 함수일 수도 있다.

함수의 인자로 들어가는 것이 함수일 수도 있겠지

함수도 하나의 데이터 타입으로 바라보는 관점을 가지자!

 

 

스코프와 클로저(Clousre)

스코프

변수가 정의된 범위 자바스크립트는 정적 스코핑. 함수를 어디서 호출했는지가 아니라, 어디에 선언했는지에 따라 스코프가 결정

 

클로저(closure)

함수와 함수가 선언된 어휘적 환경의 조합 내부 함수가 생성될 때 그 scope에 있는 모든 변수에 대해 접근할 권한을 가짐 외부 함수의 실행을 마친 후에도 그 변수에 접근 가능

콜러블한 객체(콜할 수 있는 객체)

 

클로저(closure)

• 함수와 함수가 선언된 어휘적 환경의 조합
• 내부 함수가 생성될 때 그 scope에 있는 모든 변수에 대해 접근할 권한을 가짐
  • 외부 함수의 실행을 마친 후에도 그 변수에 접근 가능

 

클로저 계속 쓰면 문제 생기겠지. 계쏙 변수를 참조하고 있는건데 컴퓨터에서 불필요한 변수 많이 쓰면 속도 느려질 수도 있는데,, 그래서 속도 느려질 수도 있지만

그래도 많이 쓰이긴함.

 

 

Closure | PoiemaWeb

클로저 설명

 

 

배열

배열 관련 함수 및 속성

• .length : 길이 반환
• at (indexing) / 혹은 [indexing] : index에 해당하는 문자 반환
• indexOf (char) : 찾는 요소의 index 반환 없을시 -1 반환
• includes(elem) : 요소가 포함되어 있는지 여부 (true/false 반환)
• slice(start[,end]) : 배열 슬라이싱 : start와 end 모두 index
• join(token) : 토큰을 기준으로 요소들을 문자열로 만들기 : 문자열 반환
• reverse() : 순서 뒤집기
• push(elem) : 요소 마지막에 추가하기
• pop() : 마지막 요소 꺼내기
• splice (start: number, deleteCount, ...items?) : start index부터 deleteCount 만큼 지운 후 items를 채워넣음
• shift() : 처음 요소를 제거
• unshift(elem) : 배열의 처음에 요소 추가
• forEach(callbackFn) : 배열의 요소를 반복돌면서, 작업을 진행함수도 하나의 데이터타입으로 볼건데 함수의 인자도 함수가 될 수 있음.
• 빅데이터 분산처리 하면서 함수처리? 그런게 많이 뜨기 시작함.
• map(callbackFn) : 배열의 요소들을 모두 순회하여 callback 함. 수의 return 값을 모아 새로운 배열을 만듦
  • map하고 인자는 함수를 받았음. 안쪽에 받는 함수의 인자는 value, idx(인덱스), arr(어레이 자체) map 함수는 return 값들을 모아서 새로운 배열을 만든다.
  • 함수의 인자로 함수를 받고, 그 순회한 return 값들을 모아 새로운 배열을 만듦
• filter (callbackFn) : 배열의 요소를 반복돌면서, true인 요소들만 모아 새로운 배열을 만듦
  • 배열을 돌면서 true 값인 요소들만 모아서 새로운 배열을 만듦
• concat(…items) : 배열을 합쳐서 사용함
• reduce(callbackFn, initialValue) : 배열의 요소들을 모두 순회하여 initialValue부터 시작하여 누적된 결과를 만듦.

 

map이든 filter든 새로운 배열을 만든다는 게 point!

함수를 하나의 함수의 인자도 함수가 될 수 있고, 함수의 리턴값도 함수가 될 수 있다.

함수를 하나의 데이터 타입이라고 생각하자.

 

 

 

---

 

• …args는 그 인자들을 묶어서 배열로 받는 것 (가변인수)
  • https://fromnowwon.tistory.com/entry/arguments

[Javascript] arguments의 개념과 활용

 

• confirmAgree는 함수를 전달한거고 confirmAgree() 는 함수호출 결과를 전달한거임! (차이 주의!)