Front-End(Web)
-
[Javascript] Infinite Scroll (Height 속성)Front-End(Web)/Javascript 2021. 3. 7. 04:51
🤔 배경 3차 프로젝트로 Nike 사이트 클론을 진행하면서, List 페이지를 연구하는테 아이템을 페이지네이션이 아닌 "인피니트 스크롤" 로 이어붙이는 로직으로 구성되어있는 것이었다. (아래는, 원본 사이트 영상) 이를 구현하기 위해서, documentElement의 높이값 속성들을 통해 조건을 적용해야했고, 이를 간단히 정리하고 넘어가고자 글을 썼다. 📒 scrollHeight / clientHeight / offsetHeight - document.documentElement 위 세 가지 Height 속성값은 우선, document.documentElement 에서 가져올 수 있는 필드들이다. documentElement는 모든 비어있지 않은 HTML 문서에서, 항상 요소를 가르킨다. (모든 비어있지..
-
[Javascript] Class(클래스) 심화Front-End(Web)/Javascript 2021. 2. 24. 04:20
클래스를 포스팅하려고 했다가, 프로토타입을 먼저 공부하고 돌아온 참이다!! 🤒🤒 처음엔 클래스를 공부하는데 '프로토타입 기반' 이란 말이 자꾸 반복되길래 혼동이 오던 참이었는데! 이제는 무언가 감을 잡은 기분이다 ㅎㅎ!! 자바스크립트의 클래스는... 클래스지만 클래스가 아니다!! (읭???) 📒 Class 기본 1. Prototype 기반 언어(프로그래밍) 자바스크립트는 프로토타입 기반 언어이다. 이는, Java와 같은 클래스 기반 언어와 결을 달리 한다는 의미이다. 둘 모두 객체 지향 프로그래밍(OOP, Object Oriented Programming) 에 목적을 둔 문법이지만 그 방법에 있어 약간의 차이가 있다. 클래스 기반은 클래스라는 개체(일종의 틀)를 만든다. 그리고, 이 틀로 객체들을 만들어..
-
[Javascript] Prototype(프로토타입)Front-End(Web)/Javascript 2021. 2. 24. 02:45
🤔 서론 프로토타입 기반 언어란 무엇일까? JS의 프로토타입 언어의 특징은 뭐가 있을까? 이를 이해해야 ES5까지 있었던 클래스 문법, 그리고 ES6에 새로 등장하게 된 클래스 문법에 대해 이해할 수 있을 것 같다. 📒 Prototype 기반 언어 Javascript는 원형 객체로 새로운 객체를 생성하는 프로토타입(원형) 기반 언어이다. 이는, C나 Java같은 클래스 기반 언어와 구분된다. - 프로토타입 기반 언어 [위키피디아] 프로토타입 기반 언어는 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하는 복제 과정을 통해 객체의 동작 방식을 재사용 할 수 있게 한다. 프로토타입 기반 언어는 원형 객체를 복제하여 새로운 객체를 생성하는 언어이다. 그런데 자바스크립트도 복..
-
[Typescript] 제네릭(Generic)Front-End(Web)/Typescript 2021. 2. 23. 19:26
우선, Generic 이라는 말부터 생소했다. '일반적인' 이라는 뜻으로, 정적타입 언어에서 이를 많이 지원한다고 한다. 클래스나 함수에서 사용할 타입을 결정하면서, 소위 '일을 어떻게 할 것인지?' 를 결정하는 문법이라고 한다. 자세히 공부해보았다! 💙 Generic 이란? '일반적인' 이라는 언어 뜻 그대로, 재활용성이 높은 컴포넌트를 구축하기 위한 문법이다. 정적언어인 C#과 Java에서는 재사용 가능한 컴포넌트를 만드는 주요 도구로 제네릭이 통용된다. - Generic 적용 // 단일 타입 function identity(arg: number): number { return arg; } // any 타입 function identity(arg: any): any { return arg; } 아래와..
-
[Typescript] 유니언과 교차 타입Front-End(Web)/Typescript 2021. 2. 23. 19:18
앞서, Enum(열거)과 리터럴 타입을 공부하면서 유니언 타입을 자주 활용하였다. 다양한 타입들을 복합하기 위한 유니언, 그리고 이와 비교되는 교차 타입에 대해서 포스팅하겠다. 💙 Union Type (유니언 타입) 앞서 얘기했듯, 유니언 타입은 새로운 형태의 타입은 아니다. 이미 존재하는 타입들을 재료로 구성하는 방법의 일종이다. 만약, 어떤 변수에 2가지 타입이 기대가 된다.(string, number) 이 땐, any보다 유니언 타입을 쓰는 것이 효과적이다. let unionPrice: number | string = 5; 이처럼, 우리가 활용하고자 하는 타입들을 파이프(|)로 연결시키기만 하면 된다. 해당 타입들 외 값을 설정하면, 에러가 발생한다. - Union Type 재활용: Type Ali..
-
[Typescript] 열거형(Enum) & Literal TypeFront-End(Web)/Typescript 2021. 2. 23. 04:06
앞서 타입을 공부하면서, 값들을 나열한 열거형(Enum)에 대해서 공부했다. 이것이 적용될 방법 중 하나가 바로 이 Literal Type인 것이다. 얼핏 보았을때, 자료형이 아닌 특정값을 직접적으로 타입으로서 설정하는 방법인 것 같다. 💙 열거형(Enums) 열거(Enum)는 비원시 타입이자, 멤버라 불리는 값의 집합을 이루는 자료형이다. enum 키워드로 선언하며, {} 안에 자료형을 나열한다. enum Fruits { Apple, Banana, Kiwi, } 열거형을 사용하는 대표적인 목적은, 특정 프로퍼티를 자료형보다는 값(혹은 값의 집합)으로 제한하고자 하는데 있다. - Enum 적용 다음 예제에서, enum(Subject)로 설정한 subject 프로퍼티를 string('Typescript')..
-
[Typescript] 인터페이스(Interface)Front-End(Web)/Typescript 2021. 2. 22. 19:12
이전 글에서부터, 타입의 커스터마이징에 대해 얘기하면서, 그리고 Type Aliase 를 공부하면서 Interface 가 종종 거론되었다. 타입의 유형화에 유리한 이 인터페이스에 대해 한번 알아보도록 하자. 💙 Interface 란? 인터페이스는 특정 자료형의 구조를 나타낸 일종의 커스텀 타입이다. 인터페이스는 Javascript같은 동적타입 언어환경에선 다뤄지지 않으나, 정적타입 언어인 Typescript는 타입검사가 요구되므로 이를 지원한다. - Interface 문법 및 적용 'interface' 키워드를 통해 제작할 수 있다. 나머지는, 변수선언 문법과 유사하다. * Interface 이름 첫 글자는 대문자로 시작하도록 한다. 다른 정적언어는 I+인터페이스명을 권장하나, 타입스크립트는 해당되지 않..
-
[Typescript] 타입(Type)Front-End(Web)/Typescript 2021. 2. 22. 18:24
타입스크립트의 가장 기본이 되는 타입(자료형)들에 대한 정리이다. 얼핏보니, 익숙한 JS 자료형들도 있고, 새로운 자료형과 (파이썬에서 본 튜플같은) 문법들이 등장한다. 차근차근 공부해보았따! 💙 타입 추론(Type Inference) 위 예시를 먼저 보자. ts파일에서, a라는 변수에 5(number)를 할당했다. 그런뒤, 이를 'five'(string) 으로 수정하려하니 에러가 발생했다. Typescript 에서는 변수타입이 명시되지 않은 경우, 타입정보를 제공하기 위해 유추를 하는데 이것이 '타입 추론' 인 것이다. 다음 예제를 보자. calculateCodingIQ() 라는 함수가 있고, 이는 lostPoints 라는 인자를 받아 뺄셈을 한 값을 반환한다. Typescript는 이 인자에 대해서도..