본문 바로가기

전체 글402

[모던JS] 014. [기본] if와 물음표를 사용한 조건 처리(삼항 연산자, 물음표 연산자, 조건부 연산자) 원문if문 (?)조건을 걸 때는 if(...)문을 사용한다. 괄호 안의 표현식을 평가한다.if문 기본형if(확인 할 조건) {참이면 실행할 값}let year = prompt('장원영은 어느 그룹의 멤버일까요?', '');if (year === "아이브" || year === "ive") { alert('정답입니다!');} else { alert('오답입니다!');}alert를 연속해서 띄울 수도 있다. 중괄호 안에 계속 넣으면 된다.let group = prompt('장원영은 어느 그룹의 멤버일까요?', '');if (group === "아이브" || group === "ive") { alert('정답입니다!'); alert('훌륭하네요.');} else { alert('오답.. Programing/JavaScript 2024. 3. 25.
[터미널] 한글 깨짐 오류 해결 방법 원문 [PowerShell] - 파워쉘을 이용할때 한글깨짐현상 해결방법 PowerShell 을 이용해서 Git 로그를 알아오기 위한 명령어를 실행 중, 한글이 깨지는 현상이 발견되었습니다. 인터넷을 찾아보니, 빈번하게 발생하는 부분인거 같아서 정리해보았습니다. 1. 출력에 holjjack.tistory.com 터미널에서 git log나 git status로 이력 출력 시 한글이 '쇱꽍뜻옄'과 같이 깨지는 현상 발생. UTF-8 설정, chcp 설정 등 수많은 방법을 사용해봤지만 해결되지 못하고 위 원문에서 세번째 방법인, 변수 이용시 한글 깨짐에 나온 명령어를 붙여넣기 하니 문제가 해결됨. [System.Console]::OutputEncoding = [System.Text.Encoding]::UTF8 IT/Computer 2024. 3. 25.
[모던JS] 013. [기본] 비교 연산자(동등비교, 일치비교, 문자열간비교, null==undefined) 비교 연산자연산자기능==(equal) 같다 / 수학에서는 =가 같다이지만 자바스크립트에서 =는 할당이다.!=(not equal) 같지 않다===(strict equal) 값과 타입까지 같다!==(strict not equal) 값과 타입까지 같지 않다>(greater than) 좌항이 우항보다 크다(less than) 좌항이 우항보다 작다>=(greater than or equal) 좌항이 우항과 같거나 크다(less than or equal) 좌항이 우항과 같거나 작다비교 연산자의 불린형 반환비교 연산자를 사용하면 값은 불린형으로 반환된다.true : 참false : 거짓console.log( 2 > 1 ); // trueconsole.log( 3 문자열 간의 비교자바스크립트에서는 문자열 끼리도 크기 .. Programing/JavaScript 2024. 3. 25.
[모던JS] 012. [기본] 기본 연산자와 수학(산술 연산자, 연산자 우선순위, 할당 연산자, 복합 할당 연산자, 증감 연산자, 전후위형 증감연산자, 비트연산자, 쉼표연산자) 원문피연산자(operand), 단항(unary), 이항(binary)피연산자 (operand)연산자가 연산을 수행하는 대상.인수(arguments)라고도 한다.console.log( 5 * 2 ); // 10위의 예제에서 5와 2가 피연산자이다.단항 (unary), 이항 (binary)피연산자의 개수로 단항이냐, 이항이냐 구분한다.예를 들어 마이너스 연산자가 단항 연산자와 이항 연산자 둘 다 될 수 있다.let x = 1;x = -x;console.log(x); // -1위 예제에서 마이너스 연산자(-)는 x라는 하나의 피연산자, 즉 단항을 받아서 값을 반대로 뒤집었다. (양수 -> 음수)let x = 3, y = 5;console.log (y - x); // 2위 예제에서 마이너스 연산자(-)는 좌항으.. Programing/JavaScript 2024. 3. 25.
[모던JS] 011. [기본] 원시 타입 자료형의 형 변환(숫자형, 문자형, 불리언, 묵시적, 명시적) 원문형 변환(type conversion)의 의미원시 타입의 데이터 타입들(number, string, boolean, null, undefined)은 서로 그 자료형을 변환시킬 수 있다. 이것을 형 변환(type conversion)이라 한다.문자형으로 형 변환문자형 형 변환 기본형String();대소문자 주의문자형 형 변환 예제let value = true;console.log(value); // booleanvalue = String(value) // value라는 변수의 값을 string 타입으로 변환하라console.log(typeof value); // stringtrue라는 불리언 값을 string으로 변환하라고 했다. 값 자체는 "true"로 바뀌었다. 이상하게 다른 문자로 바뀌지 않는다... Programing/JavaScript 2024. 3. 25.
[모던JS] 010. [기본] alert, prompt, confirm을 이용한 상호작용 원문브라우저에서 사용자와 상호작용 할 수 있는 내장 함수가 있다.단순히 확인 버튼만 누르는 alert와 입력까지 해야 하는 prompt, 입력은 필요 없고 확인 취소가 있는 confirm dialog가 있다.alert 함수alert 함수는 메시지를 띄워주고 사용자가 OK를 누를 때까지 확인창이 계속 떠있게 하는 기능이다.alert("Hello");누르게 되면 뜨는 확인창을 모달 창(modal window)라고 부른다.모달의 의미는 해당 창과 페이지 밖의 웹 브라우저의 내용과는 상호작용이 불가능하다는 의미이다.따라서 사용자가 OK를 눌러서 모달창을 빠져 나오지 않으면 웹 페이지를 조작할 수 없다.prompt 함수역시 모달창을 띄워주는 함수인데, alert처럼 OK만 누를 수 있는 것이 아니라 입력 필드(i.. Programing/JavaScript 2024. 3. 25.
[모던JS] 009. [기본] 자료형(원시 타입, typeof연산자) 원문자료형(data type)의 의미자료형(data type)이란 숫자, 문자, 불리언과 같은 자료의 형태를 이야기한다.자바스크립트에서는 변수에 모든 자료형이 올 수 있다.let message = "hello";message = 123456;위의 예제처럼 변수의 자료형은 문자열이 될 수도 있고, 숫자가 될 수도 있다.이렇게 값의 타입이 언제든지 바뀔 수 있기 때문에 자바스크립트를 동적 타입 언어(dtnamically typed language)라고 한다.자료형의 종류원시 타입 (primary)숫자형(Number type)숫자형의 종류정수 : 1, 2, 3 등부동소수점 숫자 : 일반적이지 않으니 이번 과정에서는 생략특수 숫자값(special numeric value)무한대Infinity : 양의 무한대어떤.. Programing/JavaScript 2024. 3. 25.
[모던JS] 008. [기본] 변수와 상수(let, var, const, 호이스팅, 명명규칙, 대문자상수) 원문자바스크립트로 작성된 애플리케이션은 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다.즉 HTML과 CSS로 작성된 문서에 동적인 움직임, 명령, 행동을 발생시키기 위해서 자바스크립트를 이용한다.(예시)온라인 쇼핑몰 : 장바구니 등의 정보채팅 앱 : 사용자 정보, 메시지 주고 받기변수 (Variable)변수의 의미이름이 붙은 저장소.데이터를 저장할 때 쓰인다.예를 들어 쇼핑몰에서는 상품정보나 방문객 등의 정보를 저장할 때 변수를 사용한다.선언 방법 (let, var)변수 선언 기본형변수를 선언하기let 변수명;var 변수명;변수에 데이터를 저장하기let message;message = 'Hello';=이라는 할당 연산자를 사용하여 변수 안에 'Hello'라는 문자열을 저장했다.let me.. Programing/JavaScript 2024. 3. 25.
[모던JS] 007. [기본] 엄격 모드(use strict) 원문엄격 모드란? (use strict)자바스크립트는 호환성을 최우선시 하면서 발전해왔다.따라서 새로운 기능을 추가할 때도 기존의 기능은 전혀 건드리지 않고 발전해왔다.문제는 기존의 언어에서 언어 개발자의 실수 등으로 발생한 버그나 불완전한 코드도 여전히 남아있다는 것이다.그런데 2009년 ECMAScript5(ES5)가 등장하면서부터는 기존의 기능도 수정이 이루어졌다. 따라서 하위호환성 문제가 발생하기도 했다.하지만 그냥은 실행이 안 되고 아래의 기본형을코드의 최상단에 왔을 때만 '모던한 방식', 즉 기존의 버그까지 모두 수정한 최신의 스크립트가 작동되도록 설계하였다.기본형코드 최상단에 아래의 지시자를 입력한다."use strict";함수 하나만 엄격모드로 실행하기함수의 최상단에 아래의 지시자를 입력하.. Programing/JavaScript 2024. 3. 25.
[모던JS] 006. [기본] 코드 구조(문, 주석) 원문이 문서에서는 코드 블록을 만드는 방법에 대해 다룬다.문(statement)문의 의미어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 말함.alert('hello, world!')와 같은 것이 문이다.문을 작성하는 방법세미콜론(;)으로 구분세미콜론을 작성하지 않으면 코드가 끝나지 않았다고 생각되어 에러가 발생할 수 있음.세미콜론에 대해서는 아래에서 추가적으로 다룸.가독성을 위해 하나의 문은 한 줄에 작성하기// 바른 예alert("hello");alert("world");// 에러 예제 1alert("에러가 발생합니다.")[1, 2].forEach(alert) // 단일 문으로 인식// 에러 예제 2alert("에러가 발생합니다.")[1, 2].forEach(.. Programing/JavaScript 2024. 3. 25.

티스토리툴바