본문 바로가기
반응형

Javascript

[Javascript] 함수 선언(Function declaration)과 함수 표현(Function expression)의 차이를 이해하자 - 함수 호이스팅
Javascript 2023. 1. 30. [Javascript] 함수 선언(Function declaration)과 함수 표현(Function expression)의 차이를 이해하자 - 함수 호이스팅 자바스크립트는 함수를 선언하는 방식이 두 가지 있습니다. 함수 선언(Function Declaration)과 함수 표현(Function Expression)으로 함수 정의 방법을 구분하고, 둘 의 가장 큰 차이는 호이스팅(Hoisting)이 지원되는지 여부로 구분을 할 수 있습니다. 호이스팅은 순서대로 실행이 되는 인터프리터 방식 언어인 자바스크립트에서 코드 아래쪽에 정의된 함수를 코드 위쪽에서 사용할 때 정의되지 않은 함수 에러를 막아주는 역할을 합니다. 코드 아래쪽에 정의된 함수 이름을 코드 위쪽에 선언해 줘서 함수 실행 위치에서 함수가 정의되었다고 인식할 수 있도록 해줍니다. 1. 함수 선언과 함수 표현의 차이 먼저 기본적인 함수 선언 방식으로 호이스팅 지원을 확인하겠습니다. 함수 선언 코드 앞쪽에..
[Javascript] 초간단 계산기 프로그램 만들기
Javascript 2023. 1. 28. [Javascript] 초간단 계산기 프로그램 만들기 아주 아주 간단한 사칙 연산을 하는 계산기 프로그램을 만들어 보겠습니다. 일반적인 계산기 기능을 모두 하려면 퍼센트 값, 괄호, 소수점, 지우기 버튼이 있는 한 줄이 더 필요한데 여기서는 숫자와 사칙 연산만 하는 계산기를 만듭니다. 언제나 그렇지만 최소한의 코드로 최적의 기능을 구현하는 것이 목적이기 때문에 30줄 안쪽의 자바스크립트 코드만으로 계산기 기능을 구현합니다. 사칙 연산의 결과를 얻는 과정이 일반적으로 사용하는 연산자별로 구분을 해서 계산을 하지 않고 입력한 계산식 자체를 실행 가능한 함수로 이벨류에이션(Evaluation)해서 결과를 즉시 얻는 최신의 방법을 사용합니다. 0. 완성 소스코드 다운로드 1. 계산기 버튼 화면 배치 화면 버튼은 총 16개가 필요합니다. 사칙 연산만 가능한 계산기이..
[Javascript] 초간단 메모리 카드 게임 만들기
Javascript 2023. 1. 28. [Javascript] 초간단 메모리 카드 게임 만들기 최소한의 코드로 카드를 뒤집어서 맞는 짝을 찾는 메모리 카드 게임을 만듭니다. 자바스크립트 코드 100줄 이내로 구현하는 간단한 게임 구현으로 랜덤으로 카드 셔플을 해서 배치를 하고, 짝을 맞추는 방식을 알 수 있습니다. 카드 숫자 배열을 랜덤으로 섞는 방법에 대한 자세한 내용은 다음 글을 참고하면 도움이 됩니다. > [Javascript] 배열을 이용한 카드 섞기(Card Shuffle) 구현 알고리즘 기초 0. 완성 코드 다운로드 완성 코드를 보면서 글 내용을 보면 이해가 조금 더 쉽습니다. 2023-01-28 - 3D 카드 플립 효과 개선 1. 카드 매칭 상태 이해하기 카드 게임은 뒷면이 보이는 카드들에서 임의의 두 장을 클릭해서 숫자가 맞는지를 맞추는 게임입니다. 카드는 뒷면이 보이고 있고, 클릭..
[Javascript] 심볼(Symbol) 사용 기초
Javascript 2023. 1. 27. [Javascript] 심볼(Symbol) 사용 기초 심볼(Symbol)은 ES6에서 추가된 데이터 타입입니다. 문자열 값을 기초로 유일한 식별자를 생성하고 싶을 때 심볼을 사용합니다. 사용 빈도가 높지는 않지만, 용도에 맞게 사용하면 강력한 효과를 발휘합니다. 셋(Set)과 유사한 특징들을 여러 가지 가지고 있습니다. 1. 심볼의 생성 심볼은 다음과 같이 생성합니다. 반환받은 값은 유니크한 식별자 값입니다. 물론 식별할 대상이 없으므로 이것만으로 심볼의 어떤 기능을 하는 것은 아니며, 문자열 인자를 넘겨서 심볼 값을 생성하면 비로소 해당 문자열을 가리키는 유일한 식별자로서의 기능을 하게 됩니다. const s = Symbol(); 심볼을 생성할 때 인자로 넘기는 문자열은 "이름"입니다. 그리고 생성되어 반환된 심볼 값은 "키"가 됩니다. 같은 이름으로 생..
[Javascript] JSON 데이터를 전송하는 기술
Javascript 2023. 1. 26. [Javascript] JSON 데이터를 전송하는 기술 서버와, 또는 서버 사이에 데이터를 전송하는 대표적인 자바스크립트의 기술은 JSON입니다. XML로 데이터를 교환하기도 하지만, 데이터 크기와 효율면에서 JSON이 더 좋기 때문에 JSON을 주로 사용해서 사실상 표준 데이터를 교환하게 됩니다. 1. 객체를 JSON 문자열로 변환 웹에서 자바스크립트로 생성하는 데이터는 주로 배열, 또는 객체입니다. 서버에 데이터를 전송하려면 이 배열, 또는 객체를 전송가능한 JSON 문자열로 변환을 해야 합니다. let formData = { memberInfo: [ { "userId": 101, "value": "라이언" }, { "userId": 108, "value": "어피치" }, { "userId": 227, "value": "콘" } ] } 객체를 전송하려면..
[Javascript] 멀티라인 속보형 무한 롤링 텍스트 배너 만들기
Javascript 2023. 1. 26. [Javascript] 멀티라인 속보형 무한 롤링 텍스트 배너 만들기 멀티라인 무한 롤링 배너에 앞서 한 줄로 동작하는 무한 롤링 텍스트 배너를 만드는 방법을 먼저 학습하는 것을 추천합니다. 기본적인 구조가 유사하고, 구현이 더 쉽기 때문에 개념을 이해하는데 더 도움이 됩니다. > 속보형 무한 롤링 텍스트 배너 만들기 먼저 한 줄 롤링 배너에서는 기본적인 CSS 클래스 초기화 작업이 되어있는 HTML을 생성했지만, 멀티라인 롤링 배너에서는 조금 더 진보해서 자바스크립트로 초기화 CSS 클래스를 동적으로 생성합니다. 따라서 조금 더 정리되어 있고, 깔끔한 HTML 코드만 있으면 멀티라인 텍스트 롤링 배너를 생성할 수 있습니다. 최종적으로는 롤링 배너로 표시하는 텍스트의 행 개수를 자바스크립트 설정 변수로 자유롭게 변경할 수 있도록 해서 다양한 적용 환경에 바로바로 적용할 수..
[Javascript] 객체의 불변성을 유지하는 방법(freeze, seal, preventExtensions의 차이)
Javascript 2023. 1. 25. [Javascript] 객체의 불변성을 유지하는 방법(freeze, seal, preventExtensions의 차이) 변하지 않는 값을 처리하는 방법은 간단하게는 const 선언자로 상수 선언을 하는 방법이 있습니다. 개별 값은 이렇게 해도 되지만, 중간에 변경되면 안 되는 중요 설정 값을 담은 객체나, 원본 데이터를 담고 있는 객체 같은 경우, const 선언자로는 불변성을 유지할 수 없습니다. 그래서 자바스크립트는 객체에 불변성을 유지할 수 있도록 별도의 객체(Object) 메서드를 지원하고 있으며, 불변성 강도에 따라 사용할 수 있도록 freeze(), seal(), preventExtensions() 3가지를 제공합니다. 불변성을 어느 정도까지 유지해야 하는지에 따라 용도가 조금씩 다르며, preventExtensions < seal < freeze 순으로 불변성이 강하게 유지됩니다. freeze를 가장 많이 사..
[Javascript] 객체를 복사하는 create()와 assign() 메서드의 차이
Javascript 2023. 1. 24. [Javascript] 객체를 복사하는 create()와 assign() 메서드의 차이 create()와 assigne() 메서드는 기존 객체를 복사해서 새 객체를 생성하는 Object 객체의 메서드입니다. 두 메서드는 객체의 복사본을 생성하는 점은 같지만, 중요한 차이점이 있습니다. 차이점을 알고 사용해야 복사한 객체의 용도에 따라 적절한 사용이 가능합니다. 다음 클래스를 객체로 생성해서 create()와 assign() 메서드로 객체 복사를 해보겠습니다. 각각의 메서드로 복사한 필드 값을 콘솔에 표시하면 같은 필드 값이 표시됩니다. class User { name = '라이언' constructor(){ this.vip = true; } } const user = new User(); const assigned = Object.assign({}, user) const created = ..
반응형
❌ 닫기

티스토리툴바