Algoroot's space

지난 두 포스팅에 걸쳐 자바스크립트의 비동기 처리 방법 콜백과 프로미스에 대해 작성했다. 1_ [비동기 | 동기 ] 비동기 처리의 시작 - 콜백 지옥 체험 2_ [자바스크립트 비동기 처리 ] 프로미스(Promise) 개념과 활용 이번에는 좀 더 간편하고 깔끔한 코딩이 가능해지는 async, await에 대해 다뤄보겠다. 프로미스의 체이닝과 같은 콜백 패턴 또한 가독성이 그리 좋지 않다. async, await 은 프로미스의 체이닝 없이 프로미스를 좀 더 간결, 간편하게 동기적으로 실행되는 것처럼 보이게 만들어주는 API이다. 새로운 것이 추가된 것은 아니고 기존 존재하는 프로미스 위에 조금 더 간편한 API를 제공한 것으로 이를 문법적 설탕(syntactic sugar)이라고 한다. async 네트워..

지난 포스팅에서는 비동기 처리를 위한 콜백 지옥을 의도적으로 체험해보았다. [비동기 | 동기 ] 비동기 처리의 시작 - 콜백 지옥 체험 이번 포스팅에서는 이런 콜백지옥의 대안으로 ES6에서 나온 프로미스(Promise)에 대해 다뤄보는 시간을 가지겠다. 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 번거로워지며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다. 이의 대안으로 ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise) 를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이..

리액트를 공부하며 aync와 await에 대해 알아보고자 한 게 어떻게 해서 이런 편리한 API가 나오게 됐는지 궁금해 찾아보다 보니 콜백 지옥부터 시작하게 되었다. 개발 공부 극초반에 애용하던 드림 코딩 by엘리 유튜브 채널에서 관련 영상을 쭉 본 적이 있는데 그때는 이 비동기적 처리 부분에서 많이 헤맸고 결국 이해를 거의 하지 못하고 넘어갔었다. 하지만 이제는 직접 사용을 해보게 되는 시기가 왔고, 피할 수 없는 중요한 개념이라는 생각이 들어 이번 기회에 다시 공부해보기로 했다. 포스팅에 적힌 예시 코드는 엘리님 유투브 강의 기반으로 작성했고, 추가적인 설명은 모던 자바스크립트 deep dive책을 기반으로 덧붙였다. 앞으로 세 포스팅에 걸쳐 콜백 지옥을 직접 경험해보고 이의 대안으로 나온 프로미스(..

퀴즈를 만들며 이해했다고 생각한 순간 내일 또 새로울 것 같아 늦은 시각이지만 오늘 한 부분을 되짚어보았다. 확실히 글을 적으니 흐름을 이해하는데 더 도움이 된 것 같다. 특히 reducer를 만드는 부분에서 action을 발동시키는 부분이 헷갈렸는데 적어보고, 실행해보니 이해가 되었다. 아직 익숙하지는 않지만 이 부분은 많이 써보면 해결될 문제 같다. 내일 읽어 볼 자료 : 리덕스는 왜 필요할까? Redux 전역적으로 상태를 관리할 수 있는 라이브러리이다. 리듀서는 순수한 함수여야 한다. (리덕스 규칙) (몰라) 상태관리흐름도 아래는 기능별로 묶은 덕스(ducks) 구조를 따른 코드이다. 1. State 저장하고 있는 상태값("데이터") , 딕셔너리 형태 const ADD_LIST = "quiz/ADD..

라우팅이란? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것. 리액트에서는 라우팅 관련 라이브러리가 많이 있지만 그중 리액트 라우터(React Router)에 대해 아주 간략히 다뤄보겠다. SPA(Single Page Application) 리액트는 SPA방식이다. - 기존 웹 페이지 처럼(MPA 방식) 여러 개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다. - 주소를 옮길 때 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.(하나의 html으로 브라우저 주소창대로 다른 페이지를 보여줄 수 있다. ) React-Router는 이런 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더..

React를 공부하면서 Hook이나 State, Redux가 헷갈려서 정리하고자 간략하게 쓴다. 공부한 코드 기반으로 정말 일부분만 후다닥 쓴 거라 아마 나만 알아볼 것 같다...! 1. React.useRef() React Hook 리액트에서 돔요소를 가져올 때 쓸 수 있다. ex) input 에서 text를 가져오고 싶을 때 리액트 요소에서 가져올 수 있다. const id_ref = React.useRef(null); 가져올 요소에 넣는다. 1. React.useState() React Hook 아래를 예시로 들면, count에는 state값이, setCount에는 count이라는 state값을 수정하는 함수가 된다. 괄호 안은 상태의 초기 값을 나타낸다. setCount()라는 함수를 호출하여 s..

엘리님의 자바스크립트 강의를 들은 걸 토대로 게임을 만들어보았다. 최대한 응용하고 발전시키려고 생각하다보니 거스름돈을 계산해 주는 게임을 만들면 좋을 것 같다는 생각을 해서 만들게 되었다. github address https://github.com/AlgoRoots/Kmoney-Math-Game-for-kids 아이들을 위한 거스름 돈 계산 게임 https://algoroots.github.io/Kmoney-Math-Game-for-kids/ 위 링크를 클릭해 게임을 실행해보세요! 편의를 위해 console창에 거스름 돈 값이 출력되도록 설정했습니다. 게임 bg를 넣어 소리가 갑자기 튀어나올 수 있어요! Introduction 아이들이 스스로 물건을 구입하게 하고 얼마의 거스름 돈을 받아야할지 계산하는..

노마드코더 바닐라 js 마지막 챌린지 제출 완료 Momentum Web https://algoroots.github.io/Momentum_Web/ github link https://github.com/AlgoRoots/Momentum_Web 총 3일의 충분한 시간이 주어졌지만, 몸이 좋지 않아 금요일 까지 피그마로 디자인을 마친 후 코딩작업은 일요일에시작했다..월요일 아침 6시까지 제출이었는데, 늦게 시작한 덕에 밤을 새버렸다. 노마드코더 강의안에 있는 내용도 물론 적용했지만, 뭔가 나만의 즐겨찾기 웹페이지를 시각화하고 싶어서 꼭 필요한 것만 가져왔다. (playlist, todolist, bookmarks, analog clock 등 추가) Music playlist를 만드는 과정에서 시간이 많이 지..