본문 바로가기
반응형

Javascript

[Javascript] 코딩테스트 - "H" + "i" + +", there."의 결과는?
Javascript 2023. 2. 10. [Javascript] 코딩테스트 - "H" + "i" + +", there."의 결과는? 코딩테스트로 자주 나오는 간단한 문제입니다. 먼저 함정 체크부터 합니다. "Hi, there." 라고 썼으면 -100점입니다. "i" 뒤에 "+"가 두개 있는 것이 오타라고 생각하거나, "+"가 한 개라고 착각하면 이미 탈락입니다. 이 문제는 두 가지 문제를 이해하는지를 확인하는 문제입니다. 문자열 텍스트는 다양하게 바뀝니다. 혼동을 주기 위해 특수문자를 넣기도 하고, "+ +" 뒤에 오는 문자열에 숫자를 넣기도 합니다. 기본 원리는 모두 동일합니다. 1. "+ +"의 이해 "++"로 붙여쓰면 구문 오류가 나므로 당연히 띄어서 "+ +"입니다. 문제의 핵심은 "+ +"를 알고 있고 "+"가 문자열 앞에 있으면 어떻게 되는지, 그러니까 타입 캐스팅이 어떻게 이루어지는지 정확하게 알고 있는지를 묻는 문제입니..
[Javascript] 한번에 끝내는 정규표현식(Regular Expression) 기초
Javascript 2023. 2. 3. [Javascript] 한번에 끝내는 정규표현식(Regular Expression) 기초 정규표현식은 문자열에서 특정한 규칙과 일치하는 조합을 찾는 규칙을 작성한 패턴입니다. 사전 정의된 특수문자(메타문자) 규칙을 조합해 찾고자 하는 패턴을 정의함으로써 복잡한 형태(거의 무제한)의 문자열 패턴을 만들어낼 수 있습니다. 자바스크립트는 정규표현식을 하나의 객체로 정의하며, RegExp 내장 객체를 사용해 정규표현식을 생성하고, 문자열에서 정규표현식과 일치하는 패턴을 검색할 수 있습니다. 정규표현식은 객체를 생성하는 생성자에 정규표현식 패턴을 인자로 넣어 생성합니다. const re = new RegExp('정규표현식') 정규표현식은 일반 문자열을 검색하는 문자열 검색 메서드처럼 단순한 문자열을 찾는 것부터, 메타 문자(정규표현식에서는 커맨드의 역할)를 조합해서 복잡한 매칭 조건을 만들 수도 있습..
[Javascript] 한번에 끝내는 JSON(JavaScript Object Notation) 기초
Javascript 2023. 2. 2. [Javascript] 한번에 끝내는 JSON(JavaScript Object Notation) 기초 JSON은 JavaScript Object Notation의 줄임말입니다. 한글로 표현하면 "자바스크립트 객체를 표현하는 방법"이며, 자바스크립트의 객체를 텍스트 데이터 형태로 표기하는 표준 방법입니다. 문자열로 기술한 데이터 구조를 객체로 변환할 수 있으며, 반대로 자바스크립트 객체를 문자열, 그러니까 JSON으로 표현할 수도 있습니다. 최초에는 자바스크립트 언어용으로 제안되었으나, 현재는 대부분의 개발언어에서 지원하는 사실상의 산업 표준 데이터 표현 방법으로 자리를 잡았습니다. 원격 데이터 교환을 위한 데이터 포맷으로, 또 API의 표준 데이터 표현 방법으로 JSON을 주로 사용합니다. 대표적인 데이터 표현 방식 중 하나인 XML이 데이터 오버헤드가 커서 데이터 크기가 쉽게 커지는 반면 JSON은 작..
[Javascript] 모듈의 임포트(Import)와 익스포트(Export) 기초
Javascript 2023. 2. 2. [Javascript] 모듈의 임포트(Import)와 익스포트(Export) 기초 모듈은 큰 자바스크립트, 또는 큰 프로젝트를 기능 단위, 또는 파일 단위로 분리해서 관리를 하는 방식을 말합니다. 기능 단위, 또는 파일 단위로 분리한 자바스크립트 기능은 특정한 기능을 하거나 용도에 따라 적당히 분리를 하게 되고, 이렇게 분리한 하나의 단위를 모듈이라고 합니다. 모듈은 메인 코드와 모듈, 또는 모듈 사이에 상호 호출을 하는 규칙을 정해서 그 규칙에 따라서 상호 동작을 합니다. 모듈은 모듈 자신을 호출하는 코드에서 어떻게 모듈의 기능과 데이터에 접근을 할 수 하는지 export 지시자로 표현을 합니다. 모듈을 가져와 사용하는 코드 쪽에서는 모듈을 가져와 기능과 데이터에 접근을 하기 위한 이름을 import 지시자로 정의합니다. 자바스크립트 코딩 을 할 때는 하나의 기능은 하나의 모듈로, ..
[Javascript] ES6 프록시(Proxy)와 핸들러(Handler) 기초 - 프록시, 핸들러, 리플렉트, 리시버의 개념 알기
Javascript 2023. 2. 1. [Javascript] ES6 프록시(Proxy)와 핸들러(Handler) 기초 - 프록시, 핸들러, 리플렉트, 리시버의 개념 알기 프록시(Proxy) 프록시는 특정 객체를 감싸서 객체에 적용되는 동작을 가로채 특정 작업을 수행하거나, 동작을 다시 객체에게 전달하는 역할을 하는 객체입니다. 쉽게 중간 다리 역할을 하는 중계상? 같은 객체입니다. 프록시 객체는 3가지 중요한 필수 요소가 있습니다. 타겟: 프록시는 먼저 감쌀 객체가 필요합니다. 이 대상 객체를 타겟이라고 합니다. 핸들러: 프록시가 타겟 객체에 어떤 동작을 할지를 기술해놓은 객체를 핸들러라고 합니다. 핸들러 객체 안에는 타겟 객체를 다루는 메서드(들)를 정의하며, 이 메서드를 트랩이라고 합니다. 핸들러는 트랩 메서드의 모음 객체를 말합니다. 트랩: 객체에 접근하는 방법을 구현한 메서드를 트랩(Trap)이라고 합니다. 대상 객체의 특정 동작을 대신하는 프록시 객체는 트랩(T..
[Javascript] x !== x 는 true가 될 수 있나?
Javascript 2023. 1. 31. [Javascript] x !== x 는 true가 될 수 있나? x!==x 코딩 테스트에 자주 나오는 잘 알려진 문제입니다. 유사한 문제들이 몇 가지 있습니다. x == 1 && x == 2 && x == 3 은 true가 될 수 있나? x === x+1 은 true가 될 수 있나? 같은 개념을 물어보는 질문이고, 답부터 말하면 객체에 접근할 때마다 게터(getter)로 반환 값을 누적하거나 변경해서 달라지게 하는 방법을 알고 있는지를 묻는 질문입니다. 문제를 푸는 가장 기초적인 접근은 x가 변수가 아니라 객체, 또는 객체의 속성이라는 것에서부터 출발합니다. 객체, 또는 객체 속성이구나! 가 떠오르지 않으면 영원히 문제를 풀 수 없습니다. 예외적으로 x !== x는 조금 다른 해결 방법도 있습니다. 다음 조건절의 결과가 "다름"이 표시되어야 합니다. if(x !== ..
[Javascript] 함수에도 길이가 있다 - 123['toString'].length + 123의 결과값은?
Javascript 2023. 1. 31. [Javascript] 함수에도 길이가 있다 - 123['toString'].length + 123의 결과값은? 인터넷에 많이 알려진 코딩 문제 중의 하나입니다. 객체의 속성과 메서드에 접근하는 방법에 대한 이해를 어느 정도까지 하고 있는 것을 파악하기 위한 개미지옥 문제입니다. 실무에서 이런 코딩을 하지는 않습니다. 그리고 할일도 없습니다. 테스트를 위한 문제이고 보통 다음과 같은 패턴으로 질문을 합니다. 어차피 왜 이 값이 출력되는지 이해하지 못하면 의미가 없으므로 출력 결까지 적어놓습니다. 대괄호 위치에 들어갈 수 있는 문자열에 제약이 있습니다. 마찬가지로 뒤에서 설명합니다. 123['toString'].length + 123 // 124 100['valueOf'].length + 100 // 100 타입이 없는 변수가 주는 언어적인 장점은 무수히 많지만, 반대로 단점도 무수히 많습니다. 그중 대표적인 것인 ..
[Javascript] 쿼리선택자의 종류와 차이점 - getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll
Javascript 2023. 1. 31. [Javascript] 쿼리선택자의 종류와 차이점 - getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll DOM에서 HTML 요소를 선택하는 방법은 5가지가 있습니다. getElement로 시작하는 getElementById(), getElementsByClassName(), getElementsByTagName() 3개의 메서드는 HTML 요소(Element), 또는 요소들을 반환합니다. getElementByClassName()과 getElementsByTagName()의 Elements에 주의해야 합니다. 요소를 선택하지만 "s"가 붙어 있습니다. 그러니까 선택 가능한 모든 요소들을 선택하는 것이고, 복수 개의 요소가 반환됩니다. 그래서 선택되어 반환되는 데이터 타입은 HTML Element가 아니라 HTMLCollection이 됩니다. 이 차이점은 선택한 요소가 있는지 조건 체크를 할 때 중요한 차이..
반응형
❌ 닫기

티스토리툴바