CodingCredit

어제부터 4주 프로젝트에서 구현한 모달창을 리팩토링하기위해 redux middlware를 로컬에서 적용해보고 있다. 목표: 모달창의 예/아니오에 따른 콜백함수를 리덕스에 전달하여 실행시키기 현재는 Modal component에 콜백함수를 직접 넣어서 예/아니오에 따라 실행시키고 있는데 기능은 어찌저찌 되지만... Modal component에 온갖 콜백함수가 들어가게되고 컴포넌트가 너무 무거워진다는 생각이 들었다. 공부를 좀 하다가 middleware를 써서 함수를 dispatch하면 되겠다는 생각이 들었다. redux-toolkit을 사용했기때문에 기본으로 내장되어있는 redux-thunk를 먼저 사용해봤다. export const modalCallback = createAsyncThunk('m..

테스트코드를 보면서, 불라불라 == null 이라는 조건을 보면서 왜 null일까 undefined로 하면안될까? 왜 strict equality operator(===)가 아닌 ==를 쓸까? 같은 질문들이 생겨서 조금 찾아봤다! null과 undefined JavaScript에는 '없음'를 나타내는 값이 두 개 있는데, 바로 null와 undefined이다. 두 값의 의미는 비슷하지만, 각각이 사용되는 목적과 장소가 다르다. JavaScript는 값이 대입되지 않은 변수 혹은 속성을 사용하려고 하면 undefined를 반환한다. let foo; foo // undefined const obj = {}; obj.prop; // undefined null은 객체가 없음을 나타낸다. 실제로 t..

오늘은 페어프로그래밍을 하면서 try catch문을 다시 알게되서, 꼭 정리를 해야겠다는 생각을 했다. 그동안 try catch문을 꽤 사용해왔지만 항상 비동기처리를 할때에만 써왔고, 다른경우의 예외처리는 늘 조건문을 통해서 처리해왔다. 그런데 오늘 페어분이 서버쪽 로직을 작성하는데 에러가나서 테스트가 넘어가지 않자, try catch문을 사용해서 예외처리를 해주는 걸 보고 여쭤봤더니, 서버쪽 로직을 작성할 때 서버가 다운될 수 있는 경우에 try catch문을 빈번하게 사용한다고 말씀해 주셨다. 그말을 듣고 나의 우매함을 반성하며 try, catch, finally 문에 대해 정리해야겠다는 생각이 들었다. try...catch와 에러핸들링 아무리 프로그래밍에 능한 사람이더라도 에러가 있는 스크립트를 작..

🚨오늘의 실수 API로 데이터를 받아와서 처리할 때, 항상 mutable한지 immutable한지 생각하고 처리하자! 데이터는 죄가없었다..다 내탓이오. 구조분해할당에서 해당 property의 변수이름 설정하기 API로 받아온 데이터의 형태가 다음과 같을 때, {data: {results: [원하는 데이터] } }원하는데이터를 데이터에 저장된 results가 아닌, userdata라는 원하는 변수에 할당하고 싶다면 다음과같이 작성하면 된다. const{ data: {results: userdata }} = API로 받아온 데이터 전체 자바스크립트는 객체를 축약형으로 할당할 수 있다. this.setState({ userData, loginData }) this.state에 userData라는 proper..

default export와 named export 차이점 Default Export default 로 선언된 모듈은 하나의 파일에서 단 하나의 변수 또는 클래스 등등만 export 할 수 있다. const foo = () => { ... } export default foo import 할 때는 아무 이름으로나 import 가능하다. import 아무이름 from './foo.js' 선언과 동시에 default export 는 불가능하다. (named export만 가능) //named Export export const test = ... named Export 한 파일 내에서 여러 변수/클래스 등등을 export 하는 것이 가능하다. export class test {...} expo..

Promise.all ? 복수의 URL에 동시에 요청을 보내고, 다운로드가 모두 완료된 후에 콘텐츠를 처리하고 싶을 때, Promise.all을 사용한다. let promise = Promise.all([...promises...]); Promise.all은 전체가 프라미스인 배열( 엄밀히 따지면 이터러블 객체이지만, 대개는 배열이다)을 받고 새로운 프라미스를 반환한다. 이 때, 반환되는 새로운 프라미스 배열의 순서는 전달된 프라미스 순서와 일치한다. 즉, Promise.all의 첫번째 프라미스가 가장 늦게 이행되더라도, 처리결과는 배열의 첫번째 요소에 저장된다. Promise.all 사용 작업해야할 데이터가 담긴 배열을 프라미스 배열로 매핑하고, 이 배열을 Promise.all 로 감싸는 트릭은 굉장히..