Front-End
-
[React.js] Event Handling(이벤트 처리)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 15. 06:25
React에서 컴포넌트를 만들면서, 다양한 이벤트와 연계해야되는 경우가 많이 발생한다. (클릭, input change 등) 특히, 이번 3차 프로젝트를 하면서, Navbar 메뉴들의 마우스 오버가 바뀔때마다 표현되는 서브메뉴가 달라지도록 만들어야했고, 여기에 하강 애니메이션까지 추가되야했다. 이를 구현하기 위해, React의 mouse 이벤트 종류와 차이점을 제대로 공부하는 기회가 되었고, 이벤트에 관한 포스팅 필요성을 느꼈다. 📒 이벤트 처리하기 React 요소의 이벤트 핸들링은 DOM에 대한 이벤트 핸들링과 매우 유사하다. 하지만, 아래와 같은 차이점은 있다. 이벤트 명을 소문자가 아닌 cammelCase로 작성한다. onclick(x) => onClick(o) 이벤트 핸들러를 문자열이 아닌 함수로..
-
[Javascript] 객체의 복사 (깊은 복사, 얕은 복사)Front-End(Web)/Javascript 2021. 3. 12. 17:43
🤔 서론 알고리즘을 풀거나, 웹페이지에서 배열상태를 최신화할때 경험했던 일이다. "나는 사본을 수정했는데, 왜 원본도 같이 바뀌지???" 자바스크립트에서 배열이나 객체를 복사하는데 다양한 방법이 있으며, 이들은 조금씩 다른 원리를 가지고 있던 것이다! 📒 복사 복사는 원본가 모두 같은 내용으로 사본을 만드는 작업이다. 원본과 사본이 각각 존재하며, 이들의 관계에 따라 복사종류를 구분할 수 있다. - 얕은 복사 사본을 만들어내지 않고 원본을 참조하도록 소위 "복사한 척" 을 하는 것이다. 1. 참조 할당 const arr1 = [1,2]; const arr2 = arr1; arr2[0] = 3; console.log(arr1[0], arr2[0]);// 3 3 가장 기본적인 형태이다. arr2 변수에 ar..
-
[React.js] Custom Hooks (Rules of Hooks)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 11. 05:09
이전에, 미니 프로젝트나 다른 함수형 코드들을 참고하다보면, useOOOO 형태의 몰랐던 Hooks 들이 가끔 보일 때가 있다. 이는, React에서 제공하는 Hooks API가 아닌, 개발자가 임의로 만든 Custom Hook 이라는 사실을 알게 되었다. 이 Custom Hook 의 개념과 의의(주는 반복의 최소화), 각종 사례를 공부하고, 3차 프로젝트가 스프린트보다 빨리 끝나게 되어 일부 반복기능을 커스텀 훅으로 수정해보려고 한다! 📒 Custom Hooks 소개 - Custom Hooks 를 왜 사용하는가? React의 Hooks 개념은 16.8버전(2019년 초) 에서 새로 추가되었다. 함수형 컴포넌트가 클래스형을 대체하도록 많은 기능을 지원하기 위해 등장했으며 아래와 같은 장점들을 뽐내며 소위..
-
[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 문서에서, 항상 요소를 가르킨다. (모든 비어있지..
-
[Typescript] Class(클래스)카테고리 없음 2021. 2. 24. 04:25
😏 서론 Javascript 클래스를 복습하는 포스팅을 통해 공부했을 뿐만 아니라, 프로토타입 개념을 별도로 정리하면서 자바스크립트만의 클래스를 나름대로 이해하게 된 계기였다. Typescript 역시 ES6에서 도입된 Class 문법을 활용 가능하며, 좀 더 강력한 지원이 가능하다고 한다. 양이 많은 만큼 긴 포스팅이 될 것 같다!!!! 🤯🤯🤯🤯 💙 Class 란? Javascript 와 마찬가지로, 클래스 형식을 직관적으로 작성 가능한 Syntactic Sugar 이다. 기본적인 자바스크립트의 클래스 정의 및 사용법은 아래와 같다. /* 클래스 정의 */ class Book { /* 생성자(필드 초기화) */ constructor(title, author, pages) {// 프로퍼티(클래스 변수) ..
-
[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] 함수(Function)카테고리 없음 2021. 2. 23. 20:19
Typescript는 Javascript의 수퍼셋인 만큼, 클래스 / 모듈 / 네임스페이스 못지 않게 함수의 기능적 역할이 중요하다. Typescript는 표준 Javascript 함수가 수월하게 작업하도록 다양한 기능을 지원한다고 한다. 가이드북과 유튜브 강의를 통해, Typescript 함수 활용에 대한 내용들을 공부하고 정리해보았다. 💙함수 타입 (Function Type) 아래 예제처럼, 타입스크립트에서는 함수에 대한 타입선언을 진행한다. 매개변수, 반환값 2가지에 대해서 시행한다. 첫 번째 방법은, 각 요소에 대한 타이핑이며, 두 번째 방법은, 함수 타입을 작성하여 함수변수(myAdd)에 지정하는 것이다. function add(x, y) { return x + y; } // 1) 함수의 타이핑..