본문 바로가기

전체 글100

virtual scroll 프로젝트에 virtual scroll를 적용했다. 기존에 infinity scroll이 있긴 했는데 단순히 infinity scroll을 이용하자니 DOM에 띄워두는 data 양이 많아서 렉이 걸려가지고 virtual scroll을 사용했다. virtual scroll은 현재 스크롤이 있는 위치에 존재하는 데이터만 화면에 보이게 하고 현재스크롤의 바깥에 있는 데이터들을 보이지 않도록 처리해 놓는 방법이다. 스크롤을 움직이면 그 움직인 스크롤의 위치에 있는 데이터들이 보여지고, 스크롤 바깥 부분의 데이터는 잠시 사라지는 기능을 한다. 이렇게 하면 데이터가 많아도 DOM에 올려져있는 데이터가 적어지기 때문에 DOM에 부담을 줄일 수 있다. 크롬에서 검사해보면 많은 데이터들이 -9999 영역으로 이동 되어 있.. 2020. 3. 5.
vue.js project 만들기 최대한 쉽게 vue project를 만들어볼 수 있는 방법을 적어보려고 한다. 실제 프로젝트에 그대로 적용하기엔 부족한 점이 많을 것이다. vue 입문자를 위한 test용으로 생각하자. npm(노드 패키지 매니저)를 통해서 vue-cli로 vue 프로젝트를 만들려고 한다. 먼저 npm을 사용하기 위해 node.js를 설치해야 한다. https://nodejs.org/ko/download/ 에 가서 자신의 os에 맞는 node.js를 설치하자 (난 MacOS LTS를 설치했다.) 그 다음, 설치한 node를 통해 vue-cli(command line interface)를 설치한다. 터미널에서 sudo npm install -g @vue/cli 를 입력하고 비밀번호를 입력하면 설치가 진행된다. 그 다음, v.. 2020. 3. 5.
split : 문자열 분할 함수 split은 특정 문자열을 제거하고 남은 문자열을 배열로 반환한다. split의 기본형태 str.split(separator, limit) separator는 str을 끊어야하는 부분을 나타내는 문자열 limit은 끊어진 문자열의 최대 개수를 나타내는 정수. separator와 limit 둘다 선택적으로 사용 가능하다. 다만 limit은 separator가 있을 때만 사용이 가능하다. 또한 separator는 정규표현식을 넣을 수 있다. separator에 아무것도 입력하지 않았을 경우 원래의 문자열이 배열에 담겨서 나온다. const str = 'abcdefg'; const splitedStr = str.split(); console.log(splitedStr); // ["abcdefg"] separa.. 2020. 3. 5.
forEach JS for문 처럼 배열의 반복을 하는 기능이다. 다만 index와 조건식을 따로 지정해 줄 필요가 없다. 기본 문법은 arr.forEach(callbackFunction(currentvalue, index, array), thisArg) 이다. forEach의 매개변수로 callbackFunction과 thisArg가 있다. (thisArg는 선택적으로 사용) callbackFunction의 매개변수로 value, index, array 가 있다. (index, array는 선택적으로 사용) 기본적인 사용방법은 var test = [{food : '아구찜', price : 35000}, {food : '족발', price : 25000}, {food : '닭발', price : 16000}, {food : .. 2020. 3. 4.
filter 함수 배열이나 JSON 객체에 대해 콜백함수의 조건에 해당하는 모든 요소가 있는 배열을 새로 생성하는 기능. arr.filter(callbackFunction(element [, index [, array] ] ) [, thisArg] ) filter함수는 콜백함수와, thisArg를 매개변수로 갖는다, thisArg는 선택적으로 사용하지 않을 수 있다. 콜백함수의 매개변수로 element, index, array를 사용할 수 있다. 기본적으로 반복이 된다고 생각하면 된다. element는 현재 돌고 있는 요소의 값, index는 현재 돌고 있는 요소의 인덱스, array는 filter에 사용되는 배열 객체. var test = [0,1,2,3] var newArr = test.filter(function(e.. 2020. 3. 3.
HTML 개념 web의 시작. 웹 페이지를 만드는 언어 HTML Internet : 컴퓨터와 컴퓨터를 연결하는 거대한 네트워크 인터넷 위에서 web, FTP(파일전송), email 등이 실행된다. ( 인터넷이 더 큰 개념 ) 2020. 3. 2.