전체 글
-
[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("불필요한 파라미터가 입력되었습니다.");..
-
[Javascript] sort , filter 간단예제JavaScript 2022. 7. 20. 23:25
javascript를 사용하다보면 종종 array의 값을 정렬하거나, 솎아내야 하는 경우가 있는데, 이때 sort()나 filter()를 사용하면 편리하게 원하는 값을 얻을 수 있다. 예시 let array = [2, 4, 10, 9]; // 오름차순 array.sort(function(a, b){ return a - b; //앞값 - 뒷값 .. 결과가 0보다 크냐 같냐 작냐로 위치를 결정함 }); console.log("sorted arr: "+array); // sorted arr: 2,4,9,10 //내림차순 정렬 array.sort(function(a, b){ return b - a; //뒷값 - 앞값 .. 결과가 0보다 크냐 같냐 작냐로 위치를 결정함 }) console.log("desc sor..
-
[JavaScript] 오브젝트 배열 (Array of objects) 에서 원하는 값 가져오기JavaScript 2022. 5. 24. 23:52
위와 같은 객체 tweets 가 있다. tweets는 두개의 Object를 담고 있는데, 여기서 내가 찾고자 하는 이름을 가진 Object의 메세지를 찾는 function을 만들어 보고자 한다. 먼저 tweets 에서 메세지를 찾아줄 function을 하나 만들었다. 입력받은 이름을 우선 typeof로 타입체크를 해주고, string일 때만 tweets 객체에서 author 내부의 firstName과 lastName을 조회해서 결과가 있으면 "firstName lastname" 인 author 와 해당 object 의 message를 가지고 리턴한다. 결과가 없으면 "UnKnown : not found"를 리턴한다. getTweetMessage에 "sam" 과 "kim" 을 넣어보면 위와 같이 출력되는 ..