묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결워드프레스(WordPress) 완전정복
워드프레스로 웹사이트를 만드는 경우애도 HTML, CSS 코드를 직접 작성해야 하나요? 프로젝트 1번을 거의 다 들었는데 대부분 작업이 CSS코딩과 HTML코딩 같아서요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
DTO와 인증 서비스 강의 질문있습니다.
1.DTO와 인증 서비스 13분 38초 화면이 [username user9@aaa.com ,password 1111] postman에서 회원가입하는 화면인건가요?2.DTO와 인증 서비스 17분 10초 postman 화면도 있는데 이거는 로그인 화면인건가요?3. 제가 포스트맨에서 username user10@aaa.com ,password 1111으로 넣고 send를 누르면 맨 위 사진과 같이 에러가 나옵니다.참고로 db 테이블에 username user9@aaa.com ,password 1111 내용이 있습니다.포스트맨{"timestamp": "2025-03-02T20:26:21.086+00:00","status": 404,"error": "Not Found","trace": "org.springframework.web.servlet.resource.NoResourceFoundException: No static resource api/member/login.\r\n\tat org.springframework.web.servlet.resource.ResourceHttpRequestHandler.handleRequest(ResourceHttpRequestHandler.java:586)\r\n\tat org.springframework.web.servlet.mvc.HttpRequestHandlerAdapter.handle(HttpRequestHandlerAdapter.java:52)\r\n\tat org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1089)\r\n\tat org.springframework.web.servlet.DispatcherServlet.doService spring boot 실행시 아래와 같이 나옵니다. Principal이 username이 user9@aaa.com로 안나옴.[Principal=anonymousUser, Credentials=[PROTECTED], Authenticated=true, Details=WebAuthenticationDetails [RemoteIpAddress=0:0:0:0:0:0:0:1, SessionId=null], Granted Authorities=[ROLE_ANONYMOUS]]코드 첨부합니다.https://drive.google.com/file/d/1VtPVj_uRjPC7fYG3gRCeuFKcs2s4wPZm/view?usp=drive_link
-
미해결[Unity] 함께 만들어가는 방치형 게임 개발
Item DB Firebase 연결
Axe, Mana, Dice 까지는 firebase에 추가가 되었는데, 이후에 추가로 아이템을 등록을 해보려고 Scriptable/Item 폴더 안에 Scriptable Object를 추가했더니 인게임에서 키값도 못찾고 DB에 당연히 등록도 안되네용.. 어떻게하면 좋을까요 ㅠ
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
params부분 에러
fetch 부분에서 다음과 같이 작성하였는데 params.id부분에서 id 부분에Property 'id' does not exist on type 'Promise<{ id: string | string[]; }>'.ts(2339)이러한 에러가 발생합니다. const result = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${params.id}` );
-
미해결Airflow 마스터 클래스
module 'requests' has no attribute 'post'
토근 발급하는 과정에서 해당 오류로 다음 진도를 못나가고 있습니다..ㅜㅜ이전 서울시 공공데이터 실습하는 과정에서 requests 정상 import 및 문제없이 작동하였는데, 이번 실습에선 module 'requests' has no attribute 'post' 오류가 발생하네요.- 오류를 해결하기 위해 requests.py 파일이 있는지 확인- requests 정상 import 확인- requests reinstall진행하였으나 문제 해결이 되지 않았습니다..혹시 놓친 부분이 있는지 도와주세요. 감사합니다!import requests client_id = '' redirect_url = 'https://example.com/oauth' authorize_code = '' token_url = 'https://kauth.kakao.com/oauth/token' data = { 'grant_type': 'authorization_code', 'client_id': client_id, 'redirect_url': redirect_url, 'code': authorize_code } response = requests.post(token_url, data=data) tokens = response.json() print(tokens) 추가로 아래 AI 답변 관련하여 확인 해보았습니다. 그럼에도 놓친 사항이 있을 수 있으니 함께 확인하여 답변해주시면 감사하겠습니다!
-
해결됨비전공자도 이해할 수 있는 Nginx 입문/실전
location = /50.x.html 블럭
안녕하세요! 좋은 강의 잘 보고 있습니다!! default.conf 파일에서 location = /50.x.html 블럭의 역할이 location / 블럭과 동일해서 필요없는거 같은데 존재하는 이유가 뭔가요??단지, 현재는 두개의 블럭의 root 값이 똑같아서 그런거고 나중에 달라질수 있기때문에 일단 블럭이 2개 만들어져있는 건가요 ??
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
캐싱 옵션이 적용되질않아요.
어떠한 옵션을 적용해도 콘솔과 같은데 뭐가 잘못되었을까요?새로고침이나, 로고를 눌러서 인덱스 파일에 가도 똑같은 로그만 나타납니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
suspense사용시 오류가 생겨요
"resource": "/c:/Porject/ReactNative/lottoApp/front/src/features/map/hooks/queries/useGetInfinitePosts.ts", "owner": "typescript", "code": "2322", "severity": 8, "message": "Type 'unique symbol | QueryFunction<ResponsePost[], readonly unknown[], number>' is not assignable to type 'QueryFunction<ResponsePost[], readonly unknown[], number> | undefined'.\n Type 'typeof skipToken' is not assignable to type 'QueryFunction<ResponsePost[], readonly unknown[], number>'.", "source": "ts", "startLineNumber": 22, "startColumn": 5, "endLineNumber": 22, "endColumn": 12, "relatedInformation": [ { "startLineNumber": 28, "startColumn": 5, "endLineNumber": 28, "endColumn": 12, "message": "The expected type comes from property 'queryFn' which is declared here on type 'UseSuspenseInfiniteQueryOptions<ResponsePost[], ResponseError, InfiniteData<ResponsePost[], number>, ResponsePost[], readonly unknown[], number>'", "resource": "/c:/Porject/ReactNative/lottoApp/front/node_modules/@tanstack/react-query/build/modern/types.d.ts" } ]}] 라는 오류인데 queryfn이랑 skiptoken이랑 겹친다는 식으로 이야길하는것같은데 영상에서는 딱히 오류가없어서요.. import {queryKeys} from '@/app/config'; import {getFavoritePost, ResponsePost} from '@/shared/api'; import {ResponseError} from '@/shared/types/common'; import { InfiniteData, QueryKey, UseInfiniteQueryOptions, useSuspenseInfiniteQuery, } from '@tanstack/react-query'; const useGetInfiniteFavoritePosts = ( queryOptions?: UseInfiniteQueryOptions< ResponsePost[], ResponseError, InfiniteData<ResponsePost[], number>, ResponsePost[], QueryKey, number >, ) => { return useSuspenseInfiniteQuery({ queryFn: ({pageParam}) => getFavoritePost(pageParam), queryKey: [queryKeys.POST, queryKeys.FAVORITE, queryKeys.GET_FAVORITE_POST], initialPageParam: 1, getNextPageParam: (lastPage, allPages) => { const lastPost = lastPage[lastPage.length - 1]; return lastPost ? allPages.length + 1 : undefined; }, // select: data => data.pages, ...queryOptions, }); }; export default useGetInfiniteFavoritePosts;
-
미해결[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
안드로이드 API 34 설치 방법 질문
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 강의 잘 듣고 있습니다 ㅎㅎ 다름이 아니라 https://www.inflearn.com/community/questions/1526527/android-api-34-%EC%84%A4%EC%B9%98%EC%97%AC%EB%B6%80 위 링크와 같은 문제인데 아마 제가 설치한 버전이 최신 버전이라서 이런 문제가 생긴 것 같은데 뭘 설치하면 될까요? 원격 말고 그냥 답변 주시면 감사하겠습니다! 추측해보건데 API Level 부분을 보면 될 것 같은데 그럼 영상에서 설명하는 안드로이드 14.0이 API 34로 추측됩니다. 저는 최신 버전을 설치하면 될까요 아니면 API 34인 안드로이드 14.0 버전을 설치할까요?저장
-
해결됨스프링부트로 직접 만들면서 배우는 대규모 시스템 설계 - 게시판
PathVariable과 RequestParam, Test Code에 관하여
안녕하세요 쿠케님 강의 잘 듣고 있습니다. 너무 좋아서 팀원들한테도 전파했을 정도입니다. 다들 구매예정이시라고 하네용 강의 듣는 도중 궁금점이 생겼는데 PathVariable과 RequestParam의 가장 큰 차이점은 단 하나의 유일한 자원의 식별자를 url 경로에서 표현하는가의 여부로 배웠습니다. 그래서 저는 articleId의 경우는 PatVariable로 남겨두었습니다. 이 두가지를 구분하는 쿠케님의 기준이 있으실까용?이 강의에서 테스트는 전부 JUnit이 아닌 다른 것들로 수행 중이신데요. 실제로 테스트 코드 작성하실때도 JUnit을 사용하지 않으시나요? 아니면 그냥 강의 진행 편의상 JUnit을 사용하지 않으신건가요? 감사합니다.
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
HelloController 부분 오류
[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]강의 내용이랑 똑같이 다 따라쳤고 확인도 해봤는데 머 때문에 오류 뜨는지 모르겠어요 ㅠㅠ
-
미해결대세는 쿠버네티스 (초급~중급편)
갑자기 다른 클러스터를 a,b를 만들어서 당황스러운데...
제가 뭔가를 놓친건지 아니면 당연히 해야할걸 못하는건지 모르겠네요...다른 질문글에선 그냥 VAGRANT 새로운 스크립트 만들어서 50 51 52 하셨던데 그리고 다시 vagrant up해서 사용하면 되는건지 뭔지 전혀 감이 안와서요....제가 아직 잘 못해서 수업을 들어도 감을 못잡는건가 싶네요 ㅠㅠ시크릿도 mount가 되어있을줄알았는데 none이라고 뜨고요 ㅠ
-
미해결실무 중심! FE 입문자를 위한 React
4.2 React 렌더링 과정 에서 왜 컴포넌트가 두 번씩 호출될까요?
/*FunctionalComponent.jsx파일*/ import {useEffect,useState} from 'react'; function FunctionalComponent() { console.log('Function Beginning'); const [value, setValue] = useState(0); useEffect(() => { console.log('Function useEffect[]'); return () => { console.log('Function useEffect return[]'); } },[]); useEffect(() => { console.log('Function useEffect[value]'); return () => { console.log('Function useEffect return[value]'); } },[value]); console.log('Function End'); return ( <div> <h1>!FunctionalComponent</h1> <h1>value: {value}</h1> <button onClick={() => { setValue((state) => state + 1) }} > Increase value </button> </div> ); } export default FunctionalComponent /*App.jsx파일*/ import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' import axios from 'axios'; import FunctionalComponent from './practice/FunctionalComponent' function App() { return ( <FunctionalComponent /> ) } export default App
-
해결됨스프링부트로 직접 만들면서 배우는 대규모 시스템 설계 - 게시판
좋아요 동시성 로직 관련 질문
안녕하세요 강사님, 좋은 강의 잘 듣고 있습니다. 바쁘실텐데도 불구하고 답변해주셔서 감사합니다. 질문은 크게 2가지 입니다.유니크 제약 조건 위반시 예외처리방법like() 로직에선 article_id와 user_id로 유니크 제약 조건을 걸어서 한 명의 사용자가 중복 생성하는 것을 막고 있습니다. 이 유니크 제약 조건을 위반하여 발생하는 에러는 @ControllerAdvice에서 @ExceptionHandler(DataIntegrityViolationException.class) 로 시작하는 핸들러를 통해서 처리하는 것이 일반적인가요? 2.unlike()에서 한 명의 사용자가 삭제 중복요청시 발생하는 동시성 문제 @Transactional public void unlikePessimisticLock2(Long articleId, Long userId) { articleLikeRepository.findByArticleIdAndUserId(articleId, userId) .ifPresent(articleLike -> { articleLikeRepository.delete(articleLike); ArticleLikeCount articleLikeCount = articleLikeCountRepository.findLockedByArticleId(articleId).orElseThrow(); articleLikeCount.decrease(); }); }한 명의 사용자가 "좋아요" 중복 생성 요청하는 것을 방어하는 로직이 있으니 "좋아요 해제" 중복 요청에 대한 고려에 대해서 생각해봤습니다. 이 로직에선 findLockedByArticleId 에서 베타락을 걸게 되어서 하나의 article에 대한 여러 사용자의 "좋아요 해제" 요청시의 동시성 문제를 방어하고 있습니다. 그런데 한 명의 사용자가 "좋아요 해제" 중복 요청 시에 ifPresent 구문을 통과하게 되어 articleLikeRepository.delete(articleLike);를 여러번 수행하게 됩니다. 여기서 delete는 멱등성이 보장되니 큰 문제 없이 넘어가겠지만 그 아래 count감소 로직은 해당 트랜잭션들이 베타락을 획득할 때마다 계속 수행되는 것이 아닌지 궁금합니다. 일단 ifPresent 구문 안으로만 들어오면 count감소는 무조건 일어나게 되니 문제가 생기는게 아닐까요? 그래서 ifPresent구문 전에 락을 걸기 위해 findByArticleIdAndUserId() 여기서 락획득이 이루어져야 하는건 아닌지 궁금합니다. 작성하다 보니 질문이 길어져서 죄송합니다.
-
미해결금융데이터 분석을 위한 판다스 활용법
영상에서 보이는 게 안보이는 문제
안녕하세요.동영상 강의대로 진행 중이였는데, nbextension칸, cluster칸이 안보이고요, 또, table of contents 같은 아이콘도 안뜹니다. 해결 방법이 있나요? 또, 확장 프로그램 설치할 때 jupyter contrib nbextension install --user 을 아나콘다 프롬프트에 입력을 했는데,ModuleNotFoundError: No module named 'notebook.nbextensions'이라고 뜨네요. 해결 방법 알려주시면 감사하겠습니다.
-
미해결김영한의 실전 자바 - 고급 1편, 멀티스레드와 동시성
try-catch-finally를 사용해서 finally { notify() } 를 하지 않는 이유?
예제 3번 코드를 보다 의문이 들어 질문드립니다.코드를 보면,@Override public synchronized void put(String data) { // 버퍼가 가득 찬 경우, 빌 때까지 주기적으로 체크 while (queue.size() == max) { log("[put] 큐가 가득 참, 생산자 대기"); try { wait(); log("[put] 생산자 깨어남"); } catch (InterruptedException e) { throw new RuntimeException(e); } } queue.offer(data); log("[put] 생산자 데이터 저장, notify() 호출"); notify(); // WAIT -> BLOCKED }에서 인터럽트 예외가 발생하면 밑의 notify() 코드가 호출이 되지 않습니다.이 문제 상황에서 한 스레드라도 notify()문을 호출하지 않게되면 영원히 대기 중인 스레드가 생겨서 정상적인 프로그램 종료가 일어나지 않을 것 같습니다. 그래서 제 생각은 notify() 메서드를 finally문으로 감싸줘야 한다고 생각하는데 이게 맞는지 궁금합니다.
-
해결됨[C++과 언리얼로 만드는 MMORPG 게임 개발 시리즈] Part5: UE5 & IOCP 서버 연동
워커스레드가 1개일 때 가장 빠를 수 있을까요?
루키스님 안녕하세요?C# 서버에서 넘어와서 CPP 서버 공부하고 있습니다. 스트레스 관련해서 이해가 안되는 부분이 있어 질문 드리게 되었습니다. 제가 스트레스 테스트를 한 방법은 recvCount, sendCount 변수에 ++하여 1초에 1번 출력하는 방식으로, '개략적으로' 카운트가 되는지 테스트하고 있습니다.C# 서버에선 C_Move패킷을 각 클라이언트가 0.25초마다 서버로 보내서 100명의 더미클라이언트로 치면 서버에서 400번 Recv, 40000 Send(브로드캐스트이므로) 정도로,300명 정도까지 Move 패킷을 처리할 수 있는 수준으로 부하테스트가 되었습니다. 근데 CPP IOCP 서버에서 워커 스레드는 컴퓨터 스레드 개수에 맞게 하는게 적당하다고 하셨고, 실제 배포하신 자료에도 워커스레드는 5개를 정해주셨습니다 (저는 핵사 코어 컴퓨터를 사용 중입니다) C#과 마찬가지로 더미 클라이언트.가 C_Move 패킷을 보내고 count 변수에 ++하면서 보고 있는데, 워커 스레드가 오히려 1개일 때 월등히 작업이 빠릅니다. 스레드 1개는 300명 내외까지 가능하지만, 2개 이상부터는 100명도 버거운 수준이었습니다. 룸이 하나인 상황이어서 컨텍스트 스위칭 때문에 오히려 워커 스레드 2개부터 느릴 수 있는걸까요? 고민해봤는데 명확한 답이 안나와 질문 드립니다.
-
미해결
블랜더 미러로 원만들 때 가운데 각이 짐.....
라운드 큐브를 생성> 점을 지워서 반원으로 만들기>어플라이 all transform, scale하기> 미러모디파이어> 섭디비모디파이어이 순서로 진행했는데요,,저 원 중간에 각이 왜 생기는 걸까요..????
-
미해결따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
강사님 혹시 vscode 어떤 테마 쓰시나요..?
강사님 테마가 너무 좋은거 같아서 그런데.. 찾아봐도 똑같은게 없네요 ㅠㅠ
-
해결됨[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드
A3 내비게이션이 슬라이드 이미지에 가려져 앞으로 오지 않습니다.
A3 뿐만 아니라 나머지도 앞으로 오지 않아서 질문합니다 ㅠㅠ(공지사항, 갤러리는 아직 만들지 않은 상태이며 여기 올려놓은 코드는 A3입니다...!주석 처리시킨 이상한 메모는 무시해주세요 ㅠㅠ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/stylesheet.css"> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> <title>A3</title> </head> <body> <div class="container"> <header> <div class="header-logo"> <a href="#"> <img src="img/headerlogo.png" alt="header-logo"> </a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#">강원천문대</a> <div class="sub-menu"> <a href="#">천문대소개</a> <a href="#">인사말</a> <a href="#">오시는길</a> </div> </li> <li> <a href="#">이용안내</a> <div class="sub-menu"> <a href="#">프로그램</a> <a href="#">관람시간표</a> <a href="#">이달의별자리</a> </div> </li> <li> <a href="#">천문대예약</a> <div class="sub-menu"> <a href="#">예약하기</a> <a href="#">예약확인</a> <a href="#">예약취소</a> <a href="#">정보서비스</a> </div> </li> <li> <a href="#">커뮤니티</a> <div class="sub-menu"> <a href="#">프로그램</a> <a href="#">공지사항</a> <a href="#">자유게시판</a> </div> </li> </ul> </div> </header> <div class="slide"> <div class="slide-items"> <a class="slide-item" href="#"> <img src="img/slide1.png" alt="slide1"> </a> <a class="slide-item" href="#"> <img src="img/slide2.png" alt="slide2"> </a> <a class="slide-item" href="#"> <img src="img/slide3.png" alt="slide3"> </a> </div> </div> <div class="items"> <div class="notice"></div> <div class="banner"> <a href="#"> <img src="img/banner.jpg" alt="banner"> </a> </div> <div class="direct"> <a href="#"> <img src="img/direct.png" alt="direct"> </a> </div> </div> <footer> <div class="footer-logo"> <a href="#"> <img src="img/footerLogo.png" alt="footer-logo"> </a> </div> <div class="footer-menu"> <div> <a href="#"> 하단메뉴1 </a> <a href="#"> 하단메뉴2 </a> <a href="#"> 하단메뉴3 </a> </div> <div> COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED </div> </div> </footer> </div> </body> </html>@charset "utf-8"; body{ margin: 0; font-size: 15px; background-color: #fff; color: #333333; } a{ text-decoration: none; color: #333333; } .container{ /* border: 1px solid red; */ width: 1200px; margin: auto; } header{ background-color: rgb(150, 167, 236); height: 100px; } header div{ /* border: 1px solid blue; */ height: 100px; } .header-logo{ width: 200px; float: left; } .navi{ width: 600px; float: right; } .slide{ width: 1200px; height: 300px; position: relative; overflow: hidden; } .slide-items{ position: relative; } .slide-item{ position: absolute; top: 0; left: 0; } .slide div{ /* border: 1px solid green; */ height: 300px; } .items{ overflow: hidden; } .items div{ /* border: 1px solid violet; */ box-sizing: border-box; float: left; height: 200px; } .notice{ width: 500px; } .banner{ width: 350px; } .direct{ width: 350px; } footer{ background-color: rgb(222, 222, 222); overflow: hidden; } footer>div{ /* border: 1px solid salmon; */ height: 100px; float: left; box-sizing: border-box; } /*여기서부터는 일부분만 선택해서 적용하는거라 반드시 꺽쇠를 써야함!*/ .footer-logo{ width: 200px; } .footer-menu{ width: 1000px; } .footer-menu div{ /* border: 1px solid blueviolet; */ height: 50px; } /*모듈 이외 부분*/ .header-logo, .footer-logo{ text-align: center; line-height: 130px; } .footer-menu{ text-align: center; padding-top: 15px; } .footer-menu>div a{ padding: 10px; } .banner a>img, .direct a>img{ width: 350px; height: 200px; } /*내비게이션*/ .menu{ list-style: none; /* 점(목록에 쓰이는거) 없애줌*/ padding: 0; /*왼쪽 패딩 제거*/ margin-top: 35px; } .menu li{ border: 1px solid black; float: left; width: 150px;/*25%로 해도 됨*/ box-sizing: border-box; text-align: center; } .menu li>a{ /*기초 틀을 잡았으면, 모양을 만들자!*/ border: 1px solid black; display: block; padding: 5px; } .menu li:hover>a{ /*주의사항: .menu li>a:hover가 아니라 .menu li:hover>a임. 우리느 지금 박스에 호버를 줄꺼지 텍스트에 호버 줄껀 아니잖아*/ background-color: black; color: #fff; transition: 0.5s; } .sub-menu{ border: 1px solid black; background-color: #fff; display: none; } .sub-menu a{ display: block; /*배치!!*/ padding: 5px; } .sub-menu a:hover{ background-color: black; color: #fff; transition: 0.5s; }$(document).ready(function(){ /*Navigation*/ $('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown(); }); $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp(); }); /*Slide*/ $('.slide-item:gt(0)').hide(); setInterval(function(){ $('.slide-item:first-child').fadeOut(500).next().fadeIn(500); $('.slide-item:first-child').appendTo('.slide-items'); }, 3000); });