WEB/Java Script(6)
-
[JavaScript] 전개 구문(Spread Syntax)
추가 학습이 필요한 키워드 : 불변성(원시값, 참조값), [깊은 복사, 얇은 복사], concat 전개 구문이라는 표현 그대로 배열 혹은 객체들을 펼칠 수 있게 해주는 JS 문법 전개하고자 하는 배열 또는 객체 앞에 점( . ) 세 개를 붙여주는 것으로 사용할 수 있다 단, 배열은 배열에 맞는, 객체는 객체에 맞는 데이터를 담을 공간이 필요한 점 유의 1. 배열 위 내용에 근거하면 Fruits_SS 안에 Fruits와 동일한 배열의 데이터가 저장되어 있을 것이다 Fruits와 Fruits_SS에 인덱스 번호, length, 데이터의 결괏값까지 완벽하게 동일한 것을 확인 하지만, 둘은 서로 다른 독립적인 배열임을 마지막 console.log 비교문을 통해 확인할 수 있다 배열에 데이터를 Spread Syn..
2021.08.04 -
Create Web App - Vanilla JavaScript (4) Function
1. 함수(Function) 반복되는 작업을 수행하거나 값을 계산하는 문장들을 분류해놓은 집합 함수를 사용하기 위해서는 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 한다 2. 함수 선언 - 함수의 이름 - 괄호 안에 쉼표로 분리되는 매개변수 - 중괄호 { } 안에서 해당 함수가 어떤 동작을 할지 정의하는 표현 기본적인 함수의 형태 name : 함수의 이름, (a, b) : 매개변수, { } : 함수의 동작을 정의할 영역 my_car 객체를 생성, 변수 x에 my_car 객체의 요소 중 make 요소를 할당 이후 myFunc이라는 이름을 가진 함수를 호출하면 함수 안으로 이동 함수는 car_object 매개변수를 가지며 해당 매개변수에는 my_car.make의 값을 할당 함수는 car_object..
2021.08.03 -
Create Web App - Vanilla JavaScript (3) Booleans, Array
1. Booleans : 0, 1 만을 표현하는 데이터 타입 참(true), 거짓(false)라고 표현하며, 어떤 데이터를 넣던지 결괏값이 이 두 가지뿐이다 (결과가 0이라면 거짓(false), 0이 아닌 모든 값은 참(true)) * 아래 사진을 살펴보기 전 비교 연산자를 간단하게 소개 a > b : a가 b보다 크다 a < b : a가 b보다 작다 a == b, a === b : a와 b는 같다 (이때, ==는 두 값을 강제로 같은 타입으로 형 변환 후 비교, ===는 데이터의 타입까지 같은지 비교) 위 사진을 보고 Booleans의 특징을 이용해 결괏값을 생각 위 결과와 같이 Boolean은 결과가 거짓이라면 false, 참이라면 true를 반환해주는 것을 확인할 수 있다 1) null 위 사진과 ..
2021.08.02 -
Create Web App - Vanilla JavaScript (2) 변수 선언
1. 출력 타 언어의 print, printf의 역할을 해주는 것이 console.log() 문자열 : " "(큰 따옴표), ' '(작은따옴표) 둘 중 편한 것을 사용 숫자 : 따옴표 없이 숫자로만 표현 앞서서 웹이 존재하려면 기본 구조의 틀을 잡아주는 HTML이 필요하다고 했다 HTML의 구조 안에서 JS가 동작하기 위해서는 서로 연결될 수 있게 설정을 해주어야 한다 Line 10, 태그를 이용하여 JS 호출 JS를 호출시에는 가급적 안에서도 가장 아랫부분에서 호출해주는 것이 좋다 이유는 JS를 위에서 호출 시 웹의 정보를 불러오기 전에 JS의 코드부터 읽기 때문에 웹의 정보가 화면에 출력되기까지 오랜시간이 소요됨을 방지하기 위함이다 위 과정들을 정상적으로 수행해주었다면 아래와 같은 화면을 콘솔 창에서..
2021.08.02 -
Create Web App - Vanilla JavaScript (1) 기본 환경 설정
(완성 후 사진 첨부 예정) 최종 완성본 - 결과적으로 위와 같은 페이지를 제작 1. 자바스크립트 자바스크립트(이하 JS)는 이미 누구나 갖고 있고, 사용하고 있는 웹 위에서 동작하는 유일한 언어 누구나 JS를 갖고 있다는 게 무슨 말일까? 위와 같이 인터넷 브라우저를 가지고 있는 모든 사용자는 개발자 도구라는 것을 통해 JS를 사용할 수 있다 즉, 웹 언어로 작성된 Document를 JS가 주시하고 있다가 변경점을 읽고 반영해준 것이다 이처럼 JS는 누구나 쉽고 간편하게 사용할 수 있지만, 개발자 도구로 코드를 작성하기에는 부적합하다 이를 위해서는 IDE와 같은 통합 개발 환경이라 불리는 개발자 툴을 사용하여 프로그래밍을 해야 한다 (IDE는 본 주제에서 직접 다루지 않는다, 필요하다면 구글 검색) 해..
2021.08.02 -
Create Web App - Vanilla JavaScript (prologue)
Purpose = JavaScript Study + Create First App Reference = 바닐라 JS로 크롬 앱 만들기 - 노마드 코더 Nomad Coders 프론트엔드로 꿈을 키워보고자 시작하는 단계 기본중의 기본에 해당하는 문법, DOM 등 일부 아는 내용보다 모르는게 상상할 수 없을 정도로 많은 상태 아무것도 없는 밑바탕에 조금의 도움을 받아보고자 노마드 코더(니콜라스)님의 도움을 받아보기로 결정 단, 그저 따라만드는 것으로 끝나는 것이 아닌 기초 토대를 잡고 조금씩 업데이트 해나갈 예정 (제작 과정에서도 그냥 코드를 가져오는 것이 아닌 이해 위주의 학습으로 방향 설정) 잘하던, 못하던 시작하는게 중요하고, 백번의 이론보다 한 번의 코딩이 중요함을 인지 "이해되지 않는다면 이해 될 때..
2021.08.02