본문 바로가기

전체 글

(57)
Nuxt 프로젝트 시작하기 Nuxt 설치 -> 프로젝트 생성 -> 관련 라이브러리 설치 -> 프로젝트 구동 >$ npx //설치 확인 명령어 뜨면 설치된 거임. >$ npx create-nuxt-app //넉스트 프로젝트를 생성하면 그 후 수많은 질문들이 나오는데, 나는 연습해보는 거라 거의 놉으로 설정하고 넘겼다. 이 과정에서 나오는 각 설정에 대한 질문은 공식문서에 잘 설명되어있다. 아래 링크 참고. https://ko.nuxtjs.org/guide/installation/ 설치 Nuxt.js는 시작하기 정말 쉽습니다. 간단한 프로젝트는 딱 `nuxt` 디펜던시만 있으면 됩니다. ko.nuxtjs.org 설치 끝나면 이렇게 앱으로 이동해서 실행하라고 알려준다. 프로젝트 생성이 완료된다. 폴더 구조가 뷰랑은 다르다는게 눈에 들어..
이벤트 전파 이벤트의 전파 단계 위의 그림처럼 HTML요소는 자식이 부모 위에 겹쳐진 형태로 표시된다. 따라서 자식에서 이벤트가 발생해도 컴퓨터는 자식요소를 클릭한 건지 부모를 클릭한 건지 구분하지 못하기 때문에 전체 요소를 검사하며 발생한 이벤트에 반응하는 리스너가 있는지 찾는다. 윈도우 객체 -> document -> Html -> body -> #outer -> #inner1 -> #inner2 순서로 검사가 진행된다. 1) 캡쳐링 단계 윈도우 객체에서 #inner2 즉, 타겟요소에 도달하기까지 이밴트 리스너를 찾는 단계를 캡쳐링 단계라고 한다. 이 과정에서 타겟요소에 도달하기 전에 해당 이벤트에 반응하도록 등록된 리스너가 있다면, 그 리스너가 해당 이벤트를 빼돌린다.(캡처한다) 이렇게 되면 타겟 요소는 이벤트..
마우스 이벤트 연습하기 타켓요소.addEventListener('이벤트타입', 리스너 콜백함수, 이벤트단계(useCapture)); -이벤트 타입은 on을 생략한 이름을 넣는다. ex) onclick (X) , click(O) -같은 요소에 이벤트를 여러개 등록할 수 있다. -removeEventListener메서드로 이벤트를 삭제할 수있다. ※단, 리스너로 익명함수가 등록된 경우엔 removeEventListener 메서드를 호출해서 지울 순 없고 addEventListener에 등록된 익명함수 내에서removeEventListener를 호출하고 두번째 인자로 arguments.callee를 넣어줘야 함. 본론 마우스 이벤트 종류) click - 클릭 dbclick - 더블클릭 mousedown -마우스를 클↘릭↘ 하고 누르..
Javascript 배열( 선언과 초기화 및 활용 ) 틈틈이 추가예정 1. 배열을 생성하는 방법들 let arr = Array(5); //길이가 5인 empty 배열 let arr1 = new Array(3); //new 키워드를 통해 길이가 3인 빈 배열이 생성. empty상태인 배열 let arr2 = []; 2. 2차원 배열 선언하기 const arr = new Array([1,2,3],[4,5,6]); // [[1,2,3],[4,5,6]]이 생성됨 const arr = Array(Array(7,8,9), Array(4,5,6)); const arr = [[0,1,2],[3,4,5]]; //map함수를 통해 각 요소에 또 하나의 Array를 생성해 반환한다. const arr = Array(배열길이).fill().map((v,i) => {return Array(값1,..
에러코드와 메시지를 커스텀 할 수 있다. 백엔드에서 에러 처리를 할 때, 에러코드와 메시지를 아래와 같이 커스텀해서 보낼 수 있다. if (!조건) { return res.status(403).json({ //403코드는 forbidden. 서버에서 해당 요청 거부. errorCode: 1, //위 조건에 해당하는 에러의 코드는 1로 지정 message: '조건이 맞지 않습니다.' // 에러 코드1에 해당하는 에러 메시지 설정 }); } ★ response 해줄 땐 꼭 return을 해주자. 응답이 여러 번 갈 수 있다고 한다.
비트 카운팅 알고리즘 내가 제출한 답 var countBits = function(n) { let result = []; let count = 0; while(n > 1){ result.push(n%2); n = Math.floor(n/2); } result.push(n); result.forEach((elem) => { if( elem === 1) count++; }); return count; }; 저리 간단한 걸 왜 더 어렵게 푼 것 같지. countBits = n => n.toString(2).split('0').join('').length; ---------------★문법 다시 체크----------------- 먼저, 숫자.toString(2)는 숫자를 2진수 문자열로 바꾼다. split('0')으로 문자열 안의..
인피니트 스크롤 구현 공식 *** 인피니트 스크롤 시 *** 스크롤 값 document.documentElement.scrollHeight = 스크롤의 전체 높이(스크롤 쭉 내려셔 있는 하단까지의 높이) document.documentElement.clientHeight = 현재 보고있는 화면 높이(화면에 잡히는 높이) window.scrollY = Y축 스크롤 이동 값 (내가 스크롤 얼마나 내렸는지) 즉, document.documentElement.scrollHeight - 게시물 로드할 지점의 스크롤 값
자주 사용하는 배열 메소드 -map,forEach,reduce,filter 반복 메서드는 배열의 모든 요소를 순회하면서 특정한 작업을 수행하거나, 특정 조건을 만족하는 요소를 가져올 때 사용한다. ★배열.map(function( 처리할 현재 요소, 현재 요소의 인덱스, 원본 배열){ /* 배열 요소 하나 하나에 실행할 로직 */ }); 배열 내의 모든 요소 각각에 대하여 주어진 함수 로직을 실행한 후, 그 결과를 모아 새로운 배열을 반환합니다. (map 메서드의 인수로 넘기는 함수는 무조건 결과를 반환해야 함 => return 문이 들어가야 함) callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인수를 전달받는데, 현재 요소 인덱스와 원본 배열은 옵션이다. 1 2 3 4 5 6 7 8 let array1 = [1, ..