What I studied

프로젝트를 개발을 진행하며, 프론트쪽 배포는 주로 내가 담당했는데 배포 전 build 상황에서 문제가 생겼다. 메모리가 부족하다..? 프로젝트 파일 안에 svg 파일이 많아서 그런 것 같았다. 일단 이 문제를 해결하기 위해 에러를 검색해보니 Heap 메모리가 부족해서 발생한 것이라고 한다. 그래서 Heap 메모리를 늘려주면 된다고 하는데 방법은 생각보다 간단했다. 에러 로그 Creating an optimized production build... [1559:0x59136f0] 162161 ms: Mark-sweep 2002.1 (2090.7) -> 1994.4 (2084.8) MB, 2587.5 / 0.1 ms (average mu = 0.160, current mu = 0.050) allocation..

리뷰를 입력했을 때, 평균 평점을 계산해야했는데 평균을 계산하는 순간 딱 맞아 떨어질 때도 있지만 소수점이 많이 늘어나는 경우도 있었다. 그래서 그걸 방지하기 위해 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('영..