Topic

자바스크립트

A collection of 197 posts
자바스크립트

[Javascript] 한번에 끝내는 JSON(JavaScript Object Notation) 기초

JSON은 JavaScript Object Notation의 줄임말입니다. 한글로 표현하면 "자바스크립트 객체를 표현하는 방법"이며, 자바스크립트의 객체를 텍스트 데이터 형태로 표기하는 표준 방법입니다. 문자열로 기술한 데이터 구조를 객체로 변환할 수 있으며, 반대로 자바스크립트 객체를 문자열, 그러니까 JSON으로 표현할 수도 있습니다. 최초에는 자바스크립트 언어용으로 제안되었으나, 현재는 대부분의 개발언어에서 지원하는 사실상의 산업 표준 데이터 표현
9 min read
자바스크립트

[Javascript] 모듈의 임포트(Import)와 익스포트(Export) 기초

모듈은 큰 자바스크립트, 또는 큰 프로젝트를 기능 단위, 또는 파일 단위로 분리해서 관리를 하는 방식을 말합니다. 기능 단위, 또는 파일 단위로 분리한 자바스크립트 기능은 특정한 기능을 하거나 용도에 따라 적당히 분리를 하게 되고, 이렇게 분리한 하나의 단위를 모듈이라고 합니다. 모듈은 메인 코드와 모듈, 또는 모듈 사이에 상호 호출을 하는 규칙을
14 min read
자바스크립트

[Javascript] 객체의 불변성을 유지하는 방법(freeze, seal, preventExtensions의 차이)

변하지 않는 값을 처리하는 방법은 간단하게는 const 선언자로 상수 선언을 하는 방법이 있습니다. 개별 값은 이렇게 해도 되지만, 중간에 변경되면 안 되는 중요 설정 값을 담은 객체나, 원본 데이터를 담고 있는 객체 같은 경우, const 선언자로는 불변성을 유지할 수 없습니다. 그래서 자바스크립트는 객체에 불변성을 유지할 수 있도록 별도의 객체(Object)
5 min read
자바스크립트

[Javascript] 날짜 더하기와 빼기, 그리고 날짜 사이 시간 구하기

날짜 계산과 간격을 구하기에 앞서 3가지 기초 메서드를 알아야 합니다. 첫 번째. 현재 시각은 다음과 같이 얻습니다. 내장 객체이므로 그냥 이렇게 선언한다고 생각하면 됩니다. 그리고 날짜 객체가 가지고 있는 현재 시각은 1970년 1월 1일을 시작 시각으로 한 밀리세컨드 단위 정수 값입니다. 밀리세컨드 단위 값을 얻는 메서드는 getTime()입니다. const today
4 min read
자바스크립트

[Javascript] 2개의 JSON 객체를 하나로 합치는 방법

2개 이상의 JSON 객체를 하나의 JSON 객체로 붙이는 작업은 보통은 서버에서 받은 JSON 문자열 데이터 여러 개를 합쳐서 하나의 결과로 표시해야 할 때입니다. 먼저 문자열 형태로 받은 2개의 JSON 스트링을 JSON 객체로 변환합니다. 여기서는 서버에서 JSON 결과 2개를 받았다고 치고 임의의 문자열 JSON 데이터를 생성합니다. const jsonStr1 = `{"name": "라이언","age"
1 min read
자바스크립트

[Javascript] 초간단 계산기 프로그램 만들기

아주 아주 간단한 사칙 연산을 하는 계산기 프로그램을 만들어 보겠습니다. 일반적인 계산기 기능을 모두 하려면 퍼센트 값, 괄호, 소수점, 지우기 버튼이 있는 한 줄이 더 필요한데 여기서는 숫자와 사칙 연산만 하는 계산기를 만듭니다. 언제나 그렇지만 최소한의 코드로 최적의 기능을 구현하는 것이 목적이기 때문에 30줄 안쪽의 자바스크립트 코드만으로 계산기 기능을 구현합니다.
8 min read
자바스크립트

[Javascript] 객체를 복사하는 create()와 assign() 메서드의 차이

create()와 assigne() 메서드는 기존 객체를 복사해서 새 객체를 생성하는 Object 객체의 메서드입니다. 두 메서드는 객체의 복사본을 생성하는 점은 같지만, 중요한 차이점이 있습니다. 차이점을 알고 사용해야 복사한 객체의 용도에 따라 적절한 사용이 가능합니다. 다음 클래스를 객체로 생성해서 create()와 assign() 메서드로 객체 복사를 해보겠습니다. 각각의 메서드로 복사한 필드 값을 콘솔에
4 min read
자바스크립트

[Javascript] 생각보다 쉽지 않은 parseInt() 사용법

parseInt()는 빈번하게 사용하는 자바스크립트 내장 함수로 정수가 아닌 문자열, 또는 다른 타입의 숫자를 정수로 변환해 주는 함수입니다. 실수인 경우, 소수점 이하 숫자는 반올림을 합니다. 여기까지는 우리가 보통 알고 있는 parseInt() 함수의 사용법입니다. parseInt() 함수에는 두 번째 인자가 있습니다. - 두 번째 인자는 진법 표시를 하는데 사용합니다. 2~32 사이의
1 min read
자바스크립트

[Javascript] 함수에도 길이(length) 속성이 있다.

다소 황당할 수도 있지만 자바스크립트는 함수에도 길이 속성이 있습니다. 결론부터 말하면 살짝 버그성입니다. 그리고 최신 자바스크립트 버전업과 함께 길이 속성이 부정확해지는 경우가 발생하면서 사실상 필요 없는 속성이 되었습니다. 함수의 길이는 어떤 길이를 말하는 것인가? 함수의 길이 속성 값은 함수의 인자 개수를 반환합니다. function dofunc(a, b, c){ } console.log(dofunc.
1 min read
자바스크립트

[Javascript] 정규표현식(Regular Expression)으로 패스워드 유효성을 검증하는 방법 - 최소길이, 최대길이, 숫자, 알파벳 대/소문자, 특수기호 사용 체크

로그인 화면, 또는 사용자 인증 화면에서 자바스크립트로 패스워드, 또는 입력한 인증키를 체크하는 방법을 알아보겠습니다. 패스워드를 체크한 결과를 사용자에게 어떻게 표현하느냐에 따라 친절하게 메시지를 표시해 줄 수도 있고, 보안상 결과만 뭉뚱그려서 패스워드를 유추할 수 있는 힌트?를 주지 않는 방법도 있습니다. 그리고 이런 여러 가지 순차적인 체크를 할 필요 없이, 원하는
8 min read