뇌 채우기 공간

우리의 프로젝트에 구글애널리틱스를 심어보자! 알고보니 어려운 것이 아닌데 자료가 많이 없어서 좀 헤맸던 부분이다. 이렇게만 하면 된다. 1. 구글애널리틱스에 가서 속성만들기 구글애널리틱스가 업그레이드가 되었다고 하는데 우리가 쓸 라이브러리는 이전버전이므로 유니버셜 애널리틱스 속성을 만들어준다. 2. 코드심기 왼쪽 하단 설정-> 추적정보-> 추적코드에 들어가면 id와 코드가 이렇게 나온다. 이 코드를 index.html의 head태그 안에 넣는다. 3. react-ga 설치 https://www.npmjs.com/package/react-ga react-ga React Google Analytics Module www.npmjs.com 4. App.js에서 추적하기 useEffect(()=>{ ReactG..

input박스에서 검색어를 치면 자동완성 기능을 만드려고 한다. 우리가 검색을 하려고 하는 기능은 1. 책검색 2. 사용자가 올린 태그 기반으로 컬렉션 검색 태그로 컬렉션을 검색하는 것은 태그가 별로 없기 때문에 글자를 칠때마다 요청을 보내는 것보다는 한번에 받아와서 프론트에서 처리하는게 낫다고 생각했다. 그래서 먼저 태그를 배열로 한번에 받은 다음에 Hint라는 라이브러리를 사용해서 구현했다. 이것은 다음 게시물에 담겠다. 그런데 책 검색 같은경우에는 책이 워낙 방대하다보니 한번에 받아오는 것은 불가능했다. 그래서 2글자 이상 쳤을때 디바운스를 이용하여 일정 시간동안 이벤트가 없으면 서버에 검색요청이 가도록 했다. 그리고 서버에서 받아온 값을 리덕스에 저장하고 리덕스에 있는 값을 밑에 띄웠다. 여기서 ..

문제발생 우리의 서비스에는 피드가 있다. 이 피드를 계속 구경하다가 다른 페이지를 갔다가 다시 오면 내가 보던 그 화면으로 갔으면 좋겠다. 처리 먼저 리액트 컴포넌트에다가 scroll이벤트를 주어야한다. 우리는 window자체가 스크롤이 되는 형태가 아니기에 div자체에 scroll이벤트를 주어야한다. 그러면 onscroll을 쓰면된다. 나는 최상위 컴포넌트 (styled componen)를 ref contain을 주었고 onscroll로 scroll이라는 함수를 넣어주었다. //scroll 이벤트 관련 const [scrollLocation, setScrollLocation] = useState(0); const lastScroll = useSelector(state=> state.review.curr..

react router에 tansition을 주고 싶어! 그래서 찾아봤던 것이 react-transition-group이다. React-Router는 현재 경로가 바뀌면 즉이 DOM에서 제거하기 때문에 화면을 겹쳐서 애니메이션을 주려면 history가 바뀌기 전에 애니메이션을 실행시켜야한다. 공식적으로는 react-transition-group 사용을 권장한다. 리액트 공식 라이브러리이다. 공식문서가기 모든 페이지에 트랜지션 주기 일단 모든 페이지에 트랜지션을 주는 것은 쉽다. TransitionGroup태그와 CSSTransition 태그를 Switch위에 감싸주면 된다. 라우터는 각각의 key를 갖게 되는데 그것을 pathname으로 준다. key를 가진 라우터에게 classNames가 pageSli..

상태 업데이트를 useState로 컴포넌트 내부에서 하는 방법도 있고 . useReducer를 사용해서 컴포넌트 바깥에서 사용할 수 있다 reducer : 상태를 업데이트 하는 함수 dispatch: 액션을 발생시킨다. 사용법 import React, { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } } reducer함수를 만들어주고 action의 type을 받아와서 case(액션) 마다 다음값이 무엇이 될지 return으로 설정해..

useCallback으로 이전에 만들었던 함수 재사용 하기 컴포넌트가 리렌더링 될때마다 새로운 함수를 계속 만들고 있는 문제 -> 함수를 새로 만드는 것은 메모리도 cpu도 많이 차지하지는 않기 때문에 그 자체만으로 부하가 걸리진 않는다. 그럼에도 한번 만든 함수를 재사용할 수 있다면 재사용 하는게 좋다. 사용법 const onChange = useCallback( e => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value }); }, [inputs] ); 이렇게 useCallback으로 감싸준다 그러면 deps에 넣은 값이 바뀔때만 함수가 새로 만들어진다. 여기서는 inputs가 바뀔때만 함수가 새로 만들어진다. 이렇게만 ..

참고: 땅콩코딩 1. 타입명시 syntax 변수에 타입 명시하기 let studentId:number = 12345; let studentName:string = "hyeonju"; let age:number = 21; let gender:string= "woman"; let subject:string ="fashion"; let courseCompleted:boolean = false; function에 리턴값 지정 타입스크립트에게 더욱 더 정확하고 자세한 정보를 주는 것이 좋다. function의 반환값을 지정해줄 수 있다. 아무것도 리턴하지 않는다면 void를 주면 된다. 지금은 객체를 리턴할 것이므로 object를 썼다. 하지만 위에서 말했듯 자세한 정보를 주는 것이 좋다. 반환값과 유사한 형태로..

앞의 게시물 보고 오기 타입 스크립트는 우리가 할당한 값에 의거하여 타입을 추론한다. 그래서 애초에 number로 할당했던 변수에 string을 새롭게 할당하려고 하면 오류가 난다. 위의 function에서도 lostPoints의 타입을 지정해주지 않았지만 hover를 해보면 return값을 분석하여 lostPoints가 number일것이라고 추론하는 것을 볼 수 있다 . 매우 똑똑하다 참고 : https://www.youtube.com/watch?v=rwqqhvR353A&list=PLJf6aFJoJtbUXW6T4lPUk7C66yEneX7MN&index=3

타입스크립트(TypeScript)란? 자바스크립트의 supterset인 오픈소스 프로그래밍 언어. 마이크로 소프트에서 개발, 유지 하고 있음 엄격한 문법을 지원. 자바스크립트 엔진을 사용하여 커다란 애플리케이션을 개발할 수 있게 설계된 언어. 모든 운영체제, 모든 부라우저, 모든 호스트에서 사용가능한 오픈 소스 자바스크립트의 모든 기능을 포함, 자바스크립트에 포함되지 않는 새로운 기능이 있다. 왜 타입스크립트를 사용하는가? 자바스크립트를 사용할때보다 버그를 줄이고 유지보수가 쉽다. 질 좋은 코드를 만들 수 있다. 특징 1. 변수를 정의할 때 데이터 타입 지정 가능 예측가능하며 디버깅하기 쉽다. 2. 객체 지향적이다. 3. 컴파일 타임 오류를 잡을 수 있다. 개발환경 설정하기 1. 준비 vscode, no..

useMemo라는 hook을 사용해서 연산된 값을 저장해놓을 수 있다. 성능최적화에 쓰인다. 참고 블로그 : 벨로퍼트 function countActiveUsers(users) { console.log('활성 사용자 수를 세는중...'); return users.filter(user => user.active).length; } 활성 사용자 수를 알게 하기 위해서 함수를 만들었다. 이 함수는 이름을 눌러서 초록색이 된 사용자만 세면 된다. 그런데 문제는 input값이 바뀔때에도 저 함수가 호출되는 것이다. input 값이 바뀔때에는 저 함수가 실행될 필요가 없다. const count = countActiveUsers(users); const count = useMemo(() => countActiveU..