kth990303의 코딩 블로그

리액트를 하면서 js 기본을 좀 더 갈고닦아야할 필요성을 느껴서 다시 javascript es2021 기본 강좌를 들어보고 있다. 즉, 이 포스팅은 조현영님의 es2021 강좌의 내용을 듣고 기록하고 복습하는 용도로 작성한 것이다. 모든 강의를 포스팅하진 않을 것 같고, 기록해둘만한 내용이나, 시간이 좀 괜찮을 때 포스팅할 듯하다. 우리가 흔히 인터넷을 하다 보면 이 창을 한번쯤은 봤을 것이다. 우린 이제 javascript로 이 창을 띄우는 방법을 이번 포스팅을 통해서 배울 것이다. 참고로 이 창을 띄우는 방법은 한가지가 아니다. 총 3가지가 존재하는데, 용도에 따라 다 다른 함수를 가진다. Prompt 사용자에게 값을 전달받기 위한 함수이다. 아까 위에서 본 이미지가 바로 prompt 창으로 띄워준 ..

아직 useState를 구현한 건 아니고, api 이동이나 화면 구현정도만 한 것이긴 한데 일단은 올려본다. 우선 색깔, 디자인을 담당하는 CSS는 아직 입히지 않았으며, 아직 화면만 구성해둔 상태라 운동을 저장한다고 실제로 DB가 변경되거나, 화면이 변경되지는 않는다. (갈 길이 멀다...) 참고로 앞으로의 목표는 이렇게 생겼다. 로그인 기능은 11월 달 예정이다. 그 전엔 workListCalender.js, todayWorkList.js, addTodayExercise.js 위주로 구현할 듯하다. 파일명만 봐도 대충 무슨 파일인지 느낌이 올 것이다. "/" API 우선은 홈으로 들어가면 저 달력 모양 캘린더가 뜨도록 구현할 생각이다. 초록색은 운동을 한 날, 빨간색은 운동을 안한 날. 아마 아래 블..

우선 firebase 연동하기 전에, react 감을 익히기 위해서 아래 이슈를 처리하기로 했다. view components를 작성해주세요. 달력 컴포넌트 -운동추가 컴포넌트에서 날짜와 진행한 운동을 추가해주면, 그 날짜에 운동을 진행했는지 구별해주는 달력 컴포넌트 를 작성.그 날짜에 어떤 운동을 했는지는, 그 날짜를 클릭하여 운동추가 컴포넌트로 넘어갈 수 있도록 하면 될듯. -CSS, firebase DB 연동은 지금 하지 않아도 괜찮음. 운동추가 컴포넌트 -운동 리스트 컴포넌트에 기록될 운동을 추가해주는 컴포넌트를 작성할 것. -CSS, firebase DB 연동은 지금 하지 않아도 괜찮음. 간단한 기능을 갖춘 틀을 작성해준다고 생각하면 될 것 같습니다. 이후 세부기능 및 디테일은 다음에 추가하면 ..

이번 운동일지 다이어리 협업프로젝트는 과정을 블로그에 사소한 것까지 포스팅할 예정이다. 친구와 함께 하는 프로젝트인데, 친구는 재학생(개강), 나는 군복무와 병행하는 프로젝트여서 조금씩 진도를 나갈 듯하다. github 주소: https://github.com/kth990303/WorkOutDiary GitHub - kth990303/WorkOutDiary: 민서와 함께 만드는 운동일지 다이어리 민서와 함께 만드는 운동일지 다이어리. Contribute to kth990303/WorkOutDiary development by creating an account on GitHub. github.com 현재 README.md는 아래와 같다. 점진적 과부하를 통한 득근을 위하여 이전 운동횟수와 비교하는 기능과..

firebase가 무엇인지 모른다면 지난 포스팅에 firebase에 대해 간단하게 설명한 포스팅을 참고하자. https://kth990303.tistory.com/142 [React] Backend 역할을 해주는 Firebase에 대해 알아보자 요즘 나는 집에서 덤벨과 맨몸운동, 그리고 유산소 운동을 자주 하는 중이다. 그러던 어느날, 점진적 과부하를 위해 운동일지를 틈날 때마다 기록하는 것이 좋겠다고 생각했고, 마침 친구와 함 kth990303.tistory.com 이번 시간엔 react의 create-react-app을 이용하여 firebase와 연동해보는 포스팅을 작성해보겠다. 개인적으로 환경세팅으로 고통받는 것을 매우매우 극혐하기 때문에, 다음에 따로 고통받지 않기 위해, 그리고 다른 사람들이 연..

요즘 나는 덤벨과 맨몸운동, 그리고 유산소 운동을 자주 하는 중이다. 그러던 어느날, 점진적 과부하를 위해 운동일지를 틈날 때마다 기록하는 것이 좋겠다고 생각했고, 마침 친구와 함께 리액트 스터디를 진행중이었으므로 리액트로 운동일지 다이어리를 만들어보면 어떨까 생각하게 됐다. FE를 리액트로, BE는 무엇으로 할까 고민하던 차에, 이번 기회에 firebase를 한 번 써보기로 했다. https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com Firebase에는 정말 다양한 기능들이 있다. Authentication(인증 권한), Cloud S..

노마드코더 강의를 들으면서 리액트가 라우트를 인식하는 방법에 대해 설명을 들어 인상깊어 포스팅하려고 한다. 그 전에 간단하게 노마드코더 강의의 프로젝트를 설명해보겠다. 프로젝트 설명 영화 사이트에서 현재 인기있는 영화 리스트를 보여주는 api를 axios로 받아오는 프로젝트 index (Home) 페이지에 영화 리스트를 출력해준다. About 페이지에 이 사이트의 소개글을 보여준다. 이 링크에서 이 프로젝트를 볼 수 있다. (gh-pages를 이용한 웹배포 링크 / github 주소) https://kth990303.github.io/nomad_react/ React App kth990303.github.io https://github.com/kth990303/nomad_react GitHub - kth..

로그인, 로그아웃 화면을 만드는 작업을 하던 중 위 에러가 콘솔창에 뜨기 시작했다. 정말 이상하게도, 로그인과 로그아웃 자체는 잘 되는데 뭔가 조금씩 버그가 있는 듯한 느낌? 아래 링크에서 내 질문을 확인할 수 있다. (자문자답 질문) https://www.inflearn.com/questions/293267 [34강] 로그인, 로그아웃 자체는 잘 되는데 콘솔에서 에러가 뜹니다. - 인프런 | 질문 & 답변 안녕하세요 :) 좋은 강의 잘 듣고 있습니다. 로그인, 로그아웃 자체는 잘 되는 것 같은데 콘솔창에서 /api/users/auth가 존재하지 않는다는 에러가 떠서 질문드립니다. 동일한 현상의 다른 질문들을 www.inflearn.com 해결방안 API 주소 자체는 오타 없이 /api/users/aut..

리액트는 컴포넌트 선언을 할 때 두 가지 방법이 있다. 하나는 클래스형, 다른 하나는 함수형이다. 예전에는 클래스형만이 상태변경에 따른 렌더링이 가능하여 클래스형을 많이 썼다고 하나, 최근에는 리액트 훅이 생겨나면서 리액트 훅 + 함수형 컴포넌트의 사용을 더욱 권장하는 시대라 한다. 나는 리액트를 2021년에 처음 맛보기 시작했으니 당연히 후자가 더 익숙했고, 후자의 방법밖에 몰랐으나, 노마드코더에서 전자의 방법을 알려주어 정리 겸 두 가지 방법 모두 기록해보려고 한다. useState 기본예제 설계 리액트를 공부하는 분들이라면 지겹도록 많이 봤을 예제. Counter 예제를 setState/useState 리액트 훅을 이용하여, 혹은 only VanillaJS로만 이용하여 많이 만들어보았을 예제. +를..

노마드코더로 리액트 JSX에 대한 기초강의를 들으면서 공부하던 중, 아래와 같은 현상이 발생했다. 나는 분명 민서가 바보인지 묻는 minseoIsFool 컴포넌트를 호출하게 했는데, 호출되지 않고 If you meant to render a React component, start its name with an uppercase letter. 에러를 띄우는 현상을 발견했다. 노마드코더 강의 코드와 다르게 쳐서 이런 에러가 발생했나? 싶어서 터미널창을 봤는데 터미널창엔 별다른 에러가 없어 당황했다. 대신 F12를 눌러 크롬 콘솔창을 확인했더니 위 사진과 같은 에러를 발견해 쉽게 문제를 해결할 수 있었다. 다만 다음에도 같은 실수를 하지 않기 위해 포스팅하도록 한다. 해결방법 해결방법은 간단하다. 에러메시지..