172만명의 커뮤니티!! 함께 토론해봐요.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
제로초쌤 제가 우분투에서 Nodebird를 진행하고 있는데 더북에 써져있는 거처럼 리눅스(우분투)에서 설치하는 방법 그대로 설치하다가 Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (13) 소켓 에러가 계속 나서 해결하려고 인터넷에 찾아보면서 따라하고 있는데 해결이 안되서 혹시 윈도우로 mysql설치해서 진행해도 크게 차이가 없을까요?
미해결
Slack 클론 코딩[실시간 채팅 with React]
제로초님, 코드를 따라친 후에 로그아웃을 하고 다시 로그인 하면 이런 에러메세지가 뜹니다. 그런데 네트워크 탭을 보면 로그인이 정상적으로 된거 같아서 새로고침을 하면 에러 메세지가 사라지고 슬랙에서 로그인된 화면이 제대로 뜹니다. 근데 또 여기서 워크스페이스를 생성하려고 하면 콘솔에 axioserror메세지가 떠서 어떻게 해야될지 모르겠습니다.. Workspace/index.tsx import axios from "axios"; import React, { FC, useCallback, useState } from "react"; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; import { Navigate, Routes, Route } from "react-router-dom"; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceName, Workspaces, WorkspaceWrapper } from "@layouts/Workspace/style"; import gravatar from 'gravatar'; import loadable from '@loadable/component'; import Menu from "../../components/Menu"; import Modal from "../../components/Modal"; import { Link } from "react-router-dom"; import { IUser } from "@typings/db"; import { Button, Input, Label } from "@pages/SignUp/styles"; import useInput from "@hooks/useInput"; import {toast} from 'react-toastify'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); const Workspace: FC<React.PropsWithChildren<{}>> = ({children}) => { const [showUserMenu, setShowUserMenu] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); // revalidate = 서버로 요청 다시 보내서 데이터를 다시 가져옴 // mutate = 서버에 요청 안보내고 데이터를 수정 const {data: userData, error, mutate} = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, }); const onLogout = useCallback(() => { axios.post('/api/users/logout', null , { withCredentials: true, }) .then(() => { mutate(false, false); }) }, []); const onClickUserProfile = useCallback((e: any) => { e.stopPropagation(); setShowUserMenu((prev) => !prev); }, []) const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []) const onCreateWorkspace = useCallback((e: any) => { e.preventDefault(); // 띄어쓰기도 검사해줘야됨 if(!newWorkspace || !newWorkspace.trim()) return; if(!newUrl || !newUrl.trim()) return; axios.post('http://localhost:3095/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }) .then(() => { mutate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.dir(error); // 에러가 나면 사용자가 인지하게 해줌 toast.error(error.response?.data, { position: 'bottom-center' }) }) }, [newWorkspace, newUrl]) const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); }, []) if(!userData) { return <Navigate to="/login" /> } if(!userData) return null; return( <div> <Header> <RightMenu> <span onClick={onClickUserProfile}> <ProfileImg src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> {showUserMenu && <Menu style={{ right: 0, top: 38 }} show={showUserMenu} onCloseModal={onClickUserProfile}> <ProfileModal> <img src={gravatar.url(userData.nickname, { s: '36px', d: 'retro' })} alt={userData.nickname} /> <div> <span id="profile-name">{userData.nickname}</span> <span id="profile-active">Active</span> </div> </ProfileModal> <LogOutButton onClick={onLogout}>로그아웃</LogOutButton> </Menu>} </span> </RightMenu> </Header> <WorkspaceWrapper> <Workspaces> {userData?.Workspaces.map((ws) => { return ( <Link key={ws.id} to={`/workspace/${123}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> ); })} <AddButton onClick={onClickCreateWorkspace}>+</AddButton> </Workspaces> <Channels> <WorkspaceName>Sleact</WorkspaceName> <MenuScroll>menu scroll</MenuScroll> </Channels> <Chats> <Routes> <Route path="/channel" element={<Channel />} /> <Route path="/dm" element={<DirectMessage />} /> </Routes> </Chats> {/* Input이 들어있으면 별도의 컴포넌트로 빼는 것을 추천(input에 글자를 입력할 때마다 여기 있는 함수들이 다 리렌더링 되기 때문에 비효율적) */} </WorkspaceWrapper> <Modal show={showCreateWorkspaceModal} onCloseModal={onCloseModal}> <form onSubmit={onCreateWorkspace}> <Label id="workspace-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newWorkspace} onChange={onChangeNewWorkspace} /> </Label> <Label id="workspace-url-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> </div> ) } export default Workspace; Modal/index.tsx import React, { useCallback, FC } from "react"; import { CloseModalButton, CreateModal } from "./style"; interface Props { show: boolean; onCloseModal: () => void; children: React.ReactNode; } const Modal: FC<Props> = ({show, children, onCloseModal}) => { const stopPropagation = useCallback((e: any) => { e.stopPropagation() }, []); if(!show){ return null; } return( <CreateModal onClick={onCloseModal}> <div onClick={stopPropagation}> <CloseModalButton onClick={onCloseModal}>×</CloseModalButton> {children} </div> </CreateModal> ); }; export default Modal; swr2.0 버전, react v18, typescript v18 swr을 최신버전 사용해서 revalidate대신 mutate를 사용했는데 제가 잘못 사용한건지 모르겠습니다.
해결됨
워드프레스 제대로 개발하기 - 어드민 편
질문 : 현재 테마를 두개를 작성하여 코딩중인데 이럴경우 '미디어라이브러리'에 사진을 업로드할때 에러가 발생할 수 있나요? 안녕하세요. 현재 표지 정보 저장하기 까지 따라온 상태입니다. 코드 표지넣기 버튼을 누르면 미디어 창까지는 잘 뜨는데요. 사진을 업로드하면 오른쪽에 'An error occurred in the upload. Please try agin later.'라고 에러메세지가 뜹니다. 그렇다고 사진이 안올라간고 하니 디비를 보면 잘 올라가 있는 상태입니다. 중간에 코드 따라치기를 잘못한가 싶기도해서 확인해본 결과 연습용 두번째 테마에서는 미디어라이브러리에 업로드된 이미지들이 잘 보입니다. (현재 wp-content/themes안에 강의따라하기용 테마랑 실제 배운걸 토대로 커스터마이징중인 테마가 있습니다) 감사합니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
콘솔 결과와 error가 같이 출력됩니다!
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
안녕하세요. 2강 진행 중 상품목록 조회시 msw Response 결과에 대한 body 값이 ReadableStream 으로 넘어옵니다. 이 경우 body 의 data를 확인할 방법이 있을까요? 답변 부탁드립니다. 감사합니다.
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
강사님 안녕하세요 좋은강의 잘 수강중인 학생입니다. 강의중에는 클라이언트에 저장된 확장자 2개의 이미지를 사용해서 분기처리를 하셨는데요, 서버에서 받아오는 이미지파일을 분기처리 할려면(webp를 지원하지않는 브라우저를 위해) webp파일 이미지와 jpg(또는 png) 파일 이미지 총 2개 파일 이미지를 보내줘야 분기처리가 가능한가요? 아니면 서버에서 1개의 확장자 이미지를 보내주면 jpg -> webp 또는 webp->jpg로 바꾸어서 분기처리 하는방법은 없을까요?
해결됨
PHP 개발자의 최종 테크트리, 라라벨 강의
안녕하세요, 선생님! 오늘도 어김없이 에러가 나네요! url주소 창에 localhost/get/3 라고 입력을 했더니, 브라우저에서 이런 결과를 출력해주네요! 소스코드에는 강의에서 진행한 그대로 똑같이 구성되어있는데도 불구하고, 이런 결과가 출력이되니까 어디에서 잘못된 건지 감도 안 잡히네요 ㅜㅜ 아 그리고 하나 더 궁금한 점이 있습니다. api.php와 web.php이 차이점이 무엇이고 왜 둘을 구분해서 라우팅하는 건가요? -routes/web.php <?php use Illuminate\Support\Facades\Route; use Illuminate\Http\Request; use App\Http\Controllers\NewController; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { return view('welcome'); }); Route::get('/get/{$id}', function($id){ return view('routing', ['id' => $id]); }); -routes/api.php <?php use Illuminate\Http\Request; use Illuminate\Support\Facades\Route; /* |-------------------------------------------------------------------------- | API Routes |-------------------------------------------------------------------------- | | Here is where you can register API routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | is assigned the "api" middleware group. Enjoy building your API! | */ Route::middleware('auth:sanctum')->get('/user', function (Request $request) { return $request->user(); }); Route::post('post', function(Request $request){ $data = $request->input('name'); return view('routing',["id"=>$id,"data" => $data]); }) -resources/views/routing.blade.php {{$data}} {{$id}} <form method="POST" action = "/api/post"> @csrf; <input type="text" name = "name"> <input type= "submit" value = "test"> </form>
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 강사님 해당 상품을 클릭했을때 url은 바뀌지만 상품상세페이지로 화면은 바뀌지 않는 오류가 발생했습니다(새로고침하면 화면이 바뀌긴 합니다) 다른 수강생들의 비슷한 질문답변을 참고하여 <React.StrictMode>를 지워도보고 react-router-dom 버전도 5.2.0이고 Route path도 "/products/:id"라고 적었는데 여전히 오류가 해결되지 않습니다 https://github.com/kanghanju/grab-market-client/commit/01c0657f4f64398b47493c1b2c3b44836bf1a785# 여기는 Link태그 해당 수업코드 파일입니다!
미해결
파이썬 무료 강의 (활용편3) - 웹 스크래핑 (5시간)
안녕하세요 먼저 좋은 강의 해주시는 나도코딩님께 감사드립니다. 이전에 나름 정성들여 글을 작성했는데, 확인이 안돼서 다시 작성해봅니다. 제가 강의를 보고있는 2023년 1월 19일과 강의날인 2020년 8월과 네이버 항공권 인터페이스가 많이 상이하고, 셀레니움과 파이썬 버전이 달라 저의경우 아래와 같이 코드를 작성했습니다. 다른분들께 도움이 되었으면 좋겠습니다. 현재 저의 환경의 경우 python버전 3.10.7 버전이고 selenium또한 강의때 사용하신것 보다 더 높은 것으로 보입니다. 현재 제 경우와 강의내용과 상이한 부분은 아래와 같습니다. 네이버 항공권 진입시, "지금 바로 혜택 확인하기" 광고 팝업창 발생, 해당부분 get_attribute메소드를 사용해 title을 비교해, 팝업이 있다면 팝업을 삭제하는 XPATH를 확인해 해당 엘리먼트를 클릭하도록 구현 browser.find_element_by_class_name과 같이 find_element_by_~~ 메소드 사용불가 => 현재 제가 사용중인 셀레니움 버전이 상위 버전으로 보이는데, 이는 3 line과 같이 import By로 쉽게 수정 가능 find_elements_link_text 메소드 사용 불가 => 2020년대비 2023년 현재 네이버 항공권 웹페이지 인터페이스의 변화때문인지 "가는 날" 및 날짜 선택을 위해 해당 메소드 사용시 빈리스트만 반환 "가는 날"은 XPATH로 엘리먼트를 얻어와 클릭하도록 구현 원하는 날짜의 경우 class이름을 확인해 모든 날짜정보를 갖고와 원하는 날짜정보만 사용하도록 구현 (compute_date 함수 참고 부탁 드립니다.) 추가적으로, 이 경우에 1년치 달력정보를 모두 읽어와 속도가 매우 느린데 더 좋은 방법을 알고계신분은 공유 부탁드립니다. ( _ _ ) compute_date(dates, 30)[1].click() 코드를 이렇게 수정해 오는날을 2월 30일을 선택하려 했으나 3월 30일을 선택해, 코드 오류인줄 알고 디버깅해보니 2월달은 30일이 없었습니다...ㅎ 정상동작 중 입니다. 저와같이 초반에 고생하시는 분들께 조금이나마 도움이 되었으면 좋겠습니다. 감사합니다. import time from selenium import webdriver from selenium.webdriver.common.by import By URL = "https://flight.naver.com/" def compute_date(dates, target) -> list: print("compute entire date information from current month to limit") return [date for date in dates if date.text == str(target)] browser = webdriver.Chrome() # browser.maximize_window() browser.get(URL) time.sleep(1) # remove AD popup find = browser.find_elements(By.CLASS_NAME, "anchor") for f in find: if f.get_attribute("title") == "지금 바로 혜택 확인하기": browser.find_element(By.XPATH, '//*[@id="__next"]/div/div[1]/div[9]/div/div[2]/button[1]').click() print("remove pop up") break # push 가는 날 button also delay 1 sec is necessary, if don't use this, can not read date information. browser.find_element(By.XPATH, '//*[@id="__next"]/div/div[1]/div[4]/div/div/div[2]/div[2]/button[1]').click() time.sleep(1) # read date information and push 25 day dates = browser.find_elements(By.CLASS_NAME, "sc-evZas dDVwEk num".replace(" ", ".")) compute_date(dates, 25)[0].click() # read date information and push 30 day dates = browser.find_elements(By.CLASS_NAME, "sc-evZas dDVwEk num".replace(" ", ".")) compute_date(dates, 30)[0].click() while True: pass
미해결
프로젝트로 배우는 React.js
72번째 강의 초반부 편집오류 있습니다.
미해결
프로젝트로 배우는 React.js
강의에서는 toast가 비동기적으로 실행되는것을 해결하기 위해 useRef를 활용했는데 혹시 async나 promise로도 해결이 가능한건가요?
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
playground에서 api-docs가 강의에 있는 docs랑 다릅니다 같게 할 방법이 있을까요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
그런데 테이블을 선택해서 코드를 보려면 자꾸 workbench가 팅겨서 꺼집니다 ㅠㅠ 코드를 깃허브에 있는 class형 함수를 긁어서 사용해서 문제가 되는걸까요..?ㅠㅠ 아래는 오류창입니다..
해결됨
[React 1부] 만들고 비교하며 학습하는 React
안녕하세요. 강사님께서 강의에서 HistoryListView 클래스를 작성하실 때 KeywordListView를 상속 받아서 작성하셨는데요. 실무에서도 이와 같이 비슷한(동일한 수준의) 클래스 중 하나를 먼저 구현하고 이를 상속 받아 다른 클래스를 만드는 경우가 흔히 있나요? 저는 아래와 같이 공통의 기능을 갖고 있는 또 다른 클래스 (ex. ListView)를 만들고, 각 클래스들(ex. KeywordListView, HistoryListView)이 이 공통의 클래스를 상속받는 것이 좋을 것이라고 생각했었거든요. KeywordListView -> ListView -> View HistoryListView -> ListView -> View 강사님께서 사용하신 방법 대로 하면 기존의 코드를 최대한 활용할 수 있다는 장점은 있지만 서로 동일한 수준의 클래스가 서로 상속을 받게 되는 것 같아서요.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
강사님 모든 코드를 수정한 후 로그인하려고 하는데 아이디, 비밀번호 입력 후 누르면 로그인이 되지 않습니다. 콘솔창에 에러도 나타나지 않아서 어디가 틀렸는지 모르겠네요. 몇개파일의 코드 같이 올려드립니다. 아래는 로그인 안되는 화면캡처본입니다. LoginForm.js import React, { useCallback, useMemo } from "react"; import Link from "next/link"; import { Form, Input, Button } from "antd"; import styled from "styled-components"; import useInput from "../hooks/useInput"; import { useDispatch, useSelector } from "react-redux"; import { loginRequestAction } from "../reducers/user"; const FormWrapper = styled(Form)` padding: 15px; `; const LoginForm = () => { const dispatch = useDispatch(); const { isLoggingIn } = useSelector((state) => state.user); const [id, onChangeId] = useInput(""); const [password, onChangePassword] = useInput(""); const style = useMemo(() => ({ marginTop: 10 }), []); const onSubmitForm = useCallback(() => { console.log(id, password); dispatch(loginRequestAction({ id, password })); }, [id, password]); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <Input name="user-id" value={id} onChange={onChangeId} required></Input> </div> <div> <label htmlFor="user-password">비밀번호</label> <Input name="user-password" value={password} onChange={onChangePassword} required ></Input> </div> <div style={style}> <Button type="primary" htmlType="submit" loading={isLoggingIn}> 로그인 </Button> <Link href="/signup"> <a>회원가입</a> </Link> </div> </FormWrapper> ); }; export default LoginForm; reducers-user.js export const initailState = { isLoggingIn: false, // 로그인 시도중 - 로딩창을 띄우기위해 isLoggedIn: false, isLoggingOut: false, // 로그아웃 시도중 me: null, signUpDate: {}, loginData: {}, }; // 로그인 액션 create export const loginRequestAction = (data) => { return { type: "LOG_IN", data, }; }; export const logoutRequestAction = () => { return { type: "LOG_OUT", }; }; const reducer = (state = initailState, action) => { switch (action.type) { case "LOG_IN_REQUEST": console.log("reducers login"); return { ...state, isLoggingIn: true, }; case "LOG_IN_SUCCESS": return { ...state, isLoggingIn: false, isLoggedIn: true, me: { ...action.data, nickname: "가나다" }, }; case "LOG_IN_FAILURE": return { ...state, isLoggingIn: false, isLoggedIn: false, }; case "LOG_OUT_REQUEST": return { ...state, isLoggingOut: true, }; case "LOG_OUT_SUCCESS": return { ...state, isLoggingOut: false, isLoggedIn: false, me: null, }; case "LOG_OUT_FAILURE": return { ...state, isLoggingOut: false, }; default: return state; } }; export default reducer; sagas-user.js import { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; function loginAPI(data) { return axios.post("/api/login", data); // 서버에 요청 } function* login(action) { try { console.log("saga login"); yield delay(1000); // 비동기 요청 대신수행 // const result = yield call(loginAPI, action.data); yield put({ type: "LOG_IN_SUCCESS", data: action.data, }); } catch (err) { yield put({ type: "LOG_IN_FAILURE", data: err.response.data, }); } } function logoutAPI() { return axios.post("/api/logout"); // 서버에 요청 } function* logout() { try { yield delay(1000); // const result = yield call(logoutAPI); yield put({ type: "LOG_OUT_SUCCESS", }); } catch (err) { yield put({ type: "LOG_OUT_FAILURE", data: err.response.data, }); } } function* watchLogIn() { yield takeLatest("LOG_IN_REQUEST", login); } function* watchLogOut() { yield takeLatest("LOG_OUT_REQUEST", logout); } export default function* userSaga() { yield all([fork(watchLogIn), fork(watchLogOut)]); } configureStore.js import { applyMiddleware, createStore, compose } from "redux"; import createSagaMiddleware from "redux-saga"; import { createWrapper } from "next-redux-wrapper"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "../reducers"; import rootSaga from "../sagas/index"; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware]; const enhancer = process.env.NODE_ENV === "production" ? compose(applyMiddleware(...middlewares)) : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;
미해결
코딩테스트 [ ALL IN ONE ]
안녕하세요! Leetcode daily temperature 문제 해설을 보다 질문이 생겨서 남깁니다! while 문으로 stack을 돌면서 대소 비교를 하는데, 여기서의 시간복잡도가 O(n)이 될 걱정은 안해도 되나요? 어렴풋이 생각하기에, stack에 temperatures의 원소가 들어가기 때문에 n개의 원소가 들어갈 것이고, for문으로 길이가 n인 temperatures를 돌면 결과적으로 worst case로 O(n^2)이 될 수도 있지 않나 ... 라는 생각이 들었습니다. 시간복잡도 개념이 아직 부족해서 헷갈리는 것 같은데 제가 어떤 부분을 간과했을까요?
미해결
웹 게임을 만들며 배우는 React
안녕하세요, 제로초님. react 강의 잘 듣고 있습니다. ReactDOM.render(<LikeButton />, document.querySelector("#root")); 이 코드는 실행되고, ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton />); 이 코드가 안되길래 package.json 에서 react 버전 확인해보니 17이더군요! 구글링 해서 찾은 걸로 터미널에 npm install react@latest react-dom@latest 쳐서 최근버전 설치했는데 변경된 게 없어서 질문드립니다. 감사합니다.
미해결
프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
안녕하세요 선생님 강의자료 부탁드립니다 b_9108@naver.com 입니다 감사합니다
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 넷플릭스 실습을 하면서 iframe을 사용해 유튜브에서 동영상이 나오게 하는거 까지는 완료가 되었습니다. 그런데 재생버튼을 누르고 영상이 시작되면 그림처럼 흐릿하게 나오는데 왜 그런걸까요?
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
4분 21초 에 나오는 아래 코드가 이해가 안됩니다! const startEdit = (index:number) => () => setEditingIndex(index) 제가 이해한 부분은 startEdit은 index를 매개변수로 받아서 () => setEditingIndex(index) 함수를 반환하고 있다는 거로 알고 있는데.. 왜 그런지 이해가 잘 안갑니다.. 개인적인 생각! admin 수정 부분 때문에 props를 3개나 전달해주고 있는 상황인데 recoil로 전역 상태관리를 하면 되는 부분일까요? 만약에 recoil로 상태관리를 하게 되면 컴포넌트에서 boolean값을 비교하기 위해 필요한 idx를 어떻게 넘겨주는건지 궁금합니다
