Front-End/Javascript22 [Firebase] Firebase를 이용한 API 호출 - 2 1. Firebase 프로젝트 생성 및 설치 일단 Firebase Console로 접속합시다.(https://console.firebase.google.com) 프로젝트 만들기 > 프로젝트 명 입력 후 완료(만약 Firebase 첫 진입이라면 완료 시 금지되었다는 표시가 뜰 수 있습니다. 구글 계정인증을 스마트 폰 또는 Gmail로 처리하셔야 프로젝트 생성이 가능합니다.) 완료 되면 해당 프로젝트의 Console창이 뜨게 됩니다. 그럼 당장은 브라우저에서 할 것은 끝났으므로, 프로젝트를 진행할 폴더를 만듭시다. 그리고 터미널 혹은 에디터로 해당 폴더 경로에서 명령어를 실행합니다. npm install -g firebase-tools 입력 후 설치가 끝나면 Firebase 인증을 해야하므로 아래 명령어를 .. 2019. 6. 18. [Firebase] Firebase를 이용한 API 호출 - 1 op.gg나 미세미세 등 오픈API를 이용한 앱/웹어플리케이션이 많은 인기를 끌며 기업으로 성장하는 경우가 많아졌습니다. 하지만 이 API들은 흔히 실무에서 쓰는 API와는 호출하는 법부터 조금 다릅니다. 실무에서는 백엔드개발자들이 인증/권한 등을 다 처리해주면, 저같은 프론트엔드나 퍼블리셔는 jQuery ajax나 es6의 fetch를 사용하여 데이터를 가져온뒤, 화면 구성만 하면되죠. (물론 예외도 많습니다.) 그럼 오픈API를 쓸땐 어떨까요? 일단 인증부터가 문제가 됩니다. 대부분의 API제공업체에서는 KEY를 발급하여 해당 KEY값을 활용하여 데이터를 요청해야만 허용이 되죠. '그냥 KEY값만 파라미터로 넘겨서 사용하면 되지않아?' 라고 생각하겠지만 클라이언트단에서 API를 호출해버릴경우 KEY값.. 2019. 6. 11. [React]내 멋대로 만드는 Todolist-4(feat.Parcel) 1.완료 체크 기능 추가 Todo list에 완료체크 기능을 위해 app.js에서 함수를 하나 만듭니다. handleCheck = (index) => { let todos = this.state.todo; todos[index].check = !todos[index].check; this.setState({ todo:todos }) } (todos라는 변수에 기존의 state.todo를 복사하고 todos라는 변수를 수정하여 setState로 담는 것은 state 자체를 직접 수정하면 안되기 때문입니다.) 매개변수로 클릭한 li의 index를 넘겨서 그 index값과 매칭된 배열의 check부분을 수정하여 setState를 하는 로직입니다. 그렇다면 해당 함수를 Props로 위와같이 넘겨줍니다. 그리고 .. 2019. 5. 11. [React]내 멋대로 만드는 Todolist-3(feat.Parcel) 이번 포스트에서는 input.js에 이벤트를 추가하여 input태그에 입력된 내용을 배열에 추가하여 화면에 표시하고, 삭제버튼으로 리스트를 삭제하는 기능을 구현하겠습니다. 또한 create-react-app으로 프로젝트를 시작할땐 알 수 없던 babel plugin을 설치해보겠습니다. 1. Event 함수 만들기 constructor(props) { super(props); this.state = { input:'', todo:[ {text:"할일목록1",check:false}, {text:"할일목록2",check:false} ] } } handleInput = (e) => { this.setState({ input:e.target.value }) } handleKey = (e) => { if(e.key.. 2019. 5. 3. 이전 1 2 3 4 5 6 다음
