본문 바로가기

전체 글

리액트_5_레시피 상세보기 페이지 만들기_2 2020/05/30 - [react] - 리액트 _4_레시피 상세보기 페이지 만들기 리액트 _4_레시피 상세보기 페이지 만들기 2020/05/30 - [react] - 리액트 _3_이미지 클릭시 상세페이지로 이동하기 {},[]) => 비동기화 ===> redux-thunk redux-saga - useCallback: function을 기억.." data-og-host="wastetime.tistory.com".." data.. wastetime.tistory.com 이 포스팅에 이어서 작성합니다. 1. RecipeDetail.js 에다가 디테일을 주기위해 이미지를 넣는다. 2. public 안에다가 그림을 붙여넣는다. 3. RecipeDetail.js return 부분에 테이블을 추가하고 안에 이미지를.. 더보기
mongoDB 설치하기, 연결하기, 데이터 저장하기 1. 몽고디비홈페이지로 간다. https://www.mongodb.com/ The most popular database for modern apps We're the creators of MongoDB, the most popular database for modern apps, and MongoDB Atlas, the global cloud database on AWS, Azure, and GCP. Easily organize, use, and enrich data — in real time, anywhere. www.mongodb.com 2. 오른쪽 위에 try free를 클릭하고 community server에 있는 msi를 다운로드 누르면 이 창이뜨는데 굳이 로그인안해도 된다. 3. 다운로드가 .. 더보기
리액트 _4_레시피 상세보기 페이지 만들기 2020/05/30 - [react] - 리액트 _3_이미지 클릭시 상세페이지로 이동하기 { var no= request.query.no; //문자 1이 들어옴. 숫자아님 그래서 쓸 때 숫자로 변형시켜줘야 함. //몽고db에 연결 var url="mongodb://211.238.142.181:27017"; Client.connect(url,(err,client)=>{ var db = client.db('mydb'); db.collection('recipe_detail').find({no:Number(no)}).toArray((err,docs)=>{ response.json(docs[0]); client.close(); }) }) }) 2. recipe_detail.js에서 출력한다. **var a ={}.. 더보기
리액트 _3_이미지 클릭시 상세페이지로 이동하기 2020/05/30 - [react] - 리액트 _2_비동기방식으로 페이지 넘기기 리액트 _2_비동기방식으로 페이지 넘기기 2020/05/30 - [react] - 리액트 _1_만개의레시피 리액트버전 useState() - 화면 출력 전에 데이터 읽기 => useEffect(()=>{},[]) => 비동기화 ===> redux-thunk redux-saga - useCallback: function을 기억.. wastetime.tistory.com 이 포스팅 이어서 작성합니다. 1. NavLink를 임포트 해준다. import {NavLink} from "react-router-dom"; 2. Recipe.js에서 이미지를 누르면 링크로 이동할 수 있도록 img 태그를 NavLink태그로 싸준다. con.. 더보기
리액트 _2_비동기방식으로 페이지 넘기기 2020/05/30 - [react] - 리액트 _1_만개의레시피 리액트버전 리액트 _1_만개의레시피 리액트버전 *HOOKS - state(데이터)관리 ==>useState() - 화면 출력 전에 데이터 읽기 => useEffect(()=>{},[]) => 비동기화 ===> redux-thunk redux-saga - useCallback: function을 기억함 => 싱글턴 - React.mem.. wastetime.tistory.com 이 포스팅 이어서 작성하겠습니다. 페이징작업을 해보자 1. recipe.js에 이전과 다음버튼을 추가해줍니다. return( {html} 이전 다음 2. recipe-server에다가 몽고디비를 연결하고 데이터 총count값을 넘겨주는 것을 만든다. app.get('.. 더보기
리액트 _1_만개의레시피 리액트버전 *HOOKS - state(데이터)관리 ==>useState() - 화면 출력 전에 데이터 읽기 => useEffect(()=>{},[]) => 비동기화 ===> redux-thunk redux-saga - useCallback: function을 기억함 => 싱글턴 - React.memo ==> useMemo() *전역변수: useContext(), 리덕스: useDispatch(이벤트를 통해 데이터 받기), useSelector(이벤트 컨트롤러), useReducer(디스패치로 받은 값 넘겨주기) 1. 새프로젝트를 만든다. 2. package.json에다가 구성을 해준다. "axios": "^0.19.2", --파일 받을 때 사용하는 것 "express": "^4.17.1", "mongodb": "^.. 더보기
리덕스 _ 환경설정 * 리액트 - 사용자 인터페이스 (화면UI)를 위한 자바스크립트 라이브러리 - 매우 단순하다. (class => function화 되면서 더 단순화 됨) - class 형태로 작성 시 코드가 길고 복잡하고 로직의 재사용이 어렵다(트리형식) * 리덕스 1. 패키지 제이슨 설치 "react-redux": "^7.2.0", "react-router-dom": "^5.2.0", "react-router": "^5.2.0", "redux": "^4.0.5", "redux-logger": "^3.0.6", "redux-thunk": "^2.3.0" 2. redux devtools 검색 3. 설치하면 f12누르고 옆에 리덕스가 추가되어있는 것을 알 수 있다. 더보기
리액트 _19_Router_HOOK_영화뉴스 인기순위 리스트 만들기 저번에 만들었던 movie 서버를 이용해서 영화 페이지를 만들어보자. 1. 서버와 관련된 것들을 import한다. package.json에 "express": "^4.17.1", "mongodb": "^3.5.7", "request": "^2.88.2", "path": "^0.12.7" "xml2js": "^0.4.23" 2. "react-router-dom": "^5.2.0", "react-router": "^5.2.0" 얘네 둘도 넣는다. 3. movie-server에다가 몽고db 접속할 수 있는 기능을 만든다. app.get('/movie_news',(request,response)=>{ var url="mongodb://211.238.142.181:27017" Client.connect(url,(.. 더보기
반응형

티스토리툴바