CodingCredit

드.디.어 4주프로젝트의 모달창을 리팩토링했다. 😆 아직 모달창을 띄우는 모든 컴포넌트를 리팩토링한건 아니구, 리덕스에 redux-saga를 세팅하고 채팅창 나가기버튼과 회원탈퇴 컴포넌트에 적용해놨다. 아주 잘된다. 속이 시원하다. 리팩토링하면서 공부하고 배운 과정들을 기록해보겠다!! 🧐 리팩토링 왜 한거야? 리팩토링의 목적부터 먼저 말하면 아래와 같다. 모달창을 OPEN할 때 callback함수를 dispatch해서, 모달창의 예/아니오 버튼에 따라 다른 callback 함수를 실행시키자!! 사실, 프로젝트를 진행하면서도 위를 구현해야 했다. 그러나 당시에는 데드라인이 정해져있었기때문에 추가로 redux-middleware를 공부해서 적용할 만한 시간이 없었다. 따라서 방법이 없을까 궁리하다가 아래와 ..

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

마지막 H.A도 끝났겠다, 이제 2주 프로젝트 준비를 시작해야한다.. 비!장! 아마 2주 프로젝트에서는 혼자 백단을 맡게될 것 같으니, 미리미리 준비를 많이 해둬야할 것 같다. 오늘은 몽구스의 사용법에대해 조금 정리해보려고한다. 이외에도 할게 많다.. schema나 api등 미리 생각해놔야할 것도 많고 잡다한 tool도 공부해야하고 .. 느아아아아😱 What is mongoose ? mongoose는 MongoDB의 ODM 중 하나이다. ODM은 Object Document Mapping, 즉 문서를 DB에서 조회할 대 자바스크립트 객체로 바꿔주는 역할을 한다. mongoose의 장점으로는 강제 스키마의 부활, populate, 프로미스와 콜백 사용가능, 편리한 쿼리 빌더 등을 꼽을 수 있다. '뭐?? ..

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

axios를 사용하여 httml통신을 했을 때, catch로 잡아낸 에러에 접근하는 방법은 아래와 같다. axios.get('/user/12345') .catch(function (error) { if (error.response) { // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다. console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // 요청이 이루어 졌으나 응답을 받지 못했습니다. // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또..

JWT를 왜 사용할까? 보안 이슈 사용자가 자신의 비밀 값으로 서버에 로그인 하게 되면, 서버는 JWT를 리턴한다. 이후, 서버는 GUI로부터 받은 JWT가 유효할 경우, resouce를 사용하도록 허용한다. token을 인증 값으로 사용하게 되면 기존 쿠키/세션을 사용하는 방식보다 많은 보안 이슈를 막을 수 있으며, JWT는 쿠키를 사용하지 않기 때문에, Cross-Origin Resource Sharing (CORS) 이슈가 발생하지 않는다. 데이터 용량 JWT는 기존의 XML보다 덜 복잡하고 인코딩 된 사이즈가 작기때문에, HTTP와 HTML 환경에서 사용하기 좋다. 사용성 JSON parser는 대부분의 프로그래밍이 지원하기 때문에 XML을 사용하는 SAML 보다 만들기 쉽다. JWT 구조 JWT..