JNarin Development Story

자주 쓰이고 있지만, 아직까지도 헷갈리는 map함수, 그래서 오늘은 정리를 해보려고 한다. 물론 이 정리를 시작으로 개념정리가 되어도, 얼마든지 까먹을 수 있으니... 수시로 찾아와서 한번씩 점검을 하려 한다. 1. map function? map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다. (여기서 callback function은 다른 함수에 인수로 전달된 함수이며 외부 함수 내부에서 호출되어 일종의 루틴이나 작업을 완료하는 것을 의미한다.) arr.map(callback(currentValue, index, array), thisArg) map함수는 callback, thisArg함수를 가지고 있으며, callback은 currentValue, in..

오늘은 삭제기능을 추가하는 방법을 공부하려 한다. 먼저 우리는 저번에 추가한 추가하는 것을 function으로 분리를 할 수 있다. // src > index.js // 중략 const addToDo = (text) => { store.dispatch({ type: ADD_TODO, text }); }; const onSubmit = (e) => { e.preventDefault(); const toDo = input.value; input.value = ""; addToDo(); }; // 중략 store.dispatch를 원래는 onSubmit에 넣었는데 이 문구가 더 많은 일을 할 경우에는 분리를 하는 것이 좋다. 그렇기 때문에 그런 편리성을 위해서 function addToDo를 만들어서 onSu..

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..

Array 배열(Array) 정의 배열(array)은 같은 타입의 변수들로 이루어진 유한 집합입니다. 배열을 구성하는 각각의 값을 배열 요소(element, 엘리먼트)라고 하며, 배열의 위치를 가리키는 숫자를 인덱스(index)라고 합니다. Array 객체로 배열 만들기 //배열생성 첫번째 방법 var 참조 변수 이름 = new Array(); 참조 변수 이름[0] = 값1; 참조 변수 이름[1] = 값2; ... 참조 변수 이름[n] = 값n; //배열생성 두번째 방법 var 참조변수이름 = new Array(값1, 값2, 값3, ..., 값n); //배열생성 세번째 방법 var 참조변수이름 = [값1, 값2, 값3, ..., 값n]; 배열을 생성하는 방법에는 다음과 같습니다. '참조 변수 이름'이라는..

parseInt(); parseInt() 정의 문자열을 정수로 바꾸는 함수 parseInt() 문법 parseInt(string, radix); string - 분석할 값입니다. - 어떤 값을 입력해도 양의 정수, 음의 정수로만 표현이 됩니다. - 0x로 시작하면 16진법으로 처리합니다. - 문자열의 선행 공백은 무시합니다. - 첫 글자가 숫자로 변하지 않는 값일 경우, NaN으로 반환합니다. radix(진수) - 2~36까지 입력을 할 수 있습니다. - 공백일 경우 기본적으로 10진법으로 표현, 그러나 모든 브라우저가 되지 않을 수 있으니 명시하는 것이 가장 좋습니다. parseInt() 예제 parseInt에 대한 예제를 적도록 합니다. function solution(){ var a = parseI..

생각보다 자주 쓰이지만 또 금방 잊어버리는 paseInt에 대하여 이야기를 해보려고 한다. parseInt() 정의 문자열을 정수로 바꾸는 함수 parseInt() 문법 parseInt(string, radix); string - 분석할 값입니다. - 어떤 값을 입력해도 양의 정수, 음의 정수로만 표현이 됩니다. - 0x로 시작하면 16진법으로 처리합니다. - 문자열의 선행 공백은 무시합니다. - 첫 글자가 숫자로 변하지 않는 값일 경우, NaN으로 반환합니다. radix(진수) - 2~36까지 입력을 할 수 있습니다. - 공백일 경우 기본적으로 10진법으로 표현, 그러나 모든 브라우저가 되지 않을 수 있으니 명시하는 것이 가장 좋습니다. parseInt() 예제 parseInt에 대한 예제를 적도록 합..