분류 전체보기

NodeBird 복습/React

react nodeBird 1-14(faker, 인피니트 스크롤링 적용하기)

Faker(페이커) 적용하기 이제 더미데이터를 페이커를 이용해서 랜덤하게 설정해줄 수 있습니다. npm으로 페이커를 설치하고, faker가 가지고 있는 함수를 통해 닉네임, 글, 이미지등을 가상으로 만들어줄 수 있습니다. 또한, 아래 링크를 통해 페이커 설치, 사용방법을 익힐 수 있습니다. www.npmjs.com/package/faker faker Generate massive amounts of fake contextual data www.npmjs.com 이제 페이커를 이용해서 generateDummyPost라는 더미데이터를 만들어주고, 글을 initialState의 mainPosts에 concat으로 글을 추가해줍니다. 이 코드는 generateDummyPost 함수를 이용해서 서버에서 데이터를 ..

NodeBird 복습/React

react nodeBird 1-13 (immer 적용하기)

리액트의 불변성을 지키려고 하면 위 그림처럼 길게 써야되고, 초보자가 하기에는 무리가 있습니다. 코드가 오류나기도 쉽기 때문입니다. 따라서, 이런 문제를 해결하기 위해 immer라는 라이브러리를 사용합니다. return produce(state, (draft) => { });가 기본 모양이고, 이를 이용하여 코드를 작성하면 됩니다. draft.뒤에 코드를 작성해주면 되고, immer를 사용하게 되면 코드량이 감소되고, 가독성, 생산성이 높아져 보다 깔끔한 코드를 작성할 수 있습니다.

NodeBird 복습/React

react nodeBird 1-12 (게시글, 댓글 작성, 삭제하기)

일단 데이터의 흐름이 중요합니다. PostForm에서 dispatch(addPost(text))를 하게되면 reducer의 post.js에서 addPost로 데이터를 받고, 동시에 saga의 post.js에서 ADD_POST_SUCCESS로 데이터를 처리하게됩니다. ADD_POST_SUCCESS가 되면 reducer post.js에서 ADD_POST_SUCCESS가 실행되고, mainPosts 부분이 변경되면서 글이 작성되게 됩니다. 이런 데이터 흐름을 알고 진행하면 됩니다. 화면에 그려지는 부분과 데이터가 처리되는 부분을 명시하면서 작성을 해야합니다. Encountered two children with the same key, `2`. 이런 이슈가 나오는거는 dummyPost의 id가 2로 고정되어있..

NodeBird 복습/React

react nodeBird 1-11 (리덕스 사가 이펙트)

위 그림처럼 fork, all 등을 리덕스 사가 이펙트라고 부릅니다. all 이펙트는 배열을 받는데, 안에 있는 것들을 한번에 실행시킵니다. fork는 함수를 실행시키는 역할을 합니다. call도 함수를 실행시키지만 차이점이 있습니다. fork는 비동기함수호출이고, call은 동기함수호출입니다. 위 항목처럼 fork는 result 값이 한번 거쳤다가 함수를 호출하는게 아니라 return axios.post('api/login')이 바로 실행되는 것과 같고, call의 경우, axios.post('api/login').then()을 한 효과를 나타납니다. 따라서, 둘의 차이점은 결과값이 나올때까지 기다려주느냐(call) 아니냐(fork)의 차이가 있습니다. put은 리듀서의 dispatch라고 보면 됩니다..

NodeBird 복습/React

react nodeBird 1-10(리덕스 사가 이해하기)

리덕스 사가는 리액트의 사이드 이펙트만 담당하는 미들웨어 중 하나로, 우리의 앱에서 액션을 받아 처리하고, 멈추고, 취소할 수 있게 만들어주고, 리덕스 상태에 접근하여 액션을 디스패치할 수 있습니다. 또한, 비동기 흐름을 쉽게 읽고, 쓰고, 테스트할 수 있는 ES6 문법인 제너레이터를 사용할 수 있습니다. npm을 이용하여 리덕스사가와 넥스트와 리덕스사가를 연결하는 next-redux-saga도 설치해줍니다. createSagaMiddleware로 선언을 해준뒤 const middleware = [sagaMiddleware];로 연결만 해주면 됩니다. rootSaga를 이용하기 때문에 sagas/index.js 만들어줍니다. 사가는 function* () 제너레이터를 이용합니다. 제너레이터는 아래 그림처..

NodeBird 복습/React

react nodeBird 1-9(해시태그 만들기)

해시태그의 경우, 정규표현식을 이용해서 만드는데, {postData.split(/abac/)} 처럼 작성하면 됩니다. // 이런식으로 쓰면 주석처리로 되지만, /abcdef/처럼 안에 내용이 있으면 정규표현식이 됩니다. 위 그림에서 /g는 global의 뜻이고, 붙이면 여러개가 선택이 되고, 붙이지 않으면 한개만 선택됩니다. 뒤에 .은 한글자를 의미하지만, 사용자들이 일일히 2글자, 3글자를 해시태그만 쓸 수 없으니 뒤에 +를 붙어주면 모든 글자가 선택이 됩니다. 하지만, #단위로 끊어야 되기 때문에 다른 방법을 찾아야됩니다. []를 쓰고, 안에 키워드를 입력하면 해당글자를 찾습니다. [^]를 쓰고, 안에 키워드를 이용하면 해당글자를 제외한 글자를 찾는데 이걸 이용해서 해시태그를 완성하면 됩니다. \s를..

NodeBird 복습/React

react nodeBird 1-8(댓글 & 이미지 구현하기)

댓글 구현하기 댓글 버튼을 누르면 Comment 창이 나오게끔 Toggle을 이용해서 작성해주고, CommentForm은 따로 컴포넌트로 만들어줍니다. antd의 List, Comment 컴포넌트들을 가지고 아래 항목들을 작성해줍니다. PostCard에서 CommentForm에 사용할 값으로 post를 prop으로 넘겨줍니다. CommentForm 또한, antd의 Form과 Input, Button 컴포넌트를 이용해서 작성해줍니다. PropTypes는 검사도구이기 때문에 귀찮더라도 항상 작성해주시는 게 좋습니다. 서비스가 안정적으로 될 수 있도록 도와줍니다. const id = useSelector((state) => state.user.me?.id); 댓글을 로그인을 하지 않고 볼 수도 있기때문에 옵..

NodeBird 복습/React

react nodeBird 1-7(PostCard 만들기)

PostCard 역시 큼직큼직하게 컴포넌트를 생각하고 기획하고, 기획을 하면 됩니다. 그리고 살을 붙이듯 구현을 해나가면 됩니다. post를 props로 데이터를 index.js에서 받아오기때문에 propTypes를 설정해주어야합니다. proptypes설정시 object 항목을 더 자세하게 적어주고 싶다면, shape({ }) 안에 넣어주면 됩니다. 또한, 옵셔널체이닝 연산자로 const id = me && me.id; 에서 const id = me?.id;로 변경할 수 있으며, 이또한 const id = useSelector((state) => state.user.me?.id) 처럼 사용할 수도 있습니다. state 값이 false일 때, 값을 true로 변경하거나 true값을 false로 변경하려면 ..

맑쇼
'분류 전체보기' 카테고리의 글 목록 (3 Page)