Frontend18 [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. [CSS] 케스케이딩 스타일 시트 알아보기 CSS란 Cascading Style Sheet의 약어로, 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미 입니다.CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정합니다.Cascading(케스케이딩)은 스타일끼리 충돌하지 않도록 막아 주는 중요한 개념 입니다. 스타일 우선 순위위로 갈 수록 중요도가 더 높습니다.1. 사용자 스타일컴퓨터 사용자가 지정한 스타일2. 제작자 스타일웹 문서를 제작한 제작자의 스타일3. 브라우저 기본 스타일웹 브라우저가 기본으로 정해 놓은 스타일 중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있습니다.1. !important2. 인라인 스타일3. id 스타일4. 클래스 스타일5. 타입 스타.. 2024. 8. 27. 이전 1 2 3 다음
