react15 리액트 Waveyy 웨이비 : Waveyy 🌊 https://compassionate-shockley-ee0497.netlify.app/#/ - React.js, styled-componets, netlify 메인 컬러 #F81894 #A077FF 웨이비 파비콘 이미지 UI 디자인을 생각할 때 메인컬러를 먼저 생각하고 그 다음으로 파비콘을 정한 후 프로젝트를 시작했다. 처음엔 핫핑크색과 보라색을 메인 색상으로 쓰고 싶어서 사이트의 이름을 '퍼핀: Purpin' 퍼플 + 핑크 조합으로 이름을 지었다가 만족스럽지 않아서 영상 스트리밍 서비스 '웨이브'에서 따와 웨이비: Waveyy 라고 지은 다음, 이에 알맞은 이미지를 찾았다. 파비콘을 내가 직접 만들긴 어렵기 때문에 어떤 이미지를 고를까 고민했는데 때 마침 원하는 색상으로 .. 2021. 11. 16. 클론 트위터 코딩 : Clone Twitter Clone Twitter 🕊 - React, Firebase, CSS, Github-pages 🕊 로그인 화면 : 이메일을 이용하여 로그인을 할 수 있는 것 뿐만 아니라, 구글과 깃허브 계정으로 연동되어 로그인을 할 수 있다. 인증하면서 발생하는 에러를 다루는 것은 아직 미숙해서 이메일과 비밀번호를 입력할 때 발생할 수 있는 에러는 '회원가입'과 '로그인' 사이에서 빨간색으로 경고가 뜰 수 있게 했고, 다른 서비스로 로그인 시 발생할 수 있는 에러는 alert을 이용해 사용자에게 알리는 방향을 택했다. 요즘 빠져있는 노랑색을 배경으로 삼았고, 트위터 하면 떠오르는 색상을 구글링을 통해 알아내서 포인트로 쓸 수 있는 곳에 썼다. 🕊 홈 화면 : 로그인을 하고 나면 이동할 수 있는 페이지. 이미지 업로드와 .. 2021. 9. 20. Can't perform a React state update on an unmounted component 노마드코더 클론코딩 이벤트에 참여하고 싶어서 리액트 훅 강의 듣고서 파이어베이스를 기반으로 한 트위터 클론코딩 강의를 듣기 시작했다. 이렇게 저렇게 버그가 있진 않은가 테스트를 해보다가 마주한 문구. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 문제가 어디에서부터 시작 되었는지 몰라서 문장 자체를 넣어서 구글링을 해봤더니 내 경우에는 사용을 마친.. 2021. 9. 14. [React] this.setState는 두번째에서 콜백을 받는군요...? The Modern React Bootcamp / Colt Steele 이번에는 joke api를 이용해서 유머를 가지고 오고 그걸 화면에 띄운 다음에 투표를 할 수도 있는 실습을 했다. dad joke가 우리나라로 치면 아재개그쯤 되려나... 여튼 이번 실습에서 중점적으로 본 건 api를 이용해서 data를 받은 다음 this.setState를 이용해서 어떻게 변경하며, 그리고 window.localStorage를 이용해서 받았던 data를 저장해서 새로고침을 해도 그 내용이 사라지지 않고 유지되도록 했다. 아니, this.setState에 두 번째 인자로 콜백함수를 받을 수 있잖아...? 공식문서를 제대로 들여다보니 this.setState를 이용해서 state 변경, 또는 함수 이용, 그리고 두번째.. 2021. 9. 2. [React] Deck of cards The Modern React Bootcamp / Colt Steele API와 React Lifecycle methods 중 하나인 componentDidMount를 사용하는 실습이었다. 사실 강의를 들으면서도 이 lifecycle methods를 정확히 어느 때에 사용을 하는건지 잘 모르겠지만, 이 componentDidMount의 경우 API를 fetch할 때 사용하는 거 같다. 리액트의 컴포넌트가 render될 때 constructor - render - componentDidMount 순으로 되는데 이 componentDidMount의 경우 받아오는 데이터가 로딩되기에 좋은 곳이라고 하네... 아무래도 API에서 데이터를 받아오는데 시간이 걸리니까 갖춰져있는 걸 먼저 다 보여준 뒤에 그리고 데이.. 2021. 9. 1. 이전 1 2 3 다음
