안심심한 아샤

객체 선언 방식 중 ES6부터 추가되어 권장되고 있는 class 방식! (OOP) 객체 리터럴과 클래스 모두 익혀두는 것이 좋다. 클래스가 권장되긴 하지만 익숙하다는 이유 등으로 리터럴 방식도 많이 사용하기 때문! 참고 - 객체선언방식 1. 리터럴 방식 2. 클래스 방식 3. 생성자 방식 new Object()

덧셈 +, 곱셈 *, 뺄셈 - 연산자와 자바스크립트에서만 제공하는 연산자에 대해 용어: 단항, 이항, 피연산자 - 피연산자(operand) 연산자가 연산을 수행하는 대상, 5*2면 피연산자가 두 개(5, 2) 피연산자는 인수(argument)로 불리기도 한다. - 단항(unary) 피연산자를 하나만 받는 연사자를 단항 연산자 라고 부른다. 피연산자의 부호를 뒤집는 단항 마이너스 연산자 - 는 단항 연산자의 대표적인 예 let x = 1; x = -x; alert( x ); // -1, 단항 마이너스 연산자는 부호를 뒤집는다. - 이항(binary) 두 개의 피연산자를 받는 연산자를 이항 연산자 라고 부른다. 마이너스 연산자도 이항 연산자로 쓸 수 있다. let x = 1, y = 3; alert( y -..

형 변환 (type conversion) 함수와 연산자에 전달되는 값이 적절한 자료형으로 변환되는 과정 (대부분 변환된다.) 대표적인 예시 alert가 받은 값의 자료형과 관계없이 문자열로 자동 변환하여 보여주는 경우 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우 (객체의 형 변환은 나중에 나온다.) 문자형으로 변환 - 문자형의 값이 필요할 때 일어난다. alert 메서드는 매개변수로 문자형을 받기 때문에 alet(value)에서 value는 문자형이어야 한다. 만약 다른 형의 값을 받으면 자동으로 문자형으로 변환된다. (String(value) 함수를 호출해 전달받은 값을 문자열로 변환 할 수도 있다.) let value = true; alert(typeof value); // boolean ..

브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능 1. alert - 함수가 실행되면 사용자가 확인 버튼을 누를 때까지 메시지를 보여주는 창이 떠있다. alert('Hello') 모달 창(modal window) - 메시지가 있는 작은 창 모달이란 단어에 페이지의 나머지 부분과 상호 작용이 불가능 하다는 의미가 내포되어 있다. - 사용자는 모달 창 바깥의 버튼을 누른다던가 하는 행동을 할 수 없다. 확인 버튼을 누르기 전까진 2. prompt 브라우저에서 제공하는 함수인 promp는 두 개의 인수를 받는다. prompt(title, [default]) 실행되면 텍스트 메시지와 입력 필드(input field), 확인 및 취소 버튼이 있는 모달 창을 띄워준다. title 사용자에게 보여줄 문자열 ..

js에서 값은 문자열이나 숫자형 같은 특정한 자료형에 속한다. 자바스크립트에는 여덟 가지의 기본 자료형이 있다. 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 변수는 어떤 순간엔 문자열, 어떤 순간엔 숫자가 될 수도 있다. // no error let message = "hello"; message = 123456; 이처럼 자료의 타입은 있지만 변수에 저장되는 값은 언제든 바뀔 수 있는 언어를 ‘동적 타입(dynamically typed)’ 언어라고 부른다. 1. 숫자형 let n = 123; n = 12.345; - 숫자형(number type) 정수 및 부동소수점 숫자(floating point number)를 나타낸다. - 곱셉 * , 나눗셈 / , 덧셈 + , 뺄셈 - 등 다양한..

자바스크립트는 대부분 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다. 변수는 이러한 정보를 저장하는 용도로 사용된다. 변수(variable) - 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소' - js에선 let 키워드를 사용해 변수를 생성한다. let message message 라는 이름의 변수를 생성(선언)했다. let message message = 'Hello' 할당 연산자 = 을 사용해 변수 안에 데이터를 저장 문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있게 되었다. let msg msg = 'Hello' alert(msg) 변수에 저장된 값을 보여준다. 한 줄에 작성도 가능하다. let msg = 'Hello' alert(m..

급한 것, 아픈 것들이 많이 지나가서 다시 시작하는 모던 자바스크립트~_~ 넘나 좋다 엄격 모드(strict mode) 그동안 자바스크립트는 기존 기능의 변경 없이 새로운 기능이 추가되어 오랫동안 호환성 이슈 없이 발전해왔다. - 기존의 코드가 망가지지 않음 - 창시자들의 실수나 불완전함이 언어 안에 박제되어 있음 위의 현상이 2009년까지 지속되었다. ES5에서 드디어 새로운 기능 추가와 함께 기존 기능 일부가 변경되었다. > 기존 기능의 변경으로 호환성 문제가 생김 >> 이를 위해 기본 모드에서는 활성화 되지 않게 설계 >>> use strict 라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 할 수 있음 리액트와 특히 next.js를 사용하다 많이 봤던 use strict!!..

코드 블록 만드는 방법 문 문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미 이 전 글에서 alert('hello world')를 통해 메세지 보여주는 걸 확인했다. 코드엔 원하는 만큼 문을 작성할 수 있는데 서로 다른 문은 세미콜론으로 구분한다. (어디서는 생략 가능이고 어디서는 필수이기도) alert('Hello'); alert('World'); 이렇게 두개로 나눈 alert 문은 hello를 확인하고 나면 world 가 나온다 코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는 것이 일반적. alert('Hello'); alert('World'); 세미콜론 줄 바꿈이 있다면 세미콜론(semicolon)을 생략할 수 있..

실행 환경에 독립 적인 코어 자바스크립트(Core JavaScript) Node.js 같은 서버 사이드 환경에서는 node 파일명.js 명령어를 입력하면 된다 웹 페이지에 스크립트를 삽입하는 방법 script 태그 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 브라우저는 이 태그를 만나면 안의 코드를 자동으로 처리한다. 모던 마크업 이 트릭은 경로는 루트에서부터 파일이 위치한 절대 경로/혹은 현재 페이지에서의 상대 경로 혹은 URL 전체를 속성으로 사용할 수도 있다. 여러 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 됨 *HTML 안에 직접 스크립트를 작성하는 방식은 스크립트가 아주 간단할 때만! 스크립트가 길어지면 분리된 파일로 저장하는 것이..

브라우저는 스크립트 문제로 에러가 발생해도 직접 보여주지 않는다 -> 개발자 도구로 확인할 수 있다. (사실 요새는 리액트로 개발하면 좀만 문제 있어도 냅다 화면 전체에 에러 띄워서 좋당) Chrome, Firefox, Edge 등 windows - F12 mac - Cmd+Opt+J 아니면 fn+F12 bug.html 이런 식으로 에러 메세지가 뜨는 걸 볼 수 있다. 커맨드 라인(command line/ 파란 색 화살표 잇는 곳)에 js 명령어(command)를 입력할 수 있다. 보통 한 줄 짜리 명령어를 치고 Enter를 누르지만 여러 줄을 치고 싶다면 Shift+Enter를 누르면 된다 Safari 맥 전용 브라우저인 사파리에서 개발자 도구를 사용하려면 개발자 메뉴를 활성화 해줘야 함 이케 환경설정..