173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
회원가입 페이지 에서 프로필 이미지를 한글이 포함된 이미지명로 업로드했을때 , nextjs의 서버 Formdata에서 한글 파일명이 깨지는 현상 이 있습니다. 해결방법이 있을까요?? Step1. 회원가입 페이지 Step2. 서버 에러 결과 회원가입 페이지 경로 : D:\z-com\src\app\(beforeLogin)\_lib\signup.ts 업로드시 한글 파일명 출력 확인을 위해 아래코드를 추가해봤습니다. formData.getAll("image").map((data, idx) => { console.log(data); }); 업로드 이미지명에 한글이 포함되었을때 출력 -- 한글파일명이 깨져서 출력되고 데이터베이스에 저장됩니다.
react next.js react-query next-auth msw
rlagywhd019
2024-07-31T13:32:39.672Z
댓글 3
좋아요 0
조회수 750
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
안녕하세요. 이 인강을 듣기 전에는 db에 데이터를 GET 하고 POST하기 위해서는 Rest API를 통해서 했었습니다. 하지만 이 강의에서는 supabase를 통해서 create,select 등을 이용해서 data를 다루던데 supabase를 통해서는 rest api를 통해서 data를 만들고, 가지고올수도 있나요? 만약 둘다 된다면 어떤 방식을 통해서 주로 data를 다루는게 좋을까요? 현업에서는 어떤 방식을 더 추구하나요? 현재 대학생이라 개인플젝을 할때 db가 필요해서 강의를 오늘부터 듣게되었는데 db를 어떻게 다뤄야할지 감이 안잡히네요. 아직 개념이 좀 잡히지 않아서 헷갈립니다. 추가적으로 저는 팀이나 , 특히 개인프로젝트를 하면서 사용자 정보(id,pw)나 여러 데이터들을 저장하고 싶어서 mongodb를 혼자서 공부하다가 어려워서 여러가지를 찾던 중 supabase(serverless)를 알게되어서 강의를 듣고있습니다. 하지만 그냥 mongodb를 공부해서 db를 다루는게 나은지 아니면 supabase를 공부해서 db를 저장하는게 나은지 잘 모르겠습니다. 긴 글 읽어주셔서 감사합니다..!
firebase next.js tailwind-css react-query supabase
EDDY
2024-07-31T10:34:29.175Z
댓글 1
좋아요 0
조회수 239
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다) - 이외의 문의등은 평생강의이므로 양해를 부탁드립니다 - 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다 - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강의 영상에서 알려주신 사이트인데, 자료에서는 서비스 종료로 유사 사이트 안내 되어 있었어요. 제가 궁금해서 구글에서 'properties for the flex container' 로 검색해서 이미지탭에서 발견하여서 링크 공유드립니다. https://codepen.io/osublake/pen/dMLQJr 항상 좋은 자료 제공해주시는 강사님 감사합니다~~
박수연
2024-07-31T08:02:05.262Z
댓글 1
좋아요 0
조회수 167
해결됨
Next + React Query로 SNS 서비스 만들기
제가 알기로는 require는 commonjs에서 쓰는걸로 알고 있는데 useEffect내부에서 쓰시는걸 보고 궁금점이 생겨 질문드립니다. require 대신에 dynamic import를 쓰는건 보았는데 require도 클라이언트에서 사용이 가능한가요?
react next.js react-query next-auth msw
geekgleeguru
2024-07-31T07:22:04.439Z
댓글 1
좋아요 1
조회수 243
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 선생님. useNavigate 질문이 있습니다. 새 일기쓰기 페이지에서 '취소하기'를 누르면 뒤로 돌아갈때 nav(-1)을 쓰셨는데 사실 nav(-1)도 할 수 있지만 nav('/')를 할 수도 있는데 성능상의 차이가 있을까요?? 반응 이라던지 좀 더 큰 프로젝트라면 어떤걸 쓰는게 안전하다던지 하는 차이가 있는지 궁금합니다. 감사합니다
woong
2024-07-31T06:15:51.688Z
댓글 2
좋아요 0
조회수 239
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
/app/api/revalidate/route.ts 파일 내 POST 함수가 async로 선언되어 있습니다. 본문에 await이 없는데 async로 선언되어야 하나요?
react typescript next.js next.js13
yjkim325
2024-07-31T06:11:05.293Z
댓글 1
좋아요 1
조회수 208
해결됨
Azure Native로 나만의 GPT 만들기
Azure Function의 메인 파일은 function_app.py 이어야 하나요?
javascript python mongodb azure FastAPI
삼각형
2024-07-31T02:48:36.642Z
댓글 1
좋아요 1
조회수 251
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
아래와 같은 타입에러가 발생했습니다. 데이터베이스와 todoDto모두 설정 및 정상적으로 가져온거 같은데요 마우스를 올려보고 에러내용도 확인해보면 타입은 다 같게 설정되어있는거 같습니다. 타입자체를 비교해서 대입 하려해도 에러가나오네요.. 플러그인을 통해서 시각화해서 좀 더 자세하게 머가 문제인지 비교해봐도 타입이 같습니다.. 혹시 뭐가 문제인지 알 수 있을까요?...
루키키키
2024-07-30T14:55:44.748Z
댓글 4
좋아요 0
조회수 321
미해결
Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
다름은 아니고 vue2.7 버젼을 사용하고 있습니다. 오늘 실무에서 업무를 진행하다. 한가지 의구심이 들어서 질문을 여쭈고자 합니다. 부모 에서 ref 반응형 데이터가 존재하는데 이 반응형 데이터를 바로 아래 자식으로 props를 넘겨주었고 이 넘긴 props를 watch를 사용해서 변화가 있을때 어떤 로직을 처리하겠다.로 구현을 했습니다. 구현과정에서 컴포넌트를 나눌 필요가 생겨서 자식안에 자식을 하나 더 만들고 최상위 부모로 부터 받은 props를 그 최하위 자식에게 전달 후 최하위 자식에서 watch를 통해 어떤 로직을 처리하겠다. 로 구현을 했을때 최하위 자식에서 watch가 정상적으로 props의 변화를 인지 하지 못하는 이슈가 있었습니다. 하지만 해당 props값을 렌더링 했을때는 최하위 자식에서도 정상적으로 변했습니다. 결국 최하위 자식에서 deep과 immediate 옵션을 설정해 해결했는데 왜 이런식으로 동작했는지 검색을해도 나오지 않아서 궁금해서 여쭙고자 합니다. 여기서 ref 데이터 타입은 object이고 초기값은 null 입니다. 추가적으로 최하위 자식은 항상 렌더링 되는것이 아닌 v-if v-else가 걸려있습니다.
wnwlghdqkqh
2024-07-30T14:25:28.138Z
댓글 1
좋아요 0
조회수 225
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql의 장점이 딱 원하는 데이터만 가져온다는 것은 이해가 되는데, REST API도 딱 원하는 DB 컬럼만 요청해서 가져오거나 할 수도 있지 않나요? 이게 어떠한 차이가 있나 궁금합니다. ㅎㅎ
react node.js seo graphql next.js restapi
건태
2024-07-30T11:59:13.376Z
댓글 2
좋아요 0
조회수 171
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
안녕하세요 로펀님 tanstackquery에서 최근에 isPending이 생겨서 어느 블로그에선가 봤는데 이제 isPending을 사용하면 된다고 했던 것 같은데 혹시 둘의 차이가 있을까요? 어느 시점에서는 이것을 사용해야 한다라는 가이드가 있을까요?
firebase next.js tailwind-css react-query supabase
___
2024-07-30T11:34:37.061Z
댓글 1
좋아요 0
조회수 1521
미해결
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
삼각형
2024-07-30T05:40:11.369Z
댓글 3
좋아요 2
조회수 567
미해결
[코드팩토리] [초급] 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
박찬민
2024-07-29T16:36:02.948Z
댓글 2
좋아요 0
조회수 298
해결됨
기초부터 배우는 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
장산
2024-07-29T16:04:12.713Z
댓글 1
좋아요 0
조회수 187
해결됨
Azure Native로 나만의 GPT 만들기
안녕하세요 저는 업무 상 필요에 의해 AI 활용 관련해서 이런저런 테스트를 해 보고 있는 중입니다. 개발자가 아니여서 직접적으로 개발을 수행하기에는 어려움이 있습니다. 현재 사내 가이드라인 문서들 (PDF)을 ChatGPT4o에 업로드하여 이해 시킨 후 개인 업무 진행 후 그 결과물들이 가이드라인을 얼마나 준수하는지에 대한 준수율 체크를 해 점수화 해 주는 사내 전용 AI를 도입해 보려고 강의를 듣고 있습니다만 어렵네요 ChatGPT에 pdf 파일을 올려 테스트를 해 보니 상당 수준의 검출 가능성이 있겠다는걸 확인 했습니다만 그 과정을 통해 ChatGPT가 저희 가이드라인을 학습해 다른데 활용이 될 수도 있다는 우려가 있습니다 그래서 덩치가 크고 무거운 LLM 말고 SLM을 이용하여 한정된 분야에만 전문화되고 사내 전용으로 보안도 확보한 상태에서 개발할 수 있는 방법에 대해 문의 드리고 싶은데요 개인 이메일로 연락 부탁드리겠습니다 tk.lee@lge.com 감사합니다
javascript python mongodb azure FastAPI
tk.lee
2024-07-29T07:31:34.399Z
댓글 2
좋아요 1
조회수 744
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
혹시 Next.js에서 Link태그와 useRouter를 제공하고 있는데 서로 차이점이 있을까요?? 이미지나 버튼이 있으면 거기에 onClick 달고 라우터 쓰고 있긴한데 이미지나 버튼에 링크를 감싸버리면 뭔가 이상할 것 같아서 어떤식으로 쓰면 좋을까요 <Link href="/" ><Image ... /></Link> <Image ... onClick={()=>router.push("/")} />
firebase next.js tailwind-css react-query supabase
___
2024-07-29T07:21:08.811Z
댓글 1
좋아요 0
조회수 245
해결됨
웹 애니메이션을 위한 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
2024-07-29T06:54:16.155Z
댓글 2
좋아요 1
조회수 506
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
bearerTokenGuadr와 basicTokenGuard를 작성했는데, 토큰 추출을 못합니다. 에서 req 요청객체를 제대로 불러온 것인걸까요? 포스트맨에서 auth/token/refresh에서 authroization을 체크하거나 체크하지 않건 둘다 토큰이 없다고 나오는데.. 추출에 문제가 있어 보입니다. BasicTokenGuard는 잘 추출되서 로그인까지는 잘 되는데, BearerTokenGuard는 추출이 안되는지 에러메세지 '토큰이 없습니다.'가 나옵니다.
javascript typescript rest-api nestjs backend
2024-07-29T06:53:41.114Z
댓글 1
좋아요 0
조회수 194
미해결
[코드팩토리] [초급] 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
2024-07-28T21:19:19.580Z
댓글 2
좋아요 0
조회수 163
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.01
안녕하세요! 초기 애니메이션을 진입할때 css나 gsap으로 keyfream 주고 빠르게 들어온 이후 감속하듯이 부드럽게 흐르도록 구현 할 수 있을까요..? css에 같은 클래스에 키프레임을 줬더니 css때문에 gsap이 충돌나는지 안되더라구요.ㅠ.
HTML/CSS javascript 인터랙티브-웹 gsap
squirrel PARK
2024-07-28T14:17:37.719Z
댓글 1
좋아요 2
조회수 230
