JS' 공부흔적

이전 글에서 함수 컴포넌트는 인스턴스를 갖지 않기 때문에 ref가 존재하지 않는다고 잠깐 언급하였다. 이를 보고 인스턴스가 무엇인지, 그리고 컴포넌트와의 차이는 무엇인지가 궁금해져서 더 알아보았다. 또한 엘리먼트와도 함께 비교해보았다. Element 엘리먼트는 UI를 나타내기 위한 가장 작은 단위이다. 보통 일반 자바스크립트 객체(plain JavaScript object)로 표현되는데, 이는 type과 props 필드로 구성되며 아래와 같이 나타낸다. { type: "button", props: { className: "btn-style" } } 위 엘리먼트는 React의 JSX 문법을 통해 아래와 같이 표현된다. const element = Click; Component 컴포넌트는 특정 기능을 수행하..

최근 합류한 사이드 프로젝트의 코드를 테스트하던 중 아래와 같은 Warning을 발견했다. Warning: Function components cannot be given refs. Did you mean to use React.forwardRef()? 함수 컴포넌트에는 ref가 존재하지 않는데, forwardRef()를 쓰려고 했던 것이 아니냐는 Warning이었다. 해당 부분 코드를 확인해보니 자식 컴포넌트에 쓰이는 ref를 부모 컴포넌트에서 관리하고 있었다. 대략적인 코드를 보자. // CalendarContainer.jsx (부모 컴포넌트) const CalendarContainer = ({ type }) => { const calendarRef = useRef(null); ... return (..

같은 버튼을 클릭해도 마우스로 클릭할 때와 키보드로 클릭할 때 다르게 동작하도록 구현할 필요가 생겼다. 원래는 키보드를 눌렀을 때 useState()를 통해 boolean state로 관리하려고 했지만, 의도한 대로 동작하지 않았다. 이를 event 객체의 detail을 사용하여 해결했다. event.detail이란? event.detail은 특정 이벤트 내에서 마우스로 버튼을 누른 횟수를 나타낸다. 버튼이 한 번 눌렸다면 1, 더블 클릭을 했다면 2, 그 이상 다중 클릭을 했다면 해당 숫자만큼 표시된다. 아래 각 경우에 해당하는 예시를 보자. 위에서 언급했듯이 특정 이벤트 내에서 마우스로 버튼을 누른 횟수를 나타내기 때문에, 만약 키보드 동작으로 버튼을 클릭한다면 event.detail 값은 0이 나온..

useEffect에 deps 배열에 특정 값을 넣으면, 다음의 2가지 경우에 useEffect 내의 콜백 함수가 실행된다. 컴포넌트가 마운트 될 때 deps 배열 내의 값이 변경될 때 그러나 1의 경우에는 콜백 함수를 실행하지 않고, 2의 경우에만 콜백 함수를 실행해야 할 때도 있을 것이다. 그럴 때는 아래와 같이 isMounted라는 state를 선언하여 활용하면 된다. const [isMounted, setIsMounted] = useState(false); useEffect(() => { if (isMounted) { ~~ } else { setIsMounted(true); ~~ } }, [something]); 최초에는 isMounted가 false이므로 useEffect 내의 콜백함수 중 els..

React를 사용해 개발하면서 라우팅 기능을 구현할 때 대부분 react-router-dom을 사용할 것이다. react-router-dom에는 수많은 라우터 중에 HashRouter와 BrowserRouter가 존재한다. 둘 중에서 대부분 BrowserRouter를 사용하여 라우팅을 구현할 것이다. BrowserRouter와 HashRouter를 비교하는 글들이 많은데, 각각의 특징을 간단히 적자면 아래와 같다. Hash Router 주소에 Hash(#)가 붙는다. Hash(#) 때문에 검색 엔진이 읽지 못한다. (SEO 최적화 X) 별도의 서버 설정을 안 해도 새로고침 시에 에러가 발생하지 않는다. Browser Router History API를 사용한다. 별도의 서버 설정을 하지 않으면 URL에 ..

[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (3) - Firestore를 사용하여 데이터 다루기 [Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (2) - Firebase를 사용하여 이메일 로그인 구 [Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (1) - Firebase와 React 연동하기 앞으로 4편에 2junsu.tistory.com 이전 글에 이어서 이번 글에서는 지금까지 만든 프로그램을 직접 배포하는 방법에 대해 다룬다. 우선, 콘솔에 들어가서 Hosting을 클릭한 후 시작하기를 누른다. 아래 명령어를 입력한다. npm i -g firebase-tools firebase login fire..

[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (2) - Firebase를 사용하여 이메일 로그인 구 [Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (1) - Firebase와 React 연동하기 앞으로 4편에 걸쳐서 파이어베이스와 리액트를 사용하여 아주아주 간단한 프로그램을 만들어보는 글을 작성 2junsu.tistory.com 이전 글에 이어서 이번 글에서는 Firebase에서 제공하는 DB인 Firestore를 사용하여 간단한 데이터를 저장하고 불러오고 삭제하는 것을 다룬다. Firestore 기본 설정 우선, 콘솔에서 Firestore Database를 클릭하여 데이터베이스를 만든다. 프로덕션 모드에서 시작을 선택하고 다음을 누른..

[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (1) - Firebase와 React 연동하기 앞으로 4편에 걸쳐서 파이어베이스와 리액트를 사용하여 아주아주 간단한 프로그램을 만들어보는 글을 작성할 예정이다. 이번 글에서는 파이어베이스와 리액트를 연동하는 것에 대해 다루겠다 2junsu.tistory.com 이전 글에 이어서 이번 글에서는 이메일을 사용한 회원가입 및 로그인 기능을 구현해 보자. 공식문서 링크는 여기 기본 설정 우선 전에 만들었던 test 프로젝트를 눌러서 콘솔로 이동한 후에 Authentication을 클릭하고, 이메일/비밀번호를 클릭한다. 그리고 이메일/비밀번호 사용 설정에 체크한 후 저장을 누른다. 이제 이메일로 회원가입/로그인을 구현하기 위한 준비..

앞으로 4편에 걸쳐서 파이어베이스와 리액트를 사용하여 아주아주 간단한 프로그램을 만들어보는 글을 작성할 예정이다. 이번 글에서는 파이어베이스와 리액트를 연동하는 것에 대해 다루겠다. 우선 리액트 프로젝트를 만들어 준다. npx create-react-app test 그리고 파이어베이스에 접속하여 로그인 후에 콘솔로 이동하여 "프로젝트 추가"를 누른다. 프로젝트 이름을 입력하고 넘어간다. 그 다음으로는 Google 애널리틱스 사용 설정이 나오는데, 나는 그냥 설정에 체크하고 넘어갔다. Google 애널리틱스 사용 설정을 했다면 Google 애널리틱스 구성이 나오는데, Default Account for Firebase를 선택한 후 넘어간다. "프로젝트 만들기"를 누르고 프로젝트 생성을 완료한다. 그러면 아..

React에서 Firebase를 연결해 로그인 기능을 구현하던 중, API KEY가 유효하지 않다는 에러가 발생했다. auth/api-key-not-valid.-please-pass-a-valid-api-key. .env 파일을 생성하여 아래와 같이 관련된 값들을 저장한 후에 firebase-config 파일에서 불러다 쓰고 있었다. REACT_APP_FIREBASE_API_KEY = ... REACT_APP_FIREBASE_AUTH_DOMAIN = ... REACT_APP_FIREBASE_PROJECT_ID = ... REACT_APP_FIREBASE_STORAGE_BUCKET = ... REACT_APP_FIREBASE_MESSAGING_SENDER_ID = ... REACT_APP_FIREBASE_..