개인 공부용 블로그

템플릿 리터럴이란? 이중 따옴표나 작은 따옴표 대신 백틱 `` 을 이용한다. //이전 표현식 var a = 5; var b = 10; console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); // "Fifteen is 15 and // not 20." //template literals var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); // "Fifteen is 15 and // not 20." +를 이용해 문자열을 조합하지 않아도 되어 가독성면에서 좋다. // template literals var name = `Aaron`; var t..

1. for 문 특징 배열을 반복문으로 순회해 값과 인덱스에 접근해야 하는 경우 for 또는 forEach문 사용 arrayList, array는 for문을 사용하면 성능면에서 빠르다. 단점 for문의 로직이 간단하지 않을 경우 코드 분석이 어려울 수 있다. For-each문은 For문 보다 얼마나 빠를까? 2. forEach문 문법 array.forEach( function( currentElement, index, array ){ }); currentElement : 처리할 현재 요소 index: 처리할 현재 배열 요소의 인덱스 array: forEach()를 호출한 배열 반환값: undefined 특징 자신의 내부에서 반복문 실행 배열의 경우 forEach문 사용 인덱스에 접근할 수 있다. 배열을 ..

See the Pen 개인study by limhaneul2244 (@limhaneul2244) on CodePen. 1. 간단한 메소드 만들기 let person = { name: 'nana', sayHi: function(){ console.log(`안녕 나는 ${this.name}`) } } person.sayHi(); //안녕 나는 nana 2. 오브젝트 내의 데이터를 전부 더해주는 메소드만들기 let 자료 = { data : [1,2,3,4,5] }; 자료.전부더하기 = function () { let total = 0; this.data.forEach(function(a){ total = a + total; }); console.log(total) } 자료.전부더하기() 여기서 자료의 obje..

1. TypeScript + React 설치하기 npx create-react-app 프로젝트명 --template typescript React를 설치하면 jsx파일이 많이 보인다. 근데 jsx 파일이 뭔지? (궁금.) js파일이 아닌 jsx로 사용한다. 이것은 JavaScript 의 기능이 포함되어 있다. 2. React Component function hellow () { return ( ) } 3. jsx 속성 1. 중괄호를 사용해 js 표현식을 삽입할 수 있다. 2. 주의. jsx는 HTML보다 JavaScript에 가까우므로 카멜케이스 프로퍼티 규칙을 사용한다. 3. 태그가 비어있을 경우 XML과 같이 />로 닫아주어야 한다. 예시 4. class가 아닌 className 을 사용한다. 예시..

1. 함수의 기본 선언 방법 function sum(a: number, b: number):number { return a + b; } //함수의 반환 값에 타입을 정하지 않을 때는 void 사용 function sum(a: number, b: number):void { return a + b; } 2. 함수의 인자(Argument) ts는 함수의 인자를 모두 필수 값으로 간주한다. 함수의 매개변수를 설정하면 undefined나 null이라도 인자로 넘겨야 한다. 컴파일러에서 정의된 매개변수 값이 넘어왔는지 확인한다. 정의된 매개변수 값만 받을 수 있고, 추가 인자는 받을 수 없다. function sum(a: number, b: number): number { return a + b; } sum(10,..

1. type 지정하기 //TypeScript let name : string = 'kim'; let age : number = 25; let photos : string[] = ['photo1', 'photo2']; let numbers : number[] = [1,2,3]; let infos : { age : number } = { age : 20 } array의 경우 array에 무엇이 들어가는지 지정해주어야 한다. object의 경우 좌항과 우항을 동일하게 지정해준다. 2. interface로 병합하기 //javaScript 오브젝트 선언 방식은 (변수명 : 값) 형식이므로 아래처럼 지정함 let project: { member : string[], days: number, started: boo..

1. Union Type 유니온 타입은 자바스크립트의 OR연산자( || )와 같이 A이거나 B이다. 라는 의미의 타입이다. function name(text: string | number | boolean ) { // } 2. any Type type을 바꿔도 에러가 나지 않는다. (오류가 났을 경우 버그 추적이 어렵다 사용에 유의해야 한다!!) type을 number로 지정했을때 오류메시지가 나지만, any로 지정했을경우에는 오류메시지가 나오지 않는다. 3. unknown Type (typeScript 3.0에서 도입됨) any와 동일하게 모든 타입을 넣을 수 있다. (단 unknown 으로 지정시 오류를 확인할 수 있음)

1. TypeScript를 사용해야 하는 이유는 무엇인가? //javaScript function sum (a, b) { return a + b; } sum('x', 'y'); //typeScript function sum (a: number, b: number) { return a + b; } sum('x', 'y'); javaScript는 타입에 관대한 편이다. 5 + '3' 이라고 해도 알아서 parseInt라는 기능이 있어서 5+3으로 연산을 해준다. (자바스크립트는 Dynamic typing 을 지원하는 언어라고 한다.) 1-1. TypeScript는 정적타입을 지원한다. (즉, type 지정후에 변경이 불가능하다. )컴파일단계에서 오류를 포착할 수 있다. (또한, ts는 오류를 명확하게 알려줘..

강의 듣다가 break와 retrun 중 어떤것을 사용해야 하는지 의문점이 생겼다. break문 하나의 반복문을 탈출해서 다음에 있어야 할 기능을 실행한다. break문 종료 후 반복문을 벗어나 '이름찾기 종료'라는 콘솔이 찍힌다. return문 하나의 함수에서 탈출해서 종료시킨다. 함수 밖으로 빠져나갔기 때문에 '이름찾기 종료'라는 콘솔이 찍히지 않음 continue문 반복문 내에서 작업을 건너뛸 때 사용 10까지 반복하되 짝수에 해당하는 if문은 건너뛴다.

See the Pen 모달창 by limhaneul2244 (@limhaneul2244) on CodePen. 함수를 활용해 동일한 기능을 빼보도록 하자. //방법1 : 개별 class지정해서 함수를 별도로 뺀다. $('.footerTop .first').on('click', function () { popUp('#popUpPrivate'); }); $('.footerTop .last').on('click', function () { popUp('#popUpEmail'); }); //방법2 : 클릭한 값을 받아 if문으로 조건에 따라 달리함 $('.footerTop a').on('click', function () { let val = $(this).attr('class'); if( val === 'fi..