What I studied

리뷰를 입력했을 때, 평균 평점을 계산해야했는데 평균을 계산하는 순간 딱 맞아 떨어질 때도 있지만 소수점이 많이 늘어나는 경우도 있었다. 그래서 그걸 방지하기 위해 toFixed 함수를 사용했고 정말 간단한 예제를 만들어봤다. 각각의 input에 값을 입력하면 자동으로 평균이 계산되도록 만들어놓은 것이다. 기존에 백엔드에서 넘겨 받는 데이터라면 데이터 값을 추출하기 위해 map을 돌려 계산해야하는 값을 새로운 배열로 만든 후, reduce 함수를 이용하여 총합을 구한다. 총합을 구한 후, 배열의 길이만큼으로 나눠주면 평균 계산 완료. 지금은 백엔드에서 받고 있는 데이터가 없기 때문에 직접 입력해서 값을 추출하도록 만들었다. import React, { useState } from 'react' const..

자바스크립트에서 객체란 { }를 사용하며 key와 value로 구성된 프로퍼티가 들어간다. 각각의 프로퍼티는 쉼표로 구분하는데 객체를 만들어 접근하고 추가하고 삭제하는 것 모두 가능하다. 객체 만들기 객체는 아래와 같이 키와 밸류 값으로 작성하는데 중괄호를 이용해 만들면 된다. 아래 teacher이라는 객체를 만들었다. // 객체의 생성 const teacher = { name: 'Emaily', // key : name , value : Emaily age: 35, // key : age , value : 35 } // 함수로 생성하기 function makeObject(name, age) { return { name, age, hobby: 'exercising' }; } const teacher = ..

자바스크립트 코드는 위에서부터 아래로 한줄씩 실행되는데 함수 선언문을 먼저 살펴보고 이에 이어서 함수 표현식과 화살표 함수에 대해서 정리해보고자한다. 함수 선언문 함수 선언문은 아래와 같은 형식으로 작성하는데 함수와 함수명, 매개변수(필요하다면 작성)를 작성한다. 예제 1에서 사용하는 변수 msg는 지역변수이기 때문에 함수 내에서만 사용이 가능하다. // 1 function hello(name) { let msg = `안녕하세요 ${name}님!` console.log(msg) } hello('Lia') // 안녕하세요 Lia님! hello('Mike') // 안녕하세요 Mike님! hello('Emaily') // 안녕하세요 Emaily님! // 2 function error() { alert('에러가..

오늘은 자바스크립트에서 활용하는 반복문에 대해서 다시 돌아봤는데 평소에는 for문만 사용했었고 while과 do while이라는 것이 있는지는 처음 알았다. 자바스크립트에는 for문만 있는줄 알았던 것이다. 그래서 3가지의 차이에 대해서 조금 더 살펴보고자 한다. for 반복문 for문은 세미콜론(;)으로 구분하며 처음 쓰는 것은 초기값, 두번째는 조건, 세번째는 코드 실행 후 작업을 의미한다. 그렇기 때문에 초기값부터 조건의 값이 false가 될 때까지 반복 실행하며 원하는 값을 찍을 수 있는 것이다. 아래의 코드를 보면 i가 0부터 시작해서 5보다 작다면 계속해서 반복문을 실행하게 된다. 그래서 아래와 같이 0부터 4까지의 값을 얻을 수 있다. for(let i = 0; i < 5; i++) { co..

자바스크립트 기본 연산자와 비교 연산자에 이어서 논리 연산자를 알아보려고하는데 자바스크립트에는 3가지의 논리연산자가 있다. 이 역시 코딩을 하다보면 많이 쓰게 되는 것들이니 하나씩 살펴보려고 한다. || (OR) 연산자와 && (AND) 연산자 or 연산자는 여러개 중 하나라도 true 이면 true를 반환하고 모든 값이 false일 때만 false를 반환한다. and 연산자는 모든 값이 true일때만 true를 반환하고 하나라도 false이면 false를 반환한다. const name = 'Jun'; const age = 22; if(name === 'Jun' || age === 20) { console.log('통과') } else { console.log('불통') } // 통과 if(name ==..

비교연산자는 주로 조건문에서 많이 사용하는데 비교연산자에 대해서 처음 공부하는 것이라면 헷갈릴 수 있는 부분도 존재하니 반드시 체크해두어야 나중에 문제가 생길일이 없을 것 같다. 비교연산자 식은 true, false 값을 반환 기본적으로 console에 비교연산자를 활용한 식을 적어보면 true 또는 false 값을 반환한다. console.log(8 > 4) // true console.log(8 == 4) // false console.log(8 != 4) // true 여기서 한가지 주의해야할 것 중 하나는 == 연산자인데 기본적을 =은 할당을 의미하기에 우리가 평소 알고 있는 것처럼 같다를 의미하지 않는다. 그래서 같다를 의미하는 연산자로 ==를 사용하는데 ==과 ===의 차이를 알아두는 것이 좋..

자바스크립트 기본연산자에 대해 다시한번 알아보고 추가적으로 비교연산자, 논리연산자 등에 대해서 알아보려고 한다. 기본 연산자 자바스크립트 기본 연산자에는 +, -, *, /, % 등이 있는데, %는 나머지 연산자이다. 이 연산자는 주로 홀수, 짝수를 구분하는데 사용하며 나머지 값이 1인지 0인지에 따라 홀수와 짝수로 구분할 수 있다. 홀수 : X % 2 = 1 짝수 : Y % 2 = 0 또한 거듭제곱의 경우에는 * 연산자를 두번 사용하면 된다. const result = 2**4; console.log(result) // 16 기본 연산자의 경우 우선순위를 갖는데 우리가 알고 있는 것처럼 더하기, 빼기 보다 곱하기, 나누기가 우선순위가 되는 것이다. 기본 연산자 줄여쓰기 연산자의 경우에는 줄여서 쓰는 것..

자바스크립트에서의 형변환은 두가지로 나뉠 수 있다고 한다. 자동 형변환과 명시적 형변환이 있는데 자동 형변환의 경우 자바스크립트 엔진이 자동으로 데이터 타입을 변환시키는 것이고, 명시적 형변환은 개발자가 의도를 가지고 데이터타입을 변환시키는 것이라고 할 수 있다. 그래서 이를 좀 더 자세히 살펴보고자 한다. 자동 형변환(암시적 형변환) 자바스크립트 엔진이 자동으로 데이터 타입을 변환시키는 것. 즉, 필요에 따라 알아서 변환되는 것을 의미한다. 예시를 하나 살펴보면 앞서 공부한 prompt를 통해 수학점수와 영어점수를 입력받아 합산한 결과에서 /2를 해줄 것이다. const mathScore = prompt('수학 점수를 입력해주세요'); // 100 const englishScore = prompt('영..

리액트를 사용하면 사용할 수록 자바스크립트에 대한 공부는 다시 해야겠다는 생각이 들어 ES6관련 문법과 기본적인 것들을 정리해보려고 한다. 평소에 리액트를 사용하면서도 alert 이외의 것은 사용해본 적이 없었는데 이번에 alert, propmpt, confirm 세가지의 차이를 확실하게 알게 되었다. 입력값을 받는 prompt prompt의 경우에는 이렇게 원하는 값을 입력받을 수 있다. 여기서 promt로 입력받은 입력값은 무조건 문자열! const name = prompt('이름을 입력하세요'); 그뿐만 아니라 default 값을 설정해줄 수도 있는데 아래와 같이 두개의 인자를 넘겨줄 수 있기 때문이다. const date = prompt('예약일을 입력해주세요', '2022-08-'); 확인창을 ..

타입스크립트에서는 함수의 파라미터, 반환, 구조 이렇게 3가지에 타입을 지정할 수 있다. 지금부터 함수의 기본적인 타입 선언에 대해 알아보자. 함수의 기본적인 타입 선언 기본적으로 자바스크립트로 이루어진 함수를 타입스크립트 타입을 부여한 형태로 바꾸는 것은 어렵지 않았다. 아래 예시를 보면 바로 이해할 수 있을텐데 기존 함수의 매개변수와 함수의 반환 값에 타입을 추가한 것이다. function sum(a, b) { return a + b; } function sum(a: number, b: number): number { return a + b; } 함수의 인자 타입스크립트 내에서는 함수의 인자를 모두 필수 값으로 간주하기 때문에 매개변수를 설정하면 그에 따라 매개변수 값을 넘겨주어야한다. 하지만 어떤 ..