학습노트 pdf에서 4-2 실습코드 링크와 4-3 실습 코드 링크가 동일합니다. 수정 부탁드립니다.  그리고 5-1 강의에서 HTML과 리액트의 onclick/onClick 설명해주시는 화면에 둘 모두 onclick으로 되어 있음을 제보 드립니다.

지금 section04 포트폴리오 리뷰까지 왔는데 지금은 작성자, 비밀번호 , 제목 , 내용을 입력하고 등록하기 버튼을 눌러도 등록안되고 에러뜨는게 정상인건가요?저만 안되는건가 싶어서요

안녕하세요 Next.js 강의를 잘 보고 있습니다. Next.js 장단점 내용을 보고 궁금한 점이 생겨서 질문드립니다.1. 8:59초에 서버에서 모든 컴포넌트를 사전 렌더링을 한다고 말씀하셨는데, 작성한 모든 컴포넌트의 HTML을 서버에 생성해놓는다는 의미인가요? 그렇다면 그 HTML을 받아서 브라우저가 파싱할 때, 서버로부터 받는 스크립트는 해당 컴포넌트의 관련된 로직의 js 파일을 받아오는건가요? 이 동작까지 Next.js에서 담당해주는건가요..? 사용자의 접속 요청이 들어왔을 때, FCP는 빠르겠지만 이 과정에서 서버에서 모든 컴포넌트의 사전 렌더링이 진행되고, 하이드레이션 과정까지 있습니다. 전처리 작업은 늘어난 것 같고, 사용자의 인터렉션이 불가한 지점까지 있는데 이 부분은 어떻게 핸들링하는지와 과연 FCP가 단축된게 장점이라고 할 수 있는지 궁금합니다.해소가 안되는 부분들이 계속 생기는데, 영상을 계속 보다보면 뒤에서 다 설명을 해주시는 부분들일까요...?

useMemo 강의에서 함수를 작성할 때, const { totalCount, doneCount, notDoneCount } = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone; ).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount }; }, [todos]);위의 코드처럼 작성하고 아이템의 체크 박스를 누르면 아래 사진과 같은 오류가 발생합니다.todos 배열 객체의 isDone 속성이 정의되지 않았다고 하는 것 같은데 해결 방법을 몰라 질문 드립니다...ㅠㅠ 혹시 몰라 List.jsx 전체 코드도 같이 올려두겠습니다.항상 좋은 강의 만들어주셔서 감사합니다!import "./List.css"; import { useState, useMemo } from "react"; import TodoItem from "./TodoItem"; function List({ todos, onUpdate, onDelete }) { const [search, setSearch] = useState(""); const searchHandler = (e) => { setSearch(e.target.value); }; const filterFunc = () => { if (search === "") { return todos; } return todos.filter((todo) => todo.content.toLowerCase().includes(search.toLowerCase()) ); }; const filterArr = filterFunc(); const { totalCount, doneCount, notDoneCount } = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone; ).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount }; }, [todos]); return ( <div className="List"> <h4> Todo List 🌱</h4> <div> <div>total: {totalCount}</div> <div>done: {doneCount}</div> <div>notDone: {notDoneCount}</div> </div> <input placeholder="검색어를 입력하세요" onChange={searchHandler} value={search} ></input> <div className="wrapper"> {filterArr.map((todo) => { return ( <TodoItem key={todo.id} {...todo} onUpdate={onUpdate} onDelete={onDelete} /> ); })} </div> </div> ); } export default List;

안녕하세요!Header.jsx 파일에서 이 오류가 사라지지 않아서 질문 드립니다! 어떻게 해결해야 하나요...?

파라미터를 받아서 특정 도서 상세페이지로 이동하는 [id].tsx에서 이전에 사용하던export default async function fetchBooks(q?: string): Promise<BookData[]> { let url = `http://localhost:12345/book`; export default async function fetchBooks(q?: string): Promise<BookData[]> { let url = `http://localhost:12345/book`; if (q) { url += `/search?q=${q}`; } try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return await response.json(); } catch (err) { console.error(err); return []; } }이 코드에서 아래와 같은 방식도 가능할까요? export default async function fetchBooks(q?: any): Promise<BookData[]> { let url = `http://localhost:12345/book`; if (typeof q === "string") { url += `/search?q=${q}`; } else if (typeof q === "number") { url += `/${q}`; } try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return await response.json(); } catch (err) { console.error(err); return []; } }

안녕하세요 선생님!해당 수업에서 On-Demand-ISR을 적용하기 위해 page/api/revalidate.ts 파일에 재 생성을 요청하는 handler 함수를 정의를 했습니다.// 강의에서 작성한 handler 코드 export default async function handler( req: NextApiRequest, res: NextApiResponse ) { try { // 인덱스 페이지를 요청받을 때 revalidate 되도록 하기 await res.revalidate("/"); // 재 생성이 잘 완료되었다는 걸 리턴함 return res.json({ revalidate: true }); } catch (err) { // 재생성 실패 했을 떄 실행할 코드 res.status(500).send("실패"); console.error(err); } } 현재 강의에서는 직접 localhost:3000/api/revalidate 를 입력해 수동으로 페이지를 재 생성했는데, 만약 인덱스 페이지 접속할 때마다 자동으로 페이지를 재 생성하고 싶으면 useEffect 훅을 사용하면 될까요? 아래는 제가 작성한 코드입니다! useEffect(() => { fetch("/api/revalidate") .then((res) => res.json()) .then((data) => { if (data.revalidate) { console.log("페이지가 성공적으로 재생 성되었습니다."); } }); }, []);

제가 백엔드 강의는 수강한 적이 없어서요, 대신 노드js 교과서 책을 구매해서 가지고 있는데..우선 프론트는 네트리파이로 배포 완료했습니다https://admirable-donut-f22cc6.netlify.app/백엔드 배포는 선생님 책 노드js 교과서 722쪽 AWS 배포하기 부터 보면서 하면 별 문제없지 진행할 수 있을까요? 추가적으로 백엔드쪽 코드 수정이 필요할지..배포할 레포 구조는 아래 처럼 루트 폴더 하위에 백엔드, 프론트 폴더 각각 있습니다

소스코드는 어디서 받을 수있는지요..

투두를 수정, 삭제하는 강의를 보면서버튼을 클릭할 때, 제가 누른 버튼이 어떤 버튼인지 알 수 없기 때문에 이벤트 객체를 이용해야 한다고 생각했습니다.내가 클릭한 버튼의 아이디를 수정, 삭제하는 함수의 인수로 전달해야 한다고 생각해서 아래와 같은 코드로 작성해야한다고 생각했습니다. const onChageCheckBox = (e) => { onUpdate(e.target.id); }; const deleteHandler = (e) => { onDelete(e.target.id); };  하지만 강의에서는 아래 코드처럼 알려주셔서요! const onChageCheckBox = () => { onUpdate(id); }; const deleteHandler = () => { onDelete(id); };이벤트 객체를 사용하지 않고 id만으로 함수가 실행되는 점이 이해가 가지 않아 질문 드립니다.더불어 이벤트 객체를 사용해서 코드를 작성하는 방법도 있는지 질문 드립니다. 항상 좋은 강의해주셔서 감사합니다!

container 중앙으로 이동시킬때.container { background: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px; }라고 하셨는데 가운데 정렬하게 될때 ,margin: 0 auto; 하는것과 어떤차이가 있을까요 ??

On-Demand ISR 사전 렌더링 방식을 보면서 현재 대부분의 SSR로 구현 되어 있는 어플리케이션을 좀 더 최적화 할 수 있겠다는 생각을 했습니다! 여기서 질문은 API Router를 생성해서 revalidate할 경로를 작성해서 해당 경로의 페이지를 On-Demand ISR 처리되도록 구현해주셨는데요..! 실제로 비지니스 로직을 작성할 때는 많은 페이지들이 존재하는데, 이럴때는 API Router에서 "/" 인덱스 페이지 경로를 하드코딩한 부분을 동적으로 받을 수 있게 처리해서 백엔드 서버와 통신 시, 정상응답을 받았을 때, 해당 API Router를 호출하게 하면 되는걸까요..?!추가로, 페이징 기능 같은 페이지가 있는 경우에는 어떤식으로 On-Demand ISR을 적용하는지도 궁금합니다..!!바쁘시겠지만 답변 해주시면 감사하겠습니다 😀  🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

썸네일 이미지가 뜨지 않습니다!그리고 css도 안먹힙니다.더불어if (!data) { return <DiaryContainer></DiaryContainer>; } 위의 코드가 없으면 화면이 웹드라우저에 뜨지 않습니다. import { DiaryContainer, ResultTitle, Divider, CardContainer, CardTitle, CardContent, ActionListItem, } from "./CommonStyles"; import { LoadingOutlined, CheckCircleTwoTone, HeartTwoTone, SmileTwoTone, MessageTwoTone, SoundTwoTone, } from "@ant-design/icons"; import { Image } from "antd"; import styled from "styled-components"; const ThumbnailImage = styled(Image)` max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 15px; display: block; `; const DiaryDisplay = ({ data, isLoading }) => { if (isLoading) { return ( <DiaryContainer> 불러오는중... <LoadingOutlined /> </DiaryContainer> ); } if (!data) { return <DiaryContainer></DiaryContainer>; } return ( <DiaryContainer> <ResultTitle>{data.title}</ResultTitle> <Divider /> <CardContainer> <CardTitle> <CheckCircleTwoTone twoToneColor="#FF9AA2" style={{ marginRight: "6px" }} /> 요약 </CardTitle> <CardContent>{data.summary}</CardContent> </CardContainer> <ThumbnailImage src={data.thumbnail} alt="Thumbnail" fallback="데이터:image/png;base64,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" /> <Divider /> <CardContainer> <CardTitle> <HeartTwoTone twoToneColor="#FFB7B2" style={{ marginRight: "6px" }} /> 감성일기장 </CardTitle> <CardContent>{data.emotional_content}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SmileTwoTone twoToneColor="#FFDAC1" style={{ marginRight: "6px" }} /> 내가 느낀 감정 </CardTitle> <CardContent>{data.emotional_result}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <MessageTwoTone twoToneColor={"#B5EAD7"} style={{ marginRight: "6px" }} /> 심리 분석 </CardTitle> <CardContent>{data.analysis}</CardContent> </CardContainer> <Divider /> <CardContainer> <CardTitle> <SoundTwoTone twoToneColor="#C7CEEA" style={{ marginRight: "6px" }} /> GPT 조언 </CardTitle> <CardContent> {data.action_list.map((action, index) => ( <ActionListItem key={index}>{action}</ActionListItem> ))} </CardContent> </CardContainer> </DiaryContainer> ); }; export default DiaryDisplay; 코드는 이렇습니다.썸네일은 원래 본 강의의 깃허브에서 내려받은 코드로도 안돼서 고친 것입니다. 원래코드도 이미지가 안떳습니다 ㅠㅠ어떻게 문제를 해결할 수 있을까요?

레이아웃 컴포넌트의 경우 여러 페이지에 공통적으로 들어가야 하는 것이기 때문에, _app.tsx에 넣어야 하는 것은 이해했습니다.  그리고 모든 페이지에 들어가는 레이아웃이 아닌 특정 페이지만 들어가는 레이아웃의 경우에 정환님 같은 경우에는 getLayout이라는 메서드를 해당 레이아웃을 필요로 하는 페이지 컴포넌트 함수에 메서드로 주시고 _app.tsx에서는 그 메서드를 불러오게끔 하셨는데요. 제가 머리가 나빠서인지는 모르겠지만, 뭔가 이런 메서드로 레이아웃을 관리하니까 이해하기 어렵고 뭔가 직관적으로 다가오는 느낌이 없어서 힘들더라구요.. 그래서 그냥 router와 if문을 이용해서 특정 페이지의 경우에만 searchable 레이아웃이 나오게 하고, 아닌 경우에는 그냥 페이지를 리턴하도록 하는 게 저한테는 뭔가 더 직관적..? 으로 다가오는데 이런 식으로 사용해도 되는지 궁금해서 여쭈어봅니다.. (코드는 밑에 같이 써놓았습니다!) export default function App({ Component, pageProps }: AppProps) { const router = useRouter(); const isSearchableLayoutPage = router.pathname === '/' || router.pathname === '/search'; return ( <GlobalLayout> {isSearchableLayoutPage ? ( <SearchableLayout> <Component {...pageProps} /> </SearchableLayout> ) : ( <Component {...pageProps} /> )} </GlobalLayout> ); }

지금 "dialogflow-fulfillment": "^0.6.1",얘가 최신버전인데, 얘와 호환되는 에가 node6이라고 합니다. 지금 10버전이상이 나오고 있는데 6버전을 쓸 수는 없는 것 같아요. npm install을 하면 버전이 자꾸 안맞다고 합니다.최신버전에 맞처서 진행을 하고 싶습니다.그렇다고 dialogflow-fulfillment이거를 최신노드버전이랑 호화되는 것을 찾으려고 하니... 저게 최신이라고 합니다. 6년전께요. 얼마전까지 인스톨해서 포스트맨까지확인하고, 채팅까지 했었고 이벤트 적용하다가 자꾸 에러가 처음부터 다시 작업하는데 이번에도 버전문제라고 하네요 모듈의 버전을 현재 안정적인 최신버전으로 (제 컴퓨터에깔린)바뀌어서 인스톨을 진행하지만 자꾸 에러가 납니다   { "name": "chatbot-app", "version": "1.0.0", "description": "chatbot-app", "main": "index.js", "engines": { "node": ">=20.16.0", "npm": ">=10.2.0" }, "scripts": { "start": "react-scripts --openssl-legacy-provider start", "build": "react-scripts --openssl-legacy-provider build", "test": "react-scripts test", "eject": "react-scripts eject", "backend": "nodemon index.js", "frontend": "npm run front --prefix client", "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" }, "author": "Jaewon Ahn", "license": "ISC", "dependencies": { "@google-cloud/dialogflow": "^6.8.0", "actions-on-google": "^2.6.0", "body-parser": "^1.18.3", "dialogflow": "^4.0.3", "dialogflow-fulfillment": "^0.6.1", "express": "^4.16.4", "mongoose": "^5.4.20" }, "devDependencies": { "concurrently": "^8.2.2", "nodemon": "^3.1.4" } } C:\project\vswork\chatbot-app> C:\project\vswork\chatbot-app>npm install npm warn EBADENGINE Unsupported engine { npm warn EBADENGINE package: 'dialogflow-fulfillment@0.6.1', npm warn EBADENGINE required: { node: '6' }, npm warn EBADENGINE current: { node: 'v20.16.0', npm: '10.8.2' } npm warn EBADENGINE } npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated npmlog@5.0.1: This package is no longer supported. npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm warn deprecated are-we-there-yet@2.0.0: This package is no longer supported. npm warn deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm warn deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm warn deprecated google-p12-pem@1.0.5: Package is no longer maintained npm warn deprecated google-p12-pem@1.0.5: Package is no longer maintained npm warn deprecated google-p12-pem@1.0.5: Package is no longer maintained npm warn deprecated google-p12-pem@1.0.5: Package is no longer maintained npm warn deprecated gauge@3.0.2: This package is no longer supported. npm warn deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm warn deprecated axios@0.18.1: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410 npm warn deprecated grpc@1.24.11: This library will not receive further updates other than security fixes. We recommend using @grpc/grpc-js instead.

안녕하세요!다름이 아니라 2.20 실습을 진행하면서 vercel에 앱을 배포하려고 하는데Error: Command "npm run build" exited with 1에러가 발생했습니다. [cause]: Error: connect ECONNREFUSED 127.0.0.1:12345 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1607:16) { errno: -111, code: 'ECONNREFUSED', syscall: 'connect', address: '127.0.0.1', port: 12345 }vercel 에서 에러 로그를 살펴보니 book/1, book/2, book/3 페이지를 prerendering 할 때 위와 같은 에러가 발생했습니다.로컬에서 앱을 빌드한 후 실행했을 때엔 문제가 발생하지 않았습니다 ㅠㅠ export default async function fetchBookById(id: number): Promise<BookData | null> { const url = `http://127.0.0.1:12345/book/${id}`; try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return response.json(); } catch (error) { console.error(error); return null; } }위 코드는 book/{id}페이지로 들어왔을 때 실행하는 함수입니다! import { useRouter } from "next/router"; import style from "./[id].module.css"; import fetchBookById from "@/lib/fetch-book-by-id"; import { GetStaticPropsContext, InferGetStaticPropsType } from "next"; import Head from "next/head"; export const getStaticPaths = () => { return { paths: [{ params: { id: "1" } }, { params: { id: "2" } }, { params: { id: "3" } }], fallback: true, }; }; export const getStaticProps = async (context: GetStaticPropsContext) => { const id = context.params!.id; const data = await fetchBookById(Number(id)); return { props: { data, }, }; }; export default function Page({ data }: InferGetStaticPropsType<typeof getStaticProps>) { const router = useRouter(); if (router.isFallback) { return ( <> <Head> <title>한입북스</title> <meta property="og:image" content="/thumbnail.png" /> <meta property="og:title" content="한입북스" /> <meta property="og:description" content="한입 북스에 등록된 도서들을 만나보세요" /> </Head> <div>로딩중입니다.</div> </> ); } if (!data) { return { notFound: true, }; } const { id, title, subTitle, author, coverImgUrl, description, publisher } = data; return ( <> <Head> <title>{title}</title> <meta property="og:image" content={coverImgUrl} /> <meta property="og:title" content={title} /> <meta property="og:description" content={description} /> </Head> <div className={style.container}> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }}> <img src={coverImgUrl} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </div> </> ); } 혹시 몰라 해당 페이지의 전체 코드 같이 남겨봅니다 😭감사합니다!

param의 타입을 지정할 때 string은 이해가 되는데, string의 배열인 형태는 예를 들어 어떤게 있을까요? 

링크타고 들어가보면 이렇게 뜨면서 다운로드가 불가능하다고 뜨네요!그래도 page router 부분 css 랑 코드 똑같은 것 같아서 전 그 부분 보고 진행했어요  🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

페이지 라우터 프로젝트 생성때 테일윈드는 지금은 안하고 나중에? 뒤에서? 사용한다고 하셨던 기억이있는데 앱라우터 생성할때도 테일윈드는 사용안하는거로 하시네요! 테일윈드는 후반부에 사용되나요? 제기억이 잘못된건가 싶기도해서 여쭤봅니다 ㅎㅎ

영상처럼if (!book) { return { notFound: true, }; }이렇게 코드 설정을 하면 컴포넌트에서 작성했던if (!book) return "문제가 발생했습니다 다시 시도하세요";해당 코드는 작성하지 않고 폴백중에 로딩만 표시되도록 해도 되는게 맞을까요?  🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.