문법

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

클린 코드의 필수 enum, 자꾸 enum enum 하는데 이넘이 대체 왜? ㅋㅋ... Enum이란? enum은 열거형(enumerated type)이라고 부른다. 열거형은 서로 연관된 상수들의 집합을 의미하는데, 즉 서로 관련된 상수를 편리하게 선언하고 관리하기 위해 enum을 사용한다. Enum의 등장배경 enum이 등장하기 전까진 정수 열거 패턴을 사용했다. 하지만, 정수 열거 패턴에는 큰 문제점이 존재했다. private final int SPRING = 1; private final int SUMMER = 2; private final int FALL = 3; private final int WINTER = 4; 가독성이 떨어지며, 관리가 용이하지 않다. 정수 열거 패턴을 위한 네임스페이스 공간..

💡 HTML Semantic elements에 대해 알아보고 정리해보자! 목표 HTML 시멘틱 엘리먼트가 무엇인지 설명할 수 있다. 시멘틱 엘리먼트들 각각이 어디에서 사용되는지 설명할 수 있다. HTML5로 넘어오면서 시멘틱 엘리먼트가 추가가 되었다. HTML4와 HTML5의 차이는 아래와 같다. HTML4는 div 태그에서 id 값으로 페이지 구역을 나누는 반면, HTML5는 , , , , , , 등으로 나타낼 수 있다. 태그를 읽기만 해도 어떤 구역인지 파악이 가능해진 것이다. 구역을 나타내는 요소들 실제 화면에 보이는 내에서 페이지의 구역을 나타내는 요소들이 중첩되어 사용된다. : 웹 문서 맨 윗부분, 웹 사이트 로고 영역. ex) 로그인, 회원가입, 사이트맵, 언어 선택 등. : 현재 페이지 내 ..

Optional 클래스는 고질적인 문제인 NullpointerException를 해결하기 위해 추가되었다. import java.util.Optional; of, ofNullable로 객체 감싸기 Optional로 감싸기 위해서는 Optional에서 static 메서드로 제공하는 of 와 ofNullable 를 사용할 수 있다. - Optional.of(T value)는 인자로서 null값을 허용하지 않는다. @Test public void optional_of_with_not_null() { Optional optionalName = Optional.of("배부른코딩로그"); assertEquals("Optional[배부른코딩로그]", optionalName.toString()); } @Test pub..

함수(Funtion)는 독립적으로 존재하고 메소드(Method)는 Class에 종속적인 함수다. Funtion > Method, 즉 함수가 더 큰 개념이다. 둘 다 공통적으로 코드를 실행하는 기능의 단위는 동일하지만, Class에 종속되어 있는가 아닌가의 여부로 불리는 명칭이 다르다. 메소드를 다른 말로 '클래스 함수(Class method)'라고도 한다. - 출처 - https://zeddios.tistory.com/233 2021. 5. 29(토) TIL

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

"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는 자식 클래스입니다. 하위 집단입니다. 최상위 집단으로 '음식' 클래스가 존재합니다. '음식'에는 '고기'도 있고, '..

모든 것의 시작은 문법이다. Linux 환경의 가장 큰 벽은 편집기인 것 같습니다. 한컴 타자기로 한/영 타자를 연습했던 것 처럼 하루에 20분씩 vi 편집기 연습을 해봅시다 : ) [출처] https://kldp.org/node/102947

자바스크립트는 프로토타입 기반의 언어이죠. 클래스 기반과 비교하면 꽤나 독특한 개념으로 한번 뽀개봅시다!!! 자바스크립트는 함수형 프로그래밍 언어이자 프로토타입 기반의 언어입니다. 함수형 프로그래밍이라는 문맥은 추측이 쉽지만, 프로토타입 기반의 언어라는 것은 무슨 의미일까요? 프로토타입이라는 용어는 '상속'과 연관되어 있습니다. 클래스 기반의 언어에서는 상속은 익숙하지만, 자바스크립트에서의 '상속'을 어떻게 표현할까? 바로, 프로토타입을 사용함으로써 상속과 비슷한 효과를 얻어냅니다. 이로써, 어떤 객체를 원형(prototype)으로 삼고 이를 참조(복제)함으로써 상속처럼 사용할 수 있습니다. "new 연산자로 Constructor를 호출하면 instance가 만들어지는데, 이 instance의 생략 가능..

그 외에도 몇 가지 추가된 메서드가 존재합니다. String.trim() var str = " Hello World! "; alert(str.trim()); // "Hello World!" ES5가 워낙 오래전에 만들어졌으니, 그럴 수 있습니다 ㅎㅎ.. Trailing Commas person = { firstName: "John", lastName: " Doe", age: 46, } points = [ 1, 5, 10, 25, 40, 100, ]; 이 편안한 문법이 이때 생겼군요!! Strings Over Multiple Lines var str = "Hello \ Dolly!"; // 띄어쓰기 인식 var str2 = "Hello " + "Dolly!"; // 안전한 방법 Property Access..