일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- intersection opserver
- KDT 프로그래머스
- KDT 프로그래머스 데브코스 프론트엔드
- vue mixin
- 프로그래머스 프론트엔드 데브코스
- 리액트
- Spacer
- SCSS extend
- 폼 입력 바인딩
- postcss
- 프로그래머스 K_Digital Training
- Vue
- 다른컴퓨터에서 git사용
- SCSS use
- git 같은계정 다른 컴퓨터
- SCSS forward
- react next
- nextjs사용법
- vue 이벤트 수신
- SCSS import
- 쌓임맥락
- 프로그래머스 데브코스
- 이벤트 수식어
- flex
- 리스트 렌더링
- vue 지역 컴포넌트
- 프로그래머스 데브코스 프론트엔드
- netlify redirect
- 고양이 사진 검색기
- vuex map
- Today
- Total
목록Javascript (44)
혼자 적어보는 노트
주어진 x와 y값중 x값에 따라 오름차순 정렬을 하고 x의 값이 같을 경우 y값에 맞추어 정렬을 하는 방법. let arr = [ [5, 3], [3, 2], [1, 2], [1, 3], [4, 4], [3, 1] ]; arr.sort((a, b)=> { if(a[0] === b[0]) return a[1] - b[1]; else a[0] - b[0]; }) console.log(arr); // [1, 2], [1, 3], [3, 1], [3, 2], [4, 4], [5, 3]
배열의 길이가 주어진 상태에서 값을 초기화 하는 방법. 여러 방법이 있지만 그 중 간단한 2가지 방법 for문 사용 const n= 5; let arr = []; for(let i=0; i 0); console.log(arr); //[0, 0, 0, 0, 0] - 정해진 길이의 array를 해당 값으로 만들어 주는 방법.
배열의 요소들에 대해서 순서를 바꿔야 할 때가 있다. 간단한 es6문법으로 변경하다가 또 다른 방법이 무엇이 있는지 정리 해 보았다. let arr = ['black', 'red', 'blue', 'white']; 위의 배열에서 black과 blue의 위치를 바꾸어보자. 1. splice 사용 [배열명].splice([삭제위치], [삭제갯수], [추가할 항목]) splice의 return값은 삭제한 요소들의 array이다. let arr = ['black', 'red', 'blue', 'white']; let item = arr.splice(2, 1, arr[0]); arr.splice(0, 1, item[0]) console.log(arr) //['blue', 'red', 'black', 'white'..
hashmap 알고리즘 문제를 풀다가 몰랐던 개념인듯 하여 정리하였다. Map() - Map()은 javascript의 key-value로 이루어진 자료구조 형태 - key를 사용해서 value를 get, set할수 있다. - key의 값은 중복될 수 없는 고유의 값이며, 한 개의 key는 한 개의 value를 가진다. - 배열에서는 key값에 숫자만 가능하지만 Hash Table 에서는 다양한 key값 활용 가능. - key로 사용할 수 있는 데이터 형 : string, object, symbol, function (*number는 안됨) Map() 기본사용 let abc = new Map(); // set() : key와 value값을 넣어준다. abc.set("A", 10); abc.set("B",..
fetch에 대해서는 몇번 접한적이 있었고 이번에 axios를 접하게되어 이전에 접했던 fetch에 대해 다시 정리해보기로 했다. fetch() fetch()를 호출하면 브라우저는 네트워크요청을 보내서 프라미스 타입의 객체를 반환한다. fetch 기본 사용법 fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); fetch() 함수는 첫번째 인자로 URL, 두번째 인자로 옵션의 객체를 받으며 promise타입의 객체를 반환한다. url : 접근하고자 하는 URL options : 선택 매개변수, method나 header, body 등을 ..
몇번 this를 접했지만 제대로된 이해가 필요 할 것 같아 정리해보았다. method와 this 자바스크립트에서는 object의 property에 함수를 넣을 수 있다. let user = { name: "Jay", age : 28 }; user.hello = function(){ console.log("hello"); }; user.hello(); //hello user의 property에 함수를 만들어 넣고 해당 object에 할당되어있는 함수 호출이 가능하다. 이 object property에 할당된 함수를 메소드(method) 라고 한다. let user = { name: "Jay", age : 28 }; function hello(){ console.log("hello"); }; user.hel..
sort() 함수 Javascript에서 배열을 정렬하기 위해 sort()를 사용한다. arr.sort([compareFunction]) compareFuction 이 값이 생략된다면 요소들을 문자열로 변환 유니코드 순서대로 문자열을 비교하여 정렬. *숫자또한 문자열로 정렬되어 [1, 4, 6, 10, 30] 입력시 [1, 10, 30, 4, 5, 6] 이렇게 앞글자대로 정렬된다. compareFunction(a, b) - 이 반환값이 0보다 작은 경우 a가 b보다 앞으로 정렬된다. - 리턴값이 0보다 클 경우 b가 a보다 앞으로 정렬된다. - 만약 0을 리턴한다면 a와 b의 순서를 변경하지 않는다. let arr = [1, 4, 6, 10, 30]; arr.sort((a,b)=> a-b); consol..
https://lovetype-jt.netlify.app/ 처음으로 netlify를 이용해서 웹 사이트를 배포해보았다. 회원가입-로그인-파일드래그-도메인설정 끝! 질문 답변은 미완성이지만 기능 구현하는 부분에 있어서는 질문과 답변. 그리고 이미지만 있다면 다른 테스트도 진행해 볼 수 있을 것 같다. - 만들면서 새로 알게된 점 for문을 통한 클릭한 엘리먼트의 데이터 전송 주어진 데이터를 사용자의 선택에 따라 로드하는 방식 데이터를 불러오는 과정에서 더 나은 알고리즘 선택 netlify를 이용한 웹 사이트 배포 카카오 공유하기 api사용 - 개선하고 싶은 점 애니메이션 추가 : fade in/out 외에 조금더 다양한 애니메이션을 구현해보고 싶어졌다. 로딩중 페이지 작업 : 마지막 질문의 답변 선택 후 ..