axios를 사용해서 데이터를 가져올 경우에 데이터를 가져오는 서버나 주소 값은 노출되어선 안된다! 그래서 .env 파일을 생성해서 git에 올라가지 않도록 해야한다. .env를 작성할 때는 리액트이기 때문에 제일 앞에 REACT_APP_을 꼭 붙여주어야 한다! 그래야지 리액트에서 .env 파일을 읽어올 수 있다고 한다. 그리고 환경변수를 사용할 때는 process.env.환경변수이름 이런 식으로 작성하면 된다! 이렇게 다 작성을 하고, 리액트를 실행시켰는데 계속해서 404 에러가 나타났다. Get을 해오는 주소가 잘못되었다는 내용인 것 같았다. Get을 하는 주소가 http://localhost:4000/todos 로 확인되어야 하는데, 계속해서 앞에 localhost:3000이 붙어서 나온 것이다....
firebase를 컴포넌트로 바로 불러와서 map으로 화면에 뿌려줄 때는 페이지가 뜨자마자 바로 작동했는데, redux에 firebase 데이터를 저장하고 redux store에서 데이터를 불러와서 사용하는 방식으로 바꾸고 난 뒤 리렌더링이 일어나지 않으면 화면에 firebase에서 불러온 데이터가 나타나지 않는 현상이 발생했다. 리렌더링을 일으키면 데이터가 화면에 뿌려진다는 것을 확인하기 위해서 state를 하나 생성해서 setState를 일으키는 버튼을 만들어보았다. const PostList = () => { const posts = useSelector((state) => state.posts); const [num, setNum] = useState(0); console.log(posts); r..
숫자 세자리 마다 콤마 붙이기 toLocaleString() 정규식 toLocaleString() 메서드를 이용했을 때 오류가 있었다. input에서 입력받은 value를 onChange를 이용해서 state에 저장하는 방식에 toLocaleString()을 추가해서 사용해보고자 했지만 잘 동작하지 않았다. { setPrice(event.target.value); }} /> 처음 시도했던 코드가 위의 코드이다. toLocaleString() 메서드를 사용하려면 숫자형식에만 사용이 가능하기 때문에 먼저 parseInt() 를 이용해서 입력받은 값을 string에서 number로 형변환을 했다. 그리고 그 값에 toLocaleString()을 하면 1,234이렇게 네자리까지는 문제 없이 콤마를 찍어준다! 하..
React styled components const StButton = styled.button` cursor: pointer; padding: 10px 49px; margin: 0px 10px 0px 10px; background-color: white; border-radius: 10px; `; styled components를 사용하기 위해서는 먼저 yarn add 로 설치를 해주어야 한다. 그리고 import한 후에 사용할 수 있다. 위의 코드처럼 변수에 원하는 요소이름 앞에 styled를 붙이고 사용하면 된다. 백틱 안에 css요소를 작성하면, 은 이제 해당 스타일이 적용된 버튼으로 보인다. { const deletedtodos = todosStore.filter((item) => item.i..
uuid 먼저 yarn add react-uuid를 통해 패키지 설치를 한 후 사용할 수 있다. 요소마다 구분할 수 있는 특별한 값이 필요한 경우에 사용하면 된다! { id: uuid(), title: "제목1", contents: "내용1", isDone: false, } 위의 사진처럼 todo list 하나마다 삭제하거나 완료를 해야하는 상황에서 uuid()메서드를 사용하면 고유한 id값을 사용할 수 있다. uuid()를 알지 못했을 때는 id : todo.length +1 이 방식으로 id값을 부여했다. 하지만 이렇게 하게 될 경우 리스트를 삭제하고 새로 추가하는 과정에서 id값이 같은 리스트가 만들어질 수 있는 오류가 있었다. Spread Operator let str = 'hello world'..
React Hook useState 배치 업데이트 : 변경된 내용을 한꺼번에 모아서 한번에 실행 함수형 업데이트 setState((현재state)=>{return ~~~}) uesEffect 렌더링 될 때, 특정한 작업을 수행해야 할 경우에 설정하는 hook 의존성 배열 Dependency Array clean up : return에 함수로 작성 useRef ref 값에는 current 값이 존재한다. 설정된 ref 값은 unmoount 전까지 유지된다. let 키워드를 사용해서 내부변수를 선언하면, 렌더링 시 변수가 초기화된다!! (함수라서) input의 ref라는 속성을 통해서 해당 DOM요소로 접근할 수 있다. split() 메서드 let alphabet = ['a', 'b', 'c', 'd', '..
이번주에 알게된 것 React에서 화면을 렌더링 되기 위해서는 State가 변경되어야 한다. useState hook을사용해서 변수를 관리해줘야 한다. 만약 State가 객체일 경우에는 불변성을 유지하는 방법을 사용해야 한다. (spread operator 등) map() 메서드 인자로 콜백함수를 받을 수 있다. 만약 콜백함수의 return값이 한줄이라면 생략해서 작성 가능하다. (a)=>a*2 만약 콜백함수의 return값이 한줄이 아니라면 괄호 안에 멀티라인으로 작성 가능하다. return을 쓰지않으면 undefined가 반환된다. onClick과 onChange 해당 메서드로 event를 제어할 수 있다. evnet 제어 시 인자로 event를 받아야 한다. onChange = {(event)=>e..