JNarin Development Story

Mutation(변형)은 무엇인가? 말 그대로 변형을 의미한다. 이 부분은 필자의 절대적인 생각이며, 확신이 아닌 참고용이다. 필자가 생각하는 Mutation은 push, pop, join 이런 것들이지 않을까 하는 조심스러운 발언을 해본다. (그저 필자가 javascript를 해보면서 대략적으로 이러지 않을까 하는 생각이다. mutation을 권장하지 않는 다면 과연 리덕스에서는 무엇을 써야 하는가? 바로 새로운 state(상태)를 return을 하는 것이다. 즉, object를 return 하는 의미라고도 한다. (사실 적으면서도 내가 이해한 부분이 맞는지 의심이 간다...) 상태를 수정하는 것이 아닌, 새로운 것을 return을 해야한다는 의미다. (왜 이게 중요한 것일까? 사실 어떤 의미로 한건 ..

오늘은 다시 리덕스 공부를 위해 글을 쓰게 되었다. 먼저 index.html을 수정하도록 한다. To Dos Add 위 코드는 현재 html코드이며, 현재 수정한 부분은 태그 안에 값을 수정하였다. 그런 다음 index.js를 다음과 같이 바꿔준다. // src -> index.js const form = document.querySelector("form"); const input = document.querySelector("input"); const ul = document.querySelector("ui"); const createToDo = (toDo) => { const li = document.createElement("li"); li.innerText = toDo; ul.appendChil..

오늘은 저번 시간에 이어서 몇 가지를 더 공부하려고 한다. 이 글은 노마드 코더에 '초보자를 위한 리덕스 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 필자가 느끼기엔 이것이 가장 ..

회원가입 로직을 하다 보면 정규식에 대해 쓰이는 경우가 종종 있다. 근데 막상 찾다 보면 내가 원하는 데로의 정규식 찾는데 다소 시간이 걸려 그 부분을 해소하고자 정규식 관련 자료를 모아보았다. 이메일 유효성 검사 const regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; 위 코드는 이메일 형식으로 되어 반드시 @와. 이 들어간 완성된 이메일 형식으로 되어야 한다. ex) test@te_st.com (O) ex) test_34@te3st.com (O) ex) test.to@te2st.com (O) ex) test.coj (X) 번호 유효성 검사 번호 유효성 검사는 크게 핸드폰과 일반..

최근 인터넷 익스플로러에 대한 뉴스가 나왔다. 마이크로 소프트의 웹브라우저인 인터넷 익스플로러 결국 내년 6월에 세상에서 사리진 다는 소식을 접하게 되었다. 물론 그전에도 이미 인터넷 익스플로러에 대한 인지도는 떨어졌지만, 나이가 있는 분들은 아직도 쓰고 일부 회사 사이트는 익스플로러에서만 접속이 가능하는 불편함이 있다. 그 과정에서 우리는 인터넷 익스플로러를 더 이상 사용하지 않게 될 경우, 지금이라고 이 브라우저 접속을 막아보는 방법을 찾아보았다. 먼저 내가 접속한 브라우저가 무엇인지 확인하는 코드다. let agent = navigator.userAgent.toLowerCase(); if ((navigator.appName == 'Netscape' && navigator.userAgent.searc..