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

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

안녕하세요? 오늘은 지금껏 만들어 왔던 supabase 로그인 구현 템플릿에 더해서 Supabase 데이터베이스를 이용해서 간단한 블로깅 시스템을 만들어 보겠습니다. 먼저, 블로그 데이터를 저장할 DB의 테이블을 만들어야 하는데요. 일단 supabase 대시보드에서 아래 그림과 같이 SQL Editor을 이용해서 테이블의 schema를 짜 보도록 하겠습니다. 아래 New Query를 클릭하고 오른쪽 화면에서 다음과 같이 입력합시다. 그리고 오른쪽 아래에 RUN 버튼을 눌러 table을 만들도록 하겠습니다. Supabase에서는 위와 같이 SQL 명령어를 위와 같이 직접 입력해서 만들 수 있습니다. CREATE TABLE posts ( id bigint generated by default as ident..

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

Supabase로 로그인 구현하기 with NextJS 7편

안녕하세요? 이번 시간은 기나긴 Supabase 강좌의 마지막인 Third-Party 로그인에 대해 알아보겠습니다. 일단 지난 강좌 링크 올려 드립니다. https://cpro95.tistory.com/617 Supabase로 로그인 구현하기 with NextJS 1편 안녕하세요? 최근 NextJS로 여러가지 로그인 구현 웹앱을 만들려고 노력하고 있는데요. 최근에는 NextAuth와 Prisma를 이용해서 카카오 로그인, 네이버 로그인, 구글 로그인 등 다방면으로 구현해 봤 cpro95.tistory.com https://cpro95.tistory.com/618 Supabase로 로그인 구현하기 with NextJS 2편 안녕하세요? 이번 시간에는 지난 회부터 시작한 Supabase를 이용한 로그인 구현..

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

[JS-중급편-OOP] 14. Set 알아보기

이번 시간에는 세트(Set)에 대해 알아 보겠습니다. 여러 데이터를 저장할 때 아마 배열이 가장 먼저 떠오를 것입니다. 배열은 꽤 오랫동안 사용되어져 왔고 또한 매우 유연하며 사용하기 쉽게 만드는 많은 특성이 있습니다. 지난 몇 년 동안 JavaScript는 데이터 모음을 저장하는 또 다른 방법을 얻었습니다. 그 방법은 세트(Set)로 알려진 배열 모양의 방법을 통하는 것입니다. 표면적으로 배열과 세트는 매우 비슷해 보입니다. 그러나 세트는 배열과 다르게 보이는 많은 특성을 가지고 있습니다. 가장 큰 특징은 중복 값의 저장 허용 여부입니다. 세트에는 유니크한 아이템만 저장할 수 있습니다. 우리가 원하는 것을 저장하기 위해 세트를 사용할 수 있습니다. 그러나 배열과는 달리 우리는 그 항목을 한 번만 저장할..

• format_list_bulleted 코딩/Javascript
• · 2021. 1. 4.
• textsms

[JS-기초편] 6.주석 달기(comments)

우리가 작성한 코드는 브라우저를 위한 것으로 보일 수 있습니다. let xPos = -500; function boringComputerStuff() { xPos += 5; if (xPos > 1000) { xPos = -500; } } boringComputerStuff(); 곧 알게 되겠지만 그렇지 않습니다. 우리 코드에 대한 또 다른 청중이 있습니다. 그 청중은 인간으로 구성되어 있습니다. 여러분과 제가 다른 자바스크립트 개발자들과 함께 일하는 경우가 있습니다. 우리는 종종 남들의 코드를 볼 것이고 남들은 종종 우리의 코드를 볼 것입니다. 이 모든 코드를 가능한 한 효율적으로 보이게 하려면 우리가 아닌 다른 사람이 코드를 보고있을 때 코드가 뭘 의미하고 있는지 명확하게 전달해야 합니다. 솔로 작업을..

• format_list_bulleted 코딩/Javascript
• · 2020. 12. 14.
• textsms

[JS-기초편] 4.조건문 (If, Else, Switch)

우리는 깨어 난 순간부터 깨닫든 모르든 결정을 내리기 시작합니다. 알람을 끕니다. 불을 켜시오. 날씨가 어떤지 보기 위해 밖을 보십시오. 양치질하기. 가운과 모자를 착용하십시오. 달력을 확인하십시오. 문 밖으로 나갈 때 쯤이면 의식적으로 또는 무의식적으로 수백 가지 결정을 내렸을 것입니다. 각 결정은 결국 오늘 하게 될 일에 특정 영향을 미칩니다. 예를 들어 외부 날씨가 추워 보인다면 후드 티나 재킷을 입기로 결정할 수 있습니다. 이 결정을 다음과 같이 모델링 할 수 있습니다. 결정을 내리는 각 단계에서 참 또는 거짓으로 대답 할 수 있는 질문을 스스로에게 물어 봅니다. 이 질문에 대한 답은 다음 단계를 결정하고 궁극적으로 당신이 티셔츠, 후드 티, 재킷인지를 결정합니다. 더 광범위하게 말하면 여러분과 ..

• format_list_bulleted 코딩/Javascript
• · 2020. 12. 14.
• textsms