반응형 nextjs6 [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. [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. 이전 1 다음 반응형
