11장 호이스팅, 클로저

채팅 설문조사 코딩창 호이스팅 이란? 변수와 상수 함수등의 선언을 하고 나서 코드를 실행 시키면 선언된 모든 내용은 가장 위로 끌어 올린다 라는 의미이다. 전역 범위(global scope) 전역 범위에서는 해당 페이지에서 최상단으로 끌어 올려진다. 함수 범위(function scope) 함수 범위에서는 해당 함수의 최상단으로 끌어 올려진다. 그러나 변수의 선언만 끌어 올립니다 할당은 끌어올려지지 않습니다 변수 호이스팅 let은 호이스팅이 일어나긴 하지만 호이스팅은 선언만 할 뿐 실제로 값을 할당하지는 않기 때문에 오류가 나게 됩니다 console.log(num); //error let num = 10; 함수 호이스팅 함수 선언부를 호출부 아래에 뒀지만 실행하는데 오류가 없습니다. add(); funct..

10장 React 기초

채팅 설문조사 코딩창 React란? 리액트는 페이스북에서 개발한 프론트엔드 라이브러리입니다 또한 리액트는 컴포넌트 기반으로 html태그들을 묶어 사용할 수 있으며 개발자가 설계한대로 UI가 사용자에게 보여집니다 리액트를 왜 사용하는가? html과 css등으로만 만들어진 웹페이지는 동적인 데이터를 UI에 뿌려주기에는 적합하지 않습니다. 리액트의 특징 컴포넌트 리액트는 컴포넌트 기반의 라이브러리입니다.. 한 페이지에서 전체 페이지를 하나의 큰 덩어리로 보고 컴포넌트는 그 큰 덩어리를 이루는 요소들의 집합이라고 생각하면 됩니다 리액트는 작은 컴포넌트들로 구성되어 유지보수와 재사용성이 매우 뛰어납니다 그렇기때문에 똑같은 코드를 입력하여 똑같은 ui를 구성할 필요가 없어집니다. 컴포넌트의 종류는 클래스형(stat..

9장 html 기초

채팅 설문조사 코딩창 html 이란? HTML 은 Hyper Text Markup Language 약어로 HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어입니다. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다. 이 html 문서는 단순히 텍스트 파일에 불과하고 웹 브라우저가 해석을 해서 구조를 통해 화면에 렌더링 해주게 되고 사용자는 View 라고 하는 스크린을 통해 접하게 되는 것입니다. 여기서 웹브라우저는 dom tree라는것을 해석해 우리에게 화면을 보여주는데 이때 html 태그를 해석하게 됩니다. 돔 트리: html 태그들이 트리형태로..

8장 객체

채팅 설문조사 코딩창 객체란? 객체는 key와 value의 쌍으로 이루어진 데이터 집합입니다. 우리가 실행활에서 인식할 수 있는 사물 이라고 생각하면 됩니다. 말로는 어려우니 직접 예시를 봅시다. 사람 이라는 객체입니다. 객체안에 사람을 표현할 수 있는 여러 정보들이 들어있습니다. const person = { name: "js", age: 10, address: "Seoul/Korea", phone: "01012345678" }; 사용법 const 객체명 = { key : value, key : value, key : value, ... } 여기서 key값은 뒤의 value 값을 가져다 쓸수 있게 해줍니다. 객체명.key를 사용하게되면 value값이 나옵니다. 객체 생성 객체의 value에 또다른 ke..

7장 함수

채팅 설문조사 코딩창 함수란? 자바스크립트에서 함수란 코드의 집합을 나타내는 자료형입니다. 자료형이기 때문에 함수를 변수에 할당할 수 있습니다. 또 하나의 특징은 리턴 값으로 값이나 함수를 반환할 수 있습니다. 함수를 만들면 함수안에 있는 코드의 집합을 언제든지 재사용할 수 있습니다. let num = 1; function add() { return num + 1; } console.log(add()); /////////////////// function add(num) { return num + 1; } console.log(add(1)); /////////////////// function add(num) { console.log(num + 1); } add(1); 형태 1. 함수 선언식 선언식의 문..

6장 반복문

채팅 설문조사 코딩창 반복문이란? 반복은 간단하게 일을 되풀이 한다는 말입니다. 전 시간에 배웠던 배열도 일일이 출력하거나 값을 집어넣는일이 번거로우셨을 겁니다. 그걸 자동화 해주는 일을 반복문이 할수 있습니다. 예를들어 배열에 10가지 과일 이름이 들어있다고 합니다. 이 과일이름을 보여주는데 배열의 개수를 모두 알아내어 하나씩 콘솔로그로 보여주는것은 비효율적인 일입니다. const fruit = ["apple", "pineapple", 'orange', 'melon', 'watermelon']; console.log(fruit[0]); console.log(fruit[1]); console.log(fruit[2]); console.log(fruit[3]); console.log(fruit[4]); 위와..

5장 배열

채팅 설문조사 코딩창 배열이란? 관련있는 데이터를 하나의 변수에 할당하여 편하게 관리하기 위해 사용하는 객체입니다. 지금까지는 변수하나에 하나의 값만 할당이 가능했는데 이제 그럴 필요가 없어졌습니다. let fruit = ['apple', 'pineapple'] console.log(fruit) 배열요소 접근하기 배열의 첫번째요소는 0번째입니다. 그래서 배열의 마지막 요수는 배열의 길이(배열 값의 개수) -1 입니다 let fruit = ["apple", "pineapple"]; console.log(fruit[0]); console.log(fruit[1]); 배열 추가 배열 맨끝에 값을 추가하는 과정입니다 let fruit = ["apple", "pineapple"] fruit.push('orange'..

4장 조건문

채팅 설문조사 코딩창 조건문이란? 지정된 조건에 따라서 조건에 맞으면 코드를 실행하거나 안하게끔 조절 할수 있게 해주는 문법입니다. -아래의 코드를 실습해보며 형태를 간단하게 알아봅시다- let appleCost = 1000; // 사과 가격 let pineAppleCost = 5000; // 파인애플 가격 let myMony = 6000; // 내가 가진 돈 // 처음 사과를 삽니다 myMony = myMony - appleCost; console.log("잔액은", myMony, "입니다"); // 사과를 사고 남은 금액이 5000원 이상이면 파인애플을 살 수 있습니다 if (myMony >= 5000) { myMony = myMony - pineAppleCost; } console.log("잔액은"..

javascript 오류 모음

3장 연산자

코딩창 연산자란? 연산자는 연산을 수행하는 기호를 말한다. 대표적으로 = + - / 등을 말한다. 피연산자는 연산할 때 사용될 변수나 상수이다 연산자의 종류 아주 기초적인 연산자를 몇 개 골라봤습니다 할당 비교 산술 논리 삼항 1. 할당 연산자 할당 연산자는 = 를 말하고 우변을 좌변에 대입한다는 뜻입니다. 선언: 아래와 같이 let 이나 const를 사용하여 작성할 경우 변수나 상수를 선언 한다고 한다. let a; const b; let name; let age; 초기화: 위와 같은 문법으로 선언을 하고 값을 넣어주는 작업 . // 선언과 동시에 초기화 let a = 12; let b = 10; // a에 1을 더해 다시 a에 저장한다 a = a + 1; conssole.log(a); conssole..

2장 변수와 상수

> 변수 변수는 말그대로 변하는 수 입니다. 무엇이 변하냐면 데이터가 변합니다. 게시판을 예로 들면 닉네임 게시글 댓글 모든것이 다 데이터로 이루어져 있습니다. 이런 데이터를 처리하기 위해서는 저장해 둘 공간이 있어야 하는데요 이 공간을 변수 라고 합니다 이 공간에는 여러가지 데이터들이 저장되고 삭제 될 수 있습니다. 마치 상자에 물건을 넣었다가 비웠다가 할수 있는것 처럼 말이죠. 아래 그림을 참고 하면 이해가 쉬울 겁니다. 변수의 사용법: let 변수명 = 데이터 상수 상수는 변수와 반대로 변하지 않는 수 입니다. 데이터가 한번 공간에 저장이 되면 나중에 원래 있던 데이터를 비우고 새 데이터로 대체 할수 없는 특징이 있습니다. 상수의 사용법: const 상수명 = 데이터 ** 프로그래밍 언어에서의 '=..

1장 javascript란 무엇일까?

자바스크립트의 탄생 초기의 웹은 변화하지 않는 정적인 글자로 꾸며진 HTML 페이지였고, 넷스케이프 사는 가벼운 프로그램 언어를 통해 HTML 페이지에 움직임을 주고 싶어 프로그램 언어를 추가하기로 결정했습니다. 그래서 Brendan Erich(브랜든 아이크)를 고용했는데, 그가 10일 만에 만든 언어가 자바스크립트입니다. 이름이 자바와 비슷하고 비슷한 문법을 가지고 있으나실질적으로는 많이 다른 언어이다 왜 자바스크립트인가요? 처음에는 livescript 라는 이름을 썼지만 그당시 java라는 언어가 대세였고 홍보차원에서 javascript라고 이름짓게 되었습니다. 자바스크립트는 컴파일 언어인 동시에 인터프리트 언어이다 컴파일: 어떤 언어로 작성된 코드를 다른 언어로 바꾸는 것 인터프리터: 어떤 언어로 ..