FE Dev

HTML id로 태그 선택 // id에 해당하는 태그 하나 출력 document.getElementById('id'); ※ getElementById를 통해서 존재하지 않는 id 값으로 태그를 선택하면, null값이 리턴된다. - 원리: 메소드의 파라미터로 접근하고자 하는 태그의 id 값을 문자열로 전달해 주면 해당되는 태그가 선택 - 사용: 자바스크립트로 딱 하나만의 요소를 선택할 때, html 태그에 id 속성을 부여하고 getElementById 메소드 활용 - 장점: id 속성을 활용하면 필요한 태그를 명확하게 선택할 수 있다는 장점이 있음 - 단점: 여러 요소들을 동시에 선택해야 하는 경우 활용하기 어려움 HTML class로 태그 선택 // class에 해당하는 태그 모음(HTMLCollect..

데이터 타입 종류 기본형 (원시형, primitive type) - 기본형은 값이 담긴 주솟값을 바로 복제한다. (모두 불변성) - 숫자(number), 문자열(String), boolean, null, undefined가 있으며, ES6에서 Symbol이 추가되었다. 참조형 (reference type) - 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제 - 객체(object)가 있고 객체의 하위 분류에는 배열(Array), 함수(Function), 날짜(Date), 정규식(RegExp) 등과 ES6에서 추가된 Map, WeakMap, Set, WeakSet 등이 속한다. 메모리와 데이터 - 비트(bit): 0 또는 1 두 가지 값만 표현할 수 있는 하나의 메모리 조각 (1byte..

'자바스크립트의 거의 모든 것이 다 객체다!' ✨객체(Object) : 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙이는 것 - 여러가지 값을 한 번에 저장하고 싶을 때 사용 - key와 value를 콜론(:)으로 구분하는 프로퍼티들의 집합 - 중괄호{ } 안에 쉼표로 구분해서 저장해서 사용 - key-value로 이루어진 한 쌍을 객체의 속성(Property)이라고 함 - 프로퍼티 네임(key)은 문자열 타입을 가지고 있음 (따옴표' '로 감싸주지 않고 생략해도 JS가 암묵적으로 문자열로 형 변환) - 프로퍼티 value 값은 모든 자료형을 사용할 수 있음! (문자열, 숫자, 불린, null, 객체) - 이 값의 자료형은 object(객체)이며, 객체 안에 객체를 넣을 수도 있음 ❗Property N..

변수의 유효범위 scope: 범위, 영역 => 변수에는 유효한 범위가 있어서 그 범위를 벗어나게 되면 오류가 발생 - 자바스크립트에서는 중괄호{ }로 감싼 코드를 블록문(Block Statement)이라고 함 - 블록문을 기준으로 변수 나뉨 ☝ 지역 변수, 로컬 변수(Local Variable) (블록문 안에 선언된 변수들) 블록문 내에서만 유효한 범위를 가지고 있다. // 함수 선언 function myFunction() { let x = 3; // 지역 변수, 로컬 변수 console.log(x); // 3 } myFunction(); // 함수 호출 console.log(x); // 오류 발생 ✌ 전역 변수, 글로벌 변수(Global Variable) (블록문 밖에서 선언한 변수) 블록문 안에서도 ..

코드를 더 간결하게 작성할 수 있는 방법 ✨추상화(Abstraction) 복잡한 것들을 목적에 맞게 단순화하는 것 추상: 여러가지 사물이나 개념에서 공통되는 특성이나 속성 따위를 추출하여 파악하는 작용 구체적인 정보들은 숨기고, 꼭 필요한 핵심만 뽑아내서 표현하는 방식 (원활한 소통을 위한 표현 방식들 중 하나) 👩‍💻프로그래밍에서 추상화 프로그래밍을 통해 어떤 프로그램을 만든다는 것은 1) 코드를 작성하는 자신과의 소통이 될 수도 있고, 2) 작성한 코드를 실행하는 컴퓨터와의 소통이 될 수도 있고, 3) 함께 코드를 작성하는 동료와의 소통이 될 수도 있고, 4) 내가 만든 프로그램을 사용하는 사용자와의 소통이 될 수도 있음 => 프로그래밍을 할 때 추상화를 통한 코드를 작성하면 더 좋은 소통&표현이 될..

데이터를 어떤 형태로 저장하고 활용하는지 이해하기 숫자형 자바스크립트 숫자형은 소수와 정수를 따로 구분하지 않기 때문에 1과 1.0 모두 number // 거듭제곱 console.log(2 ** 3); // 2의 3제곱 2*2*2 출력 // 나머지 console.log(7 % 3); // 7을 3으로 나눈 나머지 (몫이 2고, 나머지 1 출력) 템플릿 문자열 문자열 안에 ' " 둘다 사용할 경우 -> 역슬래시 사용 (문자열 안에 기호라고 이해함) (but, 역슬래시를 사용하면 문자열 안의 내용을 읽기가 불편해짐, 가독성↓) => 양 끝을 백틱(``)으로 감싸주기(ES6 이후) 불린형 console.log(!true); // false console.log(!false); // true // 중복해서 쓰는..

1. 동기와 비동기 1) Synchronous(동기적, 자바스크립트는 동기적 언어) : 호이스팅 된 이후부터 코드가 작성한 순서대로 동기적으로 실행되는 것 - 호이스팅? var변수, function함수같은 선언들이 제일 위로 올라가는 것 2) Asynchronous(비동기적): 언제 코드가 실행될지 예측할 수 없는 것 비동기적 실행 방법 ex) setTimeout(): 브라우저에서 제공되는 웹 API로 지정한 시간이 지나면 전달한 콜백 함수 호출 => 1, 3, 2 출력 ('2'는 1초 뒤 콘솔 출력) 2. 콜백 함수 callback - 지금 당장 실행하지는 않고 나중에 불러달라, 함수를 실행해달라는 함수 - () => 으로 일일이 함수를 선언하지 않고, 간단하게 전달할 수 있음 콜백 2가지 경우 1) ..

fetch 가져오다 서버로 요청(request)를 보내고 응답(response)을 받는 함수 request -> 웹 브라우저가 서버에 보내는 요청 response -> 서버가 다시 보내주는 응답 fetch('https://www.google.com') .then((response) => response.test()) .then((result) -> { console.log(result); }); 1) 파라미터로 넘어온 url로 요청(request)을 보내고, 서버로부터 응답이 오면 응답(response) 받음 2) 서버에서 응답이 오면(조건), 두 번째 then 함수 실행 (-> 서버가 보낸 response는 하나의 객체가 되어 response라는 파라미터로 넘어옴) 3) 두 번째 콜백이 실행되고 난 후..