javascript 검색 결과

해당 글 29건

[JavaScript] promise, callback 지옥 없애기

[JavaScript] Promise로 callback 지옥 무찌르자 promise는 JavaScript에서 비동기 작업을 수행하는 객체입니다. promise를 학습하고 callback 지옥을 탈출해봅시다. Promise ◆ mini Promise 3가지 상태 Promise 3가지 상태가 있습니다. 1. 대기 (Pending) : 초기 상태 2. 이행 (Fulfilled) : 성공 3. 거부 (Rejected) : 실패 대기에서 연산이 시작되면 이행이 되거나 거부가 됩니다. 즉 pending -> fulfilled or rejected 로 이해하시면 됩니다. 이제 각각의 상태를 한번 만들어봅시다. 상태를 만들어 보기 전 promise는 아래와 같이 사용됩니다. new Promise((resolve, re..
공유/JavaScript, TypeScript 2022. 2. 24. 20:06

[JavaScript] callback과 callback 지옥

[JavaScript] callback과 callback 지옥 개발하다 보면 한번쯤은 callback 지옥을 경험하게 됩니다. 이때 불편함을 느끼고 많은 개발자들이 promise, async, await을 학습하여 callback 지옥을 벗어납니다 지옥을 벗어나기 전 이번 게시글에서는 callback 함수가 무엇인지? callback 지옥이 무엇인지? 한번 알아보도록 하겠습니다. callback callback, callback이라고 하는데 callback 함수가 무엇일까? callback 함수란 특정 동작을 하고 난 뒤에 추가로 동작할 함수이다. 어떤 동작이 작동한 후에 이것을 실행해줘하고 등록된 함수라고 하는 것이 더 이해하기 쉬울 것 같다. 예를들어 밥 먹은 뒤 설거지 해 라고 한다면 설거지 하는 ..
공유/JavaScript, TypeScript 2022. 2. 17. 06:02

[JavaScript] map, filter, reduce / 반복 후 새로운 배열 반환

[JavaScript] map, filter, reduce / 반복 후 새로운 배열 반환 이전 게시글 에서 for, for...in, for...of, forEach에 대해 알아보았습니다. 앞 4개의 구문은 반복만 하고 끝입니다. 새로운 배열을 만들고 싶은 경우 빈 배열을 생성하여 추가해주어야 합니다. 만약 반복을 다 한 후 새로운 배열을 만들고 어떻게 할까요? 앞서 말한대로 빈 배열에 추가하여도 되지만 map, filter, reduce 를 사용해도 됩니다. 한번 알아봅시다. (아래 예시들은 설명을 위한 예시이므로 참고만 하시면 됩니다.) map arr.map(callback(currentValue[, index[, array]])[, thisArg]) map 함수는 위와 같이 생겼습니다. 배열에 사용..
공유/JavaScript, TypeScript 2022. 1. 19. 19:41

[JavaScript] for, for in, for of, forEach 반복문

[JavaScript] for, for in, for of, forEach 반복문 언어와 상관없이 대표적으로 많이 사용되는 반복문이 while, do-while, for 구문이 있습니다. JavaScript 또한 위 3가지 반복문을 모두 가지고 있습니다. 그 중 for문에 대해 더 자세히 알아보겠습니다. ◆ for 문 for문 같은 경우 당연히 잘 알고 있을 것이라 예상됩니다. for ([initialization]; [condition]; [final-expression]) statement 위와 같이 생겼습니다. 아래 코드를 확인해봅시다. for(let i = 0 ; i < 5 ; i++) { console.log(i); if(...) { break; } } 아마 대부분 for문을 위와 같이 사용할 ..
공유/JavaScript, TypeScript 2022. 1. 17. 07:31

[JavaScript] var, let, const 차이, hosting, TDZ

[JavaScript] var, let, const 차이, hosting, TDZ JavaScript를 최근에 배우신 분들은 var를 모를 것입니다. 제가 처음 배울 때만 해도 var는 쓰지 말고 let, const만 써라 라고 배웠습니다. 왜 var는 사용하지 말라고 하는 것일까요? 사용하지 말라고 하는 사람들은 왜 쓰지 말아야 하는 것을 알고 있을까요? 아마 모르는 사람들이 많을 것으로 예상됩니다. 사실 사용하면 안되는 것은 아닙니다. 정확히 모르고 사용하면 예기치 못 한 문제가 발생할 수 있기 때문에 그걸 사전에 차단하기 위해 사용하지 말라는 것이죠. 이번 게시글에서는 var, let, const의 차이와 hosting, TDZ (temporal dead zone)에 대해 알아보겠습니다. var, ..
공유/JavaScript, TypeScript 2022. 1. 7. 05:44

[JavaScript] call, apply, bind - this 친구들

[JavaScript] call, apply, bind - this 친구들 이전 게시글에서 this를 알아보았습니다. this를 학습한 후 all, apply, bind 까지 공부해두면 좋을 것 같아서 정리해보았습니다. 참고로 bind의 경우 저번 게시글에서 다루어 셜명이 매우 간단합니다. 더 자세한 내용은 이전 게시글을 참고해주세요. 이전 게시글 call, apply, bind ■ call call에 대해 먼저 알아보겠습니다. func.call(thisArg[, arg1[, arg2[, ...]]]) call 함수는 위와 같이 생겼습니다. call 함수가 하는 역할은 this를 내가 원하는 것으로 지정하는 것입니다. thisArg에 this로 지정하고 싶은 값을 넘기면 됩니다. 추가적인 매개변수를 넘기..
공유/JavaScript, TypeScript 2022. 1. 5. 05:39

[JavaScript] What is this? this가 뭐야...

[JavaScript] What is this? this 많은 언어에서 this가 사용된다. 그러나 JavaScript에서의 this는 조금 특이한 점이 있다. mdn 문서를 확인해보자. 함수를 호출하는 방법에 따라 this가 달라진다고 되어 있다. 그리고 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정하려면 bind를 사용해야 한다고 한다. 이것들이 무슨 말일까? 한번 알아보도록 하자. this JavaScript에서의 this는 누가 나를 호출했는 지이다. 아래 코드를 확인해보자. const obj = { display: function () { console.log("What is this", this); } }; obj.display(); 위 결과 값은 어떻게 나올까? 한번 예상해보자...
공유/JavaScript, TypeScript 2022. 1. 3. 05:45

[JavaScript] JS 기본, 비동기? 싱글 스레드?

[JavaScript] JavaScript 기본 동작 JavaScript가 웹에서 동작하는 아주 기본적인 개념에 대해 간단하게 알아보겠습니다. JavaScript의 특징은 single thread 싱글 스레드라는 것입니다. 즉 1번에 1개의 동작 밖에 하지 못 합니다. 그런데 JavaScript 개발자라면 누구나 비동기 작업을 해본 경험이 있을 것입니다. Single thread? 비동기? 뭔가 같이 있으면 안될 것 같은 단어 2개가 JavaScript 특징으로 많이 소개 되고 있습니다. 필자는 JavaScript는 비동기로 동작한다는 사실을 알고 궁금한 내용이 있었습니다. 어떨 때 비동기로 동작하고 어떨 땐 동기로 동작할까? console.log("hi 1") console.log("hi 2") con..
공유/JavaScript, TypeScript 2022. 1. 1. 11:14

2021년 개발 회고록

[회고록] 2021년 개발 회고록 2021년 나의 개발 스토리는 나름 다사다난했다. 이것저것 해보려고 했지만 정확히 끝낸 것이 없었던 것 같다. 그래도 쓸모 없는 시도는 없다고 하였나 ... 여러 시도를 해본 끝에 내가 부족한 것을 깨달았다. (JavaScript의 개념, CSS 등) 내년에는 내가 부족한 것을 채워나가고 가꾸어 나가는 해가 되도록 노력해야겠다. ■ 잘했던 점 여러 시도를 해보았음. 부족하지만 상용중인 사이트가 있음. 이동하기 여러 시도를 해본 끝에 내가 무엇을 모르는 지 이해했음. (JavaScript, CSS 더 공부하자) 디버깅 실력이 증가함 (회사에서 문제를 찾을 때, 이전보다 확실히 찾는 속도나 방향성이 좋아짐) 내년에 무엇을 어떻게 공부해야 하겠다는 것을 깨달음 네이버 지식in..
회고/회고록 2021. 12. 27. 18:53

[JavaScript] 소수점 사칙연산 처리하기 - 3

[JavaScript] 소수점 사칙연산 처리하기 - 3 소수점 사칙연산 처리하기 - 1에서 마지막에 확인한 2.3 - 1.22 가 잘 되지 않았다. 왜 그럴까? 확인해보니 2.3 * 100 이 잘 되지 않았다. 2.3 * 100의 결과가 230이 나와야 하는데 229.9~로 나왔다. 이놈의 부동소수점이 골칫덩어리다. 그럼 어떻게 해결할 수 있을까. 고민하다가 String으로 변환하여 소수점을 없애고 계산하면 될 것 같아 시도해보았다. 아래 함수를 확인해보자. # 소수점 없애기 필자는 소수점 2째자리까지만 표현이 가능한 기능을 개발 중이라 소수점 3째자리부터는 n자리인지 확인하는 규칙을 넣어주는 게 더 좋은 방법일 것 같다. 구현한 함수는 아래와 같다. const removeDecimalPoint = nu..
공유/JavaScript, TypeScript 2021. 11. 23. 19:34