공부하는 비오

useRef를 이용하면, document.querySelector처럼 html의 요소를 선택할 수 있다. react의 모든 요소에는 ref라는 속성이 있음. const ul_select = useRef( ) ; 이렇게 코드를 짜면 ul_select.current 라는 변수는 ul요소를 가리킨다. 5초뒤에 input창을 포커스하는 코드.

React 2020. 11. 22. 20:17

useEffect는 componentDidMount, componentWillUnmount, componentWillUpdate와 같은 역할을 한다. useEffect(function, [리스트...]); 두번째 인자는 생략 가능. 두번째 인자가 없을 경우, 모든 변화에 function 실행. 두번째 인자가 있을 경우, 두번째인자가 변경될때에만 useEffect 실행. >>> componentWillUpdate 5초가 지난 뒤에 title이 'Loading...'에서 'Home'으로 바뀜. const titleUpdater = useTitle('Loading...'); 은 componentDidMount, setTimeout(() => titleUpdater('home'), 2000); 은 compone..

React 2020. 11. 22. 17:10

환경변수란? 특정 process를 위한 key=value 형태의 변수. .env 파일에 넣어서 사용. firebase를 사용하면 key들과 url이 담겨있는 config를 하나 만들게 될텐데, github에 노출되는 것을 막기 위해 환경 변수를 사용함. 하지만 어플리케이션을 빌드하면 코드에 결국 이 key들이 들어가므로 완벽한 보안을 위한 것은 아님. 보안을 위해서는 다른 요소를 추가해줘야함. 물론 환경변수가 다 github를 위한 것은 아니고 firebase를 사용했을 때의 이야기... react를 사용하여 만들기 때문에, .env 파일에 다음과 같은 형식으로 적어줌. REACT_APP_{VALUE}={KEY} .env파일의 위치는 상위폴더에 위치해야함.(src폴더에 위치X) .gitignor에 .en..

Firebase 2020. 11. 21. 16:44

그동안 잘 사용해오던 폴더에서 갑자기 npm run deploy가 안됐다 ^^;;;; 'gh-pages'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 그동안 잘 사용해왔었던 폴더여서 이런문제일거라곤 상상도 못했네;;; 어쨌든 저 문구가 키포인트다. 갑자기 왜 안됐는지는 모르겠지만 다시 gh-pages를 깔아서 해결했다.

Error 2020. 11. 20. 00:15

노마드코드 강의를 들으며 이해한 내용을 정리한 내용입니다. *** configureStore({reducer})은 createStore(reducer) 대신 사용. 이걸 사용하면 웹에서 Redux DevTools로 redux상태를 다 확인할 수있다. createSlice createAction과 createReducer을 함께 합친 것. createSlice({ name: 'slice 이름(string)', initialState: state 초기값(any), reducers: { reducer이름: (state, action) => { ...state 변경... } }

Redux 2020. 11. 19. 18:17

노마드코드 강의를 들으며 이해한 내용을 정리한 내용입니다. createRecucer createReducer( sate 초기값, { [action 함수이름] : (state, action) => state 변화 값. } 반복적으로 switch case를 사용하지 않아도 된다. :) 그리고 툴킷을 사용할 경우, state값을 새롭게 반환하거나, 아니면 state를 mutate해서 바꿔줄 수 있다. (반환할경우 mutate할 수 없음)

Redux 2020. 11. 19. 16:53

노마드코드 강의를 들으며 이해한 내용을 정리한 내용입니다. 툴킷은 redux의 많은 보일러 플레이트(boilerplate, 반복적으로 사용되는 비슷한 코드들)를 제거해주고 짧은 길이의 코드 작성이 가능하도록 도와준다. 툴킷을 사용하기위해 설치. createAction tool kit을 사용하면 action을 훨씬 더 간단하게 선언 할 수 있다. 콘솔에 add함수와 delete함수를 찍어봤다. 이를 통해, createAction( type ); 이라는 것을 알 수 있다. 또한 action을 실행했을 때 { payload : 반환 값 } 인 것도 알 수 있다. 그 전에는 payload대신 직접 반환 값의 key를 적어주었다면, 툴킷을 사용할 때는 payload를 key로 사용해야한다.

Redux 2020. 11. 19. 16:25

react_router-dom? 브라우저에서 사용되는 리액트 라우터. 라우팅이란? SPA로 어플리케이션을 만들었을 때, 다른 주소에 따라 화면도 다르게 만들어 주는 것. routes라는 폴더를 만들어주고, 화면이 달라질 때 표시할 컴포넌트별로 나눠줌. APP 메인화면 : 연결화면 : **exact 는 정확하게 '/'만 있는 주소를 가진 화면으로만 이동. exact를 사용하지 않을 경우, /:id도 /가 포함되어있기 때문에, 두 화면이 동시에 출력된다. toDo마다 고유의 id가 있기 때문에 Link를 사용시 Detail로 이동. 링크 클릭 시 주소에 id값이 추가된 것을 볼 수 있다.

Redux 2020. 11. 19. 14:53