React 팀 프로젝트 참고 사이트(이미지 저장 기능, 카톡 공유 기능, 이미지 업로드, DB에서 정보 가져오기 등)

React 팀 프로젝트 참고 사이트(이미지 저장 기능, 카톡 공유 기능, 이미지 업로드, DB에서 정보 가져오기 등)

2022. 10. 30. 19:03ㆍWeb Programming(웹 개발)

1. React로 이미지가 포함된 정보 DB에서 가져오기

https://ba-gotocode131.tistory.com/134

React로 이미지가 포함된 정보 DB에서 가져오기

* '따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 강의 참고 * react -> node.js로 이미지 및 정보 저장하기 * mongoDB에 저장하는 것까지 확인 * 데이터 저장한 부분은 지난 포스팅 참고

ba-gotocode131.tistory.com

2. [React.js] 컴포넌트 저장 기능 구현하기(dom-to-image, FileSaver)

https://onlydev.tistory.com/75

[React.js] 컴포넌트 저장 기능 구현하기(dom-to-image, FileSaver)

프로젝트를 진행하면서 컴포넌트를 이미지로 저장하는 기능을 추가하고 싶어서 관련 자료를 찾기 시작했다. 처음엔 html2canvas와 jspdf로 기능을 구현하려고 구글링을 하다 dom-to-image, FileSaver 라이

onlydev.tistory.com

3. [React] Html2Canvas를 이용하여 화면 캡쳐하기

https://r-0o0-j.tistory.com/177

[React] Html2Canvas를 이용하여 화면 캡쳐하기

a tag와 Html2Canvas 라이브러리를 사용해서 react 화면 캡쳐 기능 만들기 1. a Tag https://developer.mozilla.org/ko/docs/Web/HTML/Element/a - HTML: Hypertext Markup Language | MDN HTML 요소(앵커 요소)..

r-0o0-j.tistory.com

4. React - make html element to pdf(Feat. jspdf, html2canvas)

- 컴포넌트를 PDF 파일로 저장하는 기능

https://devmemory.tistory.com/98

React - make html element to pdf(Feat. jspdf, html2canvas)

이번에는 특정 html element를 pdf로 만들어서 활용하는 예제를 만들어봤습니다 먼저 사용한 라이브러리는 2개로 jspdf : pdf를 만들 수 있는 라이브러리 (링크: https://www.npmjs.com/package/jspdf) html2canva..

devmemory.tistory.com

https://github.com/devmemory/react_make_html_to_pdf

GitHub - devmemory/react_make_html_to_pdf

Contribute to devmemory/react_make_html_to_pdf development by creating an account on GitHub.

github.com

5. 따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EB%A7%8C%EB%93%A4%EA%B8%B0/unit/29606

학습 페이지

www.inflearn.com

6. [React] DB에서 받아온 데이터 리스트 만들기 - 떽떽대는 개발공부

https://ddeck.tistory.com/29

[React] DB에서 받아온 데이터 리스트 만들기 - 떽떽대는 개발공부

2021/01/29 - [React] - [React/MySQL] react 에서 MySQL 사용하기 - 떽떽대는 개발공부 [React/MySQL] react 에서 MySQL 사용하기 - 떽떽대는 개발공부 react 에서 db 연결을 하기 위해 mysql 을 다운 받았다. np..

ddeck.tistory.com

7. [React][CRUD] 게시판 만들기 All in One (7). 새 글 쓰기, axios, post

https://binaryjourney.tistory.com/63

[React][CRUD] 게시판 만들기 All in One (7). 새 글 쓰기, axios, post

목차돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create..

binaryjourney.tistory.com

8. [JavaScript] 웹으로 SNS 공유하기(트위터, 페이스북, 카카오톡)

https://devpad.tistory.com/53

[JavaScript] 웹으로 SNS 공유하기(트위터, 페이스북, 카카오톡)

이번에 웹에서 SNS로 컨텐츠를 공유하는 기능을 만들어 보았다. 공유하고자 하는 컨텐츠URL (이미지, 웹사이트 링크 등)를 보낼 수 있다. SNS로 로그인하기 기능만큼 간간히 쓰이는 기능이므로, 기

devpad.tistory.com

https://hou27.tistory.com/entry/KakaoLink-API%EC%B9%B4%EC%B9%B4%EC%98%A4%EB%A1%9C-%EB%A7%81%ED%81%AC-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0-in-React

KakaoLink API(카카오로 링크 공유하기) in React

Kakao에서 제공하는 메시지 API는, 사용자가 카카오톡 친구에게 카카오톡 메시지를 보내는 기능을 제공한다. https://developers.kakao.com/docs/latest/ko/message/common Kakao Developers 카카오 API를 활용하..

hou27.tistory.com

https://hou27.tistory.com/entry/KakaoLink-API%EC%B9%B4%EC%B9%B4%EC%98%A4%EB%A1%9C-%EB%A7%81%ED%81%AC-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0-in-React

KakaoLink API(카카오로 링크 공유하기) in React

hou27.tistory.com

9. [React.js] 리액트 이미지 사용 / react img src

https://dev-note-97.tistory.com/213

[React.js] 리액트 이미지 사용 / react img src

리액트 프로젝트에서 태그를 사용할 때 src를 잡는 법은 두 가지가 있다. 1.public 폴더에 저장 -> 상대경로로 잡기 2.src 폴더에 저장 -> import 를 이용하기 src 폴더에 저장할 경우 상대경로로 바로 접

dev-note-97.tistory.com

10. Express.js & MongoDB 기반 REST api 구현하기 - 3편

https://merrily-code.tistory.com/13

Express.js & MongoDB 기반 REST api 구현하기 - 3편

[지난 글 목록] Express.js & MongoDB 기반 REST api 구현하기 - 1편 (서버 만들기) Express.js & MongoDB 기반 REST api 구현하기 - 2편 (몽고디비 연결하기) 이전 단계에서 몽고디비(MongoDB)를 사용할 준비를..

merrily-code.tistory.com

11. mongoDB, React를 이용한 게시판[게시글 수정] - 3

https://velog.io/@jjimgo/mongoDB-React%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B2%8C%EC%8B%9C%ED%8C%90%EA%B2%8C%EC%8B%9C%EA%B8%80-%EC%88%98%EC%A0%95-3

mongoDB, React를 이용한 게시판[게시글 수정] - 3

한번에 다 진행하기 보다는 천천히 진행 하고자 한다.이번에는 게시글 보이고, 게시글을 수정하는 부분까지 진행을 하였다즉 새로운 api를 구성하고 그것을 활용 하였다.router부분에서 id값을 파

velog.io

12. 리액트 라이브러리 설치 안될 때 명령어

npm install 설치할 라이브러리명 --legacy-peer-deps

https://seantech.tistory.com/160

[REACT] Material-ui 설치 안될때 해결법

Material-ui 설치시 명령어가 npm inatall @material-ui/core 라고 나와있지만 React 버전 문제 때문인지 자꾸 에러가 발생했다. 리액트 버전이 업데이트 되면서 MUI 문제라고 한다. npm install @material-ui/cor..

seantech.tistory.com

13. React 기초 4강 : 리액트에서 버튼에 이벤트 리스너 (핸들러) 장착하는 법

https://www.youtube.com/watch?v=Br9fKSIeAok&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy&ab_channel=%EC%BD%94%EB%94%A9%EC%95%A0%ED%94%8C

13. [Github] fork 사용하기(다른 저장소 내려받기)

https://data-make.tistory.com/228

[Github] fork 사용하기(다른 저장소 내려받기)

#. github fork 1. 내 원격 저장소에 추가할 상대의 저장소를 찍어오기(fork) 2. fork해서 만들어진 repository의 url을 복사 후 받아오기(Clone URL) -> 로컬(현재 cmd 위치)에도 해당 원격 저장소를 저장..

data-make.tistory.com

14. [ReactJS] react-router 활용하여 게시글 상세 페이지 구성 및 마무리 (React로 아주 간단한 게시판 만들기 - 4)

https://antdev.tistory.com/80

[ReactJS] react-router 활용하여 게시글 상세 페이지 구성 및 마무리 (React로 아주 간단한 게시판 만들

React는 SPA(Single Page Application) 시스템 구성에 최적화 된 Framework로서 페이지를 이동할 때 일반적인 웹 페이지의 페이지 전환과는 조금 다른 방식으로 구성을 해야됩니다. 혹은 React의 가상 DOM이 최

antdev.tistory.com

https://github.com/youspend8/react-simple-blog-example/blob/master/src/page/post/PostList.js

GitHub - youspend8/react-simple-blog-example

Contribute to youspend8/react-simple-blog-example development by creating an account on GitHub.

github.com

15. 가장 많이 쓰이는 웹사이트 레이아웃 10가지

https://cucat.tistory.com/m/entry/%EA%B0%80%EC%9E%A5-%EB%A7%8E%EC%9D%B4-%EC%93%B0%EC%9D%B4%EB%8A%94-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-10%EA%B0%80%EC%A7%80

가장 많이 쓰이는 웹사이트 레이아웃 10가지

웹사이트 레이아웃을 고르는 것은 간단한 일이 아닙니다. 사이트에 어울리는 올바른 레이아웃을 선택하면 좋은 사용자 환경을 제공할 수 있습니다. 이 글에서는 사용자에게 친숙한 최고의 레이

cucat.tistory.com

16. React | 리액트로 프로젝트를 진행할때 어떻게 폴더와 컴포넌트 구조를 설계하는 것이 좋을까?🤔

https://velog.io/@_seeul/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EC%A7%84%ED%96%89%ED%95%A0%EB%95%8C-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0%EB%A5%BC-%EC%9E%A1%EB%8A%94%EA%B2%83%EC%9D%B4-%EC%A2%8B%EC%9D%84%EA%B9%8C

React | 리액트로 프로젝트를 진행할때 어떻게 폴더와 컴포넌트 구조를 설계하는 것이 좋을까?🤔

리액트 초기세팅 후 컴포넌트 구조 설계하기 🧸