본문 바로가기

All50

VanillaJS Momentum vanillaJS-momentum 🌱 - HTML, CSS, JavaScript, Github Pages 전에 해본 적이 있는 기능을 구현하는 것이었기 때문에 어렵지 않을 거라 생각했던 내 자신아 열심히 반성하고 명확하지 않은 것에 대해 다시 한 번 꼼꼼하게 짚고 공부하는 습관을 기르자는 다짐을 했다. 디자인을 어떻게 할 지도 엄청나게 고민을 했다. 사실 처음에 원했던 디자인은 벽에다가 엽서나 문장 붙이는 걸 좋아해서 이런 컨셉으로 하려 했는데 CSS grid 어떻게 하는 지 다 까먹어서... 그래서 결국은 또 심플하게 하자며 이런 식으로 바꿨다. 심플이즈베스트 아니겠냐며. 변명 그만 하고 grid 공부합시다-! 매번 CSS를 하면서 느끼는 것이지만, 배운 SCSS를 써서 코드 쓰는 양을 좀 줄입시다.... 2021. 10. 4.
[Vanilla JS] input에서 선택한 이미지 미리보기 이에 대한 건 클론 트위터에서 썼던 코드인데 당시에 강의에서 봤던 걸 그대로 따라 썼던 터라 조금 더 잘 이해하기 위해 다시 한 번 정리한다. 클론 트위터에서는 리액트로 구현을 했지만, 이번에는 mdn 문서를 찾아보며 바닐라 자바스크립트로 구현해본다. 일단은 index.html에 input을 마크업해준다. input에서 type을 file로 지정하고 accept로 모든 이미지를 선택할 수 있게 정한다. 그리고 자바스크립트에서 쓸 함수를 input에 넣어준다. input 속성으로 onchange를 쓸 수 있다는 걸 처음으로 알았던 오늘... 리액트에서 onChange가 있지만, 이 이벤트가 addEventListener('change', callback function)에서 왔을 거라 생각했던 터라 mdn.. 2021. 10. 4.
클론 트위터 코딩 : 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.