본문 바로가기
반응형

개발 Study/React26

[React/NextJS] 무료 웹 에디터 CKEditor 사용하기 React에 CKEditor5 추가하기 React에서 많이 쓰이는 오픈소스 에디터들 중 두가지가 후보에 있었는데 하나는 CKEditor5고 https://ckeditor.com/ckeditor-5/ CKEditor 5 | Powerful Framework with Modular Architecture Easy to customize RichText Editor with a powerful framework, a modular architecture, and modern features like Collaborative Editing. ckeditor.com 나머지 하나는 Tinymce 다. https://www.tiny.cloud/ The Most Advanced WYSIWYG Editor | Trust.. 2023. 1. 25.
[NextJS] KaKao Map API로 좌표 얻기- Geocode사용하기 NextJS 에서 KaKao Map API 사용하기 1. API Key 발급받기 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 개발자 페이지에서 API를 적용할 앱을 생성한다. 아래 글을 참고하면 된다. 2022.09.14 - [개발 Study/React] - [Next.js] Kakao 로그인 API 발급 받기 [Next.js] Kakao 로그인 API 발급 받기 Kakao 로그인 API 발급 받는 법 1. 가입하기 https://developers.kakao.com/ Kakao D.. 2023. 1. 13.
[NextJS] SSR에서 Cookie 값 저장하고 가져오기 SSR에서 Cookie값 저장하기 + 가져오기 1. SSR에서 Cookie값 저장 방법 쿠키관련 정보는 이 글에서 생략하며, NEXT에서 쿠키를 다루는 방법에 대해 설명한다. NEXT를 사용하는 이유가 SSR을 적용하기 위해서인데 getServerSideProps()함수를 통해 페이지가 로드되는 경우 서버사이드 렌더링을 할 수 있다. 이 함수 내에서 NextContextPage를 받아오면 query, response, request에 대해 볼 수 있다. Client에 뿌려질 response의 헤더에 쿠키 값을 저장할 수 있는데 저장 방법은 아래와 같다. export async function getServerSideProps(context : NextPageContext) { const { query, .. 2022. 11. 10.
[Next.js/Typescript] Next-auth 소셜 로그인 연동하기 소셜 로그인 연동(Kakao버전) 1. Next-auth 설치하기 session 관리를 위해서 next-auth라는 라이브러리로 쉽게 소셜 로그인을 구현할 수 있다고 한다. $npm install --save next-auth https://next-auth.js.org/getting-started/typescript TypeScript | NextAuth.js NextAuth.js has its own type definitions to use in your TypeScript projects safely. Even if you don't use TypeScript, IDEs like VSCode will pick this up to provide you with a better developer ex.. 2022. 9. 15.
[Next.js] Kakao 로그인 API 발급 받기 Kakao 로그인 API 발급 받는 법 1. 가입하기 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 위 developers 사이트에 들어가서 kakao 계정으로 가입한다. 2. 웹 어플리케이션 추가 내 어플리케이션을 클릭한 후 웹 어플리케이션 추가하기를 클릭한다. 앱이름 입력하고 사업자명에는 그냥 내이름을 입력한 후 저장했다. 생성된 내 앱을 클릭해서 들어간다. 3. 앱 설정하기 요약 정보를 보면 내 애플리케이션에 할당된 키 값 들을 볼 수 있다. 플랫폼에 웹 사이트 도메인을 추가한다. 로그.. 2022. 9. 14.
[React/NextJS] NextJS 시작하기 (2) - fetch, redirect/rewrite, router NextJS 시작하기 Fetch Data API통신을 통해서 무료 movie data 사이트로 부터 정보를 json 값으로 얻어 온다. 얻어온 값으 각각의 카드 형태로 만들어 보여주는 예제다. CSR(Client-Side-Rendering) 버전 const API_KEY = "10923b261ba94d897ac6b81148314a3f"; export default function Home() { const [movies, setMovies] = useState(); useEffect(() => { (async () => { const { results } = await ( await fetch( `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY.. 2022. 9. 6.
[React/NextJS] NextJS 시작하기 (1) - NextJS vs ReactJS / CSR vs SSR NextJS 시작하기 NextJS란? NextJS란 React 프레임워크 중 하나로 React의 CSR(Client-Side-Rendering) 의 단점을 보완하여 SSR(Server-Side-Rendering)도 가능하게 만들었다. 기본 원리로는 브라우저로 서버에서 렌더링된 html을 먼저 보내서 SEO(검색 엔진 최적화)에 용이하게 한 후, JS를 다운로드하여 기존 React처럼 사용가능하게 한다. 사용자 측에선 렌더링된 html 화면까지는 바로 보이고 그 다음 동작하는 JS 관련 부분은 다운로드 후 사용할 수 있게 된다. 따라서 로딩이 길 경우 빈 화면만 보이는 (CSR)방식과는 달리 HTML이 렌더링된 화면 만으로도 사용자는 미리 정보를 확인할 수 있다. Next에는 React에서 기존에 만들어 .. 2022. 9. 5.
[Error] NextJS 에러 처리 - Parsing error : Cannot find module 'Next/babel' NextJS 프로젝트 생성 시 'Next/babel' 에러 처리 NomadCoder의 강의를 들으면서 NextJS 프로젝트를 만들었는데 실행은 잘 되지만 js의 모듈 임포트 부분 마다 아래와 같은 에러가 뜨는게 너무 거슬렸다. Parsing error : Cannot find module 'Next/babel' 그래서 찾아보니 다음과 같은 방법으로 없앨 수 있었다. NextJS 프로젝트 폴더의 루트에 .eslintrc.json 파일을 열어 아래와 같이 수정하면 없앨 수 있다. extends에 next/babel을 추가시키면 Parsing error가 사라진 것을 확인할 수 있다. 2022. 9. 1.
[React/Redux] Redux-persist 사용법 - (새로고침 후 상태 유지) 이전에 리덕스 관련 글은 아래를 참조하자. 2022.08.04 - [개발 Study/Node, js, react] - [React/Redux] Redux 사용법 (1) -State/Action/Reducer/Store [React/Redux] Redux 사용법 (1) -State/Action/Reducer/Store Redux란? 상태 관리 라이브러리로 Component별로 props/state를 바꿔주는 복잡한 관계를 redux 하나로 외부에서 state들을 공용으로 관리하여 가져다 쓸 수 있다. 1. State(상태) State란 React Component 내에.. chuun92.tistory.com 2022.08.05 - [개발 Study/Node, js, react] - [React/Redux].. 2022. 8. 8.
반응형

티스토리툴바