173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
10,000명의 지원자를 본 기술이사의 포트폴리오 가이드
블로그 볼 때 직접 쓰는 게 맞는지 본다고 하셨는데 블로그 쓸 때 단순 지식이 아닌 과정과 결과 그로 인한 경험과 배운 것을 적을 때 저는 글 쓰는 게 너무 오래 걸리고 저보다 단락을 나누는 등 가독성 좋게 글을 쓰다 보니 생산성을 높이고자 ai에게 나의 경험을 적고 직접 보고 수정도 제가 하는데 블로그에 적을 때 최종본을 ai 답변 복붙을 합니다. 이것도 문제가 될까요? 본질 자체는 괜찮은데 형식으로 검토자가 볼 때 찍어내기라고 단정 지을 수 있다고 생각해서 질문 드립니다.
미해결
10분만에 만드는 github blog for Pythonista
ssh 키 받는 페이지가 사라졌어요
미해결
Google Opal実践講座｜音声からブログ・サムネイル・SNS投稿を自動生成するワークフローを作成
이정도 수준의 수업은 올리지 말아주세요. 유튜브 무료 강의보다 퀄리티가 떨어집니다. 지불한 돈이 아깝습니다. 환불하고 싶은 심정입니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
Rehype-sanitize를 사용하면 어떻게 설정을 하든, <u>에 대한 허용을 설정하든, '밑줄'을 긋는 서식에 대한 결과가 제대로 이루어지지 않습니다. 항상 생략되어 밑줄쳐둔 부분은 삭제되는 결과를 낳습니다. 그래서 드는 생각이, 어차피 제 노션에서 쓴 글을 받아서 작성하는데, 텍스트로 html코드를 이상하게 적어둘것도 아니므로, 굳이 sanitize가 있을 필요가 있나 하는 의문이 듭니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
노션 API 통합해서 API키 제대로 입력했고, 블로그템플릿 데이터베이스에서 링크 오픈하고, 그 링크에서 사이트주소랑 쿼리스트링 다 날리고 ID 부분만 제대로 입력했고, 다 제대로 했습니다. 그런데 계속 노션 API 연결 안된다고 에러가 뜹니다. 아예 다 지우고 다시 만들고 해봐도 안됩니다. 왜그런걸까요? ㅠㅠ 그리고 현재 @notionhq/client 의 버전에서는 database.query가 아니라 dataSources.query입니다. const { Client, APIErrorCode } = require("@notionhq/client") try { const notion = new Client({ auth: process.env.NOTION_TOKEN }) const myPage = await notion.dataSources.query({ data_source_id: dataSourceId, filter: { property: "Landmark", rich_text: { contains: "Bridge", }, }, }) } catch (error) { if (error.code === APIErrorCode.ObjectNotFound) { // // For example: handle by asking the user to select a different data source // } else { // Other error handling code console.error(error) } }
미해결
손에 익는 Next.js - 블로그 만들기
5:53 부분에서 sitemap 에서 Promise가 필요하다 하셨는데 왜 필요한지 궁금합니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
프로젝트 개발 중에, src/components 폴더에 재사용할 것들을 만들어서 사용하는 것과, src/app/_components 를 사용하는 것을 배웠는데, 둘의 사용성 차이가 있나요? 굳이 이 두 기능을 둘 다 사용을 할 필요가 있을까요? 오히려 하나만 사용하는게 좋지 않나 싶었습니다. 반드시 분리를 해야만 하는 특별한 이유가 있어서 굳이 분리를 하게 되는 것일까요?
미해결
손에 익는 Next.js - 블로그 만들기
return 문에 왜 matterResult.data를 반환해주나요? id 와 content만 있으면 되는거 아닌가요?? 추가해주는 이유가 궁금합니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
저는 아무래도 정답이 C 같은데.. 질문에서 /docs 도 포함되어야 한다고 했으므로, 옵셔널 캐치올만이 루트 경로( /docs )까지 모두 처리할 수 있는거 아닌가요? 다 학습하고 혼란이 오네요..
미해결
React 기반 Gatsby로 기술 블로그 개발하기
PostItem.tsx import React, { FunctionComponent } from 'react' import styled from '@emotion/styled' import { Link } from 'gatsby' type PostItemProps = { title: string date: string categories: string[] summary: string thumbnail: string link: string } const PostItemWrapper = styled(Link)` display: flex; flex-direction: column; border-radius: 10px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); transition: 0.3s box-shadow; cursor: pointer; &:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } ` const ThumbnailImage = styled.img` width: 100%; height: 200px; border-radius: 10px 10px 0 0; object-fit: cover; ` const PostItemContent = styled.div` flex: 1; display: flex; flex-direction: column; padding: 15px; ` const Title = styled.div` display: -webkit-box; overflow: hidden; margin-bottom: 3px; text-overflow: ellipsis; white-space: normal; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 20px; font-weight: 700; ` const Date = styled.div` font-size: 14px; font-weight: 400; opacity: 0.7; ` const Category = styled.div` display: flex; flex-wrap: wrap; margin-top: 10px; margin: 10px -5px; ` const CategoryItem = styled.div` margin: 2.5px 5px; padding: 3px 5px; border-radius: 3px; background: black; font-size: 14px; font-weight: 700; color: white; ` const Summary = styled.div` display: -webkit-box; overflow: hidden; margin-top: auto; text-overflow: ellipsis; white-space: normal; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 16px; opacity: 0.8; ` const PostItem: FunctionComponent<PostItemProps> = function ({ title, date, categories, summary, thumbnail, link, }) { return ( <PostItemWrapper to={link}> <ThumbnailImage src={thumbnail} alt="Post Item Image" /> <PostItemContent> <Title>{title}</Title> <Date>{date}</Date> <Category> {categories.map(category => ( <CategoryItem key={category}>{category}</CategoryItem> ))} </Category> <Summary>{summary}</Summary> </PostItemContent> </PostItemWrapper> ) } export default PostItem PostList.tsx import React, { FunctionComponent } from 'react' import styled from '@emotion/styled' import PostItem from 'components/Main/PostItem' const POST_ITEM_DATA = { title: 'Post Item Title', date: '2020.01.29.', categories: ['Web', 'Frontend', 'Testing'], summary: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident repellat doloremque fugit quis rem temporibus! Maxime molestias, suntrem debitis odit harum impedit. Modi cupiditate harum dignissimos eos in corrupti!', thumbnail: 'https://i.ytimg.com/vi/pmnv2J2fyJg/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAIhCGAHYAQHiAQoIGBACGAY4AUAB&rs=AOn4CLCIBVaOEdLTo8W392meul19B3RFeQ', link: 'https://www.google.co.kr/', } const PostListWrapper = styled.div` display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; width: 768px; margin: 0 auto; padding: 50px 0 100px; ` const PostList: FunctionComponent = function () { return ( <PostListWrapper> <PostItem {...POST_ITEM_DATA} /> <PostItem {...POST_ITEM_DATA} /> <PostItem {...POST_ITEM_DATA} /> <PostItem {...POST_ITEM_DATA} /> </PostListWrapper> ) } export default PostList index.tsx import React, { FunctionComponent } from 'react' import styled from '@emotion/styled' import GlobalStyle from 'components/Common/GlobalStyle' import Footer from 'components/Common/Footer' import CategoryList from 'components/Main/CategoryList' import Introduction from 'components/Main/Introduction' const CATEGORY_LIST = { All: 5, Web: 3, Mobile: 2, } const Container = styled.div` display: flex; flex-direction: column; height: 100vh; ` const IndexPage: FunctionComponent = function () { return ( <Container> <GlobalStyle /> <Introduction /> <CategoryList selectedCategory="Web" categoryList={CATEGORY_LIST} /> <Footer /> </Container> ) } export default IndexPage 전 단계인 태그까지는 됐는데, 게시글 목록 부분 컴포넌트 구현하기부터 뭔가 잘 안 뜹니다. 게시글 썸네일 바꿔보고, 꺾쇠도 없애봤는데 별 반응이 없네요... 어느 부분을 놓친 건지, 더 확인할 부분이 있는지 알려주시면 감사드리겠습니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
Stream을 구현할 때 posts, tags 정보를 서버사이드에서 호출하고 promises 를 클라이언트 컴포넌트에 넘겨 use 훅으로 받는데요. 서버와 클라이언트의 경계가 살짝 이해가 안되네요. 서버사이드에서 promise객체를 클라이언트로 던지고 클라이언트에서 promise를 resolve하는 건가요?
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안뇽하세요. 몇일 전 구매하고 열강하고 있는 개발자입니다. ISR 매커니즘에 대한 궁금증이 있는데요. 저희가 작성한 코드에 보면 export const generateStaticParams = async () => { const { posts } = await getPublishedPosts(); return posts.map((post) => ({ slug: post.slug, })); }; 이렇게 게시글들을 미리 ISR 하는 코드가 있습니다. 특정 게시글의 slug 정보 기반으로 미리 SSG 만드는 것으로 이해했는데요. 그래서 빌드를 하면 SSG + 두 개의 슬러그 페이지가 존재합니다. (getPubishedPosts의 기본 사이즈가 2개이기 때문) 그런데 제가 궁금한게 위 ISR 적용하기 전에 빌드한 후 상세 페이지에 진입을하면 약 1초 정도? 딜레이가 발생하고 화면이 렌더링이 되는데요. ISR을 적용한 후 기대한 동작은 미리 생성된 두 개의 slug에 대해서는 바로 화면에 보이지만 무한스크롤로 발생한 동적 블로그에 대해서는 빌드 전과 동일하게 1초의 딜레이가 발생하고 이후 접근 시 정적페이지가 생성되어 빠르게 보이는게 맞지 않나요? 하지만 현재 동작을 보면 미리 생성된 slug를 제외한 모든 게시글에 대해 빠르게 화면이 보여 제가 이해한게 아닌가 싶네요. 공식문서를 봐도 이해가 잘되지 않아 확인차 문의드립니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요 강사님! 강의 항상 재밌게 잘 보고 있습니다. 다름이 아니라 cursor AI가 영상의 버전과 다른 것 같은데, 프로젝트 룰을 어떤 걸로 설정해야하는지 모르겠습니다. 공식 문서와 다른 블로그들을 참고해도 모르겠어서 질문 올립니다ㅠㅠ
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요! 강의 5:15초 부터의 설명에 조금만 더 자세히 설명해주시면 감사할것 같아서요! "이러한 파람즈도 프라미스로 가져와야겠죠 우리가 최신을 사용하고 있기 때문에 다시 generateMetadata 함수를"라고 스크립트(영상자막)는 나와 있는데, 이유를 설명하는 파트가 잘 안 와닿아서 혹시 설명해주실 수 있나요? 직관적으로 생각하면 export generateStaticParams에서 slug 를 params으로 가져오는데 시간이 걸리니까, 기다려야 하니까 await 으로 params를 기다리는건 알겠는데, 'params'가 왜, 어떻게 해서 Promise 타입인지 궁금합니다. 너무 두서없었네요. 정리하자면 1.왜 params 가 Promise 객체 타입인지, 코드 어디에서, 어떻게 해서 Promise 객체 타입이 되었는지 궁금합니다. 2. 혹시 params 가 Promise 객체 타입인 이유는, 그저, [slug]폴더로 동적페이지로 정의되었으니, 컴포넌트로 들어오는 입력값 {params}는 [] 안에 들어간 변수값이 들어오는 건가요? 그래서 그냥 nextjs 스펙상 무조건promise 로 params 가 주어지게 되는건가요? 너무너무 헷갈려서 그런데, 동적라우팅/정적 라우팅 별, 그리고 Clientside /serverside 별로 4가지로 나누어서 params 가져오는 방법을 설명해주실수 있나요? 너무너무 헷갈리네요.... 동적/정적라우팅에 따라 나뉘나요, client/server 에 따라 나뉘나요? 후자인걸로 생각하고 있긴 한데 맞는지 너무 헷갈리네요.. 감사합니다! 좋은 하루 되세요!
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요, 잘 학습하고 있는 학생입니다. 강의 따라가면서, streaming 파트는 다 적용을 했습니다. 소개 탭에서 홈 탭으로 이동 시에 태그목록과 포스트리스트도 skeleton 로딩페이지 잘 적용됩니다. '홈'을 눌렀을때, 기존의 '로딩 되는 중에 아무 변화 없이 사용자를 마냥 기다리게 함'에서 현재의 '로딩 되는 중에 skeleton 보여줌으로써 로딩되고 있음을 나타내줌'으로의 개선은 사용자 경험에 있어서, 정말 효과적인 방법이라고 느꼈습니다. 다만, 문제가 있습니다. '홈' 을 눌러 이동하는 경우말고, 태그 목록에서 나머지 'css'태그, 'git'태그 등등 이를 직접 클릭해서 이동하는 경우에는 streaming 이 적용되지 않습니다. 예를 들어, 홈을 클릭한 상황에서는 skeleton ui가 잘 나타나지만, 그렇게 홈으로 이동한 상황에서 다른 태그(css,Git 등)로 다시 이동하는 상황에서는 적용되지 않고 그대로입니다. 이를 해결하기 위해선 어떻게 해야 하나요?
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
remark-gfm 설치 이후 모든 css 가 망가지고 글자와 이미지만 렌더링 되는데 뭐가 문제일까요? global css 에서 import 한것도 아니고 영상과 같이 Plugin 으로 했어요. next-mdx-remote 깃헙 보니까 업데이트도 1년 지났고 버그 로그 많던데 그거 때문이려나요? https://github.com/hashicorp/next-mdx-remote next 공식문서에서도 next-mdx-remote 는 더이상 없고 next-mdx-remote-client 만 있던데 그거 쓰면 되는걸까요?
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
전부 다 따라하면서 배우고 있습니다! 다만, 마크업 파트 에서 이렇게 글자 색으로 인해 가독성이 떨어지는데 마크업 파트 속성을 바꿀 방법은 없을까요?
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요, 선생님. 아직 디스코드에 Next.js 블로그 결과물 공유하면 실용적인 블로그 소스코드 받을 수 있는 이벤트 진행하고 있나요?
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
주신 코드 그대로 이해하면서 보고 했는데, 분명 postcard 내부에서 Image태그를 감고 있는 div 태그들을 봐도, object-cover 로 부모 요소를 가득 채우는 양식으로 되고 있는데, 왜 이미지 상단에 여백이 생기는걸까요?
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
space-y-6과 flex-col 로 gap-6(또는 gap-y-6)을 주는 방식의 차이를 모르겠어요 둘다 같은 결과를 초래하는것 아닌가요? 이번 코드에서 둘다 사용하시길래, 어떤 상황의 차이로 코드를 다르게 사용했는지 궁금해서 여쭙니다
