본문 바로가기
  • 커뮤니티
  • 블로그
  • 북마크

Front-end/Javascript19

[Javascript]자바스크립트 console.log 사용방법 JavaScript의 console.log() 함수는 콘솔에 메시지를 출력하는 데 사용됩니다. 이 함수를 사용하여 코드 실행 중에 값을 확인하거나 디버깅에 도움을 얻을 수 있습니다. 아래는 console.log()의 간단한 사용 방법입니다 1.텍스트 출력 console.log("안녕하세요, 콘솔!"); 2.변수 출력 let 변수 = "값"; console.log(변수); 3.여러 값 출력 let 변수1 = "값1"; let 변수2 = "값2"; console.log(변수1, 변수2); 4.변수와 문자열 결합 let 숫자 = 42; console.log("숫자는 " + 숫자 + "입니다."); 5.포맷된 출력 let 이름 = "John"; let 나이 = 25; console.log(`이름: ${이름}, .. 2023. 12. 17.
[Javascript]자바스크립트 객체(Objec의 기본 구조 및 예제 JavaScript에서 객체는 데이터와 해당 데이터를 조작하기 위한 동작을 포함하는 복합 데이터 유형입니다. 객체(Object)란? 객체는 키-값 쌍의 모음이며, 키는 문자열 또는 기호이고, 값은 어떠한 데이터 유형이나 함수가 될 수 있습니다. 객체는 중괄호 {}로 표현되며, 키-값 쌍은 쉼표로 구분됩니다. object = 물건, 물체 자바스크립트 객체는 속성(Property)과 행동(또는 메서드(Method))으로 구성됩니다. 객체는 데이터를 저장하는 속성과 그 데이터를 조작하거나 동작하는 메서드를 포함합니다. 이러한 속성과 메서드는 객체의 상태와 행동을 정의하며, 객체의 핵심적인 특징 중 하나입니다. 객체의 기본 구조 및 예제 다음은 JavaScript 객체의 기본 구조 및 예제입니다. // 객체 생.. 2023. 12. 17.
[Javascript]자바스크립트 알고리즘 종류와 예시 몇개 요새 개발자를 채용할 때 알고리즘 테스트를 하는 기업이 늘고 있습니다. 알고리즘 테스트를 하는 이유는 '문제해결' 능력을 보려고 하는 것입니다. 그렇다면 알고리즘이란? 무엇인가? 알고리즘이란? 컴퓨터가 따라 할 수 있도록 문제를 해결하는 절차나 방법을 자세히 설명하는 과정이다 사전적으로는 컴퓨터가 문제를 해결할 수 있도록 하는 절차나 방법이라고 설명하고 있습니다. 산에 정상을 찍는 게 목표라고 생각했을 때 정상을 가기 위해서는 빨리 가는 길, 돌아가는 길, 그 밖에 여러 갈래의 길이 있을 수 있습니다. 여기에서 산을 쉽게 빨리 가는 방법을 찾는다면 그게 빠른 길로 가는 알고리즘이라고 이해하시면 될 거 같습니다. 여러 알고리즘이 있지만, 만약에 본인이 더 좋은 알고리즘을 찾는다면 그 찾은 사람의 알고리즘이.. 2023. 6. 7.
[Javascript]다크 모드(dark) 적용 후 페이지 전환 시 라이트 배경 깜빡이는 문제 다크모드 적용 후 페이지 전환 시 깜빡이는 문제가 생길 수 있습니다. 원인 근본적인 이유는 페이지를 읽는 순서와 적용시점 때문입니다. 책을 읽을 때 위에서부터 읽듯이 웹페이지도 위에서 부터 순차적으로 코드를 읽고 실행을 시킵니다. 다크모드 적용하는 방법은 다양합니다만, html 혹은 body에 dark 관련 class를 추가해서 제작을 했다면, 스크립가 다크를 감지해서 먼저 코드상에 적용이 되어야 합니다. ex) 그리고 css에 적용을 했을때는 [color-thema="dark"] body {background:var(--background)} 이런 식으로 적용이 되겠죠? 다른 방식으로는 body class="dark-mode" 이렇게 될 수 도 있겠네요. 해결방법은 웹페이지 로딩이 다 되고 나서 적용이.. 2023. 6. 4.
[Javascript]자바스크립트 날짜 시간 정보를 가져오는 함수 자바스크립트에서는 Date 객체를 사용하여 날짜와 시간 정보를 가져올 수 있습니다. Date 객체를 생성하고 해당 객체의 메서드를 사용하여 다양한 날짜와 시간 정보를 얻을 수 있습니다. 현재 날짜와 시간 가져오기 const currentDate = new Date(); console.log(currentDate); // 예: Sun May 31 2023 10:30:00 GMT+0900 (Korea Standard Time) 위의 코드에서 currentDate 변수에 현재 날짜와 시간 정보가 담긴 Date 객체가 생성됩니다. 해당 객체를 출력하면 현재 날짜와 시간이 표시됩니다. 연도 가져오기 const currentYear = currentDate.getFullYear(); console.log(curre.. 2023. 6. 1.
[Javascript]자바스크립트 타입변환 JavaScript에서는 다양한 방법으로 타입 변환을 할 수 있습니다. 일반적으로 사용되는 방법들은 다음과 같습니다. 암시적 타입 변환(Implicit Conversion) JavaScript는 필요한 경우에 자동으로 타입을 변환합니다. 예를 들어, 숫자와 문자열을 함께 사용하면 숫자를 문자열로 자동 변환하여 연결할 수 있습니다. let num = 42; let str = "The answer is " + num; // 암시적으로 숫자를 문자열로 변환하여 연결 console.log(str); // "The answer is 42" 명시적 타입 변환(Explicit Conversion) 개발자가 직접 타입을 변환하는 메서드나 연산자를 사용하여 타입을 변환할 수 있습니다. 문자열로의 변환 toString().. 2023. 5. 23.
[Javascript]자바스크립트 지수 연산자(exponent operator)와 기존 방식 비교 JavaScript에서 지수 연산자는 ** 기호를 사용하여 표현됩니다. 이 연산자는 ES7(ECMAScript 2016)부터 도입되었으며, 거듭제곱 연산을 수행하는 데 사용됩니다. 지수 연산자 아래는 JavaScript에서의 지수 연산자 사용 예시입니다 let result = 2 ** 3; console.log(result); // 출력: 8 위 예시에서 2 ** 3은 2를 3번 곱한 결과인 8을 반환합니다. 음수 일 때 음수는 () 괄호로 묶어줘야 합니다. let result = (-2) ** 3; console.log(result); // 출력: -8 위 예시에서 (-2) ** 3은 -2를 3번 곱한 결과인 -8을 반환합니다. JavaScript의 지수 연산자는 음수에 대해서도 정상적으로 동작합니다... 2023. 5. 22.
[Javascript]자바스크립트 null typeof(타입)이 object로 나오는 원인과 대응 방법은? JavaScript에서 `typeof null`을 실행하면 "object"라는 결과가 반환됩니다. 이는 JavaScript의 설계 결함 중 하나로 알려져 있습니다. 이러한 동작은 초기 버전의 JavaScript가 개발되면서 발생한 오류로 인해 현재까지 유지되고 있습니다. null은 원래 object가 아닌 개별적인 타입으로 존재해야 할 것입니다. 실제로 null은 값이 없음을 나타내는 원시 타입이지만, `typeof` 연산자는 null을 "null"이 아닌 "object"로 분류합니다. 이는 기존 JavaScript 엔진의 내부 구현에 기인한 문제입니다. 대응 방법은? `typeof null`을 사용하여 null 타입을 확인하는 대신, null인지 확인하기 위해 엄격한 동등 비교(`===`)를 사용하거나.. 2023. 5. 22.
[Javascript]이스케이프 시퀀스(Escape sequence) 종류와 의미 이스케이프 시퀀스(Escape sequence)는 특수한 문자를 나타내기 위해 역슬래시(\)와 함께 사용되는 문자 조합입니다. 다양한 이스케이프 시퀀스가 있으며, 각각의 시퀀스는 특정한 의미를 갖습니다. 아래에는 자바스크립트에서 사용되는 주요한 이스케이프 시퀀스의 종류와 의미입니다. - `\'`: 작은 따옴표를 나타냅니다. - `\"`: 큰 따옴표를 나타냅니다. - `\\`: 역슬래시를 나타냅니다. - `\n`: 줄 바꿈을 나타냅니다. - `\r`: 캐리지 리턴(현재 위치를 줄의 맨 앞으로 이동)을 나타냅니다. - `\t`: 탭을 나타냅니다. - `\b`: 백스페이스를 나타냅니다. - `\f`: 폼 피드(다음 페이지나 폼의 다음 필드로 이동)를 나타냅니다. - `\v`: 수직 탭을 나타냅니다. - `\u.. 2023. 5. 22.
[Javascript]자바스크립트 ES6에 추가된 백틱(`)과 기존 코드 비교 자바스크립트 ES6에서 백틱(`) 방식(esc 아래 있는 키)이 추가되었습니다. (영문키로 변경 후 눌러주세요) 백틱은 어떨 때 사용할까요? JavaScript에서 백틱(`)은 템플릿 리터럴(template literal)을 나타내는 데 사용됩니다. 백틱은 기존의 따옴표('작은따옴표' 또는 "큰따옴표") 대신 사용할 수 있으며, 여러 줄로 이루어진 문자열과 표현식의 삽입을 편리하게 작성할 수 있도록 도와줍니다. 기존의 따옴표로 둘러싸인 문자열을 사용할 때는 여러 줄을 작성하기 위해 줄 바꿈 문자(\n)를 사용해야 했습니다. 또한, 문자열과 변수 값을 함께 사용하려면 문자열 연결(concatenation) 연산자인 +를 사용해야 했습니다. 아래는 기존의 따옴표를 사용한 코드와 백틱을 사용한 코드의 비교 예.. 2023. 5. 21.
[Javascript]자바스크립트(ES6) 데이터 타입 종류 자바스크립트(ES6)는 7개의 데이터 타입을 제공합니다. 원시 타입(Primitive types): number: 숫자를 나타내는 데이터 타입입니다. 정수 및 부동 소수점 숫자를 포함합니다. string: 문자열을 나타내는 데이터 타입입니다. 따옴표(큰 따옴표 또는 작은 따옴표)로 둘러싸여 있습니다. boolean: true 또는 false 값을 나타내는 데이터 타입입니다. null: 값이 없음을 나타내는 데이터 타입입니다. undefined: 변수에 할당되지 않은 값, 존재하지 않는 속성 또는 존재하지 않는 배열 요소를 나타내는 데이터 타입입니다. (ECMAScript 5에서는 실제로 undefined라는 값으로 할당되지만, 개념적으로는 타입입니다.) symbol: 유일하고 변경할 수 없는 값을 나타내.. 2023. 5. 21.
[Javascript]자바스크립트 표현식인 문과 표현식이 아닌 문 자바스크립트에서는 문(Statement)과 표현식(Expression) 두 가지 유형의 코드를 사용합니다. 1. 표현식(Expression) 표현식은 값을 평가하여 결과를 반환하는 코드입니다. 예를 들면, 숫자, 문자열, 변수, 함수 호출 등이 표현식의 예입니다. 표현식은 다른 표현식과 연산자를 조합하여 만들어질 수 있습니다. 표현식은 대부분 다른 코드에서 값으로 사용될 수 있습니다. 2 + 3 // 5 x = 10 // 10 (할당 표현식은 할당된 값 자체를 반환합니다.) myFunction() // 함수 호출 표현식 2. 문(Statement) 문은 어떤 작업을 수행하는 완전한 코드 단위입니다. 문은 보통 세미콜론(;)으로 끝나며, 여러 개의 문은 중괄호({})로 블록으로 그룹화될 수 있습니다. 문은.. 2023. 5. 18.
[Javascript] ECMAScript 버전별 출시 연도와 추가된 주요 기능들 ECMAScript의 다양한 버전과 그 특징을 보여주는 표입니다. ECMAScript 버전 출시 연도 주요 기능 1 1997 기본 문법, 변수, 함수, 객체 2 1999 클래스, 이터레이터, 정규식 3 2001 프로토타입 상속, 객체 지향 프로그래밍 5 2009 함수 표현식, 제네릭 함수, 람다 함수 6 2015 모듈, 클래스, 타입스크립트 7 2016 async/await, 화살표 함수, 전역 컨텍스트 8 2017 스프레드 연산자, 템플릿 문자열, 옵셔널 체크 9 2018 BigInt, String.prototype.includes(), String.prototype.matchAll() 10 2019 Object.entries(), Object.values(), Object.fromEntries() 1.. 2023. 5. 14.
[javascript]윈도우(맥OS) or 모바일 다크모드일때 dark-style.css 호출하기 윈도우(맥OS)나 모바일 다크모드일때 자동으로 감지 후 dark-style.css를 호출하는 방법입니다. JAVASCRIPT 위처럼 다크모드일때 웹페이지에서 dark-style.css를 호출하기위해 javascrpt에 아래 코드를 삽입합니다. if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { // 다크 모드이므로 dark.css를 호출합니다. const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'dark.css'; document.head.appendChild(link); } HTML html을 보시면 아래와.. 2023. 5. 11.
[Javascript]ECMAScript6(ES6)에 추가된 문법 ES6 (ECMAScript 2015)은 ECMAScript 언어의 6번째 버전입니다. ES6는 많은 새로운 문법과 기능을 도입하여 JavaScript를 더욱 강력하고 유연한 언어로 만들었습니다. ES6에 추가된 주요 문법 몇 가지를 살펴보겠습니다. let, const 키워드: 기존 var 키워드 대신에 let과 const 키워드가 추가되었습니다. let은 블록 스코프 변수를 선언할 때 사용하며, const는 상수를 선언할 때 사용합니다. let x = 10; x = 20; // 가능 const y = 10; y = 20; // 불가능 화살표 함수: 화살표 함수는 함수를 더 간결하게 작성할 수 있도록 해줍니다. 이전에는 함수를 선언할 때 function 키워드를 사용해야 했지만, 화살표 함수에서는 이 키.. 2023. 3. 20.
반응형

티스토리툴바