inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

사이드바에 카테고리 태그 숫자 카운트를 홈에서도 추가하는 방법

미해결

깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!

사이드바가 글에 들어가면 잘 나오지만 홈으로 갔을때도 똑같이 나오게 하고싶은데 어떤식으로 해야 나오게 할 수 있을까요¿¿

  • 블로그
  • github
똥또로로 댓글 1 좋아요 0 조회수 117

글이 안 만들어집니다 ㅠㅠ

미해결

깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!

업데이트 내역 실시간으로 확인하면 글이 업데이트가 되는 걸 확인할 수 있는데 왜 실제 홈페이지에서는 업데이트가 안될까요 첫번째 파일 2025-01-03-first.md 이거는 잘 올라가는데 두번째 파일 2025-01-05-first.md 이거부터는 안올라가요 아무리봐도 똑같이했는데 왜그럴까요 ㅠㅠ

  • 블로그
  • github
댓글 1 좋아요 0 조회수 127

이미지

미해결

깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!

안녕하세요. 해당 강의 후 이미지를 http://localhost:4000/_posts/_images/2024-12-29/2024_12_29_image_163224.png 경로로 하여 했는데, 못 불러와서 문의 드립니다. 이미지의 경로는 /_posts/_images/2024-12-29/2024_12_29_image_163224.png 입니다.

  • 블로그
  • github
정말로 공부를 하자 댓글 1 좋아요 0 조회수 116

클론을 해야 하는 레파지토리 링크 좀 주세요.

미해결

깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!

레파지토리를 못찾겠는데, 링크 좀 주실 수 있으신가요

  • 블로그
  • github
fl 댓글 1 좋아요 0 조회수 225

배포 후, 조회수 증가 이슈

해결됨

손에 익는 Next.js - 블로그 만들기

안녕하세요 조은님! 강의 즐겁게 수강했습니다 🤓 다른게 아니라 배포 후 발견한 문제 때문에 질문 드립니닷! 로컬에서는 문제없이 새로고침할 때마다 조회수가 1씩 증가하는데용 배포 후에는 조회수가 3씩 증가 하고 있습니닷 🤔 (포스팅 갯수도 3개여서 관련이 있을 거라고 생각되는데욤..) 제 코드는 강의와 약간 다른 점이 있습니닷! 현재 Vercel 에서는 기존 Vercel Postgres를 대체하는 Neon Marketplace 통합으로 변경되었는데요 (자세히는 잘 모르겠습니닷.. 관련 링크를 첨부합니닷..) https://vercel.com/docs/storage/vercel-postgres https://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; `; }; 다른 분들도 저와 비슷한 오류가 생길지 궁금한데용.. 혹시 배포 후 조회수 증가를 확인해주실 수 있을까용..? 감사합니다!

  • react
  • 블로그
  • next.js
이슬 댓글 1 좋아요 1 조회수 294

추가로 Head tag에서 작성된 script 코드 관련하여 질문드리고 싶습니다. (feat. 즉시 실행 함수, dangerouslySetInnerHTML)

미해결

손에 익는 Next.js - 블로그 만들기

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

  • react
  • 블로그
  • next.js
이우성 댓글 2 좋아요 1 조회수 290

Head tag에서 script를 작성하는 이유에 대해서 여쭤보고 싶습니다! (+ NextJS의 Head tag와 Script tag)

미해결

손에 익는 Next.js - 블로그 만들기

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

  • react
  • 블로그
  • next.js
이우성 댓글 1 좋아요 1 조회수 193

완강하고 질문 드립니다

미해결

손에 익는 Next.js - 블로그 만들기

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

  • react
  • 블로그
  • next.js
kkmmin2 댓글 2 좋아요 1 조회수 215

개인블로그 글 작성

미해결

모의해킹 실무자가 알려주는, 파일 다운로드 취약점 공격 기법과 실무 사례 분석

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

  • 모의해킹
  • 블로그
silvain 댓글 2 좋아요 0 조회수 196

개인블로그 글 작성

미해결

모의해킹 실무자가 알려주는, 파일 업로드 취약점 공격 기법과 실무 사례 분석 : PART 1

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

  • 모의해킹
  • 블로그
silvain 댓글 2 좋아요 0 조회수 197

수강후기남겼어요

미해결

단 2주간 키운 블로그로 월 80만원 용돈 벌기

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

  • 디지털-마케팅
  • 블로그
이지윤 댓글 1 좋아요 0 조회수 128

다크모드 적용

해결됨

손에 익는 Next.js - 블로그 만들기

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

  • react
  • 블로그
  • next.js
youre8090 댓글 2 좋아요 1 조회수 405

PPR 적용 한 후 에러가 났습니다.

해결됨

손에 익는 Next.js - 블로그 만들기

안녕하세요. 조은님, 강의 잘 듣고 있습니다 :) 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" } }

  • react
  • 블로그
  • next.js
댓글 2 좋아요 1 조회수 336

yarn build 시 오류가납니다..

미해결

React 기반 Gatsby로 기술 블로그 개발하기

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 확인부탁드리겠습니다. 감사합니다.

  • 블로그
  • gatsby
임채명 댓글 1 좋아요 0 조회수 294

렌더링 문제

미해결

React 기반 Gatsby로 기술 블로그 개발하기 v2

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

  • react
  • typescript
  • 블로그
  • gatsby
최정훈 댓글 2 좋아요 0 조회수 321

깃 액션 활용

해결됨

React 기반 Gatsby로 기술 블로그 개발하기 v2

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: --verbose develop 브런치에서 위 코드를 작성하고 git push origin develop 을했는데 액션에 동작을 안합니다. https://github.com/Choi-jeonghoon/Jeong-hoon.github.io/actions/new

  • react
  • typescript
  • 블로그
  • gatsby
최정훈 댓글 3 좋아요 0 조회수 413

안녕하세요. 혹시 jekyll 에 login 기능을 구현할 수 있을까요?

미해결

깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!

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

  • 블로그
  • github
강현구 댓글 1 좋아요 0 조회수 173

code 강조가 안됨니다..

해결됨

React 기반 Gatsby로 기술 블로그 개발하기 v2

코드블럭 테스트 language::typescript export 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> ) }

  • react
  • typescript
  • 블로그
  • gatsby
최정훈 댓글 3 좋아요 0 조회수 408

Github Actions 배포 이후 ReadMe만 보이는 에러

해결됨

React 기반 Gatsby로 기술 블로그 개발하기 v2

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

  • react
  • typescript
  • 블로그
  • gatsby
김지훈 댓글 1 좋아요 0 조회수 394

Property 'references' does not exist on type 'ContentfulPostContent' 에러

해결됨

React 기반 Gatsby로 기술 블로그 개발하기 v2

안녕하세요 게시글 렌더링 컴포넌트 구현하기 강의에서 {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 } } } } } `

  • react
  • typescript
  • 블로그
  • gatsby
댓글 2 좋아요 0 조회수 365

인기 태그

인프런 TOP Writers

주간 인기글