8 Days A Week

프로젝트를 하던 도중 백엔드에서 처리돼 db에 저장된 정보를 실시간으로 불러오는 기능 구현이 필요하게 됐다. socket 방식으로 가능하겠지만 데이터 규모가 크지도 않고 주 기능이 아니라서 다른 방법이 없을까 검색해보던 도중 swr에 대해 알게 됐다. Next js를 만드는 팀에서 진행중인 프로젝트, 데이터를 가져오는데 사용하는 리액트 hooks. 데이터를 불러오는데 캐시된 데이터를 바탕으로 변경사항이 없으면 불필요한 랜더링이 일어나지 않는 등등 유용한 기능이 많다. 더 자세히 알아보기: https://velog.io/@soryeongk/SWRBasic 와닿은 응용 사례 중에 지도 웹사이트에서 실시간 버스 위치를 제공하는데 이 swr을 사용한 경우를 봤는데, 페이지 포커싱 시에 데이터를 불러오거나 옵션 ..

보호되어 있는 글입니다.

gskinner.com http://gskinner.com/RegExr/ 정규 표현식을 작성하면서 실시간으로 그 결과를 테스트 할 수 있는 도구. 패턴을 저장 할 수 있고, 저장한 패턴을 URL을 통해서 공유 할 수 있다. 또한 다른 사용자들이 공유한 다양한 패턴들도 쉽게 찾아서 이용 할 수 있다. regexper http://www.regexper.com/ 정규 표현식을 시각화해서 보여주는 도구 regexr 정규 표현식에 대한 도움말과 각종 사례들을 보여주는 서비스로 정규표현식을 라이브로 만들 수 있는 기능도 제공하고 있다. http://www.regexr.com/ https://regexr.com/5mhou

class를 통한 객체 생성 function Health(name){ this.name = name; } Health.prototype.showHealth = function(){ console.log(this.name + "님 안녕하세요"); } const h = new Health("crong"); h.showHealth(); >> "crong님 안녕하세요" javascript에는 class가 없지만 다음과 같이 prototype을 이용해 비슷한 구조를 만들 수 있다. class Health { constructor(name, lastTime){ this.name = name; this.lastTime = lastTime; } showHealth(){ console.log("안녕하세요 "+ this...

Arrow funtion 활용 setTimeout(function(){ console.log("settimeout"); },1000); // arrow function setTimeout( ()=>{ console.log("settimeout"); },1000); const newArr = [1,2,3,4,5].map(function(value, index, object){ return value * 2; }); // arrow function const newArr = [1,2,3,4,5].map((v)=>{ return v * 2; }); // 더 축약형 const newArr = [1,2,3,4,5].map((v)=>v * 2); >> [2, 4, 6, 8, 10] Arrow function의 th..

Template 처리 const data= [ { name: 'coffee-bean', order: true, items: ['americano','milk','green-tea'] }, { name:'starbucks', order: false } ] const template = `welcome ${data[0].name} !!` console.log(template) >> "welcome coffee-bean !!" Tagged Template literals const data= [ { name: 'coffee-bean', order: true, items: ['americano','milk..

Set으로 유니크한 배열 만들기 : 중복없이 유일한 값을 저장하려고 할때, 이미 존재하는지 체크할 때 유용 let mySet = new Set(); // 자료형 console.log(toString.call(mySet)); >> "[object Set]" // set에 인자 추가 mySet.add("crong"); mySet.add("hary"); mySet.add("crong"); // 해당 요소가 있는지 불린값 반환 console.log(mySet.has("crong")); >> true // 요소 삭제 mySet.delete("crong"); // 요소 하나씩 출력 mySet.forEach(function(v){ console.log(v); }) >> "hary" WeakSet : 참조를 가지고 있..

간단히 객체생성하기 // 기존 방식 function getObj(){ const name = "crong"; const getName = function() { return name; } const setName = function(newname){ name = newname; } const printName = function(){ console.log(name); } return { getName : getName, setName : setName } } var obj = getObj(); console.log(obj.getName()); // Object literal function getObj(){ const name = "crong"; const getName = function() { ret..

String의 유용한 메서드들 let str = "hello world ! ^^ ~~"; let matchstr = "hello"; console.log(str.startsWith(matchstr)); console.log(str.endsWith(matchstr)); console.log("include test", str.includes("world")); >> true false "include test" true for of - 순회하기 var data = [1,2,undefined,NaN,null,""]; Array.prototype.getIndex = function(){}; data.forEach(function(value){ console.log("valueis", value) }); >> ..

Babel을 사용하여 ES6 문법으로 코드를 작성 후 ES5로 변환해주어 호환성을 보장하는 방식이 주로 쓰인다. let : let은 블록단위에서 사용 가능한 변수 선언이다. var name = "global var"; function home(){ var homevar = "homevar"; for(let i=0; i ["apple", "orange", "watermelon", "banana"] immutable array는 어떻게 만들까? const list = ["apple","orange","watermelon"]; list2 = [].concat(list, "banana"); console.log(list, list2); console.log(list === list2); >> ["apple", ..