추가 학습이 필요한 키워드 : 불변성(원시값, 참조값), [깊은 복사, 얇은 복사], concat 전개 구문이라는 표현 그대로 배열 혹은 객체들을 펼칠 수 있게 해주는 JS 문법 전개하고자 하는 배열 또는 객체 앞에 점( . ) 세 개를 붙여주는 것으로 사용할 수 있다 단, 배열은 배열에 맞는, 객체는 객체에 맞는 데이터를 담을 공간이 필요한 점 유의 1. 배열 위 내용에 근거하면 Fruits_SS 안에 Fruits와 동일한 배열의 데이터가 저장되어 있을 것이다 Fruits와 Fruits_SS에 인덱스 번호, length, 데이터의 결괏값까지 완벽하게 동일한 것을 확인 하지만, 둘은 서로 다른 독립적인 배열임을 마지막 console.log 비교문을 통해 확인할 수 있다 배열에 데이터를 Spread Syn..

내가 생각하는 핵심 키워드 : import { useState }, State, setState 추가 키워드 : Spread Syntax (https://wildcard.tistory.com/entry/JavaScript-전개-구문Spread-Syntax) 1. State - Component 내에서 유동적으로 변할 수 있는 값을 저장하여 관리하기 위해 사용 - 개발자가 의도한 동작에 의해 변할 수도, 사용자의 입력에 따라 새로운 값으로 변경될 수 있다 - State 값이 변경되고 재렌더링이 필요한 경우, React가 자동으로 계산하여 변경점을 렌더링 2. State 사용시 유의사항 - State 값을 직접 변경하게 되면 React는 이를 인지하지 못하고 재렌더링 또한 수행하지 않는다 - State를 변..

내가 생각하는 핵심 키워드 : Props, DOM Element, Attribute, Destructuring assignment(구조 분해 할당) 1. Props (속성, Property) 부모 컴포넌트로부터 받아온 데이터를 자식 컴포넌트에 전달할 때 사용 (컴포넌트의 재사용성을 위한 방식으로 재사용성이 크게 증가하며 효율적) React 특징 중 하나인 단방향 데이터플로우(One-way reactive data flow) 형식이 적용 즉, 데이터 전달 시 부모 → 자식은 가능하지만, 자식 → 부모는 불가능함을 의미 이러한 특징으로 props에 있는 데이터는 수정이 불가능하며, 오직 꺼내서 사용만 가능하다 (읽기 전용을 의미, 만약 값을 변경하고 싶다면 새로운 변수를 생성 후 사용) 넘겨줄 수 있는 데이..

1. 함수(Function) 반복되는 작업을 수행하거나 값을 계산하는 문장들을 분류해놓은 집합 함수를 사용하기 위해서는 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 한다 2. 함수 선언 - 함수의 이름 - 괄호 안에 쉼표로 분리되는 매개변수 - 중괄호 { } 안에서 해당 함수가 어떤 동작을 할지 정의하는 표현 기본적인 함수의 형태 name : 함수의 이름, (a, b) : 매개변수, { } : 함수의 동작을 정의할 영역 my_car 객체를 생성, 변수 x에 my_car 객체의 요소 중 make 요소를 할당 이후 myFunc이라는 이름을 가진 함수를 호출하면 함수 안으로 이동 함수는 car_object 매개변수를 가지며 해당 매개변수에는 my_car.make의 값을 할당 함수는 car_object..

추가 예정

웹 프레임워크, 자바스크립트 라이브러리 중 하나로 사용자 인터페이스를 만들기 위해 사용 Facebook에서 제공하는 프론트엔드 라이브러리로 SPA, Mobile 개발에 사용된다 React를 굳이 사용하지 않아도 웹을 만들 순 있지만, 사용자와의 인터렉션으로 동적인 UI를 쉽게 구현할 수 있다는 장점이 있다 React 의 특징 1) JS 기반 별도의 프레임워크를 배우는 것이 아닌 JS를 활용 (언어를 배울 필요 없이 HTML, JS로도 개발) 2) 선언형 UI를 쉽고 간결하게 만들어준다디자인 뷰와 연결된 데이터 변경 시 이에 맞는 컴포넌트들을 렌더링해서 화면을 구성 3) 컴포넌트 컴포넌트 단위의 요소 별로 개발이 가능 (재사용성, 활용도 증가) JS, JSX를 알면 구현이 가능하기에 개발과 유지보수를 하는..

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 위 사진과 ..

1. 출력 타 언어의 print, printf의 역할을 해주는 것이 console.log() 문자열 : " "(큰 따옴표), ' '(작은따옴표) 둘 중 편한 것을 사용 숫자 : 따옴표 없이 숫자로만 표현 앞서서 웹이 존재하려면 기본 구조의 틀을 잡아주는 HTML이 필요하다고 했다 HTML의 구조 안에서 JS가 동작하기 위해서는 서로 연결될 수 있게 설정을 해주어야 한다 Line 10, 태그를 이용하여 JS 호출 JS를 호출시에는 가급적 안에서도 가장 아랫부분에서 호출해주는 것이 좋다 이유는 JS를 위에서 호출 시 웹의 정보를 불러오기 전에 JS의 코드부터 읽기 때문에 웹의 정보가 화면에 출력되기까지 오랜시간이 소요됨을 방지하기 위함이다 위 과정들을 정상적으로 수행해주었다면 아래와 같은 화면을 콘솔 창에서..

(완성 후 사진 첨부 예정) 최종 완성본 - 결과적으로 위와 같은 페이지를 제작 1. 자바스크립트 자바스크립트(이하 JS)는 이미 누구나 갖고 있고, 사용하고 있는 웹 위에서 동작하는 유일한 언어 누구나 JS를 갖고 있다는 게 무슨 말일까? 위와 같이 인터넷 브라우저를 가지고 있는 모든 사용자는 개발자 도구라는 것을 통해 JS를 사용할 수 있다 즉, 웹 언어로 작성된 Document를 JS가 주시하고 있다가 변경점을 읽고 반영해준 것이다 이처럼 JS는 누구나 쉽고 간편하게 사용할 수 있지만, 개발자 도구로 코드를 작성하기에는 부적합하다 이를 위해서는 IDE와 같은 통합 개발 환경이라 불리는 개발자 툴을 사용하여 프로그래밍을 해야 한다 (IDE는 본 주제에서 직접 다루지 않는다, 필요하다면 구글 검색) 해..

Purpose = JavaScript Study + Create First App Reference = 바닐라 JS로 크롬 앱 만들기 - 노마드 코더 Nomad Coders 프론트엔드로 꿈을 키워보고자 시작하는 단계 기본중의 기본에 해당하는 문법, DOM 등 일부 아는 내용보다 모르는게 상상할 수 없을 정도로 많은 상태 아무것도 없는 밑바탕에 조금의 도움을 받아보고자 노마드 코더(니콜라스)님의 도움을 받아보기로 결정 단, 그저 따라만드는 것으로 끝나는 것이 아닌 기초 토대를 잡고 조금씩 업데이트 해나갈 예정 (제작 과정에서도 그냥 코드를 가져오는 것이 아닌 이해 위주의 학습으로 방향 설정) 잘하던, 못하던 시작하는게 중요하고, 백번의 이론보다 한 번의 코딩이 중요함을 인지 "이해되지 않는다면 이해 될 때..