Youngble_개발스토리

우리가 실시간으로 ‘감사합니다’ 를 검색할때 ㄱ,ㅏ,ㅁ,ㅅ,ㅏ,ㅎ,ㅏ,ㅂ,ㄴ,ㅣ,ㄷ,ㅏ라고 칠때 연관 검색어가 같은걸 빨리 바꿔줄수있는데 너무 빨리 한다면 서버 요청이 날아가는걸 막기위해 특정시간마다 1번씩 또는 키보드 입력이 멈출때만 1번 연관검색이 뜨게 줄일수있다. 따라서 이런 연관 검색어 부분의 여러차례 빈번하게 발생하게되는 랜더링도 막아 줄수있다. 또한 파이어스토어에서는 무료 요청횟수가 한정적이라 더이상 요청못할수도있다. 따라서 이런걸 막기위해서 debounce와 Throttle 을 사용한다. Debounce란? 이벤트가 일어나면, 일정 시간을 기다렸다가 이벤트를 수행한다. 일정시간 내에 같은 이벤트가 또 들어오면 이전 요청은 취소한다. throttle이란? 일정시간동안 일어난 이벤트를 모아서 주..

심화과정으로 배워야할 내용과 구현해야할 기능들이 많아서 몇일동안 블로그 관리를 못했다. 기존의 배운 CRUD를 이제 많은 컴포넌트 단위로 잘르고 페이지와 최소화 컴포넌트를 이어서 만드는등 아직 많이 해보지않았어서 이해하는데 애를 먹었다. 그리고 기존의 방식으로 firebase나 리덕스에 연결하는게 아니라 redux-actions 로 좀더 간결하게 쓸수있도록 해주는등 아직도 생소한게 많아서 이건 WIL 일때 정리해도록하겠다. 오늘은 회원가입시 이메일형식으로 아이디를 입력받아야하기 때문에 정규식을 써서 test를 하는 방식을 배웠다. 정규식은 // 안에 내용을 쓰는데 처음부터 해석하면 ^는 처음 맨앞에 나올 문자를 정해준다. 숫자와 영대소문자가 가능하다. 그다음엔 ()로 이루워져있는데 뒤에 *을 사용하기위함..

숙련주차인 4주차를 거치면서 우리가 배우는 함수형 컴포넌트로 사용하는것에 대해서 어느정도 익숙해진것같다. 그안에서 기존에 배웠던 클래스방식의 라이프사이클이 어떻게 이루워지는지 알게되었고 왜 클래스방식보단 함수형태로 쓰는지 알게되었다. 클래스로 쓸때는 자바스크립트의 지식도 많이 요구되어서 this 바인딩이나, 클로져, state의 흐름등도 알아야하고 제약이 많이있었다. 하지만 함수형 컴포넌트를 쓰면서 이러한 클래스의 기능등을 리액트 훅을 써서 간단하고 짧지만 모든 기능을 할수있게 해주는게 편하다고 생각했다. 요번주차때 가장 집중하고 또 이해하는데 시간을 많이 투자한건 역시 redux의 구조와 어떤 흐름으로 이루어지는지, 그리고 Redux의 휘발성 데이터를 유지하기위해 파이어베이스 스토어를 사용할때 어떻게 ..

주특기과정동안 리액트의 컴포넌트의 특성을 배우기위해 클래스형 컴포넌트와 함수형 컴포넌트 를 배웠다. 부랴부랴 배우면서 어느정도 큰틀을 알게되었지만 useEffect의 정확한 구조와 왜 쓰는지에 대해서는 어렴풋이 알기만했다. 요번주차에서 이 useEffect 이 무엇이고 어떤 구조고 어떻게해서 쓰게되는지 정리하고 싶었다. useEffect함수의 기본 구조는 아래와 같다. React.useEffect(()=> { Didmount 부분과 DidUpdate 부분 return () ⇒ willunmount 할부분 }, [두번째인자부분]) useEffect을 설명하기전에 기본 라이프사이클 구조를 보자면 위와 같이 이루워지는데 useEffect을 사용하는 함수형 컴포넌트는 클래스컴포넌트와 다르게 하나하나 compon..

리액트의 hook을 알아보기전에 먼저 기본적으로 Side Effect이 무엇인지 알아야한다. 01 Side Effect란? React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 한다. 예를들어 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 왜 먼저 렌더링하냐면 연동된 API가 응답이 늦거나 없을 때 데미지(~~답답함)~~을 최소화 시켜 사용자 경험 측면에서 유리하기 때문이다. → 한마디로 요구되어지는 이펙트 이외에 다른 이펙트가 발생하는 현상이라고 생각하면 된다. → Hook은 이 side effect 를 수행하는역할을 한다. ..

then 함수 자바스크립트에서 함수는 동기함수, 비동기 함수로 나뉜다. 우리가 작성한 코드들은 위에서 아래로 순차적으로 코드가 실행되고 하나의 코드가 종료되지 않는다면 다음 코드로 넘어가지 않는다. 이것이 동기함수이다. API를 호출할 때, 사용하는 fetch 함수는 대표적인 비동기함수이다. 그렇기 때문에 API호출하는 과정이 끝나지 않더라도 자동적으로 다음 코드로 넘어간다. 하지만 API로부터 받아온 정보를 사용할 필요가 있는 경우에 .then함수를 쓰는 것이다. 비동기처리 $.get() 을 이용하여 해당 URL에서 /product/1에 대한 정보를 서버에 요청하는 것이다. 서버에서 받아온 데이터는 response 에 담기고 function 인자에 넘겨주었다. 그 인자값을 tableData에 넣어주고 ..

프로젝트 진행중에 추가하기 기능을 써서 단어를 추가하면 이상하게 순서가 랜덤하게 위치하게 되었다. 알아보니 파이어베이스 스토어에는 랜덤한 id 값을 각 콜렉션 문서마다 넣어 주게 되는데 0-9,a-zA-Z 이런 순서로 차례로 정렬이 된다. 하지만 새로 추가한다고 1번부터 시작하는것도 a부터 시작하는것도 아니고 랜덤하게 주어지기때문에 로드액션함수 미들웨어 부분에서 파이어스토어에서 가져온 콜렉션을 forEach 를 사용하여 그 스토어에 담긴 순서대로 data()값을 새 리스트에 만들어 주기때문에 추가할때마다 단어가 앞이나 맨뒤에 뜨지 않게 되는것이였다. 이리저리 찾아보다가 멘토님들이 알려준 타임스탬프, 임의의 값을 주어서 그것을 sort 하는 방식, 파이어베이스의 orderBy 등등 이있었는데 아직 생소한 ..

요번주차 과제를 완성하고 추가기능중 수정하기 기능을 완성했다. 수정하기아이콘을 누르면 기존 카드에 있던 정보들을 그대로 가져와 차례대로 input 안에 미리 넣어놓고, 화면에 보여주게 해야하는데 처음에 접근할때 useParams 를 이용하여 URL 뒤에 오는 인덱스값이나 id 값을 넣어주고 그 값을 파이어스토 어에서 있는걸 가져올까 생각을 했는데 그렇게하면 쓸때없는 for 문을 돌려야하고 이게 파일이 많아지면 비효율적인 코딩이 될거같아서 그만두고, 어떻게 해야 가져올수있을까 생각하다 답이안나와 다른분에게 조언을 얻고나서 아 이걸 진작 생각못했네 라고 생각했다. input 속성 defaultVaule 값에 미리 useselector 를 선언과 초기화하여 기존에 리덕스에 있는 정보들을 변수 bucket_li..

React의 element들 안에 Key 값을 가지고 있어야한다. 없으면 warning 이 뜨는데 각각의 자식요소들은 unique한(독자적인) key prop을 가지고 있어야한다고한다.

리덕스의 store 를 사용하기위해서 index.js 에 {Provider} 를 import 하는걸 볼수있는데 이것이 무엇인지 나오지 않았다. 공식문서를 통해 무엇인지 보면 다음과같다 Passing the Store with Provider Our components can now read state from the store, and dispatch actions to the store. However, we're still missing something. Where and how are the React-Redux hooks finding the right Redux store? A hook is a JS function, so it can't automatically import a store f..