React 41

[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 8. saga에서 게시글 저장부터 화면 이동까지 처리하기, saga에서 router 연결하기, redux-saga, react router, history

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com saga 로 이용 중인 파일에서는 react-router-dom이 바로 import 되지 않는 것으로 알고 있다..

[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 7. axios 데이터 전송, 게시글 저장, useSelector 로 state 값 가져오기, redux-toolkit, axios, redux-saga

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com 들어가기 전에 이전까지 만든 소스에 문제가 없는지 (블로그 포스팅하면서 내가 소스 수정하고 빼먹은 부분이 있을 ..

[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 6. json-server 연결하기, reducer와 saga 흐름 파악하기

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com 게시글 저장 구현에 본격적으로 들어가기 전에 임시 서버를 띄워보도록 하겠다. 그나마 과정이 간단한 json-se..

[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 5. antd 로 게시판 디자인 바꾸기

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com 시간이 부족한 관계로 서버 연동 + 저장 기능은 가능하면 저녁 이후 혹은 내일에 해야 할 것 같다. 남은 시간 ..

[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 4. redux-toolkit에 redux-saga 적용하기(configureStore), redux-toolkit으로 reducer, action 한꺼번에 생성하기(createSlice)

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com 3편에서 RegisterPage.js 를 글 수정할 때도 재사용할 것이라고 언급한 적이 있었는데 Register..

[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 3. redux, useState 으로 input 값 집어넣기

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com * (11/6) useState보다 useSelector 사용을 더 추천합니다. 이번에는 게시글 저장을 구현해보..

[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 2. 필요한 모듈, 라이브러리 설치, react router 사용하기

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com VSCode extension 중 open native terminal 을 설치하면 root folder 와 현..

[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 1. React App 생성하기, VSCode npm extension/플러그인 활용하기

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial [React][CRUD] create-board-tutorial code: github.com/jwlee-lnd/react-create-board jwlee-lnd/react-create-board Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - jwlee-lnd/react-create-boar.. binaryjourney.tistory.com 빛과 소금 John Ahn 선생님의 online shop clone 강의를 다 들은 후 혼자서 온라인 쇼핑몰까진..

[React][react-quickly review #1] 속성(props), 상태(state), 바벨(babel) 상태비저장 컴포넌트 관련 필기

거창한 건 없고 주말에 (리액트 교과서, 아자트 마르단 지음)에서 읽은 부분 잊지 않기 위해 필기한 부분만 저장하려고 한다. react-quickly에서는 대략 3단계로 코드가 진행된다. 1. 일단 개념 소개용 코드 2. 1차 코드 리팩토링 3. 2차 코드 리팩토링 let helloWorldReactElement = Hello world!; class HelloWorld extends React.Component { // 싱태비저장 컴포넌트 render() { // return ( // // {helloWorldReactElement} // {helloWorldReactElement} // // ); // return React.createElement( // "h1", // this.props, // ..

React 2020.09.28

[React][React-practice] Emoji Search

계산기에 이어 다른 실습 예제인 Emoji Search도 실행시켜 보았다. ko.reactjs.org/community/examples.html Example Projects – React A JavaScript library for building user interfaces ko.reactjs.org github.com/ahfarmer/emoji-search ahfarmer/emoji-search Simple React app for searching emoji. Contribute to ahfarmer/emoji-search development by creating an account on GitHub. github.com npm 같은 경우 디렉토리명을 camelCase로 쓰면 오류가 난다. 그래..

React 2020.09.28
반응형