혼자 적어보는 노트

처음에 너무 가볍게 접근했던 리덕스.. 몇차례 호되게 당하고.. 이제야 조금씩 감을 잡기 시작하여 다시 작성을 해보기로 했다. 리덕스 초기 세팅 1. react-redux, redux설치 npm i react-redux redux 2. action 함수와 type, reducer를 관리할 파일 생성. [modules/todo.js] const initialState = [1, 2, 3, 4]; //state 초기값 생성 const todoReducer = (state = initialState, action) => { return state; }; export default todoReducer; 가끔 기초강의 보면 세개를 각각의 파일로 관리하던데 리듀서와 액션 관련 코드들을 한 파일에 모두 작성하는 D..

종종 사이트에서 드래그&드롭 이벤트가 보이길래 투두리스트를 작업하면서 나도 해당 기능을 적용해보기로 했다. 라이브러리를 사용해야 될 것만 같았는데 HTML 드래그앤 드롭 API가 존재 한다는 것을 알게되었다. 여러 블로그나 글을 읽고 해본 다음에 공식문서를 보는 것이 도움이 되었다. + 참고블로그 드래그 api를 사용할 때 필요한 것. 1. draggable 속성 추가. 드래그 api를 사용하려면 html 태그 안에 draggable이라는 속성을 넣어주어야 한다. 2. 이벤트 지정. 사용할 이벤트를 지정해준다. 주요 이벤트 이름은 아래와 같다. drag 드래그 할 때 발생 dragstart 드래그하기 시작했을 때 발생 dragend 드래그를 끝냈을 때 발생 dragenter 드래그한 요소가 드롭 대상 위..

프로젝트를 조금씩 하고있는데 백엔드없이 작업을 하려니 무언가 프로젝트가 미완성된 느낌을 받을 때가 있었다. node로 서버구현을 해본적은 있지만 좀 더 간편하게 백엔드를 연결해서 사용할 수 있는 firebase를 사용해보기로 했다! 몇차례 알아보고 테스트를 해보니 생각보다 간단해서 놀랐다. 참고로 9버전이다. 1. firebase console에서 프로젝트를 생성 https://console.firebase.google.com/ 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com 테스트로 만들어 보는 것이기 때문에 test로 작성했다. 프로젝트 이름은 test로 했지만 중복된 네임이기 때문에 아래의 test-88e5b가 ..

배열을 이용하여 state를 관리 할 경우 state 데이터들의 내부 프로퍼티를 수정할 때 복잡함이 생긴다. 예를들면 const usersState = [ { id: 1, name: "Jay", age: "28", job: "Developer", }, { id: 2, name: "Luby", age: "30", job: "Designer", }, { id: 3, name: "Kate", age: "30", job: "Planner", }, ]; 위와 같이 3명의 유저 데이터를 관리한다고 했을 때 만약 유저의 name을 변경한다고 하면 어떻게 처리해야할까? 변경된 값과 변경할 name을 가진 데이터의 id값을 보내고 기존의 state에서 id값과 일치하는 데이터를 찾아서 일치한다면 수정된 데이터를, 일치하..

빈 배열 확인은 배열의 length를 체크하여 확인을 할 수 있지만 객체는 length를 확인할 수 없다. 그렇다면 빈 객체는 어떻게 체크할 수 있을까? Object.keys 사용 object.keys를 이용하여 object를 배열로 변경하여 확인을 할 수 있다. const obj = {}; const obj2 = { name: "Jay" }; console.log(Object.keys(obj).length); // 0 console.log(Object.keys(obj2).length); // 1 JSON.stringify() 사용 object를 문자열로 변환하여 확인할 수 있다. const obj = {}; const obj2 = { name: "Jay" }; console.log(JSON.string..

몇번의 시도와 테스트를 통한 youtube api사용법을 정리 해 보겠다. https://console.cloud.google.com/apis/dashboard Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 유튜브 api를 사용하려면 위의 링크에서 key를 만들어주어야 한다. https://developers.google.com/youtube/v3/docs API Reference | YouTube Data API | Google Developers API Reference YouTube Data API를 사용하면 YouTube 웹사이트에서 일반적으로 실행하는 기능을 ..

youtube의 영상 링크를 가지고 와서 사용할 때 height의 비율과 맞게 width 100%로 지정하는 법 /* HTML */ /* CSS */ .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Cannot read property 'map' of undefined Cannot read property '???' of undefined React에서 api로 데이터를 가지고와서 state에 데이터를 담고 해당 state의 프로퍼티를 참조하려고 할 때 위와같은 에러가 발생한다. 아직 데이터가 할당되지 않은 상태에서 해당 객체의 데이터를 읽으려 하니 발생하는 것으로 추정된다. 그럴땐 아래와 같이 삼항연산자로 해당 데이터가 할당되었는지 체크를 한 후 에 프로퍼티를 참조 하면 된다. (할당이 되지 않았다면 false이기 때문에 노출이 안됨) //ex1 {video && ( {video.title} )} //ex2 {video && video.map(()=>( //코드작성 )) )}