본문 바로가기

분류 전체보기321

React 프로젝트 Netlify 에 배포하기 Netlify 란... 구축한 서버가 없이도 간단하게 프론트 프로젝트를 깃헙과 연동하여 간단하게 배포가 가능한 사이트이다. 전에 만들었던 사이트도 여기에 배포했었다. 깃헙 레포와 연동시켜놓으면 push 할 때마다 자동으로 갱신돼서 편했다. 예전에 다뤄본 AWS 는 다 좋은데... 설정이 복잡스러웠음..^^ 할때마다 이거저거 보느라 바빴지만 넷틀리는 그냥 올리면 끝..! 이지만 그래도 처음 리액트 프로젝트를 배포할 때 해야하는 것들을 수 많은 에러 끝에 작성해본다. 여러 방법을 시도해서 순서가 맞을지 모르겠는데... npm install netlify-cli -g netlify deploy 일단 설치부터 해준다. 그리고 배포의 기본인 npm run build 로 build 파일을 만들어준다. 나는 이것도 .. 2023. 5. 16.
React 로 카카오톡 공유하기 기능 추가해보기 https://developers.kakao.com/tool/demo/message/kakaolink?message_type=scrap Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오API 중 공유하기를 사용해보려고 한다... 이유는 만들고 있는 사이트에 저 버튼(노란..)을 만들어버렸기 때문이다. 구현방법을 체크하여 코드를 가져올 수 있는데, 직접 만든 버튼으로 메시지 > 기본 > 피드 를 선택하면 이런식으로 카카오톡 공유가 가능하다. 직접 만든 버튼 > 사용자 정의 메시지의 경우 그럼 이제 이걸 어떻게 리액트에 적용하는가가 문제인데, .. 2023. 5. 15.
랜덤 프로필 이미지 api - Dicebear https://www.dicebear.com/how-to-use/http-api HTTP-API | DiceBear www.dicebear.com 만들고 있는 홈페이지에서 회원가입을 한 뒤 -> 자동으로 프로필 이미지를 지정해줬으면 좋겠다고 필요성을 느꼈다. 그래서 알아본 api 가 Dicebear이다. 깃허브 기본 프로필 이미지 같은 느낌을 줄 수 있는 스타일이 있어서 선택하게 되었다. 물론 내가 만드는 홈페이지와는 안어울리긴 한다만... 사용 방법은 여럿 있지만 나의 경우 닉네임을 따로 받아서 그 닉네임에 따른 랜덤 이미지를 api로 받아와서 적용했다. https://api.dicebear.com/6.x//svg styleName 에는 원하는 프로필 스타일을 넣어준다. identicon initial.. 2023. 5. 12.
FireBase 와 React 플랫폼을 프로젝트 구축 시 필요한 백엔드 기능을 클라우드 형태로 자동적으로 만들어주는 서비스 서버를 구축하기 위한 리눅스 명령어를 알 필요 없으며 도메인을 구입할 필요도 없어진다. (서버리스 애플리케이션) 인증 시스템 지원 - 로그인 NoSQL 기반의 3세대 데이터베이스 - 특히나 Document 형식의 NoSQL 데이터베이스 도입 RTSP(Real Time Stream Protocol) 방식의 데이터베이스 지원 - 실시간으로 데이터들을 전송 가능 원격으로 앱의 환경 상태를 구성 가능 서버 관리자 페이지 제공 Analytics, 다수의 사용자가 앱을 어떻게 사용하는지 통계 정보를 가지고 있어 맞춤 마케팅이 가능 다만, firebase 는 서버가 해외에 있기에 종종 처리 속도가 지연이 생겨 서버 응답속도가.. 2023. 5. 10.

티스토리툴바