Archive

var 키워드로 선언한 변수의 문제점(1) 변수 중복 선언 허용var 키워드로 선언한 변수는 중복 선언 가능초기화문 유무에 따라 다르게 동작초기화문 有: 자바스크립 엔진에 의해 var 키워드 없는 것처럼 동작 (var x = 10;)초기화문 無: 무시됨 (var x;)(2) 함수 레벨 스코프var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정⇒ 함수 외부에서 var 키워드로 선언한 변수 → 코드 블록 내에서 선언해도 모두 전역 변수var x = 1; if (true) { // 코드 블록 안이지만 함수 외부이므로 전역변수 x 중복 선언 var x = 10; } console.log(x); //10(3) 변수 호이스팅var 키워드로 변수 선언 → 변수 선언문이 스코프의 선두로 끌어올..

무분별한 전역변수 사용 지양해야 함 (1) 변수의 생명 주기 선언에 의해 생성 → 할당을 통해 값 가짐 → 소멸 자신이 선언된 위치에서 생성되고 소멸함 전역 변수의 생명 주기= 애플리케이션의 생명 주기 함수 내부에서 선언된 지역변수= 함수 호출시 생성 → 함수 종료시 소멸 = 함수의 생명주기와 같음 💡 전역 변수 변수 선언은 선언문이 어디에 있든 상관없이 가장 먼저 실행됨 변수 선언은 런타임 이전 단계에서 자바스크립트 엔진에 의해 먼저 실행됨 함수 내부에서 선언한 변수 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행됨 (변수 먼저 선언되어 undefined로 초기화된 후 함수 몸체를 구성하는 문들이 순차적으로 실행되기 시작할 때 변수 할당문..

스코프 (유효범위)자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념✅모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨 스코프 = 식별자가 유효한 범위 = 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 (어떤 변수를 참조할지 결정) 💡자바스크립트 엔진은 코드 실행시 코드의 문맥 고려 코드의 문맥은 렉시컬 환경으로 이루어짐 이를 구현한 것이 실행 컨텍스트 모든 코드는 실행 컨텍스트에서 평가되고 실행됨 렉시컬환경 코드가 어디서 실행되며 주변에 어떤코드가 있는지 프로그래밍 언어에서는 스코프를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 함스코프 내에서 식별자는 유일해야 함다른 스코프에는 같은 이름의 ..

함수일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것매개변수함수 내부로 입력을 전달받는 변수인수입력반환값출력함수호출인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시함수 호출시 코드 블록에 담긴 문들 일괄적 실행 후 반환값 반환 함수 리터럴자바스크립트의 함수 = 객체 타입의 값함수도 함수 리터럴로 생성 가능function 키워드, 함수이름, 매개변수, 함수 몸체로 구성함수 리터럴은 평가되어 값(객체) 생성함수는 객체지만 일반 객체와 달리 호출 가지며 함수 객체만의 고유한 프로퍼티 가짐함수가 객체라는 것은 다른 언어와 구별되는 중요한 특징 함수 정의함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출됨함수 표현식아래의 경우 자바스..

원시타입 vs 객체타입 원시값 → 변경불가능한 값 / 객체(참조) 타입의 값 (객체) → 변경가능한 값 변수 할당 원시값 변수(확보된 메모리 공간)에 할당 → 실제 값이 저장됨 객체를 변수에 할당 → 참조 값이 저장됨 변수를 다른 변수에 할당 원시 값을 갖는 변수 → 다른 변수에 할당 ⇒ 원본의 원시 값이 복사되어 전달 = 값에 의한 전달 객체를 가리키는 변수를 다른 변수에 할당 ⇒ 원본의 참조 값이 복사되어 전달 = 참조에 의한 전달 원시값 변경 불가능한 값, 읽기 전용 값 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 값: 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과 원시 값 자체를 변경할 수 없다는 것 ! 변수는 언제든지 재할..

문제 셀프 넘버는 1949년 인도 수학자 D.R. Kaprekar가 이름 붙였다. 양의 정수 n에 대해서 d(n)을 n과 n의 각 자리수를 더하는 함수라고 정의하자. 예를 들어, d(75) = 75+7+5 = 87이다. 양의 정수 n이 주어졌을 때, 이 수를 시작해서 n, d(n), d(d(n)), d(d(d(n))), ...과 같은 무한 수열을 만들 수 있다. 예를 들어, 33으로 시작한다면 다음 수는 33 + 3 + 3 = 39이고, 그 다음 수는 39 + 3 + 9 = 51, 다음 수는 51 + 5 + 1 = 57이다. 이런식으로 다음과 같은 수열을 만들 수 있다. 33, 39, 51, 57, 69, 84, 96, 111, 114, 120, 123, 129, 141, ... n을 d(n)의 생성자라..

자바스크립트 객체 기반의 프로그래밍 언어 구성 요소 대부분이 객체 원시 값 제외한 나머지 값 = 모두 객체 함수, 배열, 정규 표현식 원시 타입 vs 객체 타입 원시 타입 단 하나의 값만 나타냄 객체 타입 (object/reference type) 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조 원시 값 또는 다른 객체 원시 값 (원시 타입의 값) 변경 불가능한 값 객체 타입의 값 (객체) 변경 가능한 값 객체 0개 이상의 프로퍼티로 구성된 집합 프로퍼티 구성 요소 키(key) 값(value) 자바스크립트에서 사용할 수 있는 모든 값이 들어갈 수 있음 함수는 일급 객체이므로 가능 프로퍼티 값이 함수일 경우 메서드라 부름 객체는 프로퍼티와 메서드로 구성된 집합체 프로퍼티: 객체의 상태를 나타내는..

1. 타입 변환이란? 명시적 타입 변환 · 타입 캐스팅: 개발자가 의도적으로 값의 타입을 변환하는 것 암묵적 타입 변환 · 타입 강제 변환: 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것 두 타입 변환 모두 기존 원시값을 직접 변경하는 것 아님 원시값 = 변경 불가능한 값 ⇒ 변경할 수 없음 타입 변환: 기존 원시값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것 2. 암묵적 타입 변환 빈 문자열, 빈 배열, null, false는 0으로 변환 true는 1로 변환 자바스크립 엔진은 불리언 타입이 아닌 값을 Truthy 값 (참으로 평가되는 값) 또는 Falsy 값 (거짓으로 평가되는 값)으로 구분함 제어문의 조건식과 같이 불리언 값으..

아래와 동일하게 원형 차트를 구현하고자 한다. Setting npm install chartjs npm install --save chart.js react-chartjs-2 chartjs 라이브러리를 설치한다 기본적인 DoughnutChart 컴포넌트 작성 일단 정적 데이터를 기반으로 차트를 그려봤다. 차트 컴포넌트는 'data' props를 필수적으로 포함해야 한다. 차트에 필요한 데이터는 string 배열 'labels'와 number 배열 'data'이다. 아래 예시는 ['가','나','다','라','마'] 와 [1,2,3,4,5] 로 데이터를 설정하였다. DoughnutChart.tsx import { Chart as ChartJS, ArcElement, Tooltip} from 'chart.j..

리뉴얼될 총학생회 사이트는 회칙, 공지, 청원 페이지 등의 게시판 글 목록을 같은 레이아웃으로 Infinite Scroll하여 나타낸다. 이 페이지들은 레이아웃은 같아도 목록을 구성하는 컨텐츠가 각각 다르기 때문에 이를 어떻게 구현할지 고민하게 되었다.예전 같았으면 새로운 페이지를 작성할 때마다 기존 레이아웃의 코드를 복사 붙여넣기하여 몇몇 부분을 수정하였겠지만, 이번 프로젝트에서는 Atomic Pattern을 도입하기로 하여 개선해보기로 하였다!또한 이전 총학생회 사이트에서는 페이지마다 중복되는 함수들(axios(),useState()...)이 많아 수정사항이 있으면 페이지별마다 모두 바꿔야 했던 게 불편해서 이 점을 꼭 고치고 싶었다.그래서 이번에는 마음 먹고 새로운 페이지를 작성할 때 기존 레이아웃..