후의 개발일지

자바스크립트는 브라우저에서 사용하기 위해 만들어진 언어이다.많이 발전해서 여러 군데에서 사용되지만본래 목적은 웹 페이지를 동적으로 만들어 주기 위한 언어이다. 우리 = 클라이언트가 서버로 request로 요청을 하게 되면서버에서는 response로 응답을 준다.응답은 html파일 형식이다.그리고 이 html파일을 해석해야 한다 해석을 왜 해야 할까?서버로부터 받아온 html파일은 javascript가 이해를 할 수 없기 때문에알아들을 수 있도록 해석을 해야 한다는 것이다. 우선 간단하게 html파일 하나를 만들어보겠다. DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device..

저번에 Map에 대해 알아봤으니 이번엔 Set에 대해 알아보자. Set이란? 고유한 값을 저장하는 자료구조이다. 값만 저장하는 점이 Map이랑 다르다 키를 저장하지 않고 값이 중복되지 않는 유일한 요소로만 구성된다. 기능으로는 값 추가, 검색, 삭제, 모든 값 제거, 존재 여부 확인 등이 있다. 생성방법 const mySet = new Set(); mySet.add('value1'); mySet.add('value2'); 이런 식으로 생성할 수 있다. 값을 추가하는 법은 .add()를 사용하면 된다. 위에 Set설명이 말로만 해서 이해하기 어려울 수 있으니 간단한 코드로 작성해 보겠다. 먼저 값이 중복되지 않는 요소로 구성된다 했으니 중복되는 요소를 넣어서 작성해 보겠다. const mySet = new..

지금까지 객체와 배열에 대해 많이 배웠는데 이 객체와 배열만으로는 정교한 개발을 할 수가 없다. 그래서 이번에는 Map, Set같은 자료구조에 대해 알아보려고 한다. Map의 목적은 데이터의 구성, 검색, 사용을 효율적으로 처리하기 위해 사용한다 1.Map -key / value key에 어떤 데이터 타입도 다 들어올 수 있다. 이유는 Map은 키가 정렬된 순서로 저장되기 때문이다. 기능으로는 검색, 삭제, 제거, 여부 확인 등이 있다. 생성방법 const mymap = new Map(); 값을 추가하는 방법은 mymap.set( 'key', 'value' ); 이렇게 set을 통해 추가하면 된다. 검색하는 방법은 mymap.get('key'); 이렇게 get을 통해 검색을 할 수있다. map을 쓰는 이..

저번에 이어서 이번에는 person에 대한 객체를 만들어보겠다. const person = { name: "moon", age: 25, isMarried: true, sayhello: function () { console.log("hello my name is => " + this.name) } }; person.sayhello(); 이렇게 작성하고 실행하면 console.log가 정상적으로 실행된다. 전에 배웠던 ``를 응용해 보자. const person = { name: "moon", age: 25, isMarried: true, sayhello: function () { console.log(`hello my name is ${this.name}`); } }; person.sayhello(); ..

일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 자바스크립트에서의 함수는 매우 중요한 개념이다. 함수를 매우 유연하게 사용할 수 있고 함수가 일급 객체로 취급되는 5가지 경우에 대해 알아보자. 1. 변수에 함수를 할당할 수 있다. 예시 const abc = function() { console.log("hi"); } 이렇게 변수에 함수를 담아서 마치 값으로 취급을 하며 나중에 어디서든 꺼내쓸 수 있다. 2. 함수를 인자로 다른 함수에 전달할 수 있다. 예시 function abc(func){ //매개변수로 받은 변수가 함수 일 수 있다. func(); } const hi = function() { console.log("hi"); } abc(hi); 이런 식으로 ..

단축 속성명 정말 많이 쓰이는 방법이다. 기존 객체 생성법 예시로 const name = "abc"; const age = "25"; const obj = { name: name, age: age } 이렇게 객체를 만들 수 있다. key값을 먼저 변수나 상수로 선언한 후 속성 안에 그 이름을 사용할 수 있는데 단축 속성명은 만약 key이름과 key값의 이름명이 같을 경우 const name = "abc"; const age = "25"; const obj = { name, age }; 이렇게 줄여서 사용할 수 있다. 반드시 이름이 동일해야 줄여서 사용할 수 있으니 이 점 유의하자. 전개 구문 간단하게 말하면 배열이나 객체를 전개하는 문법이다. 배열 예시 let arr = [1, 2, 3]; console..

ES6란? 2015년에 발표된 자바스크립트 버전으로 대규모 문법적 향상 및 변경이 있어서 새로운 문법과 기능을 도입해 개발자들이 보다 쉽고 효율적으로 코드 작성할 수 있도록 개선한 버전 1. let, const 이 둘의 차이점은 처음선언한 후 재할당을 할 수 있냐 없냐의 차이가 있다. 2. 화살표 함수 기존 함수 생성 2가지 2-1. function ex() {} 2-2. var ex = function() {}; 화살표 함수 생성 var ex = () => {}; 중괄호 안 코드가 한 줄이면 중괄호 생략 가능하고 매개변수를 넣으면 소괄호도 생략 가능하다. 3. 삼항 연산자 생성법 aaa ? true일 때 : false일 때 4. 구조분해할당 구조를 반대로 찢어서 다 할당한다는 의미이다. 배열이나 객체의..

while문 while문 생성방법 예시 let i = 0; while(i < 10) { console.log(i); i++; } 위 코드는 0부터 9까지 순서대로 출력하는 반복문이다. 예시로 i가 3보다 크고 100보다 미만인데 5의 배수인 값만 출력하는 반복문을 만들면 let i = 0; while (i 3 && i

for문 for문 생성방법 for (초기값; 조건식; 증감식) {} 예시 for (let i = 0; i " + i); } 코드해석을 하자면 i가 0부터 시작해 중괄호 안에 코드를 실행하고 1씩 더하며 10보다 작은 9까지 반복을 하는 코드이다. for문의 대표적인 응용법 배열과 같이 사용 예시 const arr = [1, 2, 3, 4, 5]; for(let i = 0; i < arr.length; i++) { console.log(i); cosole.log(arr[i]); 출력은 1 1 2 2 3 3 4 4 5 5가 나온다. for ~ in 문 객체의 속성을 출력하는 문법 예시 let person = { name : "moon", age : 2..

1. 배열 생성 1-1. 기본 생성 예시 let fruits = ["사과", "오렌지", "바나나"]; 1-2. 크기 지정 let number = new.Array[5]; console.log(number.length); 이렇게 작성하면 5칸짜리의 배열이 생성된다. 2. 요소 접근 배열이니 index로 접근 예시 console.log(frutis[0]); 결과는 사과가 출력됨 3. 배열 메서드 3-1. push 기존 배열에 새로운 값을 넣어준다. 예시 let fruits = ["사과", "오렌지"]; fruits.push("바나나"); 이러면 배열 마지막에 바나나가 추가된다. 3-2. pop 마지막 값을 삭제 예시 fruits.pop(); 위에서 다시 생겼던 바나나가 삭제된다. 3-3. shift 첫 번..