Youngble_개발스토리

리액트의 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..

오늘은 리액트 기초에서 마지막5강을 다 들었다. 배운내용은 그전에 배운 리덕스로 값을 저장하고 기능을 했던 버킷리스트를 새로고침했을때 캐쉬값이 다 날라가서 초기화 되기때문에 이를 막기위해서 인터넷에서 db 데이터베이스와 같은 역할도 하고 서버역할도 해주는 마치 백엔드 서비스를 해주는 firestore를 쓰는법을 배웠다. 헷갈렸던부분은 이제막 리덕스의 구조를 파악하고 어떤 흐름과 로직으로 이동하고 인자나 파라미터들이 움직일수있는가를 습득하고있었는데 그걸다시 firestore와 연결을 해야해서 이해를 하면서 들었지만 커져버린 코드들로인해서 그저 1m 앞만 볼수있고 그줄을 잡고 따라 가는 기분이였다. 당장 앞에는 이해하지만 내 뒤와 앞이 보이지 않는 느낌이였다. 그전주차때도 마찬가지였기에 어서 5강을 듣고 다..

리덕스 기본 구조 리덕스는 상태관리 라이브러리 이다. 리덕스를 잘라보면 스토어와 리듀서로 나눠져있다. 스토어는 전역데이터가 있는곳을 스토어라고 부른다. 리듀서는 데이터를 수정하는 공간이다. 원하는 연산이나 결과물을 계산하고 데이터가 실제로 변하는곳 구독한다는건 store 에서 data 를 받아올려고 연결하는것을 구독한다라고 한다. 즉 리덕스 store를 component에 연결되었다 라고 할수있다. 액션한다는건 어떤 데이터에대해서 어떤 행동을 store 에 요청한다 라고한다(더하기,빼기, 나누기, 등등). 이때 액션을 디스패치 한다 라고한다 dispatch :deal with (a task, problem, or opponent) quickly and efficiently. 어떤 문제나 작업을 빠르고 효..

for문과 if문등 ` `백틱안에서 쓸수없지만 삼항연산자, &&,|| 등은 쓸수있다. 또한 ${}를 사용하여 그안에 화살표함수를 만들어줄수도있다. 그리고 해당 변수태그안에 p라는 자식요소가 있다면 위의 styled 안 ``에서 그냥 css 쓰듯이 p{color : blue} 같은 형식으로 써주면된다. Export 와 import 관계, {} 중괄호 있고 없고의 차이 export 할때 {c} 와같이 중괄호를 주고 하면 import 할때도 그렇게 가져오고 default 로 줄경우 {} 가 필요없다. 단 default 는 한개의 js 파일에서 한개만 가질수있다. 자바스크립트 변수쓸땐 중괄호{}안에 넣어준다. styled components 문법중하나가 `` 안에 & 를 쓰면 나자신이라고 나타내는것이다 따라서 ..

먼저 요번주를 배우고 끝날때쯤 주특기와 별개로 코딩하는것이 재미있고 만드는 성취감 남을위해 어떤 편리함이 있을까 생각하는 프론트엔드 적인 마인드 이외에도 어느 분야의 회사를 가고싶은가에 대해서 생각해보았다. 막연히 코딩이 좋고 프론트엔드의 적성이 좋은것이 시작의 이유이면서도 어느 분야에서건 상관없는지, 어느 분야에 따라 내가 성장하고 즐길수 있을지를 생각해보았다. 회사분위기, 근무환경도 당연히 중요하고 사수가 있고 없고 내가 가서 얼만큼 성장하고 한 일원이 될수있는지가 중요하다고 당연히 생각하면서도 내가 과연 어떤 분야에서건 저것만 있으면 만족할까? 라고 생각했다. 분야를 생각하면 몇가지 있었다. 하나는 게임분야 하나는 교육분야 였다. 게임은 그전부터 일해보고싶었다. 웹개발자를 생각하기전에 유니티를 잠깐..