반응형 Web Front 개발공부57 프로미스(Promise) 객체를 이용해 비동기 처리하기 프로미스(Promise) 객체를 이용해 비동기 처리하기 개요 프로미스는 비동기 처리를 목적으로 제공되는 자바스크립트 내장 객체다. 프로미스는 Date 객체와 비슷하게 특수 목적을 위해 다양한 기능을 추가한 객체다. Promise 객체를 이용하면 CallBack 함수를 이용한 비동기 처리를 편하고 쉽게 수행할 수 있다. 프로미스의 비동기 작업은 진행 단계가 3가지 상태로 나누어서 관리/실행 된다. 대기 Pending : 작업을 완료하지 않은 상태 성공 Fullfilled : 작업을 성공 실패 Rejected : 작업이 어떤 이유로 실패 대기 상태에서 작업을 성공하게 되면 resolve 라고 한다. 작업을 해결하면 성공 상태가 된다. 만약 실패가 발생되면 reject 상태 된다. 실습 및 예제코드 프로미스 .. 2024. 2. 18. 리액트 useReducer 2024년 새해. 진지하게 리액트 공부를 시작했다. Hook은 낚아채다는 뜻이다. 프로그래밍에서는 어떤 시점에 일어나는 순간을 인지하고 프로그래머가 그 지점에 원하는 기능을 구현하는 정도로 이해해도 될듯하다. 리액트에서 Hook 으로 불리는 카테고리 안에는 많은 기능들이 존재하는데, 이번 포스팅은 useReducer 다. 리덕스와 거의 비슷한 기능이지만 리덕스를 본격적으로 공부하기 전에 연습하고 기억해두려고 한다. 페이지 상단에 임포트하고 import React,{useReducer} from "react"; 사용할 펑션을 구현한다. 리액트는 변수와, 그 변수를 컨트롤하는 함수 패턴. useState도 동일. function reducer(state, action){ //action.type 값에 따라 .. 2024. 1. 27. 자바스크립트 실행 순서 자바스크립트 실행 순서 이미지 웹브라우저로 위의 소스를 실행하면, img-1 속성을 읽을 수 없으므로 console.log(img1) 의 결과는 null로 콘솔 로그가 찍히게 된다. 이번 포스팅에 자세히 설명하지 않겠으나 모든 프로그램 언어는 '생명주기'란 것이 존재하며 프로그램의 실행 순서를 반드시 이해할 필요가 있다. 이번에는 아래와 같이 소스를 변경하고 실행해 본다. 자바스크립트 실행 순서 이미지 실행결과는 script 코딩을 2023. 11. 4. 리액트 State 요즘 리액트 공부에 푹 빠져 있다. 오늘은 state에 대한 내용으로 정리를 해두고자 한다. import "./App.css"; import { Component } from "react"; import TOC from "./Components/TOC"; import Content from "./Components/Content"; import Subject from "./Components/Subject"; class App extends Component { constructor(props) { super(props); this.state = { subject : {title:'WEB', sub:'world wide web!!'}, content:[ {id:1, title:'HTML', desc:'H.. 2023. 8. 19. 리액트 이벤트 onChange 다루기 리액트 이벤트 onChange 리액트를 공부해야겠다고 결심하고 곧바로 도서관에서 책을 대출해 왔다. 리액트 문법이나 특징을 전혀 모르는 상태는 아니지만, 책 하나 잡고 챕터 하나씩 따라 하며 빠르게 예제를 따라 하다 보면 의외로 여러 가지 저자의 노하우나 기본기를 탄탄히 다질 수 있다. 공부하다가 자주 사용할 만한 예제들을 기록해 놓고 훗날에 잊을 때마다 꺼내보고자 포스팅한다. input 요소를 랜더링 하는 코드와 해당 요소에 onChange 이벤트를 설정하는 코드를 작성하고 onChange 이벤트 부분에 e를 인자로 받아 target.value 콘솔로르 함수로 찍어본다. import React, { Component } from "react"; class EventPractice extends Comp.. 2023. 7. 30. 인텔리j에서 리액트 개발환경 구성하기 인텔리j에서 리액트 개발환경 구성하기 2016년 쯤 **통신사 프로젝트에 참여하게 됐는데 프론트 개발파트와 백엔드 개발파트를 나누어서 진행했었다. 나는 백엔드 개발자 역할로 들어갔었는데 그 때 처음 SPA를 접하게 됐다. 그 당시 프론트 개발파트에서 사용하던 JS 라이프러리가 React였고 특징, 장단점 등을 어깨너머로 익혔고 약간의 코딩도 해봤지만 CRUD를 모두 경험해 본 터는 아니었다. 어느덧 7년이라는 세월이 흘렀다. 요즘 참여하고 있는 프로젝트는 프론트, 백엔드 이렇게 나누어서 개발하는 곳은 아니다. 운 좋게 대형 프로젝트인데 분석, 설계, 개발까지 모두 타임라인 순으로 모든 역할을 하고 있으며, 현재는 개발 단계로 프론트, 백엔드 이것저것 닥치는 대로 하는 중이다. 오랜만에 자바스크립트를 하게.. 2023. 7. 23. 이전 1 2 3 4 5 6 ··· 10 다음 반응형
