Front-End(Web)/Javascript
-
[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같은 클래스 기반 언어와 구분된다. - 프로토타입 기반 언어 [위키피디아] 프로토타입 기반 언어는 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하는 복제 과정을 통해 객체의 동작 방식을 재사용 할 수 있게 한다. 프로토타입 기반 언어는 원형 객체를 복제하여 새로운 객체를 생성하는 언어이다. 그런데 자바스크립트도 복..
-
[Javascript] 비동기 - #3. Async & AwaitFront-End(Web)/Javascript 2021. 2. 14. 19:09
프로젝트를 마무리하고, 이제서야 비동기 3탄이자 꽃인 async/await 에 대해 포스팅을 한다. async/await 은 JS의 비동기 처리를 개선하기 위해(콜백지옥), Promise 처럼 ES6 이후 문법에서 등장했으며 가장 최신의 문법이다. Promise를 다루는 .then() 에 비해 어떠한 점이 더 나아진건지 한 번 확인해보도록 하겠다! 📒 Async & Await 해당 함수를 비동기로 실행하기 위해 사용되는 함수가 바로 이 'Async Function' 이다. 당연히, 결과값은 Promise를 반환한다. Async Function의 장점 중 하나는, 코드의 구조가 일반 동기함수와 매우 유사하게 사용할 수 있다는 것이다. // Promise const getItem = () => { fetch..
-
[Javascript] 비동기 - #2. PromiseFront-End(Web)/Javascript 2021. 2. 1. 19:30
나도 그렇고, fetch()-then 이나 async/await 을 사용하면 최초에 Promise 라는 결과값이 반환되는 것을 볼 수 있었을 것이다. 또한, 자세히 보면 이 Promise는 객체(Object) 형태를 하고 있으며, 아래와 같이 어떠한 값들을 포함하고 있었다. 이 Promise는 저번에 알아본 콜백지옥을 대체한다고 했는데, 이에 대해 좀 더 자세히 공부해보았다. 📒 Promise 란? - Promise가 필요한 이유 1) 콜백지옥 저번 비동기 시간에 얘기한 콜백지옥이다. 보시다시피 가독성도 나쁠 뿐더러, 에러 발생 가능성이 높기 때문에 대안이 필요했던 것이다. 2) 에러 처리의 한계 try { setTimeout(() => { throw new Error('Error!'); }, 1000)..
-
[Javascript] 비동기 - #1. 비동기 개념과 Callback FunctionFront-End(Web)/Javascript 2021. 1. 30. 07:37
Javascript 메서드를 사용하면 인자로 받는 함수를 '콜백함수' 라고 명명하는 것을 보았을 것이다. React 작업을 하면서, fetch() 함수의 .then 혹은 async/await 등 '비동기 프로그래밍'을 자주 적용했다. 위 내용들 모두, 해당 코드를 진행함과 동시에 다음 코드로 넘어가기 위한 '비동기'의 목적이라 막연하게 알고 있었다. (컴퓨터 언어 특성상 코드는 위에서 아래로 순차적으로 실행되기 때문! - 싱글 스레드) 그렇지만, 그래서 비동기가 뭔데? 라는 질문에 저 이상으로 답을 할 수 없었고, 이번 기회에 Javascript의 비동기 관련된 동작원리를 시리즈로 정리하면서 공부하고자 포스팅을 시작하였다. 📒 비동기(Asynchronous) vs 동기(Synchronous) - 동기(S..
-
[Javascript] 2차원 배열 만들기(Array.from())Front-End(Web)/Javascript 2021. 1. 3. 16:56
미니 프로젝트를 진행하며, 100개의 정보를 10개씩 2차원 배열의 형태로 가공해야하는 문제가 있었다. 물론 이중 for문을 돌리면 심플하게 구현할 순 있지만, state로 활용했을 때 [] => 2차원 배열 업로드 전 초기화에서 문제가 있었다. (0번째 인덱스 배열을 초기값으로 쓰려고 했으나, default는 [] 1차원 배열이기에 에러 처리가 되었다.) 정답과 비교해보니, Array.from() 이라는 메서드를 활용하기도 해서 2차원 배열에 대한 고찰을 적어내려 가보고자 한다. 🧑💻 2차원 배열 만들기 1. 2중 for문 : 가장 직시적인 형태, row 및 columns 길이만큼 각각 반복하며 요소들을 push 한다. function get2DArray(r, c) { const result = []..
-
[Javascript] Iteration ProtocolFront-End(Web)/Javascript 2020. 12. 17. 20:45
🤔 서론 for 반복문을 사용하던 중, 객체에서 for - in 은 key값을 반환하지만, for - of 문에선 value 값이 반환되지 않았다. 또한, 'Uncaught TypeError: obj is not iterable' 라는 에러가 발생하는 것을 확인했다. for - of 문을 확실히 이해하려면, Iteration, Iterable, Iterator 에 관해 정리할 필요성을 느껴 별도 포스팅을 시작했다. 📒 Iteration Protocol - Iteration(반복) (ES6 추가) 이터러블 객체가 for - or문, 전개연산자(spread, ...) 등 순회동작 하도록 만든 규약을 Iteration Protocol 이라고 한다. 혹은 모든 객체를 이터러블로 만들 수 있는 규약을 의미한다. ..