Frontend/Javascript13 [Javascript] async와 await async와 await은 무엇인가요? async와 await은 JS의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다. 읽기 좋은 코드와 async, await의 상관 관계var user = { id: 1, name: 'Josh'};if (user.id === 1) { console.log(user.name); // Josh} 이 코드는 user라는 변수에 객체를 할당한 뒤 조건문으로 사용자의 아이디를 확인하고 콘솔에 사용자의 name을 찍는 간단한 코드입니다.우리는 이렇게 위에서부터 아래로 한 줄 한 줄 차근히 읽으면서 사고하는 것이 편합니다. 조금 전에 읽고 이해한 방식대.. 2024. 8. 30. [Javascript] Promise Rejected 에러 해결 팀원 소개 페이지를 개발하면서 저는 다음의 기능을 구현하고자 했습니다. 1. 로컬 PC에 있는 이미지를 웹 페이지에 업로드 시키면 이미지명을 uuid로 변환2. Firebase Blob Storage로 이미지 업로드 및 이미지 다운로드 URL 응답 받아오기3. 응답 받아온 URL을 NoSQL 데이터베이스에 Input4. 데이터베이스에서 정보를 불러와 웹에 이미지 카드 형식으로 추가 처음 HTTP, CSS, Javascript를 사용해서 프로젝트를 진행하다보니 많은 문제들에 맞닥뜨리게 됐는데 그 중에서 2가지가 에러를 해결하는데 많은 시간을 소요됐습니다. 1. Storage Download URL 메서드를 실행했을 때 Promise Rejected 발생2. try ~ catch 구문을 통한 예외 처리 이번.. 2024. 8. 30. [Javascript] Promise 객체 Promise 가 뭔가요? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체 입니다. 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같이 API를 사용합니다.$.get('url 주소/products/1', function(response) { // ...}); 하지만 JS의 비동기 처리 특성으로 인해 데이터를 받아오기 전에 마치 데이터를 다 받아온 것 마냥 화면에 오류가 발생하거나 빈 화면이 뜹니다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스 입니다. Promise 코드프로미스가 어떻게 동작하는지 이해하기 위해 예제 코드를 살펴보겠습니다.function getData(ca.. 2024. 8. 30. [Javascript] 비동기 처리와 콜백 함수 비동기 처리 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 비동기 처리의 사례비동기 처리의 가장 흔한 사례는 제이쿼리의 ajax입니다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax 통신을 빼놓을 수가 없습니다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문입니다.function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tableData = response; }); return tableData;}consol.. 2024. 8. 30. [Javascript] 예외 처리 Javascript에는 예외 처리(Exception Handling)를 통해 코드 실행 중에 예기치 못한 에러가 발생했을 때, 이로부터 코드의 실행 흐름을 복구할 수 있는 기능이 포함되어 있습니다. 1. 동기식 코드에서의 예외 처리Javascript 코드에서는 문법 에러, 네트워크 에러 등 다양한 이유로 발생하는 에러들이 있습니다.new Array(-1); // RangeError: Invalid array length console.log(foo); // ReferenceError: foo is not definedfetch('https://example.com'); // TypeError: Failed to fetch 코드 실행 중에 에러가 발생하면, 코드의 실행이 중단되어 그 시점에 실행 중이었던 .. 2024. 8. 30. [Javascript] fetch 적용하기 연습해 본 fetch를 이제는 적용해보겠습니다.서울의 실시간 대기 정보를 가져와 웹 페이지에 표시 해 보겠습니다. 결과 화면 여기서 키 포인트는 2가지 입니다.1. '현재 서울의 미세먼지 : 좋음' 이라는 정보가 어떤 동작이 일어나야만 보이는 것이 아니고 화면에 항상 실시간으로 보여져야 합니다.2. 여기서 '좋음' 이라는 상태 값만 실시간으로 변경되어야 합니다. 이를 위해서는 document ready와 fetch를 혼합해서 사용해야 합니다.아래 간단한 앨범 예제를 통해 확인해 보겠습니다. 나만의 추억앨범 현재 서울의 미세먼지 : 나쁨 추억 저장하기 앨범 이미지 .. 2024. 8. 12. 이전 1 2 3 다음
