거북이개발자

0. Immutability란? -데이터의 불변하게 다루면 데이터들간의 간섭으로 인한 버그의 가능성을 획기적으로 낮출 수 있다. 1. 이름에 대한 불변함 (1). var var v=1; //many code v=2; var로 설정시 v의 값을 변경하고 싶지 않은 값인데도 불구하고 많은 코드가 추가되면 변경이 생길 수 있다. 이러한 변경은 에러를 발생하지 않기 때문에 심각한 시스템상 버그를 발생 시킬 수 있다. (2). const cosnt c=1; //many code c=2; console.log(c); 자신이 변경하기 싫은 변수를 설정하고 싶은땐 const를 사용해주면 된다. 이렇게 변경하려고 시도하면 에러가 나오는걸 볼 수 있다.

React에 카카오 지도(KakaoMap)API 적용하기 0. 준비 apis.map.kakao.com/web/guide/ developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com apis.map.kakao.com/ -우선 kakao Developers에서 회원가입 후 맵 API발급에 들어가 준다. 애플리케이션을 추가한 후 javaScript 키는 나중에 쓰이므로 확인해 둔 뒤. 플랫폼에서 자신이 실행한 웹의 사이트 도메인을 등록해준다. 1. API 가져오기 apis.map.kakao.com/web/guide/ 에 들..

0. 배경 위의 사진처럼 각각의 성분을 읽고, 만들고, 지울 수 있는 기능을 Redux를 이용해서 만들 생각이다. 1. delete버튼 클릭스 dispatch로 type을 변경해준다. else if(action.type === 'DELETE'){ var newContents = []; var i = 0; while(i < state.contents.length){ if(state.selcted_id !== state.contents[i].id){ newContents.push( state.contents[i] ); } i = i + 1; } newState = Object.assign({},state, { contents:newContents, mode:'welcome' }) } reducer 함수 내의..

0. 배경 위의 사진처럼 각각의 성분을 읽고, 만들고, 지울 수 있는 기능을 Redux를 이용해서 만들 생각이다. 1. create클릭 시 본문 변경 create 우선 onclick을 이용해준다. dispatch를 이용하여 type, mode를 변경해준다. if(state.mode === 'create'){ document.querySelector('#content').innerHTML = ` ` } onsubmit를 통해서 각각의 입력된 값을 dispatch를 통해 store에 저장한다. 2. create값 push, else if(action.type === 'CREATE'){ var newMaxId = state.max_id + 1; var newContents = state.contents.con..

0. 배경 위의 사진처럼 각각의 성분을 읽고, 만들고, 지울 수 있는 기능을 Redux를 이용해서 만들 생각이다. 1.title 목록 만들기 function reducer(state, action){ if(state === undefined){ return { max_id:2, mode:'welcome', selcted_id:2, contents:[ {id:1,title:'HTML',desc:'HTML is ..'}, {id:2,title:'CSS', desc:'CSS is ..'} ] } }} var store = Redux.createStore(reducer); reducer함수를 정의해주고, reducer함수를 인자로 한 store를 만든다. function TOC(){ var state = sto..

0. 배경 위의 사진처럼 각각의 버튼을 누를 시 3개의 색이 변하는 코드를 짜고 싶다. 1. Redux 사용 안 할 시 -부품이 생길 때마다 각각의 부품에 코드가 추가되고 점점 기하급수적으로 늘어난다. 2. Redux 사용 이렇게 Redux을 이용해서 독립적인 코드를 작성이 가능하다. 부품수가 늘어도 앞의 코드처럼 코드 수가 기하급수적으로 늘지 않는다. (1) function reducer(state, action){ if(state === undefined){ return {color : 'yellow'} } if(action.type==='CHANGE_COLOR'){ newState=Object.assign({}, state, {color : action.color}); } return newStat..

1. Redux map -store : 정보가 저장되는 곳. -state : 실제 정보가 저장되는 곳. 그렇지만 직접적으로 접근이 불가능하다. -reducer : store을 만들 시 reducer라는 함수를 공급해줘야 한다. reducer의 return 값은 새로운 state 값이 된다. -render : redux와는 독립적으로 개발자가 짜는 코드 -getState : store에서 값을 렌더에 주는 함수. -subscribe : render을 subscribe에 등록, 그러면 state값이 바뀔 때마다 render함수가 호출되면서 UI가 새롭게 갱신된다. -action : action이 dispatch에 전달된다. -dispatch : reducer를 호출해서 state값을 바꾼다. 그 후 subs..

1. || 연산자 문제점 { const name=''; const useName=name || 'Guest'; const num=0; const message=num || 'undefined'; console.log(useName); console.log(message); } 위의 코드를 보면 ||연산자는 '', 0을 모두 false로 인식한다. 이러한 인식은 사용자에게 혼란과, 버그를 야기할 수 있다. 2. Nullish Coalescing Operator { const name=''; const useName=name ?? 'Guest'; const num=0; const message=num ?? 'undefined'; console.log(useName); console.log(message); ..