yh-jeon Full stack

함수전개 연산자(Spread 연산자, ...)const a = [1,2,3]const b = [4,5,6]console.log(...a) 1,2,3 -> 대괄호가 없어짐!console.log(1,2,3) 1,2,3 -> 아래의 결과와 위의 결과가 동일함! 😎데이터 병합 메서드const c = a.concat(b) console.log(c); 1,2,3,4,5,6 이 병합되어 출력const d = [...a,...b] -> 1,2,3,4,5,6 으로 바뀌게 됨😎console.log(d) [1,2,3],[4,5,6] -> [1,2,3,4,5,6] 으로 배열이 출력됨{전개 연산자}const a = {x: 1, y: 2}const b = {y: 3, z: 4}const c = Object.assign({..

변수(변하는 수)와 상수(변하지 않는 수)let (변수) - 값을 변할 수 있음let age = 27; age는 변수 선언, 27은 변수의 값을 초기화 age = 30; //변수는 언제든 선언하여 값을 재할당할 수 있기에, 초기화 하지 않고 선언하여도 상관없습니다. let age; // undefined로 값이 초기화된 상태 age = 30; let age = 25; // 중복된 이름으로 사용 불가능! [오류]const (상수) - 초기화하고 값을 변화 시킬 수 없음const birth; // 상수는 초기화 없이 작성할 수 없음 [오류] 💡 [변수 명명 규칙(= 네이밍 규칙) ] $ , _ 제외한 기호는 사용 불가능 (위치 상관없음) ex) let $_name (가능) 변수의 이름은 숫자로 시작할 수 없..

📌 소스 코드를 여러 개의 모듈로 분할하면 각각의 모듈에 어떤 내용이 있는지를 서로 알려야 하므로export와 import라는 키워드를 사욯합니다.export는 기능을 제공하는 쪽에서 사용 / import는 다른 모듈의 기능을 이용하는 쪽에서 사용합니다. 심벌이란? ECMAScript 2015부터, symbol 은 number 와 string 과 같은 기본 데이터 타입입니다.symbol 값은 Symbol 생성자를 호출함으로써 생성됩니다.let sym1 = Symbol();let sym2 = Symbol("key"); // 선택적 문자열 키 심벌은 불변하고 유일합니다.let sym2 = Symbol("key");let sym3 = Symbol("key");sym2 === sym3; // false, 심벌..

타입스크립트 개발은 Node.js 프로젝트를 생성한 이후 개발 언어를 타입스크립트로 설정하는 방식으로 진행합니다.Node.js 프로젝튼는 디렉터리를 생성하고 생성한 디렉터리에 package.json 이름의 파일을 만드는 것으로 시작합니다. 아래와 같이 실습 디렉터리를 생성한 이후 npm init --y를 입력합니다. 📌 타입스크립트 프로젝트는 보통 typescript와 ts-node 패키지를 설치합니다. 앞서 이미 2개의 패키지를 -g 옵션을 주어 전역에 설치하였지만, 이 프로젝트를 전닯다아서 이용하는 다른 개발잘의 컴퓨터에는 2 패키지가 전역에 설치되어 있지 않을 수도 있기에 이를 고려하여 터미널에서 다음 명령으로 두 패키지를 -D 옵션으로 설치하여 package.json에 등록하는 것이 좋습니다.>..

폼 요소의 입력값 다루기사용자에게 값을 입력받는 대표적인 폼 요소로는 input 태그와 select 태그가 있습니다. 한 줄 입력 - input 태그의 type 속성값을 text, password, number, url, search, email 등으로 지정했을 때 표시되는 폼form name="frm">    input type="text" name="id">    input type="password" name="pw">  form> text와 password 요소에 사용자가 입력한 값을 가져오려면 해당 요소 노드에 value 속성을 사용합니다.document.frm.id.value;document.frm.pw.value; 다음 코드처럼 value 속성에 값을 할당하여 원하는 값을 자바스크립트로 입력..

.style. = ;객체는 { } 를 이용하여 생성이 가능하며 이러한 방식을 리터럴 방식으로 객체를 생성했다고 표현합니다.만약, { } 내부에 아무런 속성이 없으면 빈 객체라고 부릅니다. 대괄호 연산자로 접근하기 = [ ]console.log(person["name"]); 마침표 연산자const person = { name:"Hong Gildong"};console.log(person.name); 객체 속성 동적으로 추가 - 객체 속성에 값을 할당해 접근하면 해당 속성이 존재하는지 확인하고, 없는 속성이면 해당 키와 값으로 구성된 새로운 속성을 객체에 추가합니다.const person = {};person.name = { firstName:"GilDong", lastName:"Hong"}; pers..

함수에는 함수 선언문, 함수 표현식, 화살표 함수가 있습니다. 함수 선언문 - function 키워드로 함수를 정의하는 방법function 식별자(){}function gugudan() { for(let i = 1; i  이렇게 작성하고 나면, 아래와 같이 함수명 ();로 함수를 실행할 수 있습니다.gugudan(); 함수 표현식 - 변수에 할당하는 함수에 식별자가 있으면 네이밍 함수, 없으면 익명 함수로 구분합니다.const 변수명 = function(){}; // 익명 함수const 변수명 = function 식별자(){}; // 네이밍 함수const gugudan = function(){ for(let i=1; i  함수는 일관된 목적을 가진 코드 집합이라서 const 키워드로 작성하는 것을 권장..

블록문 - 1개 이상의 자바스크립트 코드를 중괄호로 묶은 것, 다른 말로 블록 또는 코드 블록이라고 합니다. 조건문if문 - 소괄호(()) 안의 조건식이 참으로 평가되면 중괄호 안의 코드를 실행하는 조건문if(조건식) { // 조건식이 참이면 실행} else문 - if문의 조건식이 거짓일 때 실행되는 블록문if(조건식) { // 조건식이 참이면 블록문 실행} else { // 조건식이 거짓이면 블록문 실행} 단, else문은 if문 없이 단독으로 사용이 불가능하며 하나의 if문에는 하나의 else문만 사용 가능합니다. else if문 - if문에 조건을 추가하고 싶을 때 사용, 개수에 제한이 없으며 단, else문과 마찬가지로 단독으로 사용할 수 없고, 항상 if문 다음에 사용하고 else문보다는 ..

[변수의 틀]var num = 10 + 20;var(키워드) num(식별자) =(연산자) 10 + 20(표현식) ;(세미콜론)  식별자 명명 규칙규칙불가능 예시식별자에 키워드 사용 불가var, let, const식별자에 공백 포함 불가my School, like food식별자의 첫 글자는 영문 소문자, _(언더스코어), $ 기호만 사용*name, #age, @email규칙좋은 예시나쁜 예시식별자는 영문으로만 작성name, age이름, 나이식별자는 의미 있는 단어로 작성name, age(이름과 나이 저장 시)a,b (이름과 나이 저장 시)식별자 표기법표기법설명예시카멜 표기법변수명과 함수명 작성 시 사용firstName, lastName언더스코어 표기법상수명 작성 시 사용FIRST_NAME, last_nam..

HTML 파일과 자바스크립트 연결하기 - 총 2가지(내부 스크립트 or 외부 스크립트) [내부 스크립트 방법]html 파일에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법DOCTYPE html>html lang="ko">head>  meta charset="UTF-8">  meta http-equiv="X-UA-Compatible" content="IE=edge">  meta name="viewport" content="width=device-width, initial-scale=1.0">  title>내부 스크립트 방법title>head>body>  script>    document.write('내부 스크립트 방법');  script>body>html> document.writ..