JavaScript 기본 문법

토스 프론트 개발자 채용 공고를 봤다.

'React, Next.js, Typescript : 컴포넌트 기반의 아키텍쳐로 UI를 효율적으로 구축하고, 정적 타입 검사를 통해 버그를 줄여요.'

• React : JS lib => 컴포넌트 기반 아키텍처로 재사용 가능한 화면 구현 가능
• Next.js : React 기반 프레임워크 =>
  • 서버 사이드 렌딩(SSR) : 항상 최신 뉴스를 보여주는 (페이지 요청 시 서버에서 데이터를 불러와 새 HTML 생성)
  • 정적 사이트 생성(SSG) : 데이터 업데이트가 적은 경우 빠른 페이지 로딩 속도 (빌드 시 HTML 생성)
  • 검색 엔진 최적화 (SEO) : 검색 엔진 크롤링 최적화 - SNS에서 잘 보이도록 (메타 태그 활용)
• TypeScript : JS의 확장된 언어 => 코드 작성 실수 방지 가능(정적 타입 검사)

 

 

js를 기반으로 한 node.js로 프론트엔트와 백엔드 간 일관된 언어로 개발을 구현할 수 있다. js를 잘 아는 것은 매우 중요하다!!

• js로 html, css에 동적 기능이나 상호 작용을 추가할 수 있다. 
  • 버튼 클릭, 입력값 변경 등 사용자 인터랙션에 실시간 반응형 웹 페이지를 만들 수 있다. 
  • script src로 불러오면 defer(HTML읽은 후 js 로드)를 잊지말자
• React, Vue, Next.js 등 광범위한 프레임워크 및 라이브러리로 빠른 프론트엔드 개발이 가능하다. 
• REST API, WebSockets 등을 통해 서버와 데이터를 주고 받는다.  
• 비동기 처리(Asynchronous Processing)를 통해 페이지 새로 고침 없이도 데이터를 주고 받는 SPA(Single Page Application)을 구현할 수 있다. 
  • AJAX, Fetch API, WebSockets 활용

---

2015년 이후 JavaScript는 ES6 문법을 기반으로 한다. 

• 변수는 var, let, const를 가진다.
  • var은 전역변수처럼 동작할 수 있어 자주 사용하지 않는다. {}에 의한 블록 수준의 유효 범위가 없기 때문에 변수를 잘못 설정해도 실행이 되어 (값은 잘못된 값) 오류 찾기 어렵다.
• 표현 형식으로 템플릿 리터럴: `${}` 로 변수, 문자열, 식을 섞어 하나의 문자열을 만드는 방식을 사용한다. 
  • 아니면 name + " 입니다."  이런 식 묶어서 써야한다.
• 키워드 중에 new 는 객체를 생성하는 생성자 함수로 new Date() : 날짜 형식 객체 처럼 사용된다. Heap에 저장되어도 사용자(개발자)가 메모리를 직접 관리할 일은 없어서 메모리 누수 문제는 걱정하지 않아도 된다. 

 

자료형

• 원시 타입(Primitive: 숫자, 문자열, boolean) : 단일 데이터로 변수에 직접 할당 : stack에 저장
• Object 타입(array, function) : 서로 연관있는 속성과 행동을 묶어서 할당: heap에 저장

'객체'는 { 속성명: 속성값, }으로 되어 있다. 배열이 인덱스로 요소에 접근하면, 객체는 키(속성명)으로 접근한다.

• 객체 for 키 in 객체명
  
  
• 배열 for 배열값 of 배열명

let product = { 
	제품명 : '7D 건조 망고', 
    유형 : '당절임', 
    성분 : '망고, 설탕', 
    eat : function(food) {
    	console.log(food + `yummy`);
        
for (let i in product) {
	console.log(`${i} : ${product[i]}`); // 객체는 순회한다
    });

 

 

함수 문법

함수가 이름이 있냐 없냐에 따라 함수 재사용 여부가 나뉜다. 선언형은 선언된 위치와 관계없이 코드 실행 시 자동으로 hoisting되어, 함수 선언 전에 호출할 수 있다. (C++랑 헷갈린다 ㅠ)

• 익명형 function(){} / () => {}
• 선언형 function name() {}
  • var도 hoisting 되어 중복 선언에도 오류가 안난다. (잘 안쓰는 이유)

 

Arrow Function 

const add3 = (a,b) => a+b;

이렇게 파라미터를 받아서 화살표가 가리키는 방향처럼 조작(실행) 해달라는 뜻이다. 

 

이런 함수도 있다. 이 ... 을 가변 파라미터(Rest parmeter)라고 한다. 

function add(a=0, b=0, ...nums){ 
	console.log(a); 
    console.log(b); 
    console.log(nums);
};

add(4, 3, 1, 5, 6);

... 에 해당하는 파라미터는 nums에 배열 형태로 [1, 5, 6] 전달된다. 

 

CallBack Function

const calculator = function(a,b,action){

	let result = action(a,b);

	console.log(result);

};

calculator(3, 4, add3);

callback(); 콜백 함수는 함수를 다른 함수의 인자로 전달해 실행되는 함수 === 매개변수로 전달된 함수를 호출

• 외부에서 원하는 동작을 사용자가 함수로 작성하여 사용할 수 있다.
• callback 내부에서 정의한 함수는 이름이 없어서 외부에선 사용할 수 없음 (익명 함수)

비동기 작동에서도 콜백함수가 사용된다고 한다. 근데 헷갈려서 async, await을 더 많이 쓰는 듯

콜백 함수 예제를 봐보자.

let fruits = ["Apple", "Banana", "Cherry"];

fruits.forEach(function (fruit, i, arr) {
  console.log(`Index: ${i}, Fruit: ${fruit}, Array: ${arr}`);
});


function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

function sayBye() {
  console.log("Goodbye!");
}

greet("Alice", sayBye);  // sayBye가 콜백 함수로 전달됨

1. forEach 내부에 function() (함수 인자)를 호출했으니 이것도 콜백함수다. 
2. greet 에 sayBye를 콜백함수(함수인자)로 호출하면, Hello Alice 가 나온 뒤에 GoodBye가 콘솔창에 출력된다.

 

 

function displayA() {
	console.log('A');
}
function displayB(callback) {
	setTimeout(() => {
		console.log('B');
		callback();
	}, 2000);
}
function displayC() {
	console.log('C');
}

displayA();
displayB(displayC);

어떻게 출력되게요 ? ㅎ

 

메서드의 속성 사용 : this 

    <script>
      let obj = {
        place: 'Mars',
        mars: (person) => alert(`${person} is on ${this.place}!`)};

      obj.mars('Elon Musk');
    </script>

this는 어디서 사용하냐에 따라 가리키는 객체가 달라진다.

• 화살표 함수(=>)의 this는 자신만의 this를 가지지 않는다
  === 함수가 실행될 때의 상위 스코프(글로벌 객체 또는 undefined)를 가리킨다.

객체의 리터럴{} 내부에서 this는 전역 스코에서 실행되므로 window(브라우저) 또는 Node.js를 가리킬 수 있다. 전역에서 정의된 place가 없으므로 undefined가 나온다. 

• 따라서 this.place는 undefined가 되어 오류가 발생한다.

 

class Planet {
  constructor() {
    this.place = 'Mars';
  }
  mars(person) {
    alert(`${person} is on ${this.place}!`);
  };
};

let obj = new Planet();
obj.mars('Elon Musk');

클래스로 변환하면 this가 정상적으로 동작한다. 클래스 내부의 this는 현재 생성된 인스턴스를 가리키기 때문!!

 

 

사용자 상호작용 예제

버튼을 클릭하면 리스트가 나타났다 사라지도록 해보자. 여기서 핵심은 스르륵~ 이다.

/* 내일 해야지 */

 

버튼을 클릭하면 선택된 값을 전달하도록 해보자. 

<html>
	<head>
    <script>
    	document.getElementbyId('btn').addEventListenr('click', function(){
        	const checkedFoods = document.querySelectorAll("input[name='food']:checked");
            const checkedValues = Array.from(checkedFoods).map((input) => input.value);
            console.log(selectedValues);
       	});
    </script>
    </head>
    <body>
    <form>
        <div>
        좋아하는 음식은?
        <label><input type="checkbox" name="food" value="라면" />
        라면</label>
        <label><input type="checkbox" name="food" value="만두" />
        만두</label>
        <label><input type="checkbox" name="food" value="불고기" />
        불고기</label>
        <input id="btn" type="button" value="전송" />
        </div>
    </form>
    </body>
    </html>

• document는 웹 페이지의 DOM(document object model)로 js에서 HTML의 요소를 조작할 때 사용한다. 
  • fragment라는 빈 객체에 추가해서 한 번에 HTML에 추가하면 성능 최적화가 가능하다.
• 선택자를 고를  때 input[name="food"] 를 이용한다. 그 값을 선택해야 할 때는 아래와 같이 {객체명}[name = ' '].value로 접근
• 배열을 다룰 때 map(input => input.value) 로 배열 구조를 변환하지 않고 값만 변경할 수 있도록 한다. 

document.getElementById('btn').addEventListener('click', function(){
    const name = document.querySelector("input[name='name']").value;
    console.log(name);
});