본문 바로가기

HTML + CSS + 자바스크립트18

Array 객체의 파괴적 메서드 VS 비파괴적 메서드 Array 객체 배열을 다루는 객체 파괴적 메서드와 비파괴적 메서드로 구분 파괴적 메서드 메서드를 사용했을 때, 원본 데이터를 변경하는(손상 시키는) 메서드 비파괴적 메서드 메서드를 사용했을 때, 원본 데이터를 변경하지 않는(손상 시키지 않는) 메서드 파괴적 메서드, 비파괴적 메서드 👀 한 눈에 구분하기 파괴적 메서드 비파괴적 메서드 push() forEach() pop() filter() unshift() find() shift() findIndex() sort() includes() reverse() join() 🚨 더 많은 메서드들이 많다 🚨 // 파괴적 메서드 const arr = ['a', 'b', 'c']; arr.pop(); console.log(arr); // [ 'a', 'b' ] // .. 2023. 12. 11.
객체 속성 다루기 # 접근방법, 객체 속성 추가, 삭제, 객체의 특성 : 얕은 복사 객체 키와 값으로 구성된 속성의 집합 const person= {}; // 빈객체 const person= { 키 : 값으로 구성된 속성 나열 }; 객체 각각의 속성에 접근하는 방법 1. 마침표 연산자 접근 방법 객체가담긴변수이름.키 const person = { name: 'ellie', age: 20, isAdult: true, "phone number" : "010-1234-5678", }; console.log(person.name); // ellie 2. 대괄호 연산자 접근 방법 객체가담긴변수이름['키'] const person = { name: 'ellie', age: 20, isAdult: true, "phone number" : "010-1234-5678", }; console.log(pe.. 2023. 12. 8.
즉시 실행 함수 사용하기 즉시 실행 함수 함수를 정의하면서 동시에 실행까지 하는 함수 ⭐️ 한 번 실행되고 나면 메모리에 데이터가 남지 않음 (function(){})(); 일반적으로 함수를 선언하면 전역 스코프에 정의되어, 프로그램이 종료되기까지 메모리에서 사라지지 않는다. 아래 코드는 함수 표현식으로 정의된 init() 함수이다. const init = function(){ console.log("initialized!"); } 이 함수는 어차피 한 번만 사용할 함수인데, const 키워드에 할당했기 때문에 프로그램이 종료되기 전까지 init 식별자는 재사용 불가하다. 이러한 현상을 전역 스코프가 오염됐다 고 표현한다. 이런 경우 즉시 실행 함수로 함수를 정의하면 전역 스코프가 오염되는 것을 방지할 수 있다. (functio.. 2023. 12. 7.
자바스크립트 함수 정의하는 3가지 방법 자바스크립트 함수는 함수 선언문 함수 표현식 화살표 함수 등을 사용해 정의한다. 🔔 아래 예시문은 모두 구구단 5단을 만드는 함수입니다 🔔 함수 선언문 ✔️ function 식별자(){} ✔️ 제일 대표적으로 사용됨 function gugudan(){ for(let i = 1; i { for(let i = 1; i 2023. 12. 6.
if문 VS switch문 : 어떤걸 사용해야할까?? 차이점은?? if문, switch문 모두 자바스크립트 조건문 이다. 그럼 어떤 차이점이 있는지 알아보자. if문 if(조건문){ 실행할 코드 } ✨ 조건문에 연산자를 사용하여 논리적인식 작성 가능 ✨ ✔️ 중첩 가능 (다중 fi문) ✔️ 중첩횟수는 상관없으나, 코드의 가독성이 안좋아짐 : 한 번 정도만 중첩하는 것을 추천 let num1 = 10; if(num1 % 2 === 0){ console.log("변수 num1에 할당된 숫자는 짝수입니다."); if(num1 > 5){ console.log("num1은 5보다 큽니다.") } else if(num1 > 0){ console.log("num1은 0보다 큽니다.") } else { console.log("num1은 0보다 작습니다.") } } switch문 sw.. 2023. 12. 5.
문자열에 ''(작은 따옴표), ""(큰 따옴표) 넣으면 에러 해결하기 문자열은 큰따옴표("") 또는 작은따옴표('')로 정의합니다. 라는 문자를 출력하고 싶다. 문자열을 작성할 때는 큰따옴표("") 혹은 작은따옴표('')로 감싸면 된다. 문자열에 큰따옴표가 포함될 경우에는 작은따옴표 안에 문자열을 넣어주면되고, 문자열에 작은따옴표가 포함될 경우에는 큰따옴표 안에 문자열을 넣어주면된다. 하지만 이렇게 문자열에 큰따옴표, 작은 따옴표 모두 포함되었을 경우 에러가 발생한다. 방법 1. 문자열 연결 연산자 활용 let str = '문자열은 큰따옴표("") 또는 작은따옴표(' + "'')로 정의합니다."; console.log(str); 방법2. 이스케이프 문자(\) 활용 let str = "문자열은 큰따옴표(\"\") 또는 작은따옴표('')로 정의합니다."; console.log.. 2023. 12. 4.
var, let, const 차이점 비교 한 눈에 확인하기 var, let, const 비교 var let const 변수명 중복 O X X 호이스팅 O X X 재할당 O O X 변수 선언 후 할당 O O X 변수명 중복 호이스팅 재할당 변수 선언 후 할당 2023. 12. 4.
반응형 웹을 만드는 주요 기술 중 하나 '미디어 쿼리(media query)' 반응형 웹 웹브라우저의 크기, 접속하는 기기 등등 상태에 따라 웹페이지가 반응하여 변경하는 것 이러한 반응형 웹을 만드는 주요 기술 중 하나가 미디어 쿼리(media query) 이다. 뷰포트(viewport) 웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기 vscode의 빈 파일에 ! 로 html의 기본 틀을 만들 수 있는데, 중간에 보이는 meta 태그의 viewport가 접속하는 기기마다 뷰포트를 최적화해준다. content="width=device-width" 이 부분이 뷰포트의 넓이를 접속하는 기기 넓이로 최적화한다. ⭐️ 최소한 width, initial-scale 을 사용해줘야 다양한 기기에서 최적화된 화면을 보여줄 수 있다 ⭐️ 미디어 쿼리 사용하기 @media only|not 미디어.. 2023. 11. 30.
구글 폰트(Google Fonts) 사용법 ⬇ 구글 폰트에서 원하는 글꼴 찾기 ⬇ Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 사용한 글꼴 : Inconsolata @import 로 글꼴 적용하기 ⭐️ import 부분은 반드시 style 태그의 최상단에 위치해야 함 ⭐️ Welcome, Ellie Programming World Ellie Trip World 도 놀러오세요 Ellie Trip World 바로가기 HTML 삽입 미리보기할 수 없는 소스 로 글꼴 적용하기 Welcome, Ellie Programming World Ellie Trip World 도 놀러오세요 Ellie Tr.. 2023. 11. 29.
반응형