전체 글
-
[JavaScript] reduce, mapJavaScript 2022. 9. 3. 21:31
JavaScript에서 Array 관련 함수 중 성질이 유사한 2가지 함수를 소개하고자 한다. reduce, map 이란 함수들이 있는데, 각각 사용법이 조금씩 다르다. 1. reduce : 선언된 Array를 이용해 Array내부의 이전값과 현재값을 이용한 연산에 활용하기에 좋다. array.reduce(이전값, 현재값, 인덱스, 대상Array) 형태로 사용할 수 있으며, 대표적으로 쓰이기 좋은 곳은 이전값과 현재값을 더하거나 빼는 등의 연산이 필요한 경우에 사용하기 좋다. 2.map은 기존의 Array를 이용해 새로운 Array를 만들어야 할 떄 유용하다.
-
[JavaScript] JSON.stringify(), JSON.parse()JavaScript 2022. 8. 17. 23:00
JSON.stringify()는 object를 JSON string으로 변환시켜주는 함수이다. JSON.parse()는 JSON string을 object로 변환시켜주는 함수이다. 보통 JSON.stringify()는 fetch()나 ajax로 object데이터를 전달할 때 변환시켜줄 때 많이 사용되며 JSON.parse()는 response로 받은 string화 된 json데이터를 object로 다시 변환시켜 사용할 때 많이 쓴다. 간단한 예제를 들어 두 함수를 사용해 보았다. x:5 , y:6의 데이터를 담은 object가 있다고 가정해보자. 이 object를 JSON.stringify(obj)를 거쳐 JSON string화 하게 되면 그림과 같이 {"x":5, "y":6}인 string이 생성된다...
-
[Javascript] async await으로 순서 조작하기 (동시실행, 순차실행)JavaScript 2022. 8. 14. 10:11
Promise를 반환하는 function을 선언하고 .then() 을 통해서 순서를 조작할 수 있기는 하지만, 실제 사용에 있어 코드가 길어지고 읽기 난해해지는 부분이 있는데 이때 javascript에서 제공하는 function의 async await 옵션을 활용하면 좀 더 해석하기 편하게 순서를 조작할 수 있다. 아래 두 함수가 있다. func1()은 2초의 딜레이를 두고 다음동작을 수행하는 Promise function이고, func2()는 1초의 딜레이를 두고 다음동작을 수행하는 Promise function이다. 이와 같은 상황에서 순서를 조작하는 방식은 대략 2가지로 나눌수가 있다. - 동시에 두 Promise를 실행시키지만 종료시점을 컨트롤하는 방식 - 순차적으로 Promise를 컨트롤하는 방..
-
[JavaScript]마우스커서 커스터마이징 하기JavaScript 2022. 8. 6. 11:46
마우스커서를 원하는 모양으로 바꾸는 방법을 배웠다. 1. 에 커서 이미지를 적용시킬 div 하나를 선언한다. 2.선언한 div에 스타일을 입힌다. (style.css) 3.css를 화면에 붙이기 방금 입힌 css로 인해 화면 좌상단에 동그라미 모양이 생성되었다. (circularCursor의 스타일) 이제 이 동그라미를 마우스커서 위치에 이동시키는 이벤트를 추가하면 이 동그라미가 새로운 마우스 커서가 된다. 버튼이나 체크박스 위에서 기존 마우스 커서가 보이는 것은 따로 설정이 필요한 것으로 보이지만 어찌됐건 커서가 동그라미로 바뀌는 것을 확인할 수 있었다.
-
[JavaScript] 임의값으로 innerHTML 값 찾기 및 응용JavaScript 2022. 7. 29. 00:03
만약에 위 사진의 someVals와 같이 임의로 설정한 "1", "3", "5"를 이용하여 체크박스의 근처의 checkbox를 체크하고, checkbox의 value를 얻어보도록 한다. 기대한대로 실행이 된다면 checkbox를 체크하고 그의 value "one","three","five"를 얻어올 것이다. 예시코드 document.addEventListener('DOMContentLoaded', () => { base.event(); }); let someVals = ["1","3","5"]; //해당 값을 가진 체크박스를 체크해야한다. //찾고자 하는 의 부모 element들 : targetArr let targetArr = document.getElementsByTagName('label'); le..
-
[JavaScript] PromiseJavaScript 2022. 7. 27. 22:21
Promise라는 걸 알게되었다. 종종 코딩할 때 , 한 동작이 마무리 된 후 그 결과값으로 분기처리를 해야하는 경우가 있는데, 이 때 Promise를 활용하면 좀 더 원할한 코딩이 가능하다. Promise는 3가지 상태로 분류할 수 있는데, pending과 fulfilled, rejected로 나누어진다. pending은 최초의 동작이 끝나기까지의 대기상태. fulfilled는 첫 동작이 성공적으로 마무리된 상태. rejected는 첫 동작이 실패한 상태라고 이해하면 될 것 같다. 간단한 예시를 들어보면 const gen2Num = (param) => { return new Promise((resolve, reject) => { if(param){ reject("불필요한 파라미터가 입력되었습니다.");..