반응형 프론트엔드9 [JS] Promise 동작 방식 : 아주 쉽게 그림으로 정리 ※ 이 글은 Promise의 동작 방식에 초점을 두었습니다. Promise에 대한 정확한 설명 혹은 문법은 캡틴 판교 님의 글을 보시면 매우 도움이 되실 겁니다.Promise란?Promise(프로미스)는 JavaScript 비동기 처리에 사용되는 객체입니다. Promise의 3가지 상태Prmoise의 동작 방식을 알기 전, Promise의 3가지 상태에 대해 필수로 알아야 합니다.Promise는 Promise 객체가 생성하고 종료될 때까지 3가지 상태를 갖습니다.Pending(대기): 비동기 처리 로직이 완료되지 않은 상태Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태 Promise의 동작 방식🟢 .. 2024. 10. 21. [Java] 객체(Object)란? 인스턴스(Instance)란? 아주 쉽게 정리(+코드) 이 글은 클래스(Class)가 무엇인지에 대해 설명하지 않습니다. 클래스(Class)에 대해서는 아래에 설명해두었습니다.정말 알기 쉽게 정리한 클래스(Class)란? 다음 소스 코드를 통해 객체와 인스턴스에 대해서 이해하고 살펴봅시다. ClassStart1.javapublic class ClassStart1 { public static void main(String[] args) { Bungeobbang 붕어빵1 = new Bungeobbang(); 붕어빵1.재료 = "밀가루"; 붕어빵1.소스 = "팥"; Bungeobbang 붕어빵2 = new Bungeobbang(); 붕어빵2.재료 = "찹쌀"; 붕어빵2.소스 = "슈크.. 2024. 10. 16. 알기 쉽게 정리한 JSX란? JSX란?JavaScript에 HTML 태그를 끼얹은 문법HTML 태그 안에선 중괄호({})를 사용해서 JS를 쓸 수 있다.JavaScript의 공식 문법이 아니며, JavaScript의 확장 문법이다.아래와 같이 JavaScript 문법 (const title)에HTML () 태그를 끼얹은 JavaScript의 확장 문법입니다.const count = 1;const title = {count}번째 게시물 리액트 엘리먼트란? 예시 코드const count = 1;const title = {count}번째 게시물 위 title 변수에 담은 태그는 리액트 엘리먼트라고 부릅니다. 즉, 리액트에서 UI를 렌더링 하기 위한 가장 작은 단위입니다. 참고로 브라우저는 JSX 문법을 알지 못합니다.그렇기 때문에 아.. 2024. 10. 8. [React] input 소문자를 대문자로 변환하는 방법 다음 예제를 통해 input 값을 어떻게 대문자만 입력받을 수 있는지 살펴봅시다.다음은 HTML의 Form과 input을 사용해서 대문자만 입력받는 페이지입니다. 1. HTML 구조 설계divforminput / buttonJSX 문법 특성상 최상위 요소는 태그를 사용합니다.그리고 명확하게 하기 위해 시맨틱 태그인 요소를 사용합니다.그 안에 input 요소와 button 요소를 사용하여 HTML 구조를 설계합니다.아래 그림을 참고해 주세요. 생성 2. state 변수 추가input의 value 값을 관리하는 state 변수를 추가합니다.const [value, setValue] = useState(""); 3. handleInputChange 함수 개발handleInputChan.. 2024. 10. 2. 이전 1 2 3 다음 반응형
