본문 바로가기

Programming

 (467)
3. Front-end Javascript (1) - AJAX [2/2] 앞선 아티클에서 HTML의 스크립트 태그에 axios.get을 사용해서 GET 요청을 보내는 예제를 살펴보았습니다. 프로미스를 충분히 학습하셨다면, 위 axios.get 내부에 new Promise가 선언되었다는 사실을 기억하실 겁니다. 프로미스는 중요한 개념이기 때문에, 이 then과 catch 사용과 관련해 기본 형식을 다시 한번 짚고 넘어가겠습니다. 2. Javascript ES2015 (6) - 프로미스 [1/5] 당연한 이야기이지만, Javascript와 Node에서는 비동기를 주로 사용하게 되고, 이벤트 리스너에서 콜백 함수에 대한 정의를 자주 쓰게 됩니다. 그러나, 이 콜백 함수들의 사용은 꽤나 코드를 복잡하 nozeroslope.tistory.com const condition = true..
3. Front-end Javascript (1) - AJAX [1/2] 지금부터는 프런트엔드, 즉 HTML의 script 태그 내에서 사용하게 되는 기능들에 대해서 몇 가지 살펴보도록 하겠습니다. 물론 지금 다루는 내용들이 다소 심화된 내용이므로 현 단계에서 즉시 이해가 되지 않을 가능성이 많습니다. 그러므로 차근차근 읽어나간 다음, 반복해서 살펴보시기 바랍니다. 우선 AJAX에 대해서 먼저 살펴보겠습니다. AJAX(Asynchronous Javascript And XML)는 비동기적 서비스 개발 시 사용되는 기법입니다. 간단히 정의만 얘기하자면 이는 페이지의 이동 없이 서버에 요청을 보내고 받는 기술을 의미합니다. 웹 사이트에서 페이지의 전환 없이 새로운 데이터를 불러오는 경우, 대부분 AJAX를 사용하고 있다고 보시면 됩니다. 일단 이 AJAX요청은 jQuery, axi..
2. Javascript ES2015 (9) - 널 병합/옵셔널 체이닝 [2/2] 앞선 아티클에서 널 병합(nullish coalescing)에 대해서 살펴보았습니다. 이제 이어서 옵셔널 체이닝(optional chaining)에 대해서도 살펴보겠습니다. ○ 옵셔널 체이닝(optional chaining) 기본적으로 옵셔널 체이닝의 적용 양식은 [ .? ]입니다. 이 형태가 지금은 금방 이해가 가지 않으실텐데, 단락을 읽어나가면 충분히 이해가 가실 겁니다. 옵셔널 체이닝의 용도는, 우리가 어떤 객체의 프로퍼티를 조회하는 경우가 있을텐데 이 때 일반적인 객체가 아닌 null이나 undefined의 프로퍼티를 조회하려고 시도하는 경우의 에러 발생을 대비하기 위한 예외처리를 위함입니다. 자, 아래 예제를 하나씩 살펴보도록 하겠습니다. const a = {}; a.b; const c = nu..
2. Javascript ES2015 (9) - 널 병합/옵셔널 체이닝 [1/2] 널 병합과 옵셔널 체이닝 문법은 ES2020에서 추가된 연산자입니다. 간단하면서도 유용한 문법들이니, 차근차근 살펴보겠습니다. ○ 널 병합(nullish coalescing) 널 병합은 우선 [ ?? ]으로 나타냅니다. 물음표 두 개라니, 다소 뜬금없는 문법인 듯합니다. 하지만 이것이 무엇을 대체하는지 알게 되면 금세 감이 잡히게 됩니다. 바로 [ || ]과 비슷한 동작을 취하죠. 그럼 Javascript에서 [ || ]가 어떻게 동작하는지부터 간단하게 짚어보고 넘어가겠습니다. 예를 들어 아래와 같은 경우가 있다고 가정해 봅시다. const a= 0; const b = a || 3; console.log(b); 자, 위와 같은 코드에서 b를 출력하면 어떤 값이 나올까요? 답은 바로 [ 3 ] 입니다. 그..
2. Javascript ES2015 (8) - Map/Set ES2015에서 추가된 새로운 자료구조들 중, 자주 사용될만한 것은 Map, 그리고 Set입니다. 이미 JAVA에서도 Map과 Set을 다룬 적이 있기 때문에, 기본적인 개념은 각각의 아티클을 참고하는 것도 좋을 것 같습니다. 컬렉션 프레임워크(4) - Map 컬렉션 1 : Map의 개념[1/2] 이번에는 Map 컬렉션에 대해서 살펴보겠습니다. Map 컬렉션은 키(key)와 값(value)으로 구성된 Entry 객체를 저장하는 구조입니다. 중요한 특성 중 하나는, key는 중복 저장할 수 없으며 value는 중복 저 nozeroslope.tistory.com 컬렉션 프레임워크(3) - Set 컬렉션 1 : Set의 개념 List와 차별화되는 Set 컬렉션의 가장 큰 특징은, 수학의 집합과 유사한 성질을 ..
2. Javascript ES2015 (7) - async/awiat [2/2] 앞선 아티클에서 살펴보았던 async/await 코드 예제를 조금 더 응용해 보겠습니다. async function findAndSaveUser(Useres) { try { let user = await Useres.findOne({}); user.name = 'zero'; user = await user.save(); user = await Useres.findOne({ gender: 'm' }); // 생략 } catch (error) { console.log(error); } } 위 코드에서 화살표 함수를 동일하게 적용하여 async와 같이 사용할수도 있습니다. 같은 코드에 화살표 함수를 적용해 보겠습니다. const findAndSaveUser = async (Users) => { try { le..
2. Javascript ES2015 (7) - async/awiat [1/2] async/await는 노드 7.6 버전부터(ES2017) 추가된 기능입니다. 노드와 같이 비동기 중심의 코드를 작성하는 데 있어서 코드를 간소화하는데 큰 도움을 주는 문법이죠. 우선은 기본적으로 프로미스를 이해하고 있어야 합니다. async/await는 근본적으로 프로미스 문법을 간소화시켜주는 기능을 갖고 있기 때문입니다. 기본 콜백 지옥을 프로미스로 간소화하였지만, 앞선 아티클들에서 살펴보았듯이 then과 catch가 여전히 장황하게 반복됩니다. 앞서 살펴보았던 findAndSaveUser( ) 예제를 통해서 알아보겠습니다. 2. Javascript ES2015 (6) - 프로미스 [4/5] 앞선 아티클에서 우리는 3개의 뎁스를 가진 콜백 함수 예제를 살펴보았습니다. function findAndSa..
2. Javascript ES2015 (6) - 프로미스 [5/5] 앞선 아티클까지 우리는 프로미스 여러 개를 순차적으로 실행하는 방법까지 살펴보았습니다. 그런데, 순차적인 실행뿐만 아니라 여러 개를 한 번에 실행할 수 있는 방법도 존재합니다. 지금부터 그 방법을 하나씩 살펴보겠습니다. ○ Promise.all과 Promise.resolve / Promise.reject 아래 코드를 보겠습니다. Promise.all을 이용해서 여러개의 프로미스를 한 번에 실행하는 예제입니다. const promise1 = Promise.resolve('SUCCESS 1'); const promise2 = Promise.resolve('SUCCESS 2'); Promise.all( [promise1, promise2] ) .then( (result) => { console.log(resu..

티스토리툴바