CSS 적용이 안되는 문제
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
안녕하세요! Portfolio 제작 강의를 따라하던 중, 지속적으로 CSS가 적용되지 않는 문제가 발생하여 문의드립니다. 화면 속 글자가 움직이는 걸로 보아 JS는 연동이 된 것 같은데 CSS가 문제가 있는 것 같아요. agent가 계속 해결을 못해서 문의 남깁니다.
- react
- 웹앱
- next.js
- cursor
- 인공지능(ai)
172만명의 커뮤니티!! 함께 토론해봐요.
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
안녕하세요! Portfolio 제작 강의를 따라하던 중, 지속적으로 CSS가 적용되지 않는 문제가 발생하여 문의드립니다. 화면 속 글자가 움직이는 걸로 보아 JS는 연동이 된 것 같은데 CSS가 문제가 있는 것 같아요. agent가 계속 해결을 못해서 문의 남깁니다.
해결됨
옆집 개발자와 같이 진짜 이해하며 만들어보는 첫 Spring Boot 프로젝트
안녕하세요, 수업자료 pdf는 어디에 있나요?
해결됨
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요. 지금까지 알려주신 내용에서 Notion 통해 글을 추가/삭제했을 때, 그에 대한 반영이 이루어지기 위해 unstable_cache 적용 시 revalidate 옵션(단위: s(초))을 줘야 하는 것을 확인했습니다. (getPublishedPosts 구현부분에서 언급되지 않은부분이라 강의내용과 공식문서 토대로 동작 확인했습니다.) Notion이 아닌 실제 페이지에서 글쓰기를 했을 때는 revalidateTag 함수를 호출하여 캐시를 무효화시켰었습니다. 문제는 목록 가져올때도 매번 revalidateTag 함수를 사용하게 된다면 캐시 사용하는게 무의미해질거라 생각합니다. 즉시 반영을 위해서는 Webhook 연동이 필요해보이나, 생각보다 구현 난이도가 복잡해서 revalidate를 적절하게 주는게 좋을거라 생각했습니다. 그렇다면 효율적인 revalidate 값은 어느정도로 지정하는게 좋을까요?? TanStack Query ClientProvider에서 지정한 것처럼 1분 정도가 적절하려나요?? 그리고 실제 구현 이루어지는 프로그램(ex. 쇼핑몰)에 따라 기준이 달라질 것 같은데요. 이에 대한 강사님 의견 듣고싶습니다.
미해결
김영한의 실전 자바 - 고급 1편, 멀티스레드와 동시성
1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 제가 멀티스레드와 동시성 관련해서 제대로 깊게 알아야할거같아서 다시복습으로 듣고있는데 예전에 질문했던 내용과 동일한거같아서 다시 질문드려요 ㅠ 그전에 처음 들어서 헷갈린부분이있었는데 다시들으면서도 설명한 부분이 맞나 싶어서요. 그전에 질문할때도 강의내용이 맞는지에 대한 질문이라 조심스러운부분이고 제가 잘못안다고 생각했는데 짚고넘어가면 좋을거같아서 다시 질문드립니다! 이전 질문 링크: https://inf.run/t3Bbm 71. 스레드의 대기 강의 핵심 질문 : 부분(13:30)강의에서 ReentrantLock 락 획득 실패시 대기큐에 WAITING상태라고 설명했는데 BLOCKED 상태가 가맞는지 검토필요. 이부분에 대한 검토가 필요할거같고 제가 잘못알고있다면 참고해야할 링크를 주시면 감사하겠습니다. 아니라면 저처럼 이해하는데 오해의 소지가있는부분이 발생할것같습니다. 질문내용 : 부분(13:30)에서 대기1 락을 획득하기위한 대기큐에 대해서 설명해주셨고 lock()호출시에 이미 다른 스레드가 락을 획득시에는 WAITING상태로 대기하고 synchronized인 경우에만BLOCKED인거고 ReentrantLock은 WAITING 상태로 락획득을 대기큐에서 대기한다 라고 설명해주셧는데 이부분이 락이아닌 큐가 꽉차거나 완전히 비어있을때(특정 조건)는 RUNNABLE에서 await()사용해서 WAITING상태로 만들고 이걸 스레드대기공간(집합)에 넣고 추후 명시적으로 깨울수있게하는데, 락획득 실패시에는 BLOCKED상태로 락대기집합에 있는거고, 얻고나서 RUNNABLE상태에서 특정조건에 부합되지않을때(큐가 꽉차거나, 없을때) await를 써서 다시 WAITING상태로 스레드 대기집합에 넣는게 맞는거같아서 검토부탁드립니다.! 그래서 이전강의 notify설명(synchronized 부분이긴하지만)에서도 WAIT -> BLOCKED 설명해주실때 WAIT이던애를 깨우면 바로 RUNNABLE이 되는게아니라 BLOCKED되는 설명부분이랑 ReentrantLock 역시 같은 원리가 맞는거같은데 이부분 다시 검토해주실수있나해서요ㅜ ReentrantLock 이라고해서 lock얻는걸 실패해도 WAITING이라는건 아닌거같아 검토해주시면 감사하겠습니다..! 그리고 (17:40) synchronized의 경우 blocked일때는 interrupt로 깨우지못한다고했고(이부분설명은 맞는데) reentrantlock은 lockInterruptibly() 를 사용하면 가능하다고 했는데 이게 WAITING상태여서 가능하다기보단 lockInterruptibly이 BLOCKED상태인 스레드를 InterruptedException가 발생해서 blocked상태에서 빠져나오는게하는 기능인거 같은데 이부분도.. reentrantlock역시 lock()만 사용으로는 못깨우고 이게 WAITING인거랑 좀 별게인거같아서 검토해주실수있을까해서요! 아래 참고 링크를 걸긴했는데 강의들 들으면서 사이클을 생각하다가 락을 획득할려다가 실패시 WAITING으로 대기한다라는게 원리상 아닐거같아서 찾아본게 oracle에서는 명시적으로 나타내진않았고 chat gpt에게 물어보면 제가 계속 waiting이 맞지않냐 blocked은 아니지않냐 공식문서 있냐 물어보면 명시적이진 않지만 유추할수있다 라고도 하고 그래서 결국 찾은 링크가 아래인데 공식은 아니고 블로그 내용이긴해서,, 한번더 영한님이 체크해주실수있을까해서요 아래 chat gpt 답변과 블로그 링크에서 해당 내용부분 스샷도 일부 남길게요! https://blog.ycrash.io/java-suspended-thread-states-blocked-waiting-timed_waiting/?utm_source=chatgpt.com ------ 질문을 남기니 그때처럼 인프런ai가 답변했는데 저 내용이 맞는거같아서요!
미해결
죽음의 Spring Batch: 새벽 3시의 처절한 공포는 이제 끝이다.
kill9형 오매불망 테스트만 기다리고있었는데 업로드 되서 너무 좋다. 근데 외부 API 호출이 Step 안에 있는 경우 어떻게 테스트하면 좋을지 알려 줄 수 있을까? 호출이 가능한 상황과 호출이 불가능한 상황 2가지 경우에 대해서 설명부탁해
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] orderService.findOrders(orderSearch) 가 작동하지 않습니다. 오류를 고쳐보다 join에 무언가 문제가 있다는 걸 알아냈습니다. em.createQuery("select o from Order o", Order.class).getResultList()는 정상적으로 작동하나 em.createQuery("select o from Order o join o.member m", Order.class).getResultList() 는 반환 값이 없습니다. 조인을 하게 되면 문제가 발생하는데 어떻게 해결해야 할까요.
미해결
죽음의 Spring Batch: 새벽 3시의 처절한 공포는 이제 끝이다.
6월 8일부터 기다리고 있어 형 얼른 마지막 섹션을 줘..현기증..나..
미해결
비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)
firebase 프로젝트 생성하고 설정하고 있는데 Authentication > 로그인방법 설정중에 어느 방법을 선택해도 아래 이미지와 같이 업데이트 오류라는 문구가 뜨고 저장이 안됩니다. 데이터베이스 만들기 과정에서도 '위치'란에 아무 select박스가 안뜹니다. 프로젝트 생성은 영상과 동일하게 하였는데 프로젝트가 제대로 생성이 안된건지 문제가 뭔지 모르겠습니다.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. import axios from "../api/axios"; import React, { useEffect, useState } from 'react' import requests from '../api/requests'; import "./Banner.css" import styled from "styled-components"; export default function Banner() { const [movie, setMovie] = useState([]); const [isClicked, setIsClicked] = useState(false); useEffect(() => { fetchData(); }, []); const fetchData = async() => { //현재 상영중인 영화 정보를 가져오기 (여러 영화) const request = await axios.get(requests.fetchNowPlaying); //여러 영화 중 영화 하나의 ID를 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; //특정 영화의 더 상세한 정보를 가져오기 (비디오 정보도 포함) const {data: movieDetail} = await axios.get(`movie/${movieId}`, { params: {append_to_response: "videos"}, }); setMovie(movieDetail); } const truncate = (str, n) => { return str?.length > n ? str.substr(0, n - 1) + "..." : str; } console.log('movie', movie); if(!isClicked) { return ( <header className="banner" style={{ backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie.backdrop_path}")`, backgroundPosition: "top center", backgroundSize: "cover", }}> <div className="banner__contents"> <h1 className="banner__title"> {movie.title || movie.name || movie.original_name} </h1> <div className="banner__buttons"> <button className="banner__button play" onClick={() => setIsClicked(true)} > Play</button> <button className="banner__button info">More Information</button> </div> <h1 className="banner_description"> {truncate(movie.overview, 100)} </h1> </div> <div className="banner--fadeBottom"></div> </header> ); } else{ return ( <Container> <HomeContainer> <Iframe width="640" height="360" src={`https://www.youtube.com/embed/${movie.videos.results[0].key}?controls=0&autoplay=1&loop=1&mute=1&playlist=${movie.videos.results[0].key}`} title="YouTube video player" allow="autoplay; fullscreen" ></Iframe> </HomeContainer> </Container> ); } } const Iframe = styled.iframe` width: 100%; height: 100%; opacity: 0.65; border: none; &::after { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }` const Container = styled.div` display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100vh; ` const HomeContainer = styled.div` width: 100vw; height: 100vh;`
해결됨
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 궁금증이 생겨서 질문을 드립니다. home.html을 만들고 나서 localHost:8080을 호출 할때, 크롬에서 index.html 페이지가 계속 떠서 코드에 문제가 없는지 확인해 보았습니다. 그래서 pdf파일에 있는 코드들도 복사 붙여놓기 해보고, 빠진것들이 없나 확인도 해보았지만 문제를 해결할수 없어서, 질문들을 확인해보니 캐시에 대한 답변이 있어서 다른 인터넷으로(edge) localHost:8080 을 치니 home이 잘 표시되더라고요… 그리고 나서 크롬 설정에 들어가서 캐시를 지우니까 홈 화면이 나오는 것을 확인할 수 있었는데요.(그전까지는 계속 index.html 뜨더라고요) 개발을 하다 보면 이런 것이 생각 안날수도 있을것같은데(캐시 문제 보다 내 코드가 문제 있겠지라는 생각이요) 이것에 대안 대처법 은 없나요?(계속 저가 일일히 캐시를 삭제 해야하 는건지? - 귀찮은 생각이 들더라고요) 답변 부탁 드립니다. 수정1 읽어보니 글이 이상해서 수정
해결됨
한 입 크기로 잘라먹는 Next.js
이전의 사전 렌더링에서 이런식으로 동작한다고 이해하고 초기접속시 JS 번들러에 남은 컴포넌트를 담아서 준다고 이해했는데 여기서는 페이지 이동 요청시 JS 번들러가 오는데 헷갈립니다.
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
안녕하세요. jpql을 다양하게 짜면서 나가는 sql이 어떻게 되는 지 학습하는 과정에서 질문이 생겨 글 남기게 됐습니다. List<Member> resultList = em.createQuery("select m from Team t join t.members m", Member.class) .getResultList(); for (Member member : resultList) { System.out.println("member.getTeam() = " + member.getTeam().getClass()); } 위와 같이 jpql을 짜면 fetch join이 아니라 일반 join임에도 불구하고 조회한 member들에 대해서 member.getTeam().getName()을 해도 추가 쿼리가 나가지 않습니다. 위의 코드처럼 member.getTeam().getClass()를 통해 확인해보니 아래처럼 결과가 나와 member의 team이 프록시객체가 아니라 실제객체라는 것을 확인할 수 있었습니다. Hibernate: /* select m from Team t join t.members m */ select m1_0.id, m1_0.age, t1_0.id, t1_0.name, m1_0.username from Team t1_0 join Member m1_0 on t1_0.id=m1_0.TEAM_ID member.getTeam() = class jpql.Team member.getTeam() = class jpql.Team member.getTeam() = class jpql.Team fetchType을 분명히 lazy로 했음에도 불구하고 위의 결과처럼 member만을 조회했는데도 불구하고 team까지 조회하는 sql이 나가는 이유가 무엇인가요?
미해결
스프링 기반 REST API 개발
WebSecurityConfigurationAdapter 상속 받아서 작업할려고 했으나 2.1.O 릴리즈 버전에서도 현재는 deprecated 된 상태인데 혹시 그 이후 어떻게 코드를 변경해야하는지 알수 있을까요
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
값 타입과 이전에 강의를 들었던 상속과 굉장히 유사하다는 느낌이 드는데, 어떤 경우에 쓰는 것이 적절한지 조금 더 설명해주실 수 있나요?
해결됨
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요, 강의를 듣다가 pdf를 보던 중 "참고" 라고 적힌 부분에 ' | ' 이 부분이 글 씨를 침범 하는 사태가 있습니다. 이 강의 다른 pdf 파일도 확인 해보니까 어떤 것은 괜찮고 어떤 것은 사진처럼 이렇게 되어있습니다. pdf파일을 보는 사람이 있다면 불편할 것 같네요. 추가1 "회원 서비스 테스트" 강의 에서 영상에 회원 가입 테스트 에서는 Assertions.assetThat(findMember.getName()).isEqualTo(member.getName()); 이렇게 작성 되어 있는데, 오늘(25.6.12)pdf를 보니 pdf파일 코드 에는 assertEquals(member.getName(), findMember.getName()); 이렇게 되어 있더라고요. 이렇게 하신 이유가 무엇인가요?
해결됨
한 입 크기로 잘라먹는 Next.js
2.8) 페이지별 레이아웃 설정하기 안녕하세요 한입 nextjs 강의 잘 보고 있는데요! 하나 궁금한 게 생겨서 질문 남겨요! 20분쯤에 나오는 onKeyDown 으로 키보드 이벤트를 감지하여 처리하는 이유가 있을까요? 해당 부분만 form 으로 감싸면 자동으로 enter 클릭시 감지해서 요청을 보내게 되는데 onKeyDown으로 함수를 빼서 input 이벤트를 핸들링 하는 이유는 무엇인가요! submit 직전 다른 데이터를 핸들링 할 때 form은 바로 submit이 일어나기 때문에 그런 부분에 있어서 확장성? 을 위한건가용?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
강의대로 따라갔는데 강의처럼 렌더링이 되고 있지 않습니다 ㅠㅠ 어디가 문제일까요 chatgpt는 서버가 없다 뭐 이렇다는데 ㅠㅠ 출력 화면 Nav.js import React, { useEffect, useState } from 'react' import"./Nav.css" export default function Nav() { const [show, setShow] = useState(false); useEffect(() => { window.addEventListener("scroll", ()=> { console.log('window.scrollY', window.scrollY); if(window.scrollY > 50) { setShow(true); } else { setShow(false); } }) return () => { window.removeEventListener("scroll", ()=> {}); }; }, []); return ( <nav className={`nav ${show && "nav__black"}`}> <img alt = 'Netflix logo' src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/960px-Netflix_2015_logo.svg.png" decoding="async" width="799" height="216" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1198px-Netflix_2015_logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1597px-Netflix_2015_logo.svg.png" className='nav__logo' onClick={() => window.location.reload()} /> <img alt = "User logged" src = "https://occ-0-3077-988.1.nflxso.net/dnm/api/v6/vN7bi_My87NPKvsBoib006Llxzg/AAAABTZ2zlLdBVC05fsd2YQAR43J6vB1NAUBOOrxt7oaFATxMhtdzlNZ846H3D8TZzooe2-FT853YVYs8p001KVFYopWi4D4NXM.png?r=229" className="nav__avatar" /> </nav> ); } Nav.css .nav{ position: fixed; top: 0; width: 100%; height: 30px; z-index: 1; padding: 20px; display: flex; justify-content: space-between; align-items: center; transition-timing-function: ease-in; transition: all 0.5s; } .nav__black { background-color: #111; } .nav__logo{ position: fixed; left: 40px; width: 80px; object-fit: contain; } .nav__avatar { position: fixed; right: 40px; width: 30px; object-fit: contain; } Banner.js import axios from "../api/axios"; import React, { useEffect, useState } from 'react' import requests from '../api/requests'; import "./Banner.css" export default function Banner() { const [movie, setMovie] = useState([]); useEffect(() => { fetchData(); }, []); const fetchData = async() => { //현재 상영중인 영화 정보를 가져오기 (여러 영화) const request = await axios.get(requests.fetchNowPlaying); //여러 영화 중 영화 하나의 ID를 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; //특정 영화의 더 상세한 정보를 가져오기 (비디오 정보도 포함) const {data: movieDetail} = await axios.get(`movie/${movieId}`, { params: {append_to_reponse: "videos"} }); setMovie(movieDetail); } const truncate = (str, n) => { return str?. length > n ? str.substr(0, n - 1) + "..." : str; } return ( <header className="banner" style={{ backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie.backdrop_path}")`, backgroundPosition: "top center", backgroundSize: "cover" }}> <div className="banner__contents"> <h1 className="banner__title"> {movie.title || movie.name || movie.original_name} </h1> <div className="banner__buttons"> <button className="banner__button play">Play</button> <button className="banner__button info">More Information</button> </div> <h1 className="banner_description"> {truncate(movie.overview, 100)} </h1> </div> <div className="banner--fadeBottom"></div> </header> ) } Banner.css .banner{ color: white; object-fit: contain; height: 448px; } @media (min-width : 1500px) { .banner{ position: relative; height: 600px; } .banner--fadeBottom{ position: absolute; bottom: 0; width: 100%; height: 40rem; } } @media (max-width : 768px) { .banner__contents{ width: min-content !important; padding-left: 2.3rem; margin-left: 0px !important; } .banner--description{ font-size: 0.8rem !important; width: auto !important; } .info{ text-align: start; padding-right: 1.2rem; } .space{ margin-left: 6px; } } axios.js import axios from "axios"; const instance = axios.create({ baseURL: "https://api.themoviedb.org", params: { api_key: "eea00451962aefe6185011d467944242", language: "ko-KR", }, }); export default instance; requests.js const requests = { fetchNowPlaying: "movie/now_playing", fetchNetFlixOriginals: "/discover/tv?with_networks=213", fetchTrending: "/trending/all/week", fetchTopRated: "/movie/top_rated", fetchActionMovies: "/discover/movie?with_genres=28", fetchComedyMovies: "/discover/movie?with_genres=35", fetchHorrorMovies: "/discover/movie?with_genres=27", fetchRomanceMovies: "/discover/movie?with_genres=10749", fetchDocumentaries: "/discover/movie?with_genres=99", } export default requests;
미해결
김영한의 실전 자바 - 중급 1편
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 안녕하세요, 영한님, 수업 너무 잘 듣고 있습니다. 수업을 듣던 도중에 아래 내용이 잘 못된 것을 알게 되었는데요. System.currentTimeMillis() 은 1970년대 이후로 경과된 시간을 나타내지만, System.nanoTime() 은 JVM이 시작된 시간으로부터 경과된 시간을 나타냅니다. 즉, System.nanoTime() 은 현재 시간을 나노초로 변하지 않습니다. 이 부분 확인 부탁드려도 될까요? 감사드립니다.
해결됨
6주 완성! 백엔드 이력서 차별화 전략 4가지 - 똑같은 이력서 속에서 돋보이는 법
첫번째로딩:5 두번째로딩:5 이 맞는 거 같아요 5주차 15) 대표적인 문제 사례 1, 2 해결 방법 에 있습니다
미해결
죽음의 Spring Batch: 새벽 3시의 처절한 공포는 이제 끝이다.
무지성 강의 시청하다보면, 그냥 음음 하다가 끝나는 경우도 종종 있는데, 이건 읽으면서 무조건 쳐보니까 좋네 ㅇㅇ; notebooklm 에 넣어넣고 쓰고싶음