React19 React CkEditor 사용하기 프로젝트중 관리자에서 editor를 사용하여 글작성을 해야하는 요구가 발생 해서 무료인 CkEditor를 사용한 내용입니다. https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/react.html React rich text editor component | CKEditor 5 documentationLearn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, customize it, create your own plugins and custom editors, change the UI or even br.. 2024. 4. 26. React img태그 onError 처리 이미지가 없거나 문제가 있을경우 이런 이미지가 나오는데 이전까지는 if문을 활용하여 ex) const imgSrc = "https://www.test.com/img/testImg.png" if(imgSrc){ } else { } 대충 이런식으로 했었는데 문제는 imgSrc에 URI값이 있지만 해당 이미지 파일이없을 경우 저런 이미지로 나오기때문에 이 방법은 잘못된 처리였다. 그래서 혹시나 했는데 img태그에 onerror라는 속성이 있었다.. 공식문서 : 이미지 삽입 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 문서에 이미지를 넣습니다. developer.mozilla.org 기본적인 사용법 대체 이미지 노출시키기 스타일에 접근하기 DOM삭제 시키기 ( I.. 2023. 6. 16. 리액트에 파이어베이스 사용하기 마지막 프로젝트 였던 거기어때의 백엔드 서버가 닫혀 firebase를 이용해 서비스를 할수있도록 리펙토링 중입니다. 그중 파이어베이스 연동을 구현한 내용입니다. Firebase Firebase is an app development platform that helps you build and grow apps and games users love. Backed by Google and trusted by millions of businesses around the world. firebase.google.com 파이어베이스에 가입후 로그인하고 시작하기를 눌러줍니다. 새로운 프로젝트를 만들거나 본인의 프로젝트들을 확인 할수있습니다. 생성할 프로젝트의 이름을 작성합니다. 애널리틱스 사용여부를 체크합니다. 프.. 2023. 6. 12. 리액트 카카오 소셜 로그인 인가 인증까지 하기 마지막 프로젝트 였던 거기어때의 백엔드 서버가 닫혀 firebase를 이용해 서비스를 할수있도록 리펙토링 중입니다. 그중 카카오 소셜 로그인 기능을 구현한 내용입니다. 카카오 로그인API 공식문서 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 공식문서에 나와 있는 API흐름 입니다. 기존에는 인가코드를 백엔드API로 헤더에 담아 요청을 보내면 백엔드 서버에서 카카오API로 인증을 받고 유저정보를 받아 백엔드서버의DB에 저장하고 JWT를 통해 토큰을 발급하여 응답해주는 방식이었습니다. 하지만 이제 백엔드가 없기때문에 리다이렉트를 받는 시점에 카카.. 2023. 5. 25. [React SEO] 리액트 검색엔진 최적화 해보기 vercel로 배포한 내 사이트를 구글이나 네이버에서 검색하여 접속 해 보고싶어 테스트한 내용입니다. SEO (Search Engin Optimiztion) 요즘 사람들은 궁금한 것에 대한 답을 대부분 Google에 검색하여 답을 얻곤 하는데요. 그렇기 때문에 당연히 모든 비즈니스 및 웹사이트 소유주들은 Google에서 자신들의 정보를 사람들이 찾기 쉽도록 만들기 위해서라면 할 수 있는 모든 것을 합니다. 이것이 바로 SEO입니다. 즉, 검색 결과에서 상위에 노출될 수 있도록 내 콘텐츠를 최적화하는 방식을 말합니다. SEO 3단계 프로세스 1. 크롤링(Crawling): 웹 크롤러가 웹페이지의 콘텐츠를 복사하여 검색엔진으로 가져옵니다. 2. 인덱싱(Indexing): 가져온 콘텐츠를 주제별로 색인하여 보.. 2023. 4. 28. React public에 있는 리소스 사용하기 public에 있는 리소스에 접근할때 process.env.PUBLIC_URL + "" 이런식으로 사용하면 된다. 2022. 11. 1. React useState 배열 넣기 useState배열에 값을 추가해야하는데 엄청 해맷었다. 매개변수로 깊은복사후 추가하려는 배열을 넣어주면 된다. const [test, setTest] = useState([]); setTest(e => [...e, result]); 2022. 11. 1. React 실무 개발 환경/배포 환경 설정 (.env) [react] 실무 개발 환경/배포 환경 설정(.env) 리액트(.env)로 개발 시 개발 환경과 배포 환경에 대한 기본 설정을 해보자. 기본적으로 우리는 Nodejs위에서 개발을 한다. 그리고 package.json 파일에 기본 설정을 하게 된다. 하지만, 개발을 진행하 han-py.tistory.com 이분의 글을 읽고 할수있었다. env를 쓰는이유는 개발환경과 배포환경을 가져가는 이점도 크지만 가장 큰이유는 유저들한테 보여지면 안되는 정보를 환경변수로 선언해서 쓰기 위함이라 생각한다. 예를 들면 DB의 접속 정보라던지 API의 URL이라던지 유저에게 노출시키지 말아야 할 부분은 생각보다 많다. env의 여러가지 종류가 있지만 간단하게 env만 만들어서 사용하겠다. package.json파일과 같은경.. 2022. 10. 19. json-server / axios 사용하기 json-server 정의 및 사용하는 이유 `json-server`란, **아주 간단한 DB와 API 서버를 생성해주는 패키지** 입니다. 우리가 json-server를 사용하는 이유는 **Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성**하기 위함입니다. `json-server`를 통해서 FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업을 할 수 있습니다. **이번 챕터에서는 단순히 mock data로 사용하는 것을 넘어, 실제로 배포까지 하여 간단한 API 서버를 구축하고 과제 프로젝트를 완성하는데 사용**할 것 입니다. json-se.. 2022. 10. 12. 이전 1 2 3 다음
