Kwangkki

자바스크립트 ES6 부터 Template literal 기능이 도입되었다. 우선 사용법 부터 알아보자 템플릿 리터럴 사용법 빽틱이라고 불리는 이 따옴표 같은 것을 사용하면 된다. `` const str = `1,2,3 "1,2" [1,2] 템플릿 리터럴은 빽틱안에 있는 모든 것을 String으로 출력한다`; console.log(typeof str); //String 템플리 리터럴 활용법 기존 따옴표로 사용하면 되지 왜 이것을 사용하느냐. 바로 문자열 안에 함수를 사용할 수 있다는 것이다. //백틱 없이 문자열을 합칠 때 return "의류를 구매한 횟수는 총" + count + "회 금액은" + sum + "원이며 등급은" + rating "입니다" //백틱 사용 시 return `의류를 구매한 횟수는..

원시타입, 참조타입 설명이 앞서 이 문제를 다루는 이유에 대해 말하자면 다음과 같다. let arr = [1,2,3] arr === [1,2,3] //false arr 변수에 배열 1,2,3을 담은 후, 변수 arr과 배열 [1,2,3]을 비교하면 false가 결과값으로 나온다. 분명 타입도 같고 배열 값도 같은데 왜 false인가. 이는 메모리의 주소값에 따른 차이다. 자세히 알아보겠다. 원시타입 (primitive type)과 참조타입(Reference type) 자바스크립트에 원시타입의 종류는 아래와 같다. 1. String 2. Number 3. Boolean 4. Bigint 5. undefined 6. Symbol 7. Null 그외에 모든 타입은 참조타입으로 봐도 무방하다. 원시타입의 특징은..

블로그를 매일 쓰는 거는 정말 힘든 일... 그래도 힘내서 가보자구~! 오늘은 함수 기초에 대해 배웠고 정리해보겠다. 코딩 독학할 때 함수 이해가 정말 어려웠다. 특히 '=>' 이 녀석 function도 없고 ㅠ 정체성 뭐냐구~ 했는데 오늘 몇번 써보니까 이제 좀 친숙해졌다. 함수 자바스크립트에 함수를 만들 떄는 funciont을 써준다. funciont 함수이름(매개변수){ 명령문 } 여기까지는 좋다. 근데 함수를 만드는 방법이 2개가 더 있단다. // 1. 함수 선언식 function hello(name){ alert(name + "님 안녕하세요") } // 2. 함수 표현식 const hello = function(name){ alert(name + "님 안녕하세요") } // 3. 화살표 함수 c..

자바크스립트에서는 수학 연산을 해주는 아주 편리한 기능이있다. Math 함수에 내장된 기능들로는 정말 다양한 것들이 있다. Math.abs(x) 숫자의 절댓값을 반환합니다. Math.cos(x) (en-US) 숫자의 코사인 값을 반환합니다. Math.log2(x) 숫자의 밑이 2인 로그를 반환합니다. Math.pow(x, y) x의 y 제곱을 반환합니다. . . . 실제로 자주 쓰이는 것들을 요약하자면 다음과 같다. 위 6개 정도는 자주 쓰이는 기능들이다. 이 중에 랜덤함수를 가지고 실습을 해봤다. Math.floor(Math.random() * 1000000) // 430016 //string으로 형 변환 String(Math.floor(Math.random() * 1000000) ) // '48008..

부트 캠프 3일차, 블로그에 배운 것을 정리하다가 보니 메모장 정도로만 쓰인다는 생각이 들어 하루하후 배운 것에 대한 느낀점 혹은 배운점도 곁들여 쓸까 싶다. 오늘은 데이터 타입과 연산자, 조건문, 반복문, Math 함수, DOM 개념에 대해 가볍게 배웠다. 하나같이 중요하면서도 어려운 개념들이다. 이번 강의에서는 "이런 것들이 있다~" 정도로 배웠고 3주차에 자바스크립트에 대해 더 깊게 배운다고 한다. 그럼 오늘 배운 것들을 정리해보겠다. 데이터 타입 데이터 타입자바스크립트는 여러가지 데이터 타입을 가진다. 문자열 - String 숫자 - Number 참거짓 - Boolean 빈 데이터 - Null 할당하지 않은 데이터 - Undefined 객체 - Object 여기서 Null과 Undefined의 차..

자바스크립트에는 배열과 객체라는 아주 중요한 개념이 존재한다. 우선 배열에 대해 알아보자. 배열 배열을 사용하는 방법은 간단하다. 변수 선언 시에 [ ]를 사용하면 된다. 아래와 같이 cat 이름을 하나하나 변수 지정할 필요없이 배열을 사용하여 한 변수 안에 묶어서 담을 수 있다. let cat1 = "나비" let cat2 = "초코" let cat3 = "뭉치" let cats = ["나비", "초코", "뭉치"] 배열 값을 꺼내 사용하고 싶을 때는 0부터 차례대로 꺼내서 쓰면된다. cats[0] //나비 cats[1] //초코 cats[2] //뭉치 배열을 정렬하거나 추가, 삭제, 길이를 알고 싶을 때는 다양한 기능을 사용할 수 있다. 배열의 기능을 정리하자면 아래와 같다. 객체 객체는 배열과는 또..

자바스크립트에서 변수를 선언할 때 3가지 타입을 사용한다. var, let, const 변수 타입 별로 어떤 차이가 있는지 블로그나 강의를 통해 대충은 알고 있었다. 근데 이번 강의에서 정말 중요한 차이점을 명확하게 알게되었다. 변수 타입에 따른 차이점 차이점은 이렇다. var 는 변수명을 중복해서 사용할 수 있고 데이터 재할당이 가능하다. 아래 코드를 보면 var에 a 변수명을 중복해서 썼지만 에러가 발생하지 않는 것을 알 수 있다. 이런 경우의 단점으로 코드가 길어지면 깜빡하고 중복된 변수명을 사용함으로써 버그가 발생할 수 있는 것이다. let은 변수명을 중복으로 사용하진 못한다. 하지만 데이터 재할당은 가능하다. let a 에 1을 선언한 후 a를 2로 바꾸면 a의 결과는 2로 출력된다. const..

조건문 헷갈릴 때 보는 노트 if문 - if문은 조건의 개수가 많이 않을 때 사용하는 것이 유리함. if (조건 1){ // 조건 1에 부합할 때 } else if(조건 2){ // 조건 1에 부합하지 않지만 조건 2에 부합할 때 } else{ // 위 조건에 모두 부합하지 않을 때 } switch문 - 다양한 조건이 존재할 때 사용하면 소스코드를 짧게 유지할 수 있음 - break가 없으면 그 아래의 케이스가 모두 출력 될 것임. switch (확인 대상) { case 값1 : // 값 1에 부합할 때 break; case 값2 : // 값 2에 부합할 때 break; default: // 모든 경우 }

자바스크립트 언어 공부는 했지만 정작 웹사이트 하나 못 만들어봤습니다. 그래서 드림코딩의 반응형 상단바 제작 강의부터 보며 하나씩 따라했습니다. 아래 이미지가 최종 형태인데요. 기본 브라우저 크기에서는 가로형 메뉴바가 나타나고, 브라우저 크기가 줄면 세로형 메뉴바로 변경됩니다. 어떻게 만들었는지 공유합니다! html, css, javascript를 사용했으며 먼저 html 코드입니다. MadWebsite Home Galley Wedding FAQ Bookings 다음 css 코드입니다. 요점은 @media 기능을 활용하여 스크린 크기가 768px 이하이면 모바일 사이즈 css를 보이게끔 했습니다. 보통 회사나 서비스에서도 이런 방식을 채택하는지 궁금하네요. :root{ --text-color: #whit..

자바스크립트 비교연산자와 논리연산자를 사전처럼 사용하기 위해 블로그에 남깁니당 비교연산자 == : 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환 === : 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환 != : 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환 !== : 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환 > : 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환 >= : 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환 < : 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환