javascript
-
[TIL] Day 27. 무한 스크롤 기능 구현하기(in React)IT 지식 2020. 10. 24. 17:21
요즘 인스타를 포함해서 많은 사이트 등에서 활용하고 있는 무한 스크롤 기능을 구현해보는 시간을 가지도록 하겠습니다. 제가 진행하고 있는 프로젝트의 메인 페이지에서 적극 활용하고 있는 기능인데요, 그 원리가 생각보다 쉬워서 어렵지 않게 구현하실 수 있으실 겁니다. 무한 스크롤 무한 스크롤 기능을 사용하는 이유는 서버에서 보여줘야 하는 데이터의 양은 방대한데, 이를 한꺼번에 화면에 띄워주려 한다면 페이지 로딩도 오래 걸리고, 사용자의 입장에서도 원하는 데이터를 쉽게 찾기 어렵기 때문에, 특정 이벤트가 발동 될 때에만 소량의 데이터를 보여주기 위해 활용하는 것입니다. step. 1 데이터 가져오기 무한 스크롤의 가장 기본이 되는 단계는 그만큼의 데이터를 가져오겠다는 신호를 보내는 것입니다. 데이터의 양이 부족..
-
[TIL]Day 26. 간단한 js 내장 객체 : math (feat. code kata)IT 지식 2020. 10. 16. 11:15
오늘은 자바스크립트에서 지원하는 내장 객체인 Math와 그 메소드들에 대해 알아보도록 하겠습니다. 1. Math 더보기 Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다. Math는 Number 자료형만 지원하며 BigInt와는 사용할 수 없습니다(from MDN). Math는 자바스크립트에서 기본적으로 지원해주는 표준 내장객체입니다. Math 를 활용하여 길게 표현해야 하는 문법들을 보다 간단하게 줄일 수 있다는 장점이 있습니다. 그 활용도는 코딩테스트와 같은 알고리즘 문제 풀이에서도 활용될 수 있지만, 물리법칙을 활용한 알고리즘이 필요한 영역에서도 사용할 수 있습니다. 자바스크립트 응용 어플리케이션을 만들 때 유용하게 활용할 수 있다는 뜻이 되겠네요...
-
[TIL]Day 25. map, sort, slice 에 관하여 (in javascript, feat.code kata)IT 지식 2020. 10. 15. 11:46
오늘의 포스팅은 자바스크립트에서 많이 사용하는 메소드인 map, sort, slice 에 관하여 알아보도록 하겠습니다. (map은 어제도 정리하긴 했지만 오늘 다시 보니 새로워서 한 번 더 정리하려고 합니다.) 1. map 더보기 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다(from. MDN). const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] //(from MDN) map 메소드는 배열내의 인자를 반복하여 새로운 ..
-
[TIL]Day 24. map, reduce 메소드에 관하여 in javascriptIT 지식 2020. 10. 13. 17:47
오늘은 자바스크립트 메소드 중 활용도가 매우 높다고 하는 map과 reduce 메소드에 대해 알아보도록 하겠습니다. 1. map map 메소드는 MDN 문서에는 다음과 같이 정의하고 있습니다. 더보기 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. map메소드는 다음과 같이 사용합니다. arr.map((요소, 인덱스, 배열) => { return 요소}); map은 반복문을 돌며 배열 안의 요소들을 1 대 1로 짝지어 주는 역할을 합니다. 그 요소들을 어떻게 짝지어줄 것인가에 대해서는 함수로 정의할 수 있습니다. 이때 특이한 점은 map 메소드의 return 값으로 나온 배열은 기존의 배열과는 다른 새로운 배열이라는 것입니다. 단, 배열..
-
[TIL]Day 22. Code Kata 내용 정리(201006)IT 지식 2020. 10. 6. 11:25
이번 포스팅은 Code Kate에 대한 내용을 정리해보도록 하겠습니다. * 문제 reverse 함수에 정수인 숫자를 인자로 받습니다. 그 숫자를 뒤집어서 return해주세요. x: 숫자 return: 뒤집어진 숫자를 반환! 예를 들어, x: 1234 return: 4321 x: -1234 return: -4321 x: 1230 return: 321 더보기 해결책: Number형태의 자료형은 그 단일 문자를 split 할 수 없기 때문에, 우선 각각의 숫자들을 구분하기 위해 string 자료형으로 바꿔줘야 합니다. 그 후 string화 된 자료형을 split 메소드를 이용하여 각각의 구분된 배열로 바꾼 후 -> reverse 메소드를 이용하여 배열의 순서를 바꾸고 -> join 메소드를 이용하여 각각의 문..
-
[TIL]Day 21. for/in 을 사용하면 안되는 이유!!!(in JS)IT 지식 2020. 10. 5. 13:12
오늘은 wecode에서 code kata를 하고 나서 알게 된 for/in 문의 사용법에 대해 포스팅하도록 하겠습니다. 1. 문제의 시작 ----------------------------------------------------------------------------------------------------------------------------------- 더보기 * 문제 twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요. nums: 숫자 배열 target: 두 수를 더해서 나올 수 있는 합계 return: 두 수의 index를 가진 숫자 배열 예를 들어, nums은 [4, 9, 11, 14] target은..
-
[TIL]Day 17. addEventListener 에 대해IT 지식 2020. 9. 23. 19:30
자바스크립트의 활용성이 커짐에 따라 웹에서는 다양한 이벤트를 발생시킬 수 있게 되었습니다. 이러한 이벤트의 발전은 웹 개발을 프론트엔드와 백엔드를 분화시키는데 큰 기여를 하게 되었습니다. 오늘은 자바스크립트의 기능 중 이벤트를 달 때 사용하는 함수인 addEventListener에 대해 알아보도록 하겠습니다. 1. addEventListener란? addEventListener는 앞서 말씀드렸다시피 이벤트를 달때 사용하는 함수입니다. 이 단어를 직역하자면, '이벤트를 듣고 있는 함수를 더해주겠다.'는 의미가 되죠. addEventListener는 개발자가 정한 특정 이벤트를 주시하고 있다가 그 이벤트가 발생할 때 인자로 받은 함수를 실행시켜줍니다. 예시를 들어보면 다음과 같습니다. 요소.addEventL..
-
[TIL]Day 16. HTTP와 DOM의 개념IT 지식 2020. 9. 22. 19:50
이번 포스팅은 http와 DOM의 개념에 대해 알아보도록 하겠습니다. 1. http 1) http의 뜻 http의 단어를 뜯어보면 다음과 같다. 더보기 ht: hyper-text t: transfer p: protocol hyper-text라는 뜻은 문서와 문서가 링크로 연결된다는 뜻입니다. transfer는 전송한다라는 뜻을 가지고 있죠. protocol은 규약이라는 뜻입니다. 즉, 직역하자면 '문서와 문서가 링크로 연결된 묶음들을 서로 전송하는 규약'이라고 할 수 있습니다. 2) http의 두 가지 특징 (1) Request / Response (요청 / 응답) http 통신의 핵심은 요청과 응답입니다. 통신을 한다는 것은 누군가가 메세지를 보내고 또 다른 누군가가 그 메세지를 받는다는 뜻이죠. 다시..