안녕하세요 조은님!강의 즐겁게 수강했습니다 🤓 다른게 아니라 배포 후 발견한 문제 때문에 질문 드립니닷!로컬에서는 문제없이 새로고침할 때마다 조회수가 1씩 증가하는데용배포 후에는 조회수가 3씩 증가 하고 있습니닷 🤔(포스팅 갯수도 3개여서 관련이 있을 거라고 생각되는데욤..) 제 코드는 강의와 약간 다른 점이 있습니닷!현재 Vercel에서는 기존 Vercel Postgres를 대체하는 Neon Marketplace 통합으로 변경되었는데요(자세히는 잘 모르겠습니닷.. 관련 링크를 첨부합니닷..)https://vercel.com/docs/storage/vercel-postgreshttps://vercel.com/changelog/neon-now-available-on-vercel-marketplace그래서 강의와는 다른 import { neon } from "@neondatabase/serverless"; 를 불러와서 사용 중입니닷"use server"; import { neon } from "@neondatabase/serverless"; import { unstable_noStore as noStore } from "next/cache"; const sql = neon(`${process.env.DATABASE_URL}`); export async function getViewsCount(): Promise< { slug: string; count: number; }[] > { if (!process.env.POSTGRES_URL) { return []; } noStore(); const rows = await sql` SELECT slug, count FROM views `; return rows.map((row) => ({ slug: row.slug, count: row.count, })); } export const incrementView = async (slug: string) => { noStore(); await sql` INSERT INTO views (slug, count) VALUES (${slug}, 1) ON CONFLICT (slug) DO UPDATE SET count = views.count + 1; `; };다른 분들도 저와 비슷한 오류가 생길지 궁금한데용.. 혹시 배포 후 조회수 증가를 확인해주실 수 있을까용..? 감사합니다!

안녕하세요 조은님! 앞서 작성했던 질문 글에 다 작성하며 너무 길어질 것 같아 이렇게 나눠서 적게 되었습니다 ㅎㅎ; Q3. 강의에서 즉시 실행함수는 스코프를 제한해주기 위해서 사용한다고 이해를 했는데, 이건 혹시 모를 변수 중복 위험을 제한하기 위해서일까요?? 이 외에도 강사님께서 즉시 실행 함수를 사용하는 일반적인 케이스나 즉시 실행함수를 사용하면 좋은 케이스들이 있다면 배워가고 싶습니다! Q4. 추가로 dangerouslySetInnerHTML를 사용하는 이유에 대해서 여쭤보고 싶습니다!제가 찾아봤을 때는 React에서 HTML 사용에 위험성을 알리기 위해서는 dangerouslySetInnerHTML를 사용해라. 라는 것까지는 확인을 했습니다! 하지만 기능적으로 특별한 기능을 하는 것 같지는 않은데.. dangerouslySetInnerHTML이 사용되는 다른 이유가 있을지에 대해 여쭤보고 싶습니다!

안녕하세요. 조은님 :) 이번에 다크 모드 관련 내용을 수강하면서 head 태그를 작성하는 부분에서 작은 의문이 생겨 질문 드리게 되었습니다.  Q1. 이번 강의 중 다크모드 설정을 localStorage에서 가져오는 부분에서 head에서 script를 사용하는 이유에 대해서 알 수 있을까요?? fouc 문제를 막기위해서 저렇게 사용한다고 검색을 통해 알게 되었는데, 이 의도 맞을지 혹시 또 다른 이유가 있을지에 대해서 여쭤보고 싶습니다! Q2. 이어지는 질문으로 관련해서 공부를 하다보니 NextJS에서 제공하는 Head tag와 Script tag가 있는 걸 알게 되었습니다. 혹시 해당 태그들을 사용하지 않고 순수 HTML로 작성하신 이유에 대해서 궁금증이 생겨 여쭤보고 싶습니다! 가능하다면 두 개의 차이점에 대해서도 여쭤보고 싶습니다! 

우선 강의 잘 봤습니다.nextjs와 관련된 질문들이 있습니다. SSR,CRS,SSG,PPR,ISR 등은 만약 실무에서 투입한다면개발자들이 렌더링이 어떻게 되어야한다는 도메인 지식이 있는하에 결정하는건가요?그리고 블로그성 개발 관련 질문입니다.이 블로그라는게 어떻게 개발하고 만드냐는 여러가지 방법이 있겠지만 현 강의 처럼 mdx 파일에 직접 포스트를 기재를 하고 빌드해서 배포하고 올린다? 가 있고, CRUD를 구현해 블로그성 홈페이지를 만드는 방법이 있겠는데 보통 개발자분들은 어떤 방법으로 블로그를 만드는지 궁금합니다. (개인적인 의견으로 답변주심 감사하겠습니다(_ _).그리고 만약 mdx파일로 한다고 하면, md파일을 직접 작성해서 올리는것 말고 티스토리와 일반 블로그같은 UI를 생성해서 mdx파일로 올릴수있는지?도 궁금합니다.

안녕하세요.올려주신 강의를 모두 수강하였습니다. 강의 내용이 저에게 많이 도움이 되어 해당 내용을 개인 블로그에 업로드하고 싶은데 괜찮을지 문의드립니다.답변주시면 감사합니다.

안녕하세요.올려주신 강의를 모두 수강하였습니다. 강의 내용이 저에게 많이 도움이 되어 해당 내용을 개인 블로그에 업로드하고 싶은데 괜찮을지 문의드립니다.추가적으로 파일 업로드 고급 공격 기법을 정리한 PART 2는 언제 업로드 되는지 확인 부탁드립니다. 답변주시면 감사합니다.

너무 재미있게 들었어요 감사합니다자료부탁드립니다.yuan8833@naver.com

선생님 혹시 next-theme 사용 안 하시는 이유가 있을까요? 궁금합니다...!!

안녕하세요. 조은님, 강의 잘 듣고 있습니다 :)PPR 적용하기 전에는 서버에 문제가 없었는데, PPR 적용 후 예상치 못한 현상이 발생하여 여러 가지 방법으로 해결해보려고 이것저것 시도하고 있는데 아직 해답이 없네요. PPR 커밋하고 푸쉬한 것을 취소하고 이전 상태로 되돌렸지만, 여전히 에러가 납니다. T_T 지금도 찾아보는 중입니다. 같이 고민해주시면 감사하겠습니다. { "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "@types/node": "20.11.17", "@types/react": "18.2.55", "@types/react-dom": "18.2.19", "@vercel/analytics": "^1.1.3", "@vercel/postgres": "^0.10.0", "@vercel/speed-insights": "^1.0.9", "geist": "1.2.2", "next": "^14.2.13", "next-mdx-remote": "^4.4.1", "react": "18.2.0", "react-dom": "18.2.0", "sugar-high": "^0.6.0", "typescript": "5.3.3" }, "devDependencies": { "autoprefixer": "^10.4.20", "postcss": "^8.4.35", "tailwindcss": "3.4.13" } }

Building static HTML failed for path "/info/"See our docs page for more info on this error: https://gatsby.dev/debug-html WebpackError: ReferenceError: globalStyle is not defined이런 오류가 나오는데 어딜 고쳐야할까요..https://github.com/codemasterli/TechLog/tree/main/blog-front확인부탁드리겠습니다. 감사합니다.

pages/index.tsx 파일이 먼저 렌더링이 되어야되는데pages/{contentfulPost.slug}.tsx 파일 이 먼저 렌더링 되는 현상이 생겼는데 이거는 무슨경우인가요 ? 갑자기 이렇게 되었습니다. 캐시 제거랑 재부팅까지했지만 해결을 못하고있습니다..

name: Deploy Blog on: push: branches: develop jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 20 # 원하는 Github Secrets을 불러와 env 파일을 생성해줍니다. - name: Generate env file run: | echo "CONTENTFUL_ACCESS_TOKEN=$CONTENTFUL_ACCESS_TOKEN" >> .env echo "CONTENTFUL_SPACE_ID=$CONTENTFUL_SPACE_ID" >> .env env: CONTENTFUL_ACCESS_TOKEN: ${{ secrets.CONTENTFUL_ACCESS_TOKEN }} CONTENTFUL_SPACE_ID: ${{ secrets.CONTENTFUL_SPACE_ID }} - name: Deploy gatsby uses: enriikke/gatsby-gh-pages-action@v2 with: access-token: ${{ secrets.DEPLOYMENT_ACCESS_TOKEN }} deploy-branch: main gatsby-args: --verbosedevelop 브런치에서 위 코드를 작성하고 git push origin develop 을했는데 액션에 동작을 안합니다.https://github.com/Choi-jeonghoon/Jeong-hoon.github.io/actions/new

안녕하세요. 테디노트님 RAG부터 다양한 강의를 듣고 있는 애독자입니다. 게시판에 login 기능을 추가하고 싶은데, 혹시 가능한지, 어떻게 하는지 방법을 알 수 있을까요?

코드블럭 테스트language::typescriptexport const { auth, signIn, signOut, handlers } = NextAuth({등등을 존재하는데 아래와같이 코드는 작성했는데 코드 강조가 안되고있습니다. 뭐가문제일까요? import React from 'react' import { ContentfulRichTextGatsbyReference, renderRichText, } from 'gatsby-source-contentful/rich-text' import { getImage } from 'gatsby-plugin-image' import { NodeRenderer, Options } from '@contentful/rich-text-react-renderer' import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types' import { Blockquote, Heading, Image, HorizontalRule, OrderedList, UnorderedList, Link, Code, } from './node' export const HEADERS = [ BLOCKS.HEADING_1, BLOCKS.HEADING_2, BLOCKS.HEADING_3, ] as const const CODE_METADATA_REGEX = /^language::(\w+)/ const options: Options = { renderMark: { [MARKS.CODE]: text => { const isBlock = !!text && CODE_METADATA_REGEX.test(text.toString()) if (!isBlock) return <Code>{text}</Code> else return ( <Code isBlock className={`language-${ CODE_METADATA_REGEX.exec(text.toString())?.[1] }`} > {text.toString().replace(CODE_METADATA_REGEX, '').trimStart()} </Code> ) }, }, renderNode: { ...HEADERS.reduce<{ [block: string]: NodeRenderer }>((nodes, header) => { nodes[header] = (node, children) => ( <Heading type={header}>{children}</Heading> ) return nodes }, {}), [BLOCKS.OL_LIST]: (_node, children) => ( <OrderedList>{children}</OrderedList> ), [BLOCKS.UL_LIST]: (_node, children) => ( <UnorderedList>{children}</UnorderedList> ), [BLOCKS.HR]: () => <HorizontalRule />, [BLOCKS.QUOTE]: (_node, children) => <Blockquote>{children}</Blockquote>, [BLOCKS.EMBEDDED_ASSET]: node => { const { gatsbyImageData, description } = node.data.target const image = getImage(gatsbyImageData) if (image) return <Image image={image} alt={description} /> }, [INLINES.HYPERLINK]: (node, children) => ( <Link href={node.data.uri as string} target="_blank" rel="noopener noreferrer" > {children} </Link> ), }, } export default function useRenderRichText({ raw, references, }: Queries.ContentfulPostContent) { if (!raw) return null return renderRichText( { raw, references: references as unknown as ContentfulRichTextGatsbyReference[], }, options, ) }import React from 'react' import { GatsbyBrowser } from 'gatsby' import Layout from './src/components/common/Layout' import 'prismjs/themes/prism-tomorrow.min.css' export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({ element, props, }) => { return <Layout {...props}>{element}</Layout> } import React from 'react' import { GatsbyBrowser } from 'gatsby' import Layout from './src/components/common/Layout' import 'prismjs/themes/prism-tomorrow.min.css' export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({ element, props, }) => { return <Layout {...props}>{element}</Layout> }import React, { useEffect } from 'react' import styled from 'styled-components' import { TPostBodyProps } from '../../types/PostBody' import Prism from 'prismjs' import 'prismjs/components/prism-typescript' import useRenderRichText from '../../hooks/useRenderRichText' const Wrapper = styled.div` position: relative; display: grid; grid-template-columns: 1fr 220px; grid-gap: 30px; justify-content: space-between; align-items: flex-start; padding-top: 100px; ` const Content = styled.div` overflow: auto; display: flex; flex-direction: column; gap: 100px; font-size: 16px; line-height: 2; word-break: break-word; ` export default function PostBody({ content }: TPostBodyProps) { const richText = useRenderRichText(content) useEffect(() => { Prism.highlightAll() }, []) return ( <Wrapper> <Content> <div id="content">{richText}</div> {/* 댓글 컴포넌트가 들어갈 자리 */} </Content> {/* 플로팅 목차 컴포넌트가 들어갈 자리 */} </Wrapper> ) }

깃허브 액션으로 배포하는 강의 자료부분 하는 중인데build가 완료돼도 배포된 사이트에선 리드미 파일만 보이는데 무슨 문제인지 잘 모르겠습니다ㅠhttps://github.com/jihun-24k/jihun-24k.github.io

안녕하세요 게시글 렌더링 컴포넌트 구현하기 강의에서 {contentfulPost.slug}.tsx 파일 내에 아래와 같이 graphql을 호출하고 useRenderRichText 훅을 구현시 아래와 같은 에러가 발생합니다. export const query = graphql` query PostPage($slug: String!) { contentfulPost(slug: { eq: $slug }) { title thumbnail { gatsbyImageData(width: 1000) } category date content { raw references { ... on ContentfulAsset { contentful_id title description gatsbyImageData(width: 774) __typename } } } } } `

안녕하세요 저번 개츠비 강의 너무 맘에 들어서 후속 강의도 거의 나오자마자 지른 수강생입니다!열심히 따라하면서 강의 진행하던 와중에 "게시글 렌더링 커스터마이징하기(2)" 강의 안 코드 블럭 메타데이터 파싱 기능 개발하기 파트에서 CODE_METADATA_REGEX 부분 정규표현식에 대해서 질문드립니다본문에 const CODE_METADATA_REGEX = /^language::(\\w+)/이런 식으로 정규표현식이 작성되어서 따라 진행했는데 자꾸 정규표현식을 인식 못하는거 같아/^language::(\w+)/위와 같이 문법을 고쳐 사용했는데 오타인가 여쭤봅니다

선생님이 알려주신대로 블로그를 만들어서 유용하게 운영중입니다. 지금까지 별 다른 문제가 없었는데 1달전부터 갑자기 마크다운 이미지가 안보이더라구요ㅠㅠ이상한건 5월31일 이후 작성한 마크다운 게시물들만 이미지가 출력되지 않는다는겁니다..제가 content 폴더에 마크다운, 이미지 파일을 싹다 몰아넣고 관리중인데 이게 문제인걸까요?? 빌드하고 public 폴더 확인해보려니 양이 너무 방대해서 하나하나 확인할 엄두가안나네요...혹시 해결 방법없을까요ㅠㅠhttps://github.com/BoubleJ/BoubleJ.github.io제 깃허브 코드입니다. 감사합니다!

타임존을 서울로 설정했을 때 다음과 같은 에러가 뜨는데 왜그런걸까요~?

안녕하세요.bundle exec jekyll serve 명령어를 입력해서 로컬서버를 띄우려고 하면 다음과 같은 에러가 발생합니다.[!] There was an error while loading minimal-mistakes-jekyll.gemspec: No such file or directory @ rb_sysopen - package.json. Bundler cannot continue. #  from C:/Repository/GitHubBlog/weinhooney.github.io/_site/minimal-mistakes-jekyll.gemspec:3 #  ------------------------------------------- #    spec.add_development_dependency "rake", ">= 12.3.3" >  end #  require "json" #  -------------------------------------------의미대로 minimal-mistakes-jekyll.gemspec 파일을 loading하다가 package.json 파일이 없어서 발생한 오류인데요._site 폴더 안에 package.json 파일을 복사해서 붙여넣으면 해결이 되긴 합니다.하지만 bundle exec jekyll serve 명령으로 로컬서버가 가동된 이후 복사해서 붙여넣었던 package.json 파일이 삭제되면서 다시 로컬서버를 가동할 때 같은 에러가 발생합니다. 매번 번거롭게 package.json 파일을 _site 폴더 안에 넣지 않고 로컬서버를 재가동하는 방법이 있을까요?