kth990303의 코딩 블로그

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

리액트는 컴포넌트 선언을 할 때 두 가지 방법이 있다. 하나는 클래스형, 다른 하나는 함수형이다. 예전에는 클래스형만이 상태변경에 따른 렌더링이 가능하여 클래스형을 많이 썼다고 하나, 최근에는 리액트 훅이 생겨나면서 리액트 훅 + 함수형 컴포넌트의 사용을 더욱 권장하는 시대라 한다. 나는 리액트를 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를 눌러 크롬 콘솔창을 확인했더니 위 사진과 같은 에러를 발견해 쉽게 문제를 해결할 수 있었다. 다만 다음에도 같은 실수를 하지 않기 위해 포스팅하도록 한다. 해결방법 해결방법은 간단하다. 에러메시지..