JNarin Development Story

오늘은 저번 시간에 이어서 몇 가지를 더 공부하려고 한다. 이 글은 노마드 코더에 '초보자를 위한 리덕스 101'이라는 강의를 중심으로 정리가 된 것이다. 리덕스를 사용하게 되면 많이 쓰이는 문법이 있다. 바로 switch문이다. 기본적으로 switch문은 다음과 같다. switch () { case "String1": return result1; case "String2": return result2; case "String3": return result3; ... default: return default; }; 만약 switch를 쓰지 않고 if문을 할 경우에 다음과 같은 코드로 작성해야 한다. if (String1) { return result1; } else if (String2) { retur..

회사 코드를 하다가 npm과 yarn을 중복으로 사용한 것 같아서 이것을 통합하고자 node_modules를 삭제후 재설치를 진행하였다. 하지만 다음과 같은 에러가 발생하였고 이에 대한 해결책을 기록으로 남기고자 이 글을 쓰게 되었다. 패키지 통합을 위해 yarn을 지우고 npm으로 다시 설치하는 과정에서 다음과 같은 에러가 발생하였다. node_modules 디렉토리를 확인해보니 node-sass 패키지는 제대로 설치가 되어있지만, .../node-sass/vendor 디렉토리가 존재하지 않았다. 원인은 패키지 설치 이후 node-sass의 scripts/install.js를 실행하지 않아서 라고 한다. 해결방법은 수동으로 스크립트를 설치하거나, node-sass패키지를 리빌드하는 것이다. node n..

프론트 개발자라면 명세서 api에 대해서 많이 듣고 참고를 하고 있을 듯하다. 현재의 나도 그걸 참고로 하여 서버와 통신을 하여 개발을 하게 되는데 여기서 몇 가지 문제점이 있어서 삽질이 진행이 되었다. 일반적으로 axios의 통신은 이러하다. import axios from 'axios'; Axios.post('url', data, header) .then(response => { console.log(response); }) .catch(error => { console.log(error); }) 일반적인 구조로 하게 될 경우 이렇지만, 만약 기존의 통신과 다르거나, 세팅한 통신과 다를 경우 새로이 입력을 하는 경우가 발생한다. import axios from 'axios'; // headers가 다..

리액트 프론트 앤드 개발자를 하면서 리덕스는 꽤나 중요한 축에 속해진다. 하지만 러닝커브가 길기 때문에 처음부터 많이 적용할 수도 없고, 적용을 많이 못하였던 것이 필자의 현실이었다. 그리고 다시 공부를 하면서 조금 깊게 파기 위해 리덕스가 무엇인지, 왜 필요하여 많이 쓰이는지에 대해 진득하게 정리를 해보기 위해 이 글을 쓰게 되었다. 왜 리덕스인가? 가장 궁금한 것 중 하나는 왜 리덕스를 쓰는 지다. 사실 찾으면 찾을수록 당연히 필요하다고 느낄 수 있지만, 처음 접한 사람에게는 이것이 굳이 왜?라는 기분이 들 수 있다. 리덕스는 쉽게 말하면 상태 관리를 의미한다. 리덕스를 사용하기 위해서 리덕스를 사용하기 위해 최소한의 설치는 다음과 같다. node, npm OR yarn 필자가 느끼기엔 이것이 가장 ..