What I studied

리액트+스프링부트 프로젝트를 진행하며 Java의 데이터 타입에 대해서 공부하게 되었는데, 자바스크립트에는 없는 타입들이 존재했다. 그래서 각각의 차이에 대해서 간단하게 정리해보고자한다. 1. Long? long? 해당 타입은 처음본 타입이었는데 도메인에서 id값에 사용하는 것 같았다. 근데 대문자로 시작하는 것이 있고 소문자로 시작하는 것이 있었는데 처음에는 두가지가 같은 줄 알았다. 그럼 어떤 차이가 있을까? 먼저, Long과 long은 원시타입이냐, 참조타입이냐의 차이가 있다. 원시타입은 정수, 실수, 문자 등 실제 메모리에 데이터 값을 직접 저장하는 타입이고, 참조타입은 메모리 주소 값을 통해 객체를 참조하는 타입이라고 한다. 그래서 결론은, long은 원시타입, Long은 참조타입이라는 것이다. ..

이벤트는 말 그대로 어떠한 사건을 의미하는데 사용자가 어떤 버튼을 클릭하거나 검색창에 글자를 입력했을 때 발생하고, 이벤트가 발생하면 누군가는 이를 감지하고 처리해줘야한다. 실제로 사용자가 어떤 홈페이지에 들어가서 버튼을 클릭하거나 한다면 브라우저가 이벤트를 감지해 이벤트 발생시 통지해준다. 이 과정을 통해 사용자와 웹페이지가 상호작용이 가능하다는 것을 알 수 있는 것이다. 보이는 것과 같이 버튼을 클릭했을 때, 이벤트가 발생하며 이벤트가 발생함과 동시에 함수가 실행된다. 이러한 함수를 이벤트 핸들러라고 하며 이벤트에 대응하는 방법이라고 할 수 있다. 클릭 1. 이벤트 루프와 동시성 자바스크립트는 싱글쓰레드 언어라고 알려져있는데 여기서 싱글쓰레드라는 것은 쓰레드가 하나뿐이라는 뜻이며 즉, 하나의 작업만을..

1. String.length 자바스크립트 String 객체는 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 객체이다. String 객체는 String 생성자 함수를 통해 생성할 수 있으며, 이 때, 전달된 인자는 모두 문자열로 반환된다. name이라는 변수에 String 객체를 할당하고 각각을 콘솔에 찍어보면 다음과 같이 나온다. 이 때, String.length를 이용하여 콘솔에 찍어보면 3을 반환하는 것을 알 수 있다. let name = new String('Lia'); console.log(name) // String {'Lia'} console.log(name.length); // 3 문자열 내의 문자 갯수를 반환하는 것으로, String 객체는 length 프로퍼티를 소유..

1. 배열이란? 배열은 여러 개의 값을 순차적으로 나열한 자료구조이며, 자바스크립트는 배열을 다루기 위한 유용한 메서드를 다수 제공한다. 원시값은 물론 객체, 함수, 배열 등 모든 값은 배열의 요소가 될 수 있다. 자바스크립트에 배열이라는 타입은 따로 존재하지 않으며, 배열은 객체 타입으로 일반 객체와 구별되는 독특한 특징을 가지고 있다. 구분 객체 배열 구조 프로퍼티 키와 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O length 프로퍼티 X O 배열이 일반 객체와 구분되는 가장 명확한 차이는 값의 순서와 length 프로퍼티인데, 인덱스로 표현되는 값의 순서와 length 프로퍼티를 갖는 배열은 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조이다. 배열은 인덱스, ..

1. 함수의 구분 자바스크립트 ES6 이전의 함수는 동일한 함수라도 다양한 형태로 호출할 수 있었다. ES6 이전의 모든 함수는 일반 함수로서 호출할 수 있는 것은 물론이고 생성자 함수로서 호출도 가능했다. 즉, ES6 이전의 모든 함수는 callable이면서 constructor인 것이다. 이는 혼란을 줄 수 있고 에러를 발생시킬 가능성도 있기 때문에 성능 측면에서 좋지 않은 영향을 끼친다고 하는데 그래서 ES6에서부터는 함수를 사용 목적에 따라 일반함수, 메서드, 화살표 함수로 명확히 구분했다. ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X * callable : 호출할 수 있는 함수 객..

바닐라자바스크립트로 개발을 하다보면 append 또는 appendChild 메서드를 통해 부모 노두에 자식 노드를 추가하여 데이터를 보여줘야하는 경우가 필수적으로 생긴다. 처음에는 appendChild를 이용해 부모 노드에 각각의 자식노드를 개별적으로 추가를 해줬는데 한번에 모두 추가하는 방법이 없을까를 찾아보다가 append 메서드를 알게 되었다. 1. append vs appendChild 두 메서드는 부모 노드에 자식 노드를 추가한다는 점에서 동일한 특징을 갖지만 몇가지 차이점은 존재한다. 그 중에서 가장 대표적인 것이 자식 노드를 한번에 하나씩 추가하느냐, 여러개를 한번에 추가하느냐인 것 같다. 1) appendChild appendChild는 DOM 메서드이기 때문에 생성되어 있는 요소만 추가 ..

Strict mode는 자바스크립트 언어의 문법을 보다 더 엄격하게 적용하여 기존에는 무시되던 오류 발생 요소나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. 평소 ESLint와 같은 도구를 사용했었는데 이와 비슷한 기능을 하는 것이라고 볼 수 있는 것 같다. 오류를 줄여 안정적인 코드를 생산하기 위해, 잠재적으로 오류를 발생시킬 수 있는 요소들을 제거하고 이를 타이트하게 관리하는 개발환경을 만들어준다고 보면 될 것 같은데 지금까지는 써본적이 없는 것 같다? ESLint를 사용하면 코딩 컨벤션을 파일 안에서 정리하여 보다 더 간편하게 적용할 수 있기에 많은 사람들이 아마 ESLint를 사용하고 있을 것이다. 그래도 Strict mode라는 것도 있다고 ..

1. 일급 객체란? 여기서 일급이라는 것은 일급이라서 어떠한 혜택을 받는다는 것이 아니라, 사용할 때 다른 요소들과 다른 것이 없다는 것을 뜻한다고 한다. 즉, 일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 말한다. 일급객체가 되기 위해서는 다음과 같은 조건들을 만족해야하는데, 어떠한 조건이 있는지 알아보자. 모든 일급객체는 변수에 할당할 수 있다. 모든 일급객체는 다른 함수를 인자로 전달할 수 있다. 모든 일급객체는 다른 함수의 결과로서 리턴될 수 있다. 각각의 조건을 조금 더 자세하게 살펴보면서 자바스크립트의 함수는 왜 일급객체인지, 그 부분을 알아보려고 한다. 2. 자바스크립트의 함수는 일급객체? 1) 모든 일급객체는 변수에 할당할 수 있다. 가장 먼저 모든 일급객체..

개발을 하다보면 input value값을 받을 때 프론트단에서 어느정도 걸러줘야할 필요가 있는데 그 때 유효성 검사에서 많이 사용하는 것이 정규표현식인 것 같다. 그냥 보기엔 어려워보이지만 어떤 표현인지를 알고 사용하면 내가 원하는대로 조합할 수 있는 것 같아 자주 쓰이는 정규식을 정리해보고자한다. 정규식을 사용하면 해당 조건에 따라 true, false를 반환하여 유효성 검사가 가능해진다. 정규식은 아래와 같이 조합하여 사용하면 되는데 예제를 통해 하나씩 살펴보려고 한다. / 01([0|1|6|7|8|9])([0-9]{3,4})([0-9]{4}) / i 시작 기호 조합하여 사용할 패턴 종료 기호 패턴변경자 1. 이메일 유효성 검사 const email = "" const regEmail = /^[0-9..

1. Object 생성자 함수란? new 연산자와 Object 생성자 함수로 객체를 생성할 수 있는데 Object 생성자 함수를 이용하면 빈 객체를 리턴한다. const info = new Object(); // 빈 객체의 생성 info.name = 'Lia'; info.sayHello = function() { console.log(`Hi! My name is ${this.name}`); }; console.log(info); // {name: "Lia", sayHello: f} info.sayHello(); // Hi! My name is Lia 2. 생성자 함수란? new 연산자와 함께 호출되어 객체(인스턴스)를 생성하는 함수로 일반 함수와 같은 방법으로 정의하고 new 연산자와 함께 호출한다. 생..