티스토리

후의 개발일지

검색하기

블로그 홈

후의 개발일지

hyunhoooo.tistory.com/m

무녀누 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

자바스크립트 DOM 자바스크립트는 브라우저에서 사용하기 위해 만들어진 언어이다.많이 발전해서 여러 군데에서 사용되지만본래 목적은 웹 페이지를 동적으로 만들어 주기 위한 언어이다. 우리 = 클라이언트가 서버로 request로 요청을 하게 되면서버에서는 response로 응답을 준다.응답은 html파일 형식이다.그리고 이 html파일을 해석해야 한다 해석을 왜 해야 할까?서버로부터 받아온 html파일은 javascript가 이해를 할 수 없기 때문에알아들을 수 있도록 해석을 해야 한다는 것이다. 우선 간단하게 html파일 하나를 만들어보겠다. DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device.. 공감수 1 댓글수 1 2024. 4. 25.
자바스크립트 Set 저번에 Map에 대해 알아봤으니 이번엔 Set에 대해 알아보자. Set이란? 고유한 값을 저장하는 자료구조이다. 값만 저장하는 점이 Map이랑 다르다 키를 저장하지 않고 값이 중복되지 않는 유일한 요소로만 구성된다. 기능으로는 값 추가, 검색, 삭제, 모든 값 제거, 존재 여부 확인 등이 있다. 생성방법 const mySet = new Set(); mySet.add('value1'); mySet.add('value2'); 이런 식으로 생성할 수 있다. 값을 추가하는 법은 .add()를 사용하면 된다. 위에 Set설명이 말로만 해서 이해하기 어려울 수 있으니 간단한 코드로 작성해 보겠다. 먼저 값이 중복되지 않는 요소로 구성된다 했으니 중복되는 요소를 넣어서 작성해 보겠다. const mySet = new.. 공감수 0 댓글수 0 2024. 4. 23.
자바스크립트 Map 지금까지 객체와 배열에 대해 많이 배웠는데 이 객체와 배열만으로는 정교한 개발을 할 수가 없다. 그래서 이번에는 Map, Set같은 자료구조에 대해 알아보려고 한다. Map의 목적은 데이터의 구성, 검색, 사용을 효율적으로 처리하기 위해 사용한다 1.Map -key / value key에 어떤 데이터 타입도 다 들어올 수 있다. 이유는 Map은 키가 정렬된 순서로 저장되기 때문이다. 기능으로는 검색, 삭제, 제거, 여부 확인 등이 있다. 생성방법 const mymap = new Map(); 값을 추가하는 방법은 mymap.set( 'key', 'value' ); 이렇게 set을 통해 추가하면 된다. 검색하는 방법은 mymap.get('key'); 이렇게 get을 통해 검색을 할 수있다. map을 쓰는 이.. 공감수 1 댓글수 1 2024. 4. 23.
일급 객체로서의 함수(2) 저번에 이어서 이번에는 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(); .. 공감수 0 댓글수 0 2024. 4. 23.
일급 객체로서의 함수(1) 일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 자바스크립트에서의 함수는 매우 중요한 개념이다. 함수를 매우 유연하게 사용할 수 있고 함수가 일급 객체로 취급되는 5가지 경우에 대해 알아보자. 1. 변수에 함수를 할당할 수 있다. 예시 const abc = function() { console.log("hi"); } 이렇게 변수에 함수를 담아서 마치 값으로 취급을 하며 나중에 어디서든 꺼내쓸 수 있다. 2. 함수를 인자로 다른 함수에 전달할 수 있다. 예시 function abc(func){ //매개변수로 받은 변수가 함수 일 수 있다. func(); } const hi = function() { console.log("hi"); } abc(hi); 이런 식으로 .. 공감수 0 댓글수 0 2024. 4. 23.
ES6 문법(2) 단축 속성명 정말 많이 쓰이는 방법이다. 기존 객체 생성법 예시로 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.. 공감수 0 댓글수 0 2024. 4. 23.
[TIL] ES6문법(1) ES6란? 2015년에 발표된 자바스크립트 버전으로 대규모 문법적 향상 및 변경이 있어서 새로운 문법과 기능을 도입해 개발자들이 보다 쉽고 효율적으로 코드 작성할 수 있도록 개선한 버전 1. let, const 이 둘의 차이점은 처음선언한 후 재할당을 할 수 있냐 없냐의 차이가 있다. 2. 화살표 함수 기존 함수 생성 2가지 2-1. function ex() {} 2-2. var ex = function() {}; 화살표 함수 생성 var ex = () => {}; 중괄호 안 코드가 한 줄이면 중괄호 생략 가능하고 매개변수를 넣으면 소괄호도 생략 가능하다. 3. 삼항 연산자 생성법 aaa ? true일 때 : false일 때 4. 구조분해할당 구조를 반대로 찢어서 다 할당한다는 의미이다. 배열이나 객체의.. 공감수 0 댓글수 0 2024. 4. 23.
자바스크립트 반복문(2) 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 공감수 0 댓글수 0 2024. 4. 22.
자바스크립트 반복문(1) 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.. 공감수 0 댓글수 0 2024. 4. 22.
자바스크립트 배열 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 첫 번.. 공감수 0 댓글수 0 2024. 4. 22.
자바스크립트 객체 객체 선언하는 법 key - value fair key에는 어떤 타입도 사용 가능하다. 1. 객체 생성 방법 1-1. 가장 기본적인 객체 생성 방법 let person = { name : "문현후", age : 25, gender : "남자" }; 이런 식으로 작성한다. 1-2. 생성자 함수를 이용한 객체 생성 방법 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; } let person1 = new Person{"문현후", 25, "남자"}; let person2 = new Person{"문현순", 21, "여자"}; 이런 식으로 작성 가능하다. 2. 접근하는 방법 예시 console.l.. 공감수 0 댓글수 0 2024. 4. 22.
자바스크립트 조건문 중첩, 조건부 실행 등 조건문의 중첩 조건문안에 조건문을 사용하는 방법 예시 let age = 20; let gender = "여성"; 미성년자 구분 if(age >= 18) { if (gender === "여성") { console.log("성인 여성입니다.); } else { console.log("성인 남성입니다."); } else { if (gender === "여성") { console.log("미성년 여성입니다."); } else { console.log("미성년 남성입니다."); } } 이런 식으로 중첩 조건문을 작성할 수 있다. 하지만 이렇게 자주 작성하는 것은 가독성에 좋지 않기 때문에 추천하는 방법은 아니다. 필요할 때만 가끔 쓰도록 하자. 조건부 실행 특정한 경우에만 실행하는 것 예시 let x = 10; .. 공감수 0 댓글수 0 2024. 4. 22.
자바스크립트 조건문 조건문의 종류는 if, else if, else, switch 등이 있다. 1. if문 사용 방법 1-1. 예시 let x = 15; if(x > 10) { console.log("10보다 큽니다."); } 이런 식으로 작성하면 조건이 충족하기 때문에 실행하면 10보다 큽니다.라는 문구가 출력된다. 1-2. 예시 let y = "hello world"; if (y.length >= 5) { console.log(y.length); } 이런식으로 작성하면 y 문자열의 길이가 11이기 때문에 조건을 충족해서 조건문 안에있는 console.log를 실행하기 때문에 11이 출력된다. 2. else문 사용방법 처음 작성한 if문의 조건이 아닌 다른 모든 경우일 때 사용한다. 예시 let x = 6; if (x >.. 공감수 1 댓글수 1 2024. 4. 22.
스코프 및 화살표함수 자바스크립트에서 스코프란? 변수의 영향의 범위라고 한다. 전역변수, 지역변수가 있는데 전역변수는 코드 내 전체에 영향을 주는 변수이고 지역변수는 함수 내부라던지 일정 지역 내에서 영향을 주는 변수이다. 화살표 함수란? es6부터 등장한 신 문법이다. 기존 함수 선언식에서 살짝 간편한 방법이다. 1-1. 기본적인 화살표 함수 let arrowFunc01 = (x, y) => { return x + y; } 1-2. 한 줄로 let arrowFunc02 = (x, y) => x + y; 한 줄 사용 시 중괄호도 생략해도 된다. 또 더 간단한 함수를 만들고 싶으면 실제로 사용을 잘 안 하겠지만 let arrowFunc03 = x => x; 이런 식으로 정말 간단하게 작성할 수도 있다. 간단한 화살표 함수를 알.. 공감수 0 댓글수 0 2024. 4. 22.
자바스크립트 함수 자바스크립트에서 함수란? input과 output을 가지고 있는 기능의 단위 기능의 단위로 묶어서 재활용하는 것 함수를 정의하는 법 function () {} 1. 함수 선언문 function 함수이름(매개변수) { 함수 내부에서 실행할 로직 } 함수 내부에서 출력하는 키워드는 return이다. 2. 함수 표현식 let 변수명 = function() {}; 함수를 호출하는 법 1. 함수명() 이렇게 작성하면 된다. 예시 function ex(x, y) { return x + y; } 이런 x와 y를 더하는 함수를 만들었을 때 호출하는 방법은 ex(x 입력값, y 입력값) 이런 식으로 사용하면 된다. 2. 함수에 대한 새로운 변수를 선언한다. 예시 let functionResult = ex(x, y); c.. 공감수 0 댓글수 0 2024. 4. 22.
자바스크립트 연산자 연산자의 종류는 크게 ( +, -, *, /, %)등이 있다. 1. 더하기 연산자 + console.log(1 + 1); console.log(1 + "1"); 출력은 1, 11이 출력된다. 11이 나온 이유는 저번에 배웠듯이 더하기 연산자는 형 변환 시 문자열이 우선시 되기 때문이다. 2. 빼기 연산자 - console.log(1 - "2"); console.log(1 -2); 둘 다 값은 -1이 출력된다. - 연산자는 형 변환이 숫자가 우선시되기 때문 3. 곱하기 연산자 * console.log(1 * 2); console.log("1" * 2); 출력은 둘 다 2 4. 나누기 연산자 / console.log(6 / 3); console.log("6" / 3); 출력은 둘 다 2 5. 나누기 연산자 .. 공감수 0 댓글수 0 2024. 4. 22.
자바스크립트 형변환 자바스크립트 형변환은 두 가지 경우가 있는데 첫 번째 경우는 명시적 형 변환 두 번째 경우는 암시적 형 변환이다. 명시적 형 변환은 개발자가 의도적으로 형 변환은 시키는 것이고 암시적 형 변환은 의도하지 않았지만 자동으로 형 변환이 된 것이다. 암시적 형 변환 예시 1-1. 문자열 let result = 1 + "2"; typeof를 사용하고 출력을 하면 string에 12가 출력된다. 문자열과 불리안 타입을 결합하면 문자열로 출력된다 객체, undefined, null 등등도 문자열과 결합 시 문자열이 우선시로 형 변환이 일어난다. 1-2 숫자 let resultt = 1 - "2"; 는 number에 -1이 출력된다. 마찬가지로 *, /도 number로 출력된다. 왜 더하기랑 다르게 출력이 될까 더하.. 공감수 0 댓글수 0 2024. 4. 22.
자바스크립트 데이터타입(2) 불리안(Boolean) 참과 거짓을 나타내는 것 let bool1 = true; let bool2 = false; typeof를 사용하면 Boolean타입으로 출력 undefined는 값이 할당이 안된 것 null은 값이 존재하지 않다는 것을 "명시적"으로 나타낸 것 둘의 차이는 null은 개발자가 명시적으로 값이 없다는 것을 나타내는 것이고 undefined는 그냥 정의되지 않았다는 것 object(객체) key-value pair let person = { name : "moon", age : 25 } array(배열) 여러 개의 데이터를 순서대로 저장하는 데이터 타입 let number = [1, 2, 3, 4, 5]; 배열의 시작은 항상 0부터 시작 number [0] = 1이다 공감수 0 댓글수 0 2024. 4. 22.
자바스크립트 데이터 타입(1) 자바스크립트는 runtime기준으로 코드를 작성할 때가 아니라 실제 코드가 실행될 때 그때 데이터 타입이 정해진다. typeof를 사용하면 실행한 변수의 데이터 타입을 알려준다. 예시 let num = 1; console.log(typeof num); 데이터 타입으로는 정수, 실수, 지수형, 문자형, NaN, infinity, -infinity 등이 있다. 문자열 길이 확인하기 let str = "hello"; console.log(str. length); 문자열 결합하기 let str = "hello "; let str1 ="world"; let result =st.concat(str1); 문자열 자르기 let str = "hello world"; console.log(str.substr(7, 5));.. 공감수 0 댓글수 0 2024. 4. 22.
[TIL] 자바스크립트 변수와 상수 변수설정 3가지 let, var, const let은 첫 선언 후 다시 선언 불가능 값 변경 가능 var은 첫 선언 후 다시 선언 가능 값 변경 가능 const는 상수로 첫 선언 후 다시 선언 불가능 값 변경 불가능 변수 이름 : 저장된 값의 고유 이름 변수 값 : 변수에 저장된 값 변수 할당 : 변수에 값을 저장하는 행위 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위 변수 참조 : 변수에 할당된 값을 읽어오는 것 공감수 0 댓글수 0 2024. 4. 22.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.