909 Devlog

리액트에서 input을 다루다 보면 자주 사용하게 되는 e.target과 e.currentTarget, 두 요소의 차이점을 알아보자. 코드로 알아보기 전에, MDN 문서를 한 번 읽어보자. 먼저, Event 인터페이스의 읽기 전용 요소인 target은 이벤트를 발생시킨 객체에 대한 참조이다. 이어서, Event 인터페이스의 읽기 전용 요소인 currentTarget은 이벤트 핸들러가 부착된 element를 식별한다. 즉, target은 이벤트 버블링에 의해 부모의 이벤트를 위임받은 자식을 가리키고, currentTarget은 이벤트 핸들러가 부착된 요소를 가리킨다. 쉽게 말해서 target은, 실제로 이벤트가 발생된 요소를 가리킨다고 보면 된다. 이제 코드로 한 번 알아보자 강아지 고양이 우선 위와 같이..

이때까지 서버에게 어떤 동작을 하도록 시키려면, URL을 입력하거나 링크를 타고 페이지에 들어가 get 요청을 보내거나, form의 post를 통해 서버의 controller를 통해 백엔드를 동작시켜 응답을 받았습니다. 하지만 URL과 form을 사용하지 않고 서버의 controller를 동작시키고 싶을 때가 많습니다. 유튜브를 예로 들면 영상 조회수를 증가시키거나, 좋아요 / 싫어요, 재생목록 추가 기능들은 URL과 form을 사용하지 않고 동작합니다. 따라서, 이번 포스팅에서는 URL과 form을 사용하지 않고 서버의 controller를 작동시키는 법을 알아보겠습니다. 만들어 볼 기능은 페이지에 올라와있는 영상을 다 보면 조회수가 올라가도록 하는 기능입니다. 1. api 기본 세팅 api를 사용할 ..

목차 sort 메서드란? sort 알아보기 sort 메서드란? sort 메서드는 배열의 요소를 정렬한 후 그 배열을 반환하는 메서드입니다. const strs = ['d', 'b', 'a', 'c']; console.log(strs.sort()); // 결과 = ['a', 'b', 'c', 'd'] 위 코드의 결과는 a, b, c, d로 우리가 일반적으로 생각하는 정렬이 된 상태로 출력되는 것을 볼 수 있습니다. const nums = [7, 3, 8, 2, 10]; console.log(nums.sort()); // 결과 = [10, 2, 3, 7, 8] 반면에, 위 코드의 결과는 10, 2, 3, 7, 8로 우리가 원하는 대로 정렬이 되지 않은 것을 볼 수 있습니다. 원하는 대로 정렬을 할 수 있도록..

목차 forEach 메서드란? forEach 알아보기 forEach 메서드란? 배열에서, 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드입니다. 아래와 같은 배열이 있을 때, 기존의 for문을 사용하여 각 요소들을 로그하려면 const numbers = [1, 2, 3, 4, 5]; for (let i = 0; i < numbers.length; i++) { console.log(numbers[i]); } // 1 // 2 // 3 // 4 // 5 위와 같은 코드를 짜야 했었습니다. forEach 메서드를 사용하면 더 간편하고 짧게 코드를 짤 수 있습니다. const numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(value) { console.log(..

목차 연산자란? 산술 연산자 할당 연산자 비교 연산자 삼항 조건 연산자 논리 연산자 쉼표 연산자 그룹 연산자 typeof 연산자 그 외의 연산자 연산자 우선순위 연산자 결합 순서 연산자란? 연산자 : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만드는 것 피연산자 : 연산의 대상 (값으로 표현할 수 있는 표현식) 피연산자와 연산자의 조합으로 이루어진 연산자 표현식 또한 값으로 평가될 수 있는 표현식이다. 아래는 그 예시이다. // 산술 연산자 5 * 4 // -> 20 // 문자열 연결 연산자 'My name is ' + 'Jung' // ->'My name is jung' // 할당 연산자 color = 'red' // -> 'red' // 비교..

목차 데이터 타입이란? 숫자 타입 문자열 타입 불리언 타입 undefined 타입 null 타입 심벌 타입 객체 타입 데이터 타입의 필요성 데이터 타입이란? 자바스크립트의 모든 '값'은 데이터 타입을 갖는다. 아래 표는 자바스크립트(ES6)의 7개의 데이터 타입이다. 구분 데이터 타입 설명 원시 타입 숫자 타입 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열 타입 문자열 불리언 타입 논리적 참과 거짓 undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는값 심벌 타입 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용 객체 타입 객체, 함수, 배열 등 처음보면 헷갈릴 수 있다, 천천히 하나씩 ..