우당탕탕 개발일기

면접 대비 질문 리스트를 뽑을 때마다 꼬옥 나오는 this.. 봐도봐도 모르겠던 this를 이번 기회에 아주 조져보겠다.01. this란const circle = { radius: 5, getDiameter() { return 2 * circle.radius; }};console.log(circle.getDiameter()); // 10 (ⓐ) getDiameter 메소드 내에서는 메소드 자신이 속해있는 객체 circle을 참조하고 있다.getDiameter 메소드가 호출되는 시점(ⓐ)에는 이미 객체 리터럴의 평가가 완료되어 객체가 생성되었고 circle이라는 식별자에 생성된 객체가 할당된 이후이다. 따라서 getDiameter 메소드 내부에서 circle 식별자를 참조할 수는 있..

보호되어 있는 글입니다.

1. 프로퍼티 어트리뷰트란??프로퍼티의 값(value), 값의 갱신 가능 여부(writable), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable)와 같은 프로퍼티의 상태. 자바스크립트 엔진은 프로퍼티를 생성할 때 이 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 1) Object.getOwnPropertyDescriptor인수로 참조와 프로퍼티 키 값을 넘겨주면 해당 프로퍼티(1개)의 프로퍼티 어트리뷰트를 프로퍼티 디스크립터 객체로 반환한다.트프로퍼티 어트리뷰트에 직접 접근할 순 없지만, Object.getOwnPropertyDescriptor메소드를 통해 간접적으로 접근이 가능하다.  단, ES8부터 도입된 Object.getOwnPropertyDescriptors ..

1. 전역 변수의 문제점1) 암묵적 결합전역 변수를 선언하는 것은 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 의미와 동일하다.이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용하는 것이다.이렇게 변수의 유효범위가 크면 클수록 코드의 가독성이 나빠지고 의도하지 않은 변경이 일어날 위험이 증가한다. 2) 긴 생명주기전역 변수의 생명주기는 애플리케이션의 생명 주기와 동일하다.즉, 코드가 로드 되자마자 곧바로 해석되고 실행되며 더 이상 실행할 코드문이 없을 때 종료한다.  전역 변수는 생명 주기가 애플리케이션의 생명 주기와 동일한 만큼 메모리 리소스도 오랜 기간 소비한다.그만큼 전역 변수의 상태를 변경할 수 있는 시간도 길고 기회도 많아지는 것이다. 3) 스코프 체인 상 ..

1. 스코프란?모든 식별자(변수명, 함수명, 클래스명 등)의 유효범위 즉, 다른 코드가 식별자 자신을 참조할 수 있는 유효범위.모든 식별자는 자신이 선언된 위치에 의해 자신이 유효한 범위가 결정된다.let x = '반원재'; // ⓐfunction foo() { let x = '이규리'; // ⓑ console.log(x);}foo(); // 이규리console.log(x); // 반원재위의 코드처럼 동일한 변수가 다른 곳에서 선언되었을 경우, foo() 안의 x와 console.log(x)에서의 x가 무엇을 참조할 지는 자바스크립트 엔진이 결정하게 되는데, 이를 식별자 결정이라고 한다. 위의 코드는 코드의 가장 바깥 영역에서 선언된 x변수(ⓐ)는 어디서든 참조할 수 있다.(전역 스코프)하지만..

1. 원시 타입 - 변경 불가능한 값(읽기 전용[readOnly]) let str = 'string'; str[0] = 'S'; // 문자열은 원시값이라서 변경할 수 없다. 에러도 발생하지 않는다. console.log(str); // string - 원시 타입 값을 변수에 할당하면 실제 값이 저장된다. - 원시 값을 갖는 변수를 다른 변수에 할당하면 원시값이 복사되어 전달된다(값에 의한 전달) - '재할당'을 제외하곤 변수 값을 변경할 수 있는 방법 X = 예기치 못한 변경이 일어나지 않는다 = 데이터 신뢰성을 보장한다 cf. 재할당은 기존 문자열을 변경하는 것이 아니라 새로운 문자열을 새롭게 할당하는 것이기 때문. let str = 'hello'; // 식별자(변수) str은 문자열 'hello'가 ..

1. 객체와 객체 리터럴 객체란 중괄호({})로 감싸져있으며 그 안에 '프로퍼티 키: 프로퍼티 값' 으로 구성되는 프로퍼티의 집합. 변경 불가능한, 단 하나의 값만 나타내는 원시형과는 달리 객체는 변경 가능하며 다양한 타입의 값을 담을 수 있다. 리터럴이란 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법을 의미한다. 따라서 객체 리터럴이란 객체를 생성하기 위한 표기법을 의미한다. 객체 리터럴은 중괄호({}) 내에 0개 이상의 프로퍼티를 정의한다. // 1. 객체 리터럴 문법 let user = {}; // 2. 참고로, 객체 생성자(new)를 이용해서 객체를 만드는 방법도 있다. let user = new Object(); 2. 프로퍼티 키 (프로퍼티)키 === (프로퍼티)..

ESLint JavaScript 코드의 품질을 검사하고 스타일 가이드 준수를 강제하는 도구. 다양한 규칙을 설정하여 사용자 정의할 수 있다. ESLint 설정 파일인 .eslintrc 파일을 편집하여 규칙을 구성 가능. indent: 코드 들여쓰기를 관리합니다. 주로 탭(tab) 또는 스페이스(space)를 몇 개 사용할지, 들여쓰기의 깊이 등을 설정합니다. semi: 세미콜론 사용 여부를 관리합니다. 세미콜론을 사용할 것인지 아니면 생략할 것인지 설정합니다. quotes: 문자열을 따옴표로 감싸는 방식을 관리합니다. 홑따옴표(') 또는 쌍따옴표(")를 사용할 것인지 설정합니다. no-unused-vars: 선언한 변수를 사용하지 않는 경우를 검사합니다. no-console: console.log와 같은..

종종 요청사항 중에 소수점 n번째자리까지 표현해주세요~하는게 있다. 단순하게 toFixed(n)를 사용하면 쉽게 해결할 수 있지만, 문제는 50, 15같은 정수형태의 숫자들도 50.00, 15.00으로 나온다는것이었다. 단순하게 조건문으로 해결할 생각만 하고 있었는데 parseFloat을 이용하면 손쉽게 구현할 수 있다고 한다. parseFloat(NUMBER.toFixed(n)) NUMBER 자리에 원하는 숫자나 숫자가 담긴 변수를 넣으면 10,20같은 정수일때는 정수만, 1.456같이 소수점일 때는 n번째 자리수까지 표현된다. NUMBER.toFixed(n)을 하면, n번째 이하의 자릿수에서 반올림하고 문자열 형태로 반환한다. 그리고 parseFloat()은 문자열을 숫자로 변환하는 함수인데, 이 때..

git clone을 다시 받았는데 npm run dev했을 경우 listening on port~ 하면서 정상적으로 작동되는 것 같은데, 막상 화면에는 500에러가 떴다. 터미널에도 다른 에러는 전혀 뜨지 않는 상황이라 구글링도 어려웠다. db 정보도 정확하게 입력했는데 뭐가 문제일까 고민 엄청 오래했었는데... 프론트랑 연결이 제대로 안되어있어서 그랬던 것이었다.. 왜인지 서버의 포트와 프론트에서 받아오는 서버 주소의 포트가 다르게 되어있었다. 혹시 npm run dev를 했을 때 실행도 안되고 에러도 안뜨면,, 포트 주소가 제대로 적혀있는지 확인하기..!