kth990303의 코딩 블로그

이번엔 에러는 아니지만, 원하는대로 프로그램이 돌아가지 않는 현상이다. 일기장 프로그램을 만들기 위해 아래와 같은 임시데이터를 만들었다고 하자. const dummyList = [ { id: 1, author: 'author1', content: 'content1', emotion: '5', created_date: new Date().getTime(), }, { id: 2, author: 'author2', content: 'content2', emotion: '4', created_date: new Date().getTime(), }, { id: 3, author: 'author3', content: 'content3', emotion: '3', created_date: new Date().getTi..

js로 작성한 코드들을 ts로 변화시키는 작업을 하고 있다. useRef는 js나 ts나 큰 변화는 없다. 우리는 이번 포스팅을 통해 보다 똑똑하게 useRef를 사용해보도록 하자. useRef란? 간단하게 useRef가 무엇인지부터 짚고 넘어가보자. useRef는 꽤 많은 상황에서 쓰인다. 컴포넌트에서의 어떠한 DOM을 선택해야 할 때 쓰이기도 하고, 컴포넌트 내부에서 다룰 수 있는 변수를 만들어야 할 때에도 쓰인다. 전자의 경우는 예를 들어 특정 input, textarea 등의 태그에 focus를 줘야하는 경우에 쓰이고, 후자의 경우는 setState로 다루지 않는 변수들 (예를 들면 비동기 처리를 할 때 쓰이는 setTimeOut, setInterval에서 id를 담아 중복클릭을 방지할 때 쓰이는..

useState를 사용하면 프로젝트 규모가 커지기 시작할 때, state가 너무 많아지거나 부모와 자식 컴포넌트 간 관계가 굉장히 복잡한 경우가 존재한다. 이런 경우에 부모-자식 관계를 관리해주는 리덕스를 이용하거나 useReducer, contextAPI, dispatch를 사용한다고 한다. 이번 포스팅에서 틱택토를 만드는 과정의 일부를 통해 reducer, action, 그리고 dispatch에 대해 알아보도록 하겠다. 참고로 이번 포스팅은 조현영님의 React 웹게임 기본강좌 https://youtu.be/ccKoutCkbao 를 수강하면서 복습 용으로 작성하는 것이다. 틱택토에 필요한 states를 useState가 아닌 useReducer로 useState를 사용할 땐 관리하는 state들을 모..

리액트 공부를 하던 도중 아래 에러가 발생했다. Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 근데 정말 신기한 점은 컴포넌트명에 딱히 오타가 없어보인다는 점이다. 리액트에서 디버깅을 시도했는데, 브레이크포인트를 아무리 앞쪽으로 잡아도 바로 저 에러부터 뜨니까 너무 답답했었다. 그런데 알고보니 정말 간단한 곳에 문제가 있었다. 틱택토 컴포넌트를 다른 파일에서 쓸 수 있도록 export default TicTacToe; 를 해놓았으니, 받을 때도 import로 받았어야 했는데 require로 받아버렸다. 그래서 안되는..

+) 22.01.31. 추가 1. Object여서 length를 사용하지 못해 undefined로 뜨는 경우는 아래 포스팅 참고! 2. 배열을 넘겨줬는데 왜 length를 쓰면 undefined로 뜨는지 의문사하는 경우도 아래 포스팅 참고! https://kth990303.tistory.com/254 [typescript] JS에서 length가 undefined로 뜨는 현상 고치기 객체의 개수를 파악하기 위해 diaryList.length를 console.log하면 아래와 같이 나타나는 현상을 수정해보자. 문제점 일단 diaryList가 제대로 넘어온건 맞는지 확인하기 위해 console.log로 diaryList도 쳐보도. kth990303.tistory.com 이 포스팅은 리액트 훅(useState..

요즘 나는 덤벨과 맨몸운동, 그리고 유산소 운동을 자주 하는 중이다. 그러던 어느날, 점진적 과부하를 위해 운동일지를 틈날 때마다 기록하는 것이 좋겠다고 생각했고, 마침 친구와 함께 리액트 스터디를 진행중이었으므로 리액트로 운동일지 다이어리를 만들어보면 어떨까 생각하게 됐다. 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..

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

우리가 웹사이트에서 페이지 이동을 할 때 react-router-dom을 이용하면 편하다. 예를 들어 도메인주소/register를 입력하여 이 웹사이트로 이동했다가, 도메인주소/list 를 입력하면 회원명단이 보이게 사이트를 이동해주게 하는 기능이다. create-react-app을 이용해 진행하였다. react-router-dom 이용하기 이용하기 위해 https://reactrouter.com/web/example/basic 사이트에서 코드를 가져오자. 이후 app.js에 위 코드를 가져와주자. 귀찮다면 아래 코드를 그냥 ctrl-c, ctrl-v를 하자. 어떻게 가져오는지 아래 코드를 보고 참고하자. import React from "react"; import { BrowserRouter as Ro..