Javascript (32) 썸네일형 리스트형 모듈 _ export default, import, 모듈을 작업할 때에는 Visual Studio에서 반드시 " 작업할 폴더 " 를 열어서 작업해야 한다! 1. 모듈 처리 Htmlﾠ➞ﾠ 태그 Jsﾠ➞ﾠNode : ES5의 "require " 함수 ﾠﾠﾠﾠﾠﾠReact : ES6의 " import " 2. packge.json 파일 생성 후 수정 packge.json 파일이 작업 폴더의 최상단에 위치해야 한다! window : ' cmd ' 창 or " Visual Studio " 의 ' 터미널 ' open Mac : " Visual Studio " 의 ' 터미널 ' open ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ⬇︎ " npm init " 명령어 + Enter ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ⬇︎ ' packge.json ' 파일에 "type" : " module ".. SyntaxError 1. 은닉된 멤버 변수에 접근할 때 나타나는 에러 SyntaxError : Private field '# ・・・・' must be declared in an enclosing class 은닉성, getter 함수, setter 함수, 클래스의 상속, 정적 멤버변수, 정적 메서드, 싱글톤 패턴 1. 은닉성 멤버 변수나 메서드가 객체를 통해 접근할 수 없도록 클래스 내부에 숨기는 기법 ﾠﾠﾠ객체를 통한 멤버 변수로의 직접 접근이 소스코드 보안에 좋지 않아 멤버 변수를 은닉 ﾠﾠﾠﾠﾠﾠ--> 프로그램은 객체가 갖고 있는 값에 접근할 수 있는 방법 차단됨 멤버 변수나 메서드 앞에 #을 붙여 적용한다. ﾠﾠPrivate 프로퍼티(or 멤버 변수) / Private 메서드 ﾠﾠﾠclass 클래스 이름 { ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ# 멤버 변수 1 ; ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ# 멤버 변수 2 ; ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ・・・ ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ# 멤버 변수 n ; ﾠﾠﾠﾠﾠﾠset 멤버 변수 1( value ) { this.# 멤버 변수 1 = value ; } ﾠﾠﾠﾠﾠﾠget 멤버 변수 1( ) .. 클래스, 객체 _ 클래스의 객체 생성, 클래스의 작성 패턴, 생성자함수 사용 1. 객체 _ Object 서로 다른 종류의 변수를 그룹화( C언어의 구조체 ) 사전적 의미 - 어떤 물건이나 대상 프로그래밍적 의미 - 프로그램에서 표현하고자 하는 기능을 묶는 단위 ﾠﾠ객체를 구성하는 단위 객체를 이루는 것은 데이터( 변수 )와 기능( 함수 ) 데이터는 변수로 표현 객체 안에 포함된 변수를 멤버 변수 or 프로퍼티 or 필드라고 부름 기능은 메서드( 클래스에 소속된 함수 )로 표현 객체 안의 함수는 반드시 여러 개 2. 클래스 _ Class 객체의 설계도 역할을 하는 프로그램 소스이다. 하나의 클래스를 통해 동일한 구조를 갖는 객체를 여러 개 생성 가능 ﾠﾠ클래스의 가장 기본적인 코드 형식 ﾠﾠﾠclass 클래스이름 { ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ멤버변수 선언 ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ생성자 .. 익명 함수, 화살표 함수, 콜백 함수 1. 익명 함수 _ Anonymous Function 함수 자체를 다른 변수에 참조시킬 목적으로 함수를 정의할 때이름 없이 정의하는 함수이다. 함수 정의 형태가 대입문이기 때문에 중괄호 뒤에는 세미콜론( ; ) 작성 ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ_ 기입하지 않아도 오류가 나지는 않지만 최대한 작성할 것 const 변수 = function (ﾠ・・・ﾠ) { ﾠﾠﾠﾠ・・・ } ; 원래는 function 뒤에 함수 이름을 작성하지만, 익명 함수에서는 이름이 없다. ★ 선언하는 변수에 함수를 대입 ( 익명 함수 ) ★ 파라미터에 함수를 대입 ( 콜백 함수 ) ★ 선언하는 변수에 함수를 대입 ( 클로저 ) 2. 화살표 함수 _ Arrow Function 익명 함수 문법을 축약하여 사용하는 함수 형태이다. < 익명 함.. 함수 _ 1. 함수란? 하나의 키워드에 프로그램 로직을 함축한 형태이다. 명령어를 만드는 과정으로 만들어진 명령어는 여러 번 재사용이 가능하다. 2. 함수의 개요 함수 정의 " function" 이라는 키워드를 명시하고 함수의 이름을 지정한 후 괄호를 명시 그 뒤 구문을 그룹화하기 위한 블록 ( { } )을 가진다. ﾠﾠﾠﾠfunction 함수 이름 ( ) { ﾠﾠﾠﾠﾠﾠﾠﾠﾠﾠ・・・・ 명령어 ・・・・ ﾠﾠﾠﾠ} 함수 호출 반드시 정의된 함수를 실행시키는 명령을 내려야 한다. 이를 ' 함수 호출 ' 이라 한다. ﾠﾠﾠﾠ함수 이름 ( ) ; 함수 이름 규칙 변수와 동일하게 영어와 숫자, 언더바( _ )의 조합으로 구성한다. 첫글자는 소문자로 시작하며 카멜표기법( myName )으로 사용하는 것을 권장한다. 3. 수.. JSON 객체 _ 탐색, 깊은 복사와 얕은 복사, 구조분해, 옵셔널 체이닝 1. JSON 객체란? Javascript Object Notation(자바스크립트 객체 표기법)의 줄임말로써 다양한 형태의 자료구조를 구성하기 위한 표기법이다. 중괄호 ( { } )로 표현 2 - 1. Object의 정의 _ 그룹의 JSON 하나의 변수 안에 다른 하위 변수를 내장하는 특수한 형태의 변수이다. key 이름을 지정하고 콜론( : )으로 구분 지어 값을 명시한다. ﾠﾠ(key이름에 띄어쓰기나 하이픈이 들어간 경우에는 따옴표 ( " " )로 감싸줘야 한다.) 두 개 이상의 데이터는 콤마( , )로 구분한다. 하위 데이터에 접근하기 위해저는 점( . )으로 구분한다. const 객체 변수 이름 = { 이름(key) 1 : 값(value) 1, 이름(key) 2 : 값(value) 2, ・・・・.. 2차 배열 _ 배열의 생성, 반복문을 이용한 배열 탐색, 성적구하기, 달력만들기 1. 2차 배열이란? 1차 배열의 각 원소가 다른 배열로 구성된 형태이다. 열의 개념만 존재하는 1차 배열 + 행의 개념을 추가한 형태 2. 2차 배열 생성 대괄호( [ ] )로 1차를 표현하고, 그 안에 다시 대괄호( [ ] )를 콤마로 구분하여 2차를 구성한다. const myArr = [ [ ・・・・ ], [ ・・・・ ] ] 3. 2차 배열의 원소에 접근 2행(세로) 3열(가로)인 경우 행의 index는 0~1, 열의 index는 0~2 4. 2차 배열의 행, 열 크기 구하기 행의 크기 : 2차 배열에 대한 길이를 직접 구하면 알 수 있다. ﾠﾠﾠﾠﾠﾠﾠﾠﾠlet a = [ ・・・・ ];ﾠﾠﾠlet b = [ ・・・・ ];ﾠﾠﾠlet c = [ [a], [b] ]; ﾠﾠﾠﾠﾠﾠﾠﾠﾠconsole.l.. 이전 1 2 3 4 다음
