자바스크립트

💡Offline 환경에서도 npm install 과 흡사하게 필요한 패키지를 다운로드 해보자. 귀찮음 주의!! 목표 오프라인 상황에서도 불굴의 의지로 필요한 패키지를 다운받을 수 있다. 조금이라도 더 편리한 방법을 기록해두자. B2C 가 아닌 B2B 혹은 B2G 서비스를 운영하는 회사는 대부분 보안이 철저하다. 인터넷 연결이 가능한 외부망과 개발 관련 서버만 접속 가능한 내부망으로 나뉠 것이다. npm 프로젝트가 존재하고 npm을 통해 필요한 패키지를 다운로드 받고자 하면 어떻게 해야할까? 보통 외부망에서 내부망으로 파일을 전송할 수 있는 통로를 하나 열어두긴 한다. 하지만... 상급자의 결제를 항상 받아야하기 때문에 상급자가 휴가이거나 자리를 비운다면 무한히 기다려야 한다. 이게 너무 번거롭고 귀찮았다..

💡 자바스크립트를 통해 어플리케이션을 개발함에 있어서 코드 품질 향상을 소홀히 하지 말자! 목표 웹 어플리케이션을 개발함에 있어서 유용한 구문들을 기록하고 정리할 수 있다. 유용한 정보를 기록하고 공유하는 공간으로 활용할 수 있다. 알아두면 좋을 구문들 JSON 유효성 검사 Open API를 통해 데이터를 받아오는 것이 자리를 잡은 만큼 요청 혹은 응답 데이터가 JSON 포맷인지 확인할 필요가 있다. const isJSON = (str) => { try { JSON.parse(str); return true; } catch (e) { return false; } }; isJSON('dad'); // false isJSON('{a: 123}'); // false isJSON(null); // true is..

💡 Console API를 "console.log"만 사용하지 말자! 목표 Console API를 다양하게 활용할 수 있다. 간단한 디버깅에 활용하기 좋은 예제를 만들 수 있다. Console API 종류 console api는 사실 다양한 메서드들로 구현되어 있다. No. Method Description 1 console.trace() console.assert() 실행 스택 추적을 출력한다. 첫 번째 매개변수가 false인 경우, 메시지와 스택 추적을 출력한다. 2 console.clear() 콘솔의 내용을 지운다. 3 console.count() console.countReset() 주어진 레이블로 메서드를 호출한 횟수를 출력한다. 주어진 라벨의 횟수를 초기화한다. 4 console.debug()..

💡 ESLint를 사용하면서 경험한 오류들을 정리해보자! 목표 ESLint가 무엇인지 설명할 수 있다. ESLint를 사용하면서 발생한 문제들을 파악하고 해결할 수 있다. ESLint 트러블슈팅 공간으로 활용할 수 있다. 트러블슈팅 Parsing error... Unexpected token '?' 샘플코드를 작성 중에 ES6 클래스를 구현할, "Parsing error: Unexpected token ;"을 경험했다. 문법적으로 오류는 없었으며 브라우져 콘솔에서 실행시켜도 정상적으로 작동했다. 위와 같은 이슈에 대한 해결 방법과 오류의 원인을 살펴보자. export default class Item extends Component { $id; // "Parsing error: Unexpected tok..

💡 알고 있으면 코드의 양이 획기적으로 줄어드는 Syntactic Sugar. 적극 활용해보자! 목표 Syntactic Sugar가 무엇을 의미하는지 설명할 수 있다. 자바스크립트에서 대표적인 Syntactic Sugar에는 무엇이 있는지 설명할 수 있다. 유용한 예제를 기록하는 공간으로 활용할 수 있다. 프로그래밍을 하다보면, 익숙하지 않은 용어가 등장하게 된다. 'Syntactic Sugar'도 그 중에 하나이다. Syntactic Sugar란, 직역하면 문법적인 설탕이라는 뜻으로 달달한 문법이라고 생각하면 된다. Candy Grammer라고도 부르기도 하며, 코드를 더 간략하고 쉽게 만들어주는 문법을 의미한다. 자바스크립트에서는 어떤 문법들이 syntactic sugar 일까? 자바스크립트의 Syn..

써보면 써볼수록 신세계를 경험하는 템플릿 리터럴. 놀라다가 숨넘어가십니다. 템플릿 리터럴은 이중 따옴표(" ") 나 홑 따옴표(' ') 대신 백틱(` `)을 사용합니다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} )로 표기할 수 있습니다. 플레이스 홀더 안에서의 표현식과 그 사이의 텍스트는 함께 함수로 전달됩니다. 1) Multi-line strings console.log("Codify Blog\n" + "놀러온 것을 환영합니다!"); console.log(`Codify Blog 놀러온 것을 환영합니다!`); /*Codify Blog 놀러온 것을 환영합니다!*/ 편하긴 하지만, 예쁜 코드를 위해 탭을 넣으면 그마저도 인식해버리..

자바스크립트의 새로운 변수 선언 방법, let 그리고 const var와 어떤 차이가 있고, let과 const는 무엇이 다른지 정리해보자. 브라우저 버전에 따라 ES6문법을 사용할 수 없는 경우가 있습니다. 물론, Babel을 사용한다면 걱정을 안 해도 되지만 새싹 개발자인 필자는 저런 놀라운 기술이 있는지 몰랐었습니다. 그래서 언제나 IE와 그리고 구식 브라우저들과의 지옥 같은 호환성을 위해 항상 var로 변수를 선언하곤 했습니다. " var도 여지껏 개발에 문제없이 사용했는데, 왜 let과 const가 생기게 되었을까? " var의 크리티컬한 문제점 1) 함수 레벨 스코프(Function-level scop) 함수 블록만을 스코프로 인정합니다. 즉, 함수 외부에 선언한 모든 변수는 전역 변수입니다...

"ES6(ECMAScript 2015)"에서 추가된 문법은 뭐가 있을까? "ES5(ECMAScript 2009)"와 차이점을 분석해봅시다! ES6의 꽃 "화살표 함수(Arrow Function)"에 대해 소개하고자 합니다 : ) 간단한 예제를 통해 살펴보시죠!!! // ES6 const func1 = (x, y) => x * y; // return on self const func2 = (x, y) => { return x * y }; // if exist {}, you have to declare 'return'!!! 위 예제와 같이 function 표현식(중괄호)에 비해 구문이 짧다는 점도 좋지만, this, arguments, super, new.target을 바인징 하지 않는다는 특징도 가지고 있..

"ES6(ECMAScript 2015)"에서 추가된 문법은 뭐가 있을까? "ES5(ECMAScript 2009)"와 차이점을 분석해봅시다! ES6에서는 함수를 정의함에 있어서 초기값을 설정할 수 있습니다. 다음 예제를 살펴보시죠. // ES6 function myFunction(x, y = 1) { return x + y; } myFunction(0); // will return 1 myFunction(0, 10); // will return 10 고정값이 아니라는 점만 고려하시면 될 것 같습니다. 해당 파라미터가 없다면 정의된 Default Value로 초기화 되고, 해당 파라미터가 있다면 Param Value로 치환됩니다. 해당 문법은 다양한 곳에서 사용할 수 있겠지만, 기가 막히다 싶을 정도의 예제..

"ES6(ECMAScript 2015)"에서 추가된 문법은 뭐가 있을까? "ES5(ECMAScript 2009)"와 차이점을 분석해봅시다! 'let' 그리고 'const' 는 ES6에서 새롭게 등장한 '변수 선언 방식'입니다. 두 방식 모두 블록('{ ... }') 단위의 생명주기를 가지고 있습니다. var x = 0; // Here x is 0 { let x = 1; // Here x is 1 } // Here x is 0 var x = 0; // Here x is 0 { const x = 1; // Here x is 1 } // Here x is 0 그렇다면, let과 const의 차이는 무엇일까요? const 변수는 상수라는 점에서 차이가 있습니다. 여기서 상수란, 변하지 않는 데이터입니다. 코드를..

"ES6(ECMAScript 2015)"에서 추가된 문법은 뭐가 있을까? "ES5(ECMAScript 2009)"와 차이점을 분석해봅시다! ES6(2015)에서 새롭게 추가된 문법들은 다음과 같습니다. # 새로운 변수 선언 (link) let const # New Global Methods isFinite() isNaN() # Number 관련 New Number Properties EPSILON (2.220446049250313e-16) MIN_SAFE_INTEGER (-9007199254740991) MAX_SAFE_INTEGER (9007199254740991) New Number Methods Number.isInteger() Number.isSafeInteger() Exponentiation O..

'상속'이라는 개념이 존재하지 않는 자바스크립트가 클래스를 어떻게 흉내내는지 파악해보자! 자바스크립트는 프로토타입 기반의 언어이기 때문에 '상속'의 개념이 존재하지 않습니다. 다만, 클래스에 대한 니즈에 따라 ES6에서 클래스 문법이 추가 되었지만, 일정 부분은 프로토타입을 여전히 활용하고 있습니다. 이 때문에 ES5 에서 클래스틑 흉내내기 위한 구현 방식을 학습할 필요가 있습니다. 그럼 클래스(Class)가 무엇일까요? 사전적으로 '집합, 집단'의 의미를 가지고 있습니다. 다음 예시를 통해 간단히 살펴보시죠. SuperClass는 부모 클래스입니다. 최상위 집단인거죠. SubClass는 자식 클래스입니다. 하위 집단입니다. 최상위 집단으로 '음식' 클래스가 존재합니다. '음식'에는 '고기'도 있고, '..