개발로그

Promise ES6에서 등장한 Promise 객체는 자바스크립트에서의 비동기 처리를 획기적으로 변화시켜주었다. 기존에 '콜백 지옥'이라 불리던 것을 해결하며 더 명료한 코드를 작성할 수 있도록 해준다. Promise 객체 속성 Promise는 catch, finally, then 등의 메소드를 가지고 있고 state와 result라는 내부 프로퍼티를 가지고 있다. Promise는 3가지 state를 갖는다. pending - 비동기 처리가 아직 완료되지 않은 상태 fulfilled - 비동기 처리가 성공적으로 끝나 resolve가 호출된 상태 rejected - 비동기 처리 중 오류가 발생해 reject가 호출된 상태 위 상태에 따른 result는 아래와 같다. pending 상태 - undefined..

작년 연말에 많은 개발자들이 1년 회고록을 올리는 걸 보고는 그 많은 것들을 기억하고 글로 정리한다는게 대단하다고 생각하면서도 나는 귀찮고 까먹어서 절대 못할거라고 생각했었다. 그런데 이번 블로그 스터디를 하면서 이렇게 짧막하게 주간회고를 기록할 수도 있다는 것을 알게되어서 가벼운 마음으로 작성해보고자 한다. 회사 아레나 참가개편 지겹도록 길었던 아레나 참가개편 작업이 끝을 보이기 시작하면서 이번주는 그래도 조금 널널했다. 끝없는 큐에이 이슈를 처리하면서 지난 주 하루는 새벽 5시 넘어서 퇴근한 대기록을 세웠었는데 이번주는 그 여파인지 몰라도 좀 게으르게 일했던거 같다. 금요일 팀 회고 시간에 모두가 각자 이번주 스프린트에 작업한 내용에 대해 이야기 하는데 팀장님과 본부장님 모두 이번 작업이 길어지고 힘..

본 포스팅은 코어 자바스크립트 > 에러 핸들링 페이지를 참고하여 제 생각을 덧붙여 작성한 글입니다. # try...catch try...catch 문법은 대부분의 프로그래밍 언어에서 에러를 핸들링 하기 위해 쓰이고 있다. 자바스크립트도 예외는 아니다. 문법은 아래와 같다. try { // 에러 발생하면 코드 중단되고 catch 블록으로 넘어감. throw new Error('에러 발생'); alert('실행될 수 없어'); // 실행 안됨. } catch (err) { // 에러 핸들링 console.log(err); } 위 코드에서는 명시적으로 에러 객체를 생성해서 던져주었지만, 보통 에러가 발생하면 자바스크립트가 에러 상세내용이 담긴 객체를 생성하여 catch 블록에 인자로 넘겨준다. ## 선택적 c..

# 리덕스 import { createStore, actionCreator } from "./redux-middleware"; function reducer(state = {}, { type, payload }) { switch (type) { case "init": return { ...state, count: payload.count }; case "inc": return { ...state, count: state.count + 1 }; case "reset": return { ...state, count: 0 }; default: return { ...state }; } } const logger = (store) => (next) => (action) => { console.log("logger..

# 좋은 아키텍쳐란? 다른것들끼리 분리해라. 컴포넌트를 언제 어떻게 쪼갤지에 대해선 의견이 분분하지만, 강사님 개인적인 의견으로는 map으로 리스트 데이터를 뿌려주는 경우 별도의 컴포넌트로 감싸주는걸 선호한다. 한 눈에 보기 더 쉽기 때문! 쪼갤까 말까 싶을때가 쪼갤때다! 나중에 더 비대해질 경우 버그날까 쪼개기 더 어렵다. # 커뮤니케이션 이 부분은 아래 링크 작성자께서 정리를 잘해주셔서 발췌해왔습니다. https://github.com/soongyu/woowa-tech-learning-react-typescript/blob/master/week02-2.md soongyu/woowa-tech-learning-react-typescript 우아한테크러닝 3기 React&TypeScript 기록. Cont..

# 지난 시간 정리 리덕스는 전형적인 펍섭(pubsub) 모델을 구현한 것. 사실상 리액트와 연관성이 전혀 없다. publish - subscribe 구조. 상태 변경되면 그걸 알려주고 구독한 쪽에서 알람 받을 수 있는 구조. observer 패턴이랑은 다르다. # 리액트 만들기 좋은 아키텍처를 말할 때 대원칙 중에 하나는 같은 것끼리 묶고 다른 것끼리 분리하는 것에 있다. 여기서 지식 수준의 차이에 따라 어떤게 같은것이고, 어떤게 다른것인지 판단하는 기준이 달라진다. 그러나 보통 기본적인것(네이밍 잘 짓기 등)만 잘 지켜도 70%는 먹고 들어간다. ## 리액트 컨셉 리액트 컨셉은 완전히 새로운게 아니다. 브라우저의 경우 예를 들어보자. HTML코드의 문자열 구조를 직접 다루는 것은 어렵기 때문에 훨씬 ..

# 자바스크립트 ## 변수와 값. 프로그래밍 언어는 서양사람들이 만들었다. 그래서 그들의 문화, 철학, 사상이 녹아있다. 논리, 합리주의를 중요시함. 그런 측면으로 프로그래밍 언어도 구성되어 있다. 기저에 절대불변의 원칙을 세워두고 (공리) (예. 1+1=2) 이것들을 기반으로 하나씩 차곡차곡 쌓아간다. 자바스크립트에서 '값'이라고 정의한 녀석들은 변수에 넣을수 있다. var x = 10; let y = 10; const z = 10; 자바스크립트에서는 함수도 값이라고 정의함. function foo() { } let y = foo; 그래서 함수를 변수에 대입 가능하다. 자바스크립트는 모든 함수가 값을 반환한다고 정의함. return 으로 반환하거나, return이 없으면 undefined 반환. new..

1회차라고 편한 마음으로 필기 없이 들었는데 생각보다 너무 유익해서 정리하기로 결정. 고맙게도 많은 분들이 이미 정리를 잘해주셔서 베껴왓다ㅠ_ㅠ 2회차 부터는 필기 열심히 해야지... 그 중 아래 3분의 내용을 많이 참고했다. 링크 걸어드려야지. https://github.com/alstn2468/Woowa_Tech_Learning_React_Typescript/blob/master/ms/week_1/Tuesday.md alstn2468/Woowa_Tech_Learning_React_Typescript 📘 Woowahan Tech Learning React&Typescript Summary ⚛ - alstn2468/Woowa_Tech_Learning_React_Typescript github.com ht..