Remix에서 쿠키, 또는 세션을 사용한 쿠키 알아보기

안녕하세요? Next.js보다 훨씬 빠르다고 생각하는 Remix에서 쿠키와 세션을 이용한 쿠키 사용하는 방법을 알아 볼까합니다. 제가 개인 블로그에 쓴 글을 공유할까 합니다. Remix에서 세션을 이용한 쿠키 사용해 보기 Remix에서 세션을 이용한 쿠키 사용해 보기 Remix 프레임워크에서 세션을 이용한 쿠키 작동 설명 mycodings.fly.dev Remix 프레임워크에서 쿠키(Cookie)를 만들어 봅시다. Remix 프레임워크에서 쿠키(Cookie)를 만들어 봅시다. Remix 프레임워크에서 간단한 쿠키 생성, 테스트 알아보기 mycodings.fly.dev

• format_list_bulleted 코딩/React
• · 2022. 11. 15.
• textsms

React 블로그에 댓글창 다는 방법

안녕하세요? 개인적으로 블로그에 Disqus와 Utterance 댓글창을 한번 달아봤는데요. Disqus는 너무 로드하는게 많아서 Utterance로 정착했습니다. Utterance의 단점은 github 계정이 있어야 글을 쓸 수 있다는 단점이 있는데요. 제 블로그 글이 전부 코딩 관련이라 github 계정이 다들 있을 거라 생각해서 Utterance를 달았습니다. 다음 글을 참고 바랍니다. 제가 개인 블로그에 쓴 글입니다. React로 만든 블로그에 Disqus 댓글창 달기 React로 만든 블로그에 Disqus 댓글창 달기 Disqus 댓글 창 React 애플리케이션에 적용하기 (Next.js, Remix) mycodings.fly.dev Disqus 말고 좀 더 가벼운 Utterances 댓글 창 ..

• format_list_bulleted 코딩/React
• · 2022. 11. 15.
• textsms

Next.js 12 버전의 _document.js와 _app.js 알아보기

안녕하세요? 요즘은 React 개발을 무조건 Next.js로 하는 추세인데요. 제가 다른 블로그에 쓴 좋은 글이 있어 소개하려고 합니다. Next.js에서 _document.js와 _app.js의 차이점 파헤치기 Next.js에서 _document.js와 _app.js의 차이점 파헤치기 Next.js에서 _document.js와 _app.js의 차이점 파헤치기 mycodings.fly.dev Next.js에서 _app.js 파일의 역할은? Next.js에서 _app.js 파일의 역할은? Next.js에서 _app.js 파일의 역할은? mycodings.fly.dev Next.js에서 _document.js 파일의 중요성과 역할 Next.js에서 _document.js 파일의 중요성 Next.js에서 _d..

• format_list_bulleted 코딩/React
• · 2022. 11. 15.
• textsms

Supabase와 NextJS로 블로그 만들기 - Search

안녕하세요? 이번 시간에는 Supabase 블로그 마지막 시간이 Search 기능 추가 시간입니다. 블로그 포스트의 생성, 조회, 업데이트, 삭제 기능을 완성했는데요. 남은 건 바로 검색 기능입니다. /pages/post/search.tsx 파일로 진행할 예정입니다. 일단 User-Authenticated 템플릿을 아래와 같이 준비합시다. import React, { useState } from "react"; import Link from "next/link"; import { GetServerSideProps } from "next"; import { useMessage } from "../../lib/message"; import { useFormFields } from "../../lib/util..

• format_list_bulleted 코딩/React
• · 2022. 3. 1.
• textsms

Supabase와 NextJS로 블로그 만들기 - Post Create

안녕하세요? 지난 시간에 이어 Supabase와 NextJS로 블로그 만들기에 도전해 보겠습니다. 오늘은 Create A Post를 만들어 보겠는데요. 기존에 만들어 놨던 템플릿만 잘 활용하면 오늘 주제도 금방 만들 수 있을 거 같습니다. 먼저 /pages/post/create.tsx 파일을 만들 예정입니다. 이렇게 만들면 browser 상의 주소가 http://localhost:3000/post/create 가 됩니다. 일단 User-Authenticated Page 템플릿을 준비합니다. 이 템플릿은 앞에서 벌써 여러 번 써먹었으니 꼭 알아 두시기 바랍니다. /pages/post/create.tsx import React from "react"; import { GetServerSideProps } f..

• format_list_bulleted 코딩/React
• · 2022. 2. 20.
• textsms

supabase와 NextJS로 블로그 만들기 2편

안녕하세요? 이번 시간에는 지난 시간에 만들었던 Supabase 블로그 만들기 2편입니다. 1편에서는 supabase에서 데이터를 불러와서 보여주는 페이지를 만들었는데요. 2편에서는 각 블로그의 상세 페이지에 대해 만들어 보겠습니다. supabase의 posts 테이블은 일련번호가 id라는 이름으로 매겨지는데요. 이 id라는 것을 params으로 해서 PostDetailPage를 만들어 보겠습니다. id를 a tag 링크에 집어넣어야 돼서 지난 시간의 posts.tsx 파일을 조금 수정하겠습니다. const ListPosts = ({ post }: { post: PostsProps }) => { .... .... .... ... ... ... ... 위 코드를 보시면 어딜 고쳐야 되는지 알수 있을 겁니다..

• format_list_bulleted 코딩/React
• · 2022. 2. 20.
• textsms