What I studied

함수는 함수 정의를 통해 생성하는데 함수 선언문, 함수 표현식, Function 생성자 함수, 화살표 함수 등을 통해 함수를 정의할 수 있다. 함수를 정의한 후에 함수를 실행시키려면 함수를 호출시켜야한다. 1. 함수 정의 방법 1) 함수 선언문 function hello (a, b) { return a+b; } console.log(hello(3,7)); // 10 2) 함수 표현식 const hello = function (a, b) { return a+b; } console.log(hello(3,7)); // 10 3) function 생성자 함수 const hello = new Function('a', 'b', 'return a + b'); console.log(hello(3, 7)); // 10 ..

자바스크립트는 객체 기반의 프로그래밍 언어인데 원시값을 제외한 나머지는 모두 객체이다. 자바스크립트의 원시값에는 숫자, 문자열, 불리언, null, undefined, 심벌 등이 있고 객체 타입에는 함수, 배열, 정규 표현식 등이 있다. 1. 객체 생성 방법 자바스크립트는 클래스 타입의 객체지향 언어가 아니라 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원하는데 아래와 같은 방법으로 객체를 생성할 수 있다. 객체 리터럴 Object 생성자 함수 Object.create 메서드 생성자 함수 클래스(ES6) 이 중에서 가장 흔하게 사용되며 간단하게 객체를 생성할 수 있는 방법은 객체 리터럴을 이용하는 방법이다. 객체 리터럴은 객체를 생성하기 위한 표기법으로 약속된 기호를 사용하여 값을 생성하..

어떤 언어를 사용하던 조건문과 반복문은 정말 많이 사용하게 될 수밖에 없다. 각각의 Case에 따라 내가 원하는 결과를 얻기 위해서 조건문을 사용하고, 반복문을 통해 하나의 코드로 동일한 작업을 수행할 수 있도록 해줄 수 있다. 1. 조건문( if문 ) 가장 대표적인 조건문 사용방법은 if문을 사용하는 것이다. 입력받은 점수가 60이하일 때, 재시험 대상이라는 문구를 띄워주었다. const mathScore = prompt('영어 점수를 입력해주세요.') if(mathScore { if(EnglishScore > 90) { alert('잘했어요!') } else if(EnglishScore > 70) { alert('조금 더 분발하세요.') } else { alert('재시험 대상입니다!') } } sc..

프로그래밍을 하다보면 데이터 타입이 일치하지 않아 가끔 예상치 못한 오류를 뱉어내기도 하는데 예전에 실전프로젝트를 진행하며 풀리지 않는 문제로 계속해서 고민했던 적이 있었다. 그 때는 아직 많이 부족해 원인을 찾는데 너무 오랜 시간을 허비했지만 지금은 비슷한 문제 상황이 생겼을 때 데이터 타입을 비교해보는 것까지 꼼꼼하게 체크하게 된다. 1. 자바스크립트의 데이터타입 데이터 타입이란 것은 말 그대로 값의 종류를 의미한다. 자바스크립트에서는 총 7개의 데이터타입을 갖는데 크게 원시타입과 객체 타입으로 분류할 수 있다. 숫자타입, 문자열타입, 불리언타입, null 타입, undefined 타입, 심벌타입을 포함하는 원시타입과 객체, 함수, 배열 등을 포함하는 객체 타입이 있다. 구분 데이터 타입 설명 원시 ..

우리가 사용할 변수를 선언할 때, 전역 변수로 선언하거나 지역변수로 선언해 사용하는 방법이 있다. 전역 변수와 지역변수의 개념에 대해서 잘 모를 때는 그냥 아무렇게나 사용했었는데 다시 공부하면서 공통으로 사용하는 변수만 전역 변수로 사용하고, 되도록이면 지역변수를 사용하는 것이 좋다는 것을 알게 되었다. 1. 전역변수와 지역변수 전역 변수는 프로그램 전체에서 접근할 수 있는 변수로, 글로벌 스코프를 갖는 변수이다. 즉, 함수 외부에서 선언된 변수라고 할 수 있으며, 프로그램이 종료되어야만 메모리에서 삭제되는 특성이 있다. 반면에, 지역변수는 함수 내부에서 선언된 변수로 함수가 실행되면 만들어지고 함수가 종료되면 메모리에서 삭제된다. 1) 전역변수와 지역변수의 사용 예제 // 전역변수 const name ..

이번에 프로젝트를 진행하며 프론트단에서만 데이터 처리를 해야하는 경우가 있었기 때문에 이를 위헤 웹스토리지를 사용했다. 평소에는 로그인 부분에 있어 토큰을 저장하는 용도로만 사용했었는데 이번에는 json 형식의 데이터를 웹스토리지에 저장하면서 CRUD를 구현했다. 그래서 각각의 웹스토리지의 차이에 대해서 다시한번 공부해보려고 한다. 1. Web Storage란? 웹스토리지는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 기술인데 HTML5에서 등장한 새로운 기능이다. DB에 저장하지 않아도 되는 데이터나 클라이언트단에서만 사용해야하는 정보 등을 저장하여 사용할 수 있고, 웹스토리지에는 로컬 스토리지와 세션 스토리지 두가지가 있다. 웹 스토리지는 개발자 도구의 Application에서 확인..

프로젝트를 수행하다보면 이벤트가 전파되어 예상치 못한 이슈를 발생시키는 경우가 있는데 처음 이 문제가 발생했을 때는 이벤트 전파에 대해 알고 있지 못해 원인을 찾기가 어려웠다. 하지만 이벤트 전파에 대해 알고 난 이후에는 어떠한 문제가 발생했을 때, 요소들이 어떻게 동작하고 있는지를 파악해 이 때문에 발생한 문제구나라는 것을 금방 알아챌 수 있었다. 1. 이벤트 전파 어떠한 요소에서 발생한 이벤트는 부모 또는 자식에게 전파되게 되는데 이때, 전파되는 방향에 따라 이벤트 버블링과 캡처링으로 구분한다. 1) 이벤트 버블링 이벤트 버블링(Bubbling)은 이벤트가 발생한 요소로부터 상위요소로 순차적으로 이벤트가 전파되는 방식이다. 2) 이벤트 캡처링 이벤트 캡처링(Capturing)은 이벤트가 발생한 요소로..

평소 공부를 하거나 회사에서 프로젝트를 진행할 때 항상 느꼈던 부분이 자바스크립트를 잘해야한다는 것이었는데 내가 제대로 알고 있는지 모르는지에 대해서 헷갈리는 부분들이 계속해서 나타난다. 그래서 끊임없이 공부를 하며 기본적인 것들이라도 다시 봐야한다는 것을 매번 느끼고 있는데 오늘 다시 봤던 부분이 변수와 변수 선언 방식인 var, let, const의 차이였다. 세가지 모두 변수를 선언할 때 사용하는데, var의 단점을 보완하기 위해 ES6부터 추가된 변수 선언 방식이 let과 const이다. 1. 변수란? 변수라는 것은 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 의미한다. 즉, 쉽게 말해 "하나의 값을 저장할 수 있는 저장공간"이라고 생각하면..

프로젝트를 개발을 진행하며, 프론트쪽 배포는 주로 내가 담당했는데 배포 전 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..