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

Front-end61

[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.
[Jquery]부트스트랩(Bootstrap)과 제이쿼리(Jquery)의 버전별 호환성 부트스트랩과 jQuery의 버전 호환성은 부트스트랩 버전에 따라 다릅니다. 아래는 부트스트랩의 여러 버전과 그에 맞는 jQuery 버전을 요약한 표입니다. Bootstrap Version Compatible jQuery Version 5.x.x 3.5.1 or higher 4.x.x 3.2.1 or higher 3.x.x 1.9.1 - 3.5.x 2.x.x 1.7.1 - 1.9.1 1.x.x 1.3.2 - 1.9.1 즉, 사용 중인 부트스트랩의 버전에 따라 호환 가능한 jQuery 버전이 결정됩니다. 예를 들어, Bootstrap v4.0.0을 사용하고 있다면 jQuery 버전 3.2.1 이상을 사용하는 것이 좋습니다. 2023. 5. 9.
[VS Code]비주얼 스튜디오 익스텐션 sftp, ftp를 이용해서 바로 업로드해 보자 에디트플러스를 사용했을땐 저장하면 바로바로 서버에 업로드되서 편하게 코딩했던거 같습니다. VS Code를 사용하면서도 동일하게 가능합니다. 경로 혹은 설정을 잘못해서 저장 후 파일을 하나씩 올리고 있었다면, 아래방법데로 해보세요. 로컬에서 파일을 저장하면 바로 서버에 올라가게 하는 방법입니다. (모르시는 분들을 위해) SFTP 익스텐션 설치하기 VS Code 익스텐션에서 sftp를 다운로드 받습니다. (여러 ftp 설치파일을 사용해봤지만 개인적으로 이게 편하더군요.) 프로젝트 생성 로컬 프로젝트 폴더를 여시고 설정파일을 생성해야합니다. 그후 설정에서 SFTP:Config를 선택합니다. (윈도우 : ctrl + shift + p 맥 : command + shift + p) 설정 화면이 보이면 아래와 같이 .. 2023. 5. 8.
[React]리액트 자주사용하는 기본문법 React의 문법 React는 JSX(JavaScript XML) 문법을 사용하여 UI를 작성합니다. JSX는 JavaScript의 확장 문법으로, HTML과 유사한 문법을 사용하여 컴포넌트를 작성할 수 있습니다. 컴포넌트 생성 프로퍼티 전달 이벤트 처리 조건부 렌더링 배열 렌더링 스타일링 반복문 이벤트핸들링 컴포넌트 생성 React에서 컴포넌트를 생성할 때는, 함수형 컴포넌트를 작성할 수 있습니다. 이 함수는 JSX를 반환해야 하며, JSX는 괄호(())로 감싸야 합니다. jsx Copy code function MyComponent() { return Hello, World!; } 프로퍼티 전달 React 컴포넌트에는 프로퍼티(props)를 전달할 수 있습니다. 프로퍼티는 해당 컴포넌트가 렌더링될 때.. 2023. 3. 29.
[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.
[javascript]모던 자바스크립트란? "모던 자바스크립트"는 ES6(ECMAScript 2015) 버전 이상의 자바스크립트를 지칭하는 용어입니다. 이전 버전의 자바스크립트에서는 사용할 수 없었던 기능들이 추가되어, 개발자들은 더욱 편리하고 간결한 코드를 작성할 수 있게 되었습니다. 모던 자바스크립트에서 추가된 기능 중 가장 대표적인 것은 "let"과 "const" 키워드를 이용한 변수 선언 방식입니다. 이전에는 "var" 키워드만을 사용하여 변수를 선언할 수 있었지만, "let"과 "const" 키워드는 블록 스코프(block scope)를 가지기 때문에 변수의 유효 범위(scope)가 더욱 명확해졌습니다. 또한, "const" 키워드로 선언된 변수는 상수를 표현하기에 적합합니다. 그 외에도 모던 자바스크립트에서는 템플릿 리터럴(templa.. 2023. 3. 12.
[javascript]javascript 연산자 JavaScript는 여러 종류의 연산자를 제공합니다. 각 연산자는 다양한 작업을 수행하며, 피연산자를 사용하여 연산을 수행합니다. 다음은 JavaScript에서 사용할 수 있는 주요 연산자의 목록입니다. 산술 연산자 덧셈 (+) 뺄셈 (-) 곱셈 (*) 나눗셈 (/) 나머지 (%) 거듭제곱 (**) 할당 연산자 대입 (=) 덧셈 후 대입 (+=) 뺄셈 후 대입 (-=) 곱셈 후 대입 (*=) 나눗셈 후 대입 (/=) 나머지 후 대입 (%=) 비교 연산자 같음 (==) 같지 않음 (!=) 일치 (===) 불일치 (!==) 크기 비교 (> / >= / >) 그 외 쉼표 (,) 삭제 (delete) void 이러한 연산자들을 조합하여 변수의 값을 계산하거나, 조건문과 반복문 등을 작성할 수 있습니다. 2023. 3. 9.
[Typescript]javascript와 typescript 차이점과 사용방법 javascript와 typescript 차이점 JavaScript는 스크립트 언어로, 다양한 플랫폼에서 동작하는 클라이언트 측 및 서버 측 애플리케이션을 작성하는 데 사용됩니다. JavaScript는 가볍고 동적이며 쉽게 배울 수 있으며 웹 페이지의 동작 및 사용자 인터페이스를 개선하는 데 사용됩니다. TypeScript는 JavaScript의 슈퍼셋으로, 정적 타입 언어입니다. TypeScript는 JavaScript 코드와 함께 사용되며, JavaScript와 마찬가지로 TypeScript 코드는 JavaScript로 컴파일되어 실행됩니다. TypeScript는 개발자가 개발하고 유지 관리하는 대규모 애플리케이션을 보다 쉽게 작성하고 관리할 수 있도록 해줍니다. TypeScript는 정적 타입 검사.. 2023. 3. 9.
[VS Code]gulp he following tasks did not complete: default 에러해결 gulp 실행시 he following tasks did not complete: default 에러메시지가 보인다면, 아래 소스를 gulpfile.js로 만든후 다시 실행해보세요. const gulp = require('gulp'); gulp.task('default',async function() { console.log('gulp start'); }); gulp 2023. 3. 4.
[VS Code]git 소스제어 삭제 (git repository) VS Code에서 git 폴더는 삭제를 했는데 소스제어에서 계속 남아있을경우 삭제 방법입니다. 폴더는 삭제를 했지만, .git에 기존에 만들어논 폴더가 남아있기 때문입니다. 먼저 터미널에서 아래 명령어를 입력하세요. (cd를 이용해서 삭제했던 폴더 위치로 이동해주세요.) git rev-parse --show-toplevel 그리고 ls -a 명령어로 .git를 찾습니다. .git 폴더가 보인다면 아래명령어로 삭제해주세요. rm -r -f .git 그럼 사라진걸 확인할수 있습니다. 2023. 3. 3.

티스토리툴바