JNarin Development Story

자바스크립트 알고리즘 공부하다보니 array에 대한 새로운 내용을 배우게 되어 정리하게 되었다. Array.from() 유사한 배열 객체나 반복 가능한 객체를 복사하여 새로운 Array 객체를 만든다. String에서 배열 만들기 단어를 문자배열로 만들어준다. Array.from("study"); // ['s', 't', 'u', 'd', 'y'] 이처럼 특정 단어를 문자열로 배열로 만들어 줄 수 있다. Array.from과 화살표 함수 사용하기 Array.from에서는 화살표 함수도 사용할 수 있다. Array.from({length: 5}, () => 1); // [1, 1, 1, 1, 1] arr에 새로운 배열을 만든다. 조건은 길이는 5개며, 그 값은 1로 모두 통일하여 넣는다.

이번 주는 프로그래스 바를 업그레이드한 방법으로 예제는 많이 나아 있는 것 같지만, 기록과 정리를 위해 글을 쓰게 되었다. 1. Scroll Indicator( 스크롤 표시기 ) CSS와 자바스크립트를 통해 이 페이지를 어디까지 보았는지 확인할 수 있는 일종의 게이지 바 같은 것이다. 사실 이 명칭을 어떻게 표현이 되는지 잘 모르겠다. 그래서 찾는데 생각보다 오래 걸려 하루 종일 회사 프로젝트에 이 한 가지 구현만 찾게 되었다. 하지만 실상은 너무 간단한 코드였다. document.addEventListener('scroll', () => { progress = document.querySelector('.progress-bar'); let winScroll = document.body.scrollTop..

오늘은 티스토리 스킨을 바꾸면서 종종 까먹는 설정을 다시 설정하기 위한 방법을 적으려 한다. 처음 설정을 한 후 종종 까먹어서 다음번에도 기억하기 위해서 작성하게 되었다. 1. 네이버 웹마스터도구 일단 네이버 웹마스터 도구에 대해 설명을 하려 한다. 네이버 웹마스터 도구는 본인이 운영하는 웹사이트의 검색 수집, 색인 반영 현황을 제공하고 검색에 친화적인 사이트로 관리하는데 필요한 진단 리포트를 제공하는 서비스다. 2. 네이버 웹마스터 도구를 왜 쓰는가? 필자가 이것에 대해 알게 된 이유는, 티스토리 블로그를 관리하면서 느낀 게 아무리 열심히 해도 네이버에 유입이 너무 적었던 이유였다. 그래서 주변에 물어보니 네이버는 티스토리 수집을 막는다는 이야기를 들었고, 유입을 높이기 위해서는 네이버 웹마스터 도구를..

자주 쓰이고 있지만, 아직까지도 헷갈리는 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..