inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

route.ts에 async 키워드가 필요한가요?

해결됨

손에 익는 Next.js - 공식 문서 훑어보기

/app/api/revalidate/route.ts 파일 내 POST 함수가 async로 선언되어 있습니다. 본문에 await이 없는데 async로 선언되어야 하나요?

  • react
  • typescript
  • next.js
  • next.js13
yjkim325 댓글 1 좋아요 1 조회수 209

Azure Function 파일 이름 규칙 문의

해결됨

Azure Native로 나만의 GPT 만들기

Azure Function의 메인 파일은 function_app.py 이어야 하나요?

  • javascript
  • python
  • mongodb
  • azure
  • FastAPI
삼각형 댓글 1 좋아요 1 조회수 251

querydsl 에러

해결됨

코드로 배우는 React 19 with 스프링부트 API서버

(사진)

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
dev 댓글 1 좋아요 0 조회수 309

안녕하세요 로그인 비밀번호 관리 질문드려용....

미해결

코드로 배우는 React 19 with 스프링부트 API서버

안녕하세요 로그인 질문 드립니다. 강의와 크게 상관은 없지만 강의 듣다가 궁금한게 생겨서요.. 현재 시큐리티 강의 듣고 있습니다. DB에 암호화해서 저장하는건 이해하였습니다. 사용자가 암호를 잊었을때 시큐리티 암호 같은 방식은 암호 재발급 하면 되지만 복원 하는건 힘들어 보이네요 . 예를 들어서 이런 방식입니다. 암호의 3째자리 까진 알려주는 방식 암호의 흰트를 입력하면 가입한 이메일에 암호를 보내준다던지... ms sqlserver에는 암호 복원 기능 있는거 같던데 ... 암튼 강의듣다가 생각나서 질문 드려요

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
just kim 댓글 1 좋아요 0 조회수 172

렌더링 문제

미해결

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

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

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

타입에러에 관해 질문있습니다

해결됨

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

아래와 같은 타입에러가 발생했습니다. 데이터베이스와 todoDto모두 설정 및 정상적으로 가져온거 같은데요 마우스를 올려보고 에러내용도 확인해보면 타입은 다 같게 설정되어있는거 같습니다. 타입자체를 비교해서 대입 하려해도 에러가나오네요.. 플러그인을 통해서 시각화해서 좀 더 자세하게 머가 문제인지 비교해봐도 타입이 같습니다.. 혹시 뭐가 문제인지 알 수 있을까요?...

  • react
  • 클론코딩
  • next.js
  • supabase
루키키키 댓글 4 좋아요 0 조회수 321

안녕하세요 vue 2.7로 수강하고 있는 학생입니다. 실무에서 최하위 자식의 props와 watch의 관계를 여쭈고자 합니다.

미해결

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

다름은 아니고 vue2.7 버젼을 사용하고 있습니다. 오늘 실무에서 업무를 진행하다. 한가지 의구심이 들어서 질문을 여쭈고자 합니다. 부모 에서 ref 반응형 데이터가 존재하는데 이 반응형 데이터를 바로 아래 자식으로 props를 넘겨주었고 이 넘긴 props를 watch를 사용해서 변화가 있을때 어떤 로직을 처리하겠다.로 구현을 했습니다. 구현과정에서 컴포넌트를 나눌 필요가 생겨서 자식안에 자식을 하나 더 만들고 최상위 부모로 부터 받은 props를 그 최하위 자식에게 전달 후 최하위 자식에서 watch를 통해 어떤 로직을 처리하겠다. 로 구현을 했을때 최하위 자식에서 watch가 정상적으로 props의 변화를 인지 하지 못하는 이슈가 있었습니다. 하지만 해당 props값을 렌더링 했을때는 최하위 자식에서도 정상적으로 변했습니다. 결국 최하위 자식에서 deep과 immediate 옵션을 설정해 해결했는데 왜 이런식으로 동작했는지 검색을해도 나오지 않아서 궁금해서 여쭙고자 합니다. 여기서 ref 데이터 타입은 object이고 초기값은 null 입니다. 추가적으로 최하위 자식은 항상 렌더링 되는것이 아닌 v-if v-else가 걸려있습니다.

  • javascript
  • vue.js
wnwlghdqkqh 댓글 1 좋아요 0 조회수 225

강사님 REST API와 GraphQL에 관하여 질문이 있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

graphql의 장점이 딱 원하는 데이터만 가져온다는 것은 이해가 되는데, REST API도 딱 원하는 DB 컬럼만 요청해서 가져오거나 할 수도 있지 않나요? 이게 어떠한 차이가 있나 궁금합니다. ㅎㅎ

  • react
  • node.js
  • seo
  • graphql
  • next.js
  • restapi
건태 댓글 2 좋아요 0 조회수 171

Azure Function Deploy 실패

미해결

Azure Native로 나만의 GPT 만들기

Azure Function Deploy가 실패하는데 원인을 모르겠습니다. ㅠ.ㅠ 2:32:09 PM xbg-my-chatgpt-api: [05:31:59+0000] Collecting watchfiles>=0.13 2:32:09 PM xbg-my-chatgpt-api: [05:31:59+0000] Using cached watchfiles-0.22.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl (1.2 MB) 2:32:09 PM xbg-my-chatgpt-api: [05:31:59+0000] Collecting python-dotenv>=0.13 2:32:09 PM xbg-my-chatgpt-api: [05:31:59+0000] Using cached python_dotenv-1.0.1-py3-none-any.whl (19 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:31:59+0000] Collecting uvloop!=0.15.0,!=0.15.1,>=0.14.0 2:32:09 PM xbg-my-chatgpt-api: [05:31:59+0000] Using cached uvloop-0.19.0-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl (3.5 MB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Collecting websockets>=10.4 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Using cached websockets-12.0-cp311-cp311-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl (130 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Collecting pyyaml>=5.1 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Using cached PyYAML-6.0.1-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl (757 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Collecting isodate>=0.6.1 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Using cached isodate-0.6.1-py2.py3-none-any.whl (41 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Collecting pyjwt>=2.6.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Using cached PyJWT-2.8.0-py3-none-any.whl (22 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Collecting azure-core>=1.24.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Using cached azure_core-1.30.2-py3-none-any.whl (194 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Collecting aiosignal>=1.1.2 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Using cached aiosignal-1.3.1-py3-none-any.whl (7.6 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Collecting attrs>=17.3.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:00+0000] Using cached attrs-23.2.0-py3-none-any.whl (60 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Collecting multidict<7.0,>=4.5 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Using cached multidict-6.0.5-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl (128 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Collecting yarl<2.0,>=1.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Using cached yarl-1.9.4-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl (328 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Collecting frozenlist>=1.1.1 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Using cached frozenlist-1.4.1-cp311-cp311-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_17_x86_64.manylinux2014_x86_64.whl (272 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Collecting requests>=2.21.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Using cached requests-2.32.3-py3-none-any.whl (64 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Collecting six>=1.11.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Using cached six-1.16.0-py2.py3-none-any.whl (11 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Collecting idna>=2.0.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Using cached idna-3.7-py3-none-any.whl (66 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Collecting dnspython>=2.0.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:01+0000] Using cached dnspython-2.6.1-py3-none-any.whl (307 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:02+0000] Collecting typer>=0.12.3 2:32:09 PM xbg-my-chatgpt-api: [05:32:02+0000] Using cached typer-0.12.3-py3-none-any.whl (47 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:02+0000] Collecting certifi 2:32:09 PM xbg-my-chatgpt-api: [05:32:02+0000] Using cached certifi-2024.7.4-py3-none-any.whl (162 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:02+0000] Collecting anyio 2:32:09 PM xbg-my-chatgpt-api: [05:32:02+0000] Using cached anyio-4.4.0-py3-none-any.whl (86 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:02+0000] Collecting httpcore==1.* 2:32:09 PM xbg-my-chatgpt-api: [05:32:02+0000] Using cached httpcore-1.0.5-py3-none-any.whl (77 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:02+0000] Collecting sniffio 2:32:09 PM xbg-my-chatgpt-api: [05:32:02+0000] Using cached sniffio-1.3.1-py3-none-any.whl (10 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:02+0000] Collecting MarkupSafe>=2.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:02+0000] Using cached MarkupSafe-2.1.5-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl (28 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:04+0000] Collecting pydantic-core==2.20.1 2:32:09 PM xbg-my-chatgpt-api: [05:32:04+0000] Using cached pydantic_core-2.20.1-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl (2.1 MB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:04+0000] Collecting annotated-types>=0.4.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:04+0000] Using cached annotated_types-0.7.0-py3-none-any.whl (13 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:04+0000] Collecting urllib3<3,>=1.21.1 2:32:09 PM xbg-my-chatgpt-api: [05:32:04+0000] Using cached urllib3-2.2.2-py3-none-any.whl (121 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:04+0000] Collecting charset-normalizer<4,>=2 2:32:09 PM xbg-my-chatgpt-api: [05:32:04+0000] Using cached charset_normalizer-3.3.2-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl (140 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:05+0000] Collecting rich>=10.11.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:05+0000] Using cached rich-13.7.1-py3-none-any.whl (240 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:05+0000] Collecting shellingham>=1.3.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:05+0000] Using cached shellingham-1.5.4-py2.py3-none-any.whl (9.8 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:05+0000] Collecting pygments<3.0.0,>=2.13.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:05+0000] Using cached pygments-2.18.0-py3-none-any.whl (1.2 MB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:05+0000] Collecting markdown-it-py>=2.2.0 2:32:09 PM xbg-my-chatgpt-api: [05:32:05+0000] Using cached markdown_it_py-3.0.0-py3-none-any.whl (87 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:05+0000] Collecting mdurl~=0.1 2:32:09 PM xbg-my-chatgpt-api: [05:32:05+0000] Using cached mdurl-0.1.2-py3-none-any.whl (10.0 kB) 2:32:09 PM xbg-my-chatgpt-api: [05:32:05+0000] Installing collected packages: mdurl, sniffio, pygments, markdown-it-py, idna, urllib3, typing-extensions, shellingham, rich, h11, click, charset-normalizer, certifi, anyio, websockets, watchfiles, uvloop, uvicorn, typer, six, requests, pyyaml, python-dotenv, pydantic-core, multidict, MarkupSafe, httptools, httpcore, frozenlist, dnspython, annotated-types, yarl, starlette, python-multipart, pyjwt, pydantic, jinja2, isodate, httpx, fastapi-cli, email-validator, azure-core, attrs, aiosignal, fastapi, azure-messaging-webpubsubservice, azure-functions, aiohttp 2:32:09 PM xbg-my-chatgpt-api: [05:32:09+0000] Successfully installed MarkupSafe-2.1.5 aiohttp-3.9.5 aiosignal-1.3.1 annotated-types-0.7.0 anyio-4.4.0 attrs-23.2.0 azure-core-1.30.2 azure-functions-1.20.0 azure-messaging-webpubsubservice-1.1.0 certifi-2024.7.4 charset-normalizer-3.3.2 click-8.1.7 dnspython-2.6.1 email-validator-2.2.0 fastapi-0.111.1 fastapi-cli-0.0.4 frozenlist-1.4.1 h11-0.14.0 httpcore-1.0.5 httptools-0.6.1 httpx-0.27.0 idna-3.7 isodate-0.6.1 jinja2-3.1.4 markdown-it-py-3.0.0 mdurl-0.1.2 multidict-6.0.5 pydantic-2.8.2 pydantic-core-2.20.1 pygments-2.18.0 pyjwt-2.8.0 python-dotenv-1.0.1 python-multipart-0.0.9 pyyaml-6.0.1 requests-2.32.3 rich-13.7.1 shellingham-1.5.4 six-1.16.0 sniffio-1.3.1 starlette-0.37.2 typer-0.12.3 typing-extensions-4.12.2 urllib3-2.2.2 uvicorn-0.30.3 uvloop-0.19.0 watchfiles-0.22.0 websockets-12.0 yarl-1.9.4 2:32:09 PM xbg-my-chatgpt-api: WARNING: Running pip as the 'root' user can result in broken permissions and conflicting behaviour with the system package manager. It is recommended to use a virtual environment instead: https://pip.pypa.io/warnings/venv 2:32:09 PM xbg-my-chatgpt-api: WARNING: You are using pip version 21.2.4; however, version 24.2 is available. 2:32:09 PM xbg-my-chatgpt-api: You should consider upgrading via the '/tmp/oryx/platforms/python/3.11.8/bin/python3.11 -m pip install --upgrade pip' command. 2:32:09 PM xbg-my-chatgpt-api: Not a vso image, so not writing build commands 2:32:09 PM xbg-my-chatgpt-api: Preparing output... 2:32:09 PM xbg-my-chatgpt-api: Copying files to destination directory '/home/site/wwwroot'... 2:32:11 PM xbg-my-chatgpt-api: Done in 1 sec(s). 2:32:11 PM xbg-my-chatgpt-api: Removing existing manifest file 2:32:11 PM xbg-my-chatgpt-api: Creating a manifest file... 2:32:11 PM xbg-my-chatgpt-api: Manifest file created. 2:32:11 PM xbg-my-chatgpt-api: Copying .ostype to manifest output directory. 2:32:11 PM xbg-my-chatgpt-api: Done in 14 sec(s). 2:32:12 PM xbg-my-chatgpt-api: Running post deployment command(s)... 2:32:12 PM xbg-my-chatgpt-api: Generating summary of Oryx build 2:32:12 PM xbg-my-chatgpt-api: Deployment Log file does not exist in /tmp/oryx-build.log 2:32:12 PM xbg-my-chatgpt-api: The logfile at /tmp/oryx-build.log is empty. Unable to fetch the summary of build 2:32:12 PM xbg-my-chatgpt-api: Triggering recycle (preview mode disabled). 2:32:12 PM xbg-my-chatgpt-api: Linux Consumption plan has a 1.5 GB memory limit on a remote build container. 2:32:12 PM xbg-my-chatgpt-api: To check our service limit, please visit https://docs.microsoft.com/en-us/azure/azure-functions/functions-scale#service-limits 2:32:12 PM xbg-my-chatgpt-api: Writing the artifacts to a squashfs file 2:32:13 PM xbg-my-chatgpt-api: Parallel mksquashfs: Using 1 processor 2:32:13 PM xbg-my-chatgpt-api: Creating 4.0 filesystem on /home/site/artifacts/functionappartifact.squashfs, block size 131072. 2:32:27 PM xbg-my-chatgpt-api: Deployment failed.

  • javascript
  • python
  • mongodb
  • azure
  • FastAPI
삼각형 댓글 3 좋아요 2 조회수 567

nest new nestjs_server 에러

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

nest new nestjs_server 를 cmd 또는 파워쉘에서 실행하면 아래와같이 나옵니다.. yarn 을 잘 선택했구요! 애초에 똑같이 하는데 에러가 너무 많이 나와서 nodejs 를 지금 영상에서 나오는 버전으로 검색해서 다운받고 진행했는데 여기서만 딱 에러가 나옵니다.. 구글링도 다 해봐도 안되네요 ㅠㅠ Failed to execute command: yarn install --silent × Installation in progress... ☕ 🙀 Packages installation failed! In case you don't see any errors above, consider manually running the failed command yarn install to see more details on why it errored out. Failed to execute command: git init Git repository has not been initialized

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
박찬민 댓글 2 좋아요 0 조회수 298

11.5 Channel 노래,앨범 section 강의중

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요 선생님 ㅎ channel쪽 진행하고 있었는데 앨범 밑에 PlayListCarousel이 크기가 이상하게 나오네여 ㅠㅠ 코드를 다똑같이 써도 안되서 질문드립니다! channel/[id]/page.tsx import HeaderBgChanger from "@/components/HeaderBgChanger"; import PagePadding from "@/components/PagePadding"; import PlayListCarousel from "@/components/PlayListCarousel"; import SongCardRowExpand from "@/components/SongCardRowExpand"; import DarkButton from "@/components/elements/DarkButton"; import WhiteButton from "@/components/elements/WhiteButton"; import { getChannelById } from "@/lib/dummyData"; import { getRandomElementFromArray } from "@/lib/utils"; import { permanentRedirect } from "next/navigation"; import React from "react"; import { FiMusic, FiShuffle } from "react-icons/fi"; interface ChannelPageProps { params: { id: string; }; } const page = async (props: ChannelPageProps) => { const channel = await getChannelById(Number(props.params.id)); if (!channel) permanentRedirect("/"); const imageSrc = getRandomElementFromArray(channel.songList)?.imageSrc; return ( <PagePadding> <HeaderBgChanger imageSrc={imageSrc} /> <div className="mt-[150px]"></div> <section> <div className=" text-[28px] font-bold">{channel.name}</div> <article className="mt-4 lg:hidden"> <div> <DarkButton className={"w-[230px] flex justify-center"} label={"구독중 99만"} /> </div> <div className="flex flex-row gap-4 mt-4"> <WhiteButton label={"셔플"} icon={<FiShuffle size={16}></FiShuffle>} /> <WhiteButton label={"뮤직 스테이션"} icon={<FiMusic size={16} />} /> </div> </article> <div className="hidden lg:flex flex-row items-center gap-4 text-[14px] mt-4"> <WhiteButton label={"셔플"} icon={<FiShuffle size={16}></FiShuffle>} /> <WhiteButton label={"뮤직 스테이션"} icon={<FiMusic size={16} />} /> <DarkButton className={"w-[230px] flex justify-center"} label={"구독중 99만"} /> </div> </section> <section className="mt-[80px]"> <div className=" text-[28px] font-bold">노래</div> <div className="mt-[20px]"> <ul className="flex flex-col gap-2"> {channel.songList.map((song, key) => { return <SongCardRowExpand song={song} key={key} />; })} </ul> </div> </section> <section className="mt-[80px]"> <div className=" text-[28px] font-bold">앨범</div> <PlayListCarousel playlistArray={channel.playlistArray} /> </section> <section className="mt-[80px]"></section> </PagePadding> ); }; export default page; PlayListCarousel.tsx import { Playlist } from "@/types"; import React from "react"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/ui/carousel"; import PlayListCard from "./PlayListCard"; interface PlayListCarouselProps { title?: string; subTitle?: string; Thumbnail?: React.ReactNode; playlistArray?: Playlist[]; } const PlayListCarousel: React.FC<PlayListCarouselProps> = ({ title, subTitle, Thumbnail, playlistArray, }) => { return ( <div className="w-full"> <Carousel> <div className="flex flex-row justify-between items-end my-2"> <article className="flex flex-row gap-3"> {Thumbnail} <div className="flex flex-col justify-center"> <div> {subTitle && ( <div className=" text-neutral-500">{subTitle}</div> )} </div> <div className="text-[34px] font-bold leading-[34px] "> {title} </div> </div> </article> <div className="relative left-[-45px]"> <div className="absolute bottom-[20px]"> <CarouselPrevious className="right-2" /> <CarouselNext className=" left-2" /> </div> </div> </div> <CarouselContent className="mt-4"> {playlistArray?.map((playlist, index) => { return ( <CarouselItem key={index} className="basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5" > <PlayListCard playlist={playlist} /> </CarouselItem> ); })} </CarouselContent> </Carousel> </div> ); }; export default PlayListCarousel;

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
장산 댓글 1 좋아요 0 조회수 187

createPortal 활용해서 modal 만들 때 활용한 MutationObserver 코드 관련 질문

해결됨

코어 프런트엔드 UI - Part 2

import { useEffect, useRef } from "react" const mutationObserverOption: MutationObserverInit = { childList: true, subtree: true } const ModalRoot = () => { const ref = useRef<HTMLDivElement>(null); useEffect(() => { let observer: MutationObserver if (ref.current) { observer = new MutationObserver(() => { const size = ref.current?.childNodes.length || 0 document.body.classList.toggle('no-scroll', size > 0) }) observer.observe(ref.current, mutationObserverOption) } return () => { observer.disconnect() } }, []) return (<div id="modalRoot" ref={ref}/>) } export default ModalRoot; 수업시간에 구현 되었던 코드가 어떤 순서로 동작하는지 콘솔로 확인해봤습니다. 제가 확인해 봤을 땐 처음 페이지가 렌더링 될 때 1. ModalRoot 컴포넌트가 실행 2. modalRoot div가 생성 3. useEffect가 실행 4. useEffect의 Clean Up 작동 까지는 예상대로 진행되었습니다. 하지만 이후에 이해가 안되는 부분이 있습니다. 질문 1) 이후 useEffect 가 다시 실행되는데, 의존성도 없는데 어떻게 다시 실행되는지 궁금합니다. 질문 2) 영상에서 모달 버튼을 누르면 useEffect 의 조건문에서 size 를 콘솔로 확인하셨는데, ModalRoot 컴포넌트가 재실행되지 않고 어떻게 size 를 확인할 수 있는지 궁금합니다.

  • react
  • typescript
  • dom
  • ui
  • vanilla-js
working.zima 댓글 3 좋아요 0 조회수 384

깃 액션 활용

해결됨

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 조회수 410

SLM을 이용한 사내 전용 AI

해결됨

Azure Native로 나만의 GPT 만들기

안녕하세요 저는 업무 상 필요에 의해 AI 활용 관련해서 이런저런 테스트를 해 보고 있는 중입니다. 개발자가 아니여서 직접적으로 개발을 수행하기에는 어려움이 있습니다. 현재 사내 가이드라인 문서들 (PDF)을 ChatGPT4o에 업로드하여 이해 시킨 후 개인 업무 진행 후 그 결과물들이 가이드라인을 얼마나 준수하는지에 대한 준수율 체크를 해 점수화 해 주는 사내 전용 AI를 도입해 보려고 강의를 듣고 있습니다만 어렵네요 ChatGPT에 pdf 파일을 올려 테스트를 해 보니 상당 수준의 검출 가능성이 있겠다는걸 확인 했습니다만 그 과정을 통해 ChatGPT가 저희 가이드라인을 학습해 다른데 활용이 될 수도 있다는 우려가 있습니다 그래서 덩치가 크고 무거운 LLM 말고 SLM을 이용하여 한정된 분야에만 전문화되고 사내 전용으로 보안도 확보한 상태에서 개발할 수 있는 방법에 대해 문의 드리고 싶은데요 개인 이메일로 연락 부탁드리겠습니다 tk.lee@lge.com 감사합니다

  • javascript
  • python
  • mongodb
  • azure
  • FastAPI
tk.lee 댓글 2 좋아요 1 조회수 744

gsap으로 흐르는 배너도 제작이 가능할까요?

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.01

어제 이어 질문드리네요..ㅎㅎ 찾아봤더니 잘 안나오기도 하고 머리썻는데 안되서 다시질문드려요 ㅠ 인터넷보면 물 흐르듯 무한으로 보여지는 배너들효과를 구현하려고하는데 A div실행 이후 B가 실행하고 이걸 무한으로 돌려야겠다! 싶었습니다. 제가 계산을 잘못한것인지 계속 상이하게 됩니다. ㅠ 목표 예시) framer 로 구현 위와 같은 효과를 GSAP로도 주고 싶었는데 가능할까요? 트라이 계쏙해보는데 안되네용 ㅠ 제 생각은 무한루프 돌리는 상태의 div를 감싼 부모를 css 키프레임줘서 빠르게 들어온 이후 무한으로 루프돌릴계획입니다! useGSAP( () => { const Perents = ref.current?.offsetHeight; if (Perents) { gsap.set(".boxes-clone", { y: `-=${Perents}` }); gsap.fromTo( ".boxes", { y: `-${Perents}` }, { duration: 3, ease: "none", y: `+=${Perents}`, repeat: -1, } ); gsap.fromTo( ".boxes-clone", { y: `-${Perents}` }, { duration: 3, ease: "none", y: `+=${Perents}`, repeat: -1, delay: 3, } ); } }, { scope: ".wrapper" } );

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
squirrel PARK 댓글 2 좋아요 1 조회수 507

guard에서 요청객체 불러오기

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

bearerTokenGuadr와 basicTokenGuard를 작성했는데, 토큰 추출을 못합니다. 에서 req 요청객체를 제대로 불러온 것인걸까요? 포스트맨에서 auth/token/refresh에서 authroization을 체크하거나 체크하지 않건 둘다 토큰이 없다고 나오는데.. 추출에 문제가 있어 보입니다. BasicTokenGuard는 잘 추출되서 로그인까지는 잘 되는데, BearerTokenGuard는 추출이 안되는지 에러메세지 '토큰이 없습니다.'가 나옵니다.

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
댓글 1 좋아요 0 조회수 194

Paginate에서 overrideFindOptions 문제

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

overrideFindOptions에서 where절을 작성하면 dto에 있는 where 조건들이 제대로 동작하지 않는 거 같아요 paginateComments(dto: PaginateCommentsDto, articleId: number) { return this.commonService.paginate( dto, this.commentsRepository, { relations: { author: true, }, select: { author: { id: true, devName: true }, }, where: { article: { id: articleId }, }, }, `articles/${articleId}/comments`, ); } paginate에서 where조건이 있으면 병합하는 방법으로 해결해보려고 했는데 원하는대로 동작하지 않는거 같습니다. 어떻게 해결하면 좋을까요??

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
hodoldol 댓글 2 좋아요 0 조회수 163

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 조회수 403

혹시 부드럽게 진입 이후 루프가 가능할까요?

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.01

안녕하세요! 초기 애니메이션을 진입할때 css나 gsap으로 keyfream 주고 빠르게 들어온 이후 감속하듯이 부드럽게 흐르도록 구현 할 수 있을까요..? css에 같은 클래스에 키프레임을 줬더니 css때문에 gsap이 충돌나는지 안되더라구요.ㅠ.

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
squirrel PARK 댓글 1 좋아요 2 조회수 230

localhost:8080 접속 불가

미해결

[React 1부] 만들고 비교하며 학습하는 React

안녕하세요 선생님 리액트 프로젝트를 본격적으로 하기 위해 npm i -> npm start로 localhost:8080 에 접속해야 하는데 자꾸 오류가 나오네요 제가 군대에서 수업 듣고 있어서 vscode는 설치를 못하고 대안으로 무료클라우딩 사이트 replit을 이용중입니다. 폴더구조 정확히 맞게 했고 100%그대로 따라 옮겼는데 왜 이런 오류가 나오는지 모르겠습니다. 어떻게 해결해야 될까요? 공부해야 하는데 여기에 막혀서 하루종일 시간 썼네요 ㅠ 답변주시면 감사하겠습니다!!

  • react
  • mvc
이재은 댓글 1 좋아요 1 조회수 315

인기 태그

인프런 TOP Writers

주간 인기글