Web
-
Redux-thunk 코드 살펴보기Web/Redux 2021. 5. 9. 05:31
최근에 코치님께서 Redux-Thunk의 코드가 엄청 짧고 강렬하다고 알려주셔서 코드를 봤는데 뭔지 이해가 하나도 안 가더라. 그래서 코치님께서 간단한 예제를 만들어주셨는데, 보면서 고민하다보니 어렴풋이 뭔가 떠오를 듯 하다. 잊어버리지 않기 위해 적어두려고 호다닥 포스팅. // redux-thunk 코드 function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) => (next) => (action) => { if (typeof action === 'function') { // 2번 return action(dispatch, getState, extraArgument); } return next(action); }; }..
-
자바스크립트의 this 👉Web/자바스크립트 2021. 5. 3. 03:34
예전에 자바스크립트의 this에 관해 기초적인 내용을 포스팅한 적이 있는데, 생각보다 this를 아직 잘 모르고 있다는 느낌이 들때가 종종 있었다. 오늘 하브루타 스터디의 주제가 'this'였는데, 진행하는 동안 배운 게 참 많기도 하고 마침 this에 관해 공부를 좀 해봐야겠다는 필요성을 느꼈던 터라, 관련된 내용을 꼭 기억해두고 싶어 이렇게 포스팅을 하게 됐다. 각 문맥에서 this를 출력해 본 결과를 바탕으로 중간중간 나와 스터디 크루들의 뇌피셜을 섞어 정리했으므로 주의할 것. ■ this는 왜 필요한가? 객체는 프로퍼티(객체의 상태)와 메서드(객체 자신의 상태를 조작)로 이루어진다. 메서드를 통해 자신의 상태, 즉 프로퍼티를 조작하기 위해서는 외부의 상태들과 구별되는, 자기 자신의 상태임을 표시해..
-
📄 줄바꿈과 관련된 속성들Web/CSS 2021. 4. 25. 02:25
■ white-space 줄바꿈, 자동 줄바꿈, 공백에 관한 속성 💡 white-space: normal; white-space의 default 값이다. 여러 칸의 공백 또는 줄바꿈을 모두 공백 1칸으로 인식한다. 지정된 넓이를 넘어서면 자동으로 줄바꿈을 해준다. 💡 white-space: pre; 띄어쓰기를 여러 칸 하면 그만큼 그대로 여러 칸 공백이 출력된다. 줄바꿈은 엔터 키가 있는 부분만 줄바꿈을 하고, 자동 줄바꿈은 하지 않는다. 즉, 정해진 규격을 넘어서더라도 엔터가 없는 한 줄바꿈하지 않고 계속 이어진다. 💡 white-space: nowrap; 스페이스, 탭, 줄바꿈 전부 normal과 동일하게 동작하지만(여러 칸을 한 칸으로 병합하여 인식), normal과 달리 내용이 정해진 영역을 넘어..
-
명령형 vs 선언형 프로그래밍Web/자바스크립트 2021. 4. 8. 18:58
명령형 프로그래밍은 절차적 프로그래밍이라고도 하는데, 최근에 우테코 미션을 하다가 요런 말을 들은 적이 있다. 전반적으로, 너무 절차적 프로그래밍으로 코드를 작성하는 경향이 있습니다. 좀 더 선언적으로 기능을 구현할 수 있게 사고 전환을 해보시면 나중에 큰 도움이 될 거예요. 처음에는 무슨 말인지 정확히 감이 잡히질 않아서 여기저기 찾아보다가 ui.dev라는 사이트에서 Tyler McGinnis라는 분이 작성한 글을 보고 조금씩 이해가 되기 시작했다. 그래서 기분이 좋아져서 번역이나 해봐야겠다 싶었다. 나는 언젠가 분명 '명령적(Imperative) 프로그래밍 vs 선언적(Declarative) 프로그래밍'에 대해 들어본 적이 있다. 저게 무엇을 의미하는지를 당연히 검색해봤지만, 그 때마다 요런 정의 정..
-
객체의 불변성(Immutability)Web/자바스크립트 2021. 3. 21. 16:37
객체의 불변성은 객체가 생성된 이후 해당 객체의 상태를 변경할 수 없는 성질을 의미한다. 이런 성질을 적용해서 코딩을 하면, 원본 객체의 데이터가 변경되거나 훼손되는 것을 방지할 수 있다. 자바스크립트는 객체를 참조 형태로 전달하고 전달 받는다. 그래서 객체를 참조 받는 곳에서 해당 객체의 데이터를 변경하면 원본 객체의 데이터도 변경된다. 결국에는 동일한 하나의 객체를 이곳저곳에서 참조하고 있는 것이기 때문. 자바스크립트에서는 주로 어떤 식으로 객체의 불변성을 적용하는가 하면, 객체의 일부를 변경하는 대신 완전히 새로운 객체를 갈아 끼우는 식으로 적용을 한다. '객체 일부만 변경하나, 전체 객체를 갈아끼우나 어차피 데이터는 똑같이 변경되는 거 아닌가요?' 라고 생각할 수도 있겠지만, 객체의 일부를 변경해..
-
async/await을 이용한 비동기 자바스크립트Web/자바스크립트 2021. 2. 21. 14:57
■ Promise를 consume함으로써 비동기 자바스크립트를 다루는 것은 물론 코드를 이전보다 훨씬 깔끔하게 만들어주는 역할을 하지만, 여전히 코드의 양이 만만치가 않다. 조금 더 사용법을 간단히 만들 필요가 있겠다고 느꼈는지, ES8(ES2017)에서는 async/await이라는 새로운 consume 방법을 내놓았다. ■ 참고로, async/await은 개발자들이 consume을 더 쉽게 하기 위한 문법이므로 produce와는 전혀 관계가 없다. promise를 produce하는 방식은 이전과 동일하다. ■ Promise에 관한 포스팅에서 다루었던 아래의 예제를 async/await을 사용해서 작성해볼 것이다. const getIDs = new Promise((resolve, reject) => { ..
-
Promise를 이용한 비동기 자바스크립트Web/자바스크립트 2021. 2. 21. 04:22
■ Promise는 Callbak Hell에서 벗어나, 비동기 자바스크립트를 좀 더 효율적으로 다루기 위해 ES6에서 새로 생겨난 개념이다. 정확히는, 좀 더 깔끔한 비동기 코드를 만들기 위해서 생겨난 개념이다. ■ Promise는 특정 이벤트가 발생했는지 / 아닌지를 추적하는 객체이다. 만약 그 이벤트가 발생하면, Promise는 다음에 무엇(future value, 미래 값)이 발생할지를 결정해준다. 여기서 이벤트는 비동기 이벤트, 즉 타이머 종료나 AJAX 호출로부터 데이터가 오는 등의 이벤트를 의미한다. ■ 만약 우리가 '야, background 에서 서버로부터 데이터 좀 가져와줘' 라고 요청하면 Promise는 우리에게 그 데이터를 가져다 주겠다고 약속(promise)한다. 그러면 우리는 미래에..
-
콜백을 이용한 비동기 자바스크립트Web/자바스크립트 2021. 2. 20. 19:30
■ 콜백함수를 이용하는 방법은 비동기 코드를 다루는 가장 기본적인, 그리고 오래된 방법이라고 할 수 있다. ■ 보통 비동기 코드는 데이터를 불러오거나 할 때 자주 사용되는데, 많은 예제들에서 AJAX 호출을 setTimeout 함수를 이용해서 흉내를 내곤 한다. 그래서 이 글에서도 마찬가지로 setTimeout 함수를 이용해서 '데이터를 전부 불러오는 데에 몇 초가 걸리더라' 하는 것을 시뮬레이션할 것이다. ■ 자. 이제 웹 서버로부터 '레시피'를 가져오는 코드를 작성해야 하는 상황이라고 상상을 해보자. 🍕🍕 우리는 우선, 웹 서버에게 요청을 보내서 'recipeID'의 목록을 받는다. 이 번호는 각각의 레시피들을 구분해주는 숫자이고, 이 숫자를 서버로 보내면 그 숫자에 맞는 레시피가 넘어온다. 그러면 ..