JavaScript

문자 데이터따옴표 사용let myName = "OROSY";let hello = Hello ${myName}!숫자 데이터정수 및 부동소수점 숫자를 나타냄let num = 123;let decimal = 1.45;논리 데이터(불린 데이터)true, false 두 가지 값

특정 동작(기능)을 수행하는 일부 코드의 집합일종의 데이터로 함수 선언function helloFunc() { // 실행 코드 console.log(1234);}// 함수 호출helloFunc(); // 1234함수 내에서 특정한 값 반환아래와 같이 return이

데이터를 저장하고 참조(사용)하는 데이터의 이름var, let, constlet a = 2;let b = 3;// 변수 선언console.log(a + b);console.log(a - b);console.log(a \* b);console.log(a / b);// 위

조건의 결과값(true, false)에 따라 다른 코드를 실행하는 구문조건문에는 반드시 비교연산자(Comparison Opertor) 필요let isShow = true;let checked = false;if (isShow) {console.log('Show!');

Document Object Model 약어이는 Document(HTML)에 들어있는 여러가지 오브젝트 모델을 뜻한다.오브젝트 모델은 div, span, input등과 같은 HTML 요소를 뜻한다.Application Programming Interface 약어이는 웹

JavaScript DOM API

변수에 여러가지 메소드가 체인 형식으로 연결되어 있는 것을 의미Basic이므로 메소드 체이닝은 간단히 개념만 숙지한 상태에서 추후 학습하기로 한다.

theQuickBrownFoxconsole.log(fruits1);falsenullObject(객체 데이터)undefinedconstreturn인수(arguments)매개변수(parameters)익명함수(Anonymous Function)메소드(method)if (tr

출처: 위키백과(https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어자

Node Package Manager전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리해주는 도구NPM의 생태계에 있는 패키지를 명령어를 통해 프로젝트 내에 설치하여 활용할 수 있다.기존에는 link와 script 태그로 프로젝트에 연결하여 사용하는 방식이

1. 산술 연산자(Arithmetic Operator) 1) 사칙연산 > javascript console.log(7 % 5) // 2 2. 할당 연산자(Assignment Operator) 1) 등호(Equal sign) Equal sign(=)은 '같다'라는 뜻

\[출처: https://www.miltonmarketing.com/coding/javascript/javascript-comparison-operators/] \[출처: https://www.j2eeonline.com/java-certificatio

condition ? exprIfTrue : exprIfFalse조건 ? true일 때 : false일 때

지정한 조건이 참인 경우, 명령문(statement)을 실행합니다. 조건이 거짓인 경우 또 다른 명령문이 실행될 수 있습니다.출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statemen

switch 조건의 내용이 어떠한 변수가 특정한 값으로 딱 떨어지거나 else if가 여러 번 복적으로 사용될 때는 if문보다는 switch문을 사용하는 것이 더 적절하다

for (시작조건; 종료조건; 변화조건) {}

블록 레벨의 유효 범위블록 레벨: 변수가 선언되어져 있는 범위의 중괄호 내의 부분함수 레벨의 유효 범위함수 레벨: 함수 범위 안에서는 어디서든 사용 가능의도하지 않은 범위에서 변수 사용이 가능해져 메모리 누수 발생

① Truty('참'으로 인식)true, { }, , 1, 2, 'false', -12, '3.14' ...② Falsy('거짓'으로 인식)false, '', null, undefined, 0, -0, NaNNaN(Not a Number): 숫자 데이터이나 숫자는 아

기명함수익명함수arguments

2) 화살표 함수 일반함수와 달리 일부 내용을 생략하여 축약형으로 함수 최소화 가능

Immediately-Invoked Function Expression함수를 만들자마자 바로 실행시킬 수 있는 함수함수 재활용 불가

Hoisting(호이스팅) - 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상함수의 이름만으로 로직을 대략적으로 유추할 수 있기 때문에 사용된다.

setTimeout(함수, 시간): 일정 시간 후 함수 실행setInterval(함수, 시간): 시간 간격마다 함수 실행clearTimeout(): 설정된 Timeout 함수를 종료clearInterval(): 설정된 Interval 함수를 종료

함수의 인수로 사용되는 함수setTimeout(함수, 시간) 함수가 바로 그 예!특정한 실행 위치를 보장해주는 용도로 주로 활용됨

클래스(1) 생성자 함수 아래와 같이 단순히 객체 데이터와 메소드를 사용하게 되면, 매번 메모리에 할당하게 되며 비효율적으로 코드를 작성하게 된다. >javascript function user(first, last) { this.firstName = first

일반(Normal) 함수는 "호출 위치"에 따라 this 정의화살표(Arrow) 함수는 자신이 선언된 "함수 범위"에서 this 정의

JavaScript는 prototype 기반의 프로그래밍 언어로 다른 안정적이고 신뢰도가 높은 객체 지향 프로그래밍 언어의 영향을 받아 Class라는 개념을 흉내내서 새로운 문법을 ES6에서 제공하기 시작하였다.

1. 클래스 4) 상속(확장) JavaScript의 클래스를 통해 이미 정의된 로직을 확장(상속)해서 쉽게 구현 가능 이렇게 클래스를 사용하면, 미리 만들어져있는 로직을 추가적으로 새로운 기능을 확장이라는 개념을 통해 관리 가능 >class Vehicle () {

1. 데이터(1) - 문자 1) String.prototype.indexOf() String 전역 객체는 문자열의 생성자 함수 indexOf()는 String 객체에서 0을 기준으로 주어진 값과 일치하는 인덱스를 반환하며, 일치하는 값이 없으면 -1 반환! >javas

1. 데이터(2) - 숫자, 수학 1) parseInt, parseFloat >javascript console.log(Math.abs(-12)) // 값: 12, Math 객체의 메소드로 전달된 숫자의 절대값을 반환 > console.log(Math.min(2, 8)

1. 데이터 - 배열(1) 1) 인덱스(index) 0부터 시작하는 배열 데이터 내부에 들어있는 데이터의 위치를 가리키는 숫자 인덱싱(indexing): numbers[1], fruits[2]와 같이 배열 데이터 내의 요소에 접근하기 위해 대괄호 안에 숫자를 표기하는

1. 데이터 - 배열(2)

1. 데이터 - 객체 1) 정적(Static) 메소드 "prototype"이 아닌 클래스 함수 자체에 메소드 설정 가능 1-1) Object.assign() 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용 >javascript const userAge = { // key: value name: 'Orosy' age...

const , b = b // 쉼표를 이용하여 순서를 나타내 배열 데이터 구조 분해 후 추출 가능console.log(b) = Bananaconst , , c = cconsole.log(c) = Cherry

1. 데이터 1) 전개 연산자(Spread) ...를 사용하여 배열 데이터를 쉼표로 구분된 각각의 아이템으로 전개하여 출력 >javascript const fruits = ['Apple', 'Banana', 'Cherry', 'Orange'] > function toO

JavaScript에서 사용하는 기본 데이터String, Number, Boolean, undefined, nullObject, Array, Function결국, 참조형 데이터는 할당 연산자를 사용할 때 메모리의 참조 주소만 옮겨간다는 의미(데이터 값을 복사하는 것 X

객체나 배열 데이터를 간단히 복사할 때에는 얕은 복사를 사용하되 해당 데이터 내에 또 다른 참조형 데이터가 포함되어 있을 때에는 깊은 복사를 이용해야 한다

js로 확장자로 끝나는 JavaScript 파일에서는 외부에 있는 JavaScript 파일을 가져오기(import)를 할 수 있으며, 혹은 그 파일을 내보내기(export)를 할 수 있습니다.

Lodash의 자주 사용되는 여러가지 문법에 대해서 알아봅니다.

JSON은 자바스크립트의 데이터를 표현하는 하나의 포맷이라고 할 수 있습니다. 그렇다면 JSON 파일을 활용하는 법에 대해 알아봅시다.

브라우저에서 관리되는 데이터 저장소인 Storage에 대해 알아봅니다.

이번에는 OMDb API를 이용하여 영화 데이터를 요청하고 받아서 프로젝트에서 출력하는 방법에 대해 배워봅시다.

정규표현식이란 문자를 검색하고 대체하고 추출하는 방식을 제공하는 다양한 환경에서 사용할 수 있는 기능입니다. 실제로 정규표현식을 배우기 전 프로젝트를 시작하는 셋팅에 대해 다시 알아봅니다.

정규표현식은 문자를 검색하고 대체하고 추출하는 방식을 제공하는 다양한 환경에서 사용할 수 있는 기능입니다. 특히, 간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능들을 정규식 패턴으로 빠르게 수행할 수 있습니다.

이번에는 정규표현식을 다루는 다양한 메소드(Methods)에 대해 알아봅시다. 대표적으로 사용되는 test, match, replace에 대해 살펴봅니다.

플래그란 정규표현식의 옵션으로 정규식으로 검색하려는 문자 패턴에 추가적인 옵션을 넣어 원하는 문자 검색 결과를 반환하도록 합니다.

정규표현식에는 다양한 패턴(표현)이 있습니다. 그 패턴의 의미(기능)와 직관적으로 매칭되지 않기 때문에 외우지 않는 이상 의미를 파악할 수 없습니다. 이번에는 이러한 패턴에 대해 살펴봅시다.

정규표현식에는 다양한 패턴(표현)이 있습니다. 그 패턴의 의미(기능)와 직관적으로 매칭되지 않기 때문에 외우지 않는 이상 의미를 파악할 수 없습니다. 이번에는 이러한 패턴에 대해 살펴봅시다.

자바스크립트가 데이터를 처리하는 과정을 이해하여 기본형 타입과 참조형 타입이 서로 다르게 동작하는 이유와 불변성, 가변성이라는 특성에 대해 알아봅니다.

기본형, 참조형 데이터의 변수 복사를 진행하며 생기는 불변성, 가변성에 대한 속성을 알아봅니다. 이에 따라, 필요한 얕은 복사와 깊은 복사를 살펴봅니다.

드디어 위코드 1주차가 끝났습니다. 학습한 내용 중 보충이 필요하다 생각하는 객체와 bracket notation(괄호 표기법)에 대해 알아봅니다.

인스타그램 클론코딩인 위스타그램에서 로그인 유효성 검사 규칙 기능 구현에 대한 코드를 남겨보았습니다.

인스타그램 클론코딩인 위스타그램에서 검색 기능을 구현하였습니다.