173만명의 커뮤니티!! 함께 토론해봐요.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
코드로 배우는 React with 스프링부트 개정판3 영는 React with 스프링부트 개정판3 영풍문고 IT 코너에 메인으로 전시되어 있네요. 최근 개정판 맞죠? 너무 반가워서 ^^ 응원 하러 왔어요 ^^ 스프링 mvc의 기초를 다져준 이 강의에 꽤나 인상이 깊었나 봐요 ^^ 이어서 Reactor, webflux 강의도 기대해 봅니다 ^^)*
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
영상 촬영 시기와 현재 크롬 화면이 달라서 질문드립니다. 개발자 모드가 없어서 그런데 등록을 마쳐야 적용 가능할까요?
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
// node tree에 설정(부모-자식 관계 설정) bookmarkItem.appendChild(bookmarkInfo); bookmarkItem.appendChild(bookmarkDelBtn); bookmarkInfo.appendChild(bookmarkUrl); bookmarkUrl.appendChild(urlIcon); bookmarkUrl.appendChild(nameElement); urlIcon.append(urlIconImg); bookmarkItemList.appendChild(bookmarkItem); 섹션 7의 6강 수강중에 해당 코드에 의문이 생겨서 질문 드립니다. append와 appendchild 2가지 메소드를 활용하셨는데 두 가지 차이가 검색해 봤을 땐 append는 노드뿐만 아니라 텍스트도 추가 가능하다고해서 appendchild로 바꿔봤더니 오류가 발생했습니다. 두가지 차이가 무엇인지 알 수 있을까요? 그리고 메소드 호출시 괄호가 있는 것과 없는 것의 차이가 궁금합니다. addEbentListener같은 곳에 사용되는 콜백함수에는 괄호를 안 붙여도 되는 건지 궁금합니다. // 1번 document.getElementById("cancel-btn").addEventListener("click", newBookmarkToggle); // 2번 document.getElementById("cancel-btn").addEventListener("click", newBookmarkToggle());
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
강사님 안녕하세요! 최적화 강의 1,2 잘 듣고 있습니다 :) 3-4) 이미지 사이즈 최적화 강의에서 강의에서 설명하신 방식대로 진행했는데, 제 경우는 다른 결과가 나와서 질문 드립니다. 강사님이 작성하신 코드대로 webp 형식을 지원하는 브라우저이면 source 태그를 통해 로드하고 그렇지 않으면 jpg 형식으로 로드하도록 코드를 그대로 작성했습니다. <picture> <source data-srcset={props.webp + "s"} type="image/webp" /> <img data-src={props.image} ref={imgRef} /> </picture> 그러나 고의적으로 data-srcset 에서 에러를 발생시켰을 때, img 태그에 해당하는 jpg 형식의 이미지가 로드되지 않고, 이미지 엑박이 나옵니다. 저와 동일한 질문을 봤는데 jpg 형식 이미지가 담긴 img 태그는 실제로 화면에 잘 나오는 것을 확인했습니다. webp 형식과 Jpg 형식 이미지 모두 지연 로딩을 적용해서 이러한 에러가 발생하는건가요?
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
코드샌드박스가 또 업데이트 된것같습니다 자바스크립트코드를 작성하려고 들어갔는데 강좌내용과 달라서 진행을 못하고 있네요.. 도와주세요 자바스크립트가 두개가 있는데 두개다 들어가면 또 둘다 강좌랑 다르더라고요;;
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
제가 유저들끼리 커뮤니티 만들고자 하는데 이때부터 강의 보면 될까요? 여러가지 다 보고있는데 어디서부터 딱 봐야할지 모르겠습니다.! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. v15로 업데이트를 했는데 하이드레이션 오류가 발생하기 시작했습니다. /book/1 페이지에서 vscode 저장으로 Next.js가 재실행이 되면은 오류가 발생하는데요. 하이드레이션 과정에서 서버와 클라이언트의 HTML이 일치하지 않아 클라이언트에서 재생성이 된다는 오류가 발생하고 있습니다. 그래서 속도 저하가 굉장히 심해진 상태입니다. https://nextjs.org/docs/messages/react-hydration-error 이 곳에서 오류가 발생하는 원인과 해결법을 말해주고는 있는데, 지금 저한테만 발생하는 현상인건지 좀 궁금합니다.
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요 우선 강의 잘 듣고 있습니다^^ 동물 앨범 만들기 2-2를 진행하다가 문의 사항이 있어 글을 남겨 봅니다. 아래 코드에서 this.setState에 ...this.state 값을 넣어주면서 "spread (…) 연산자를 사용해서 기존의 상태를 유지해주고" 라고 설명을 해주셨는데요 이 부분이 이해가 잘 가지 않아서요~ this.setState({ ...this.state, currentTab: name, photos: await request(name), }); setState 함수 newState 매개변수에 { ...this.state, currentTab: name, photos: await request(name), } 객체 값이 들어가면서 ...this.state 값은 어디 값에 들어가게 되서 기존 상태를 유지한다고 봐야 될까요?? export default function App($app) { 7 this.state = { 8 currentTab: 'all', 9 photos: [], 10 }; 11 12 const tabBar = new TabBar({ 13 initialState: '', 14 onClick: async (name) => { 15 this.setState({ 16 ...this.state, 17 currentTab: name, 18 photos: await request(name), 19 }); 20 }, 21 }); 22 23 const content = new Content(); 24 25 this.setState = (newState) => { 26 this.state = newState; 27 tabBar.setState(this.state.currentTab); 28 content.setState(this.state.photos); 29 }; 30}
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
<Row title="Netflix ORIGINALS" id="NO" fetchUrl={requests.fetchNetflixOriginals} isLargeRow > </Row> <Row title="Trending Now" id="NO" fetchUrl={requests.fetchTrending} > </Row> return ( <section className="row"> <h2>{title}</h2> <div className="slider"> <div className="slider__arrow-left"> <span className="arrow" onClick={() => { document.getElementById(id).scrollLeft -= window.innerWidth - 80 }}>{"<"}</span> </div> <div id={id} className="row__posters"> {movies.map((movie) => ( <img key={movie.id} className ={`row__poster ${isLargeRow && "row__posterLarge"}`} src={`https://image.tmdb.org/t/p/original/${isLargeRow ? movie.poster_path : movie.backdrop_path}`} alt={movie.name} > </img> ))} </div> <div className="slider__arrow-right"> <span className="arrow" onClick={() => { document.getElementById(id).scrollLeft += window.innerWidth - 80 }}>{">"}</span> </div> </div> </section> ) 넷플릭스 오리지널에서는 슬라이드가 제대로 동작합니다. 그런데 아래 row들의 화살표를 클릭했을때 넷플릭스 오리지널 포스터의 슬라이드가 동작하는데 이유를 모르겠습니다.
미해결
[React 2부] 고급 주제와 훅
컨텍스르를 설계하실 때 const Consumer = ({childeren } => <>{children(emiiter.get())}</>) 설명하시면서 렌더프롭이라고 설명하셨습니다. 그 이후 Count 설계하실 때 {(value) => <div>{value.count}</div>} 라고 적으셨는데 렌드 프롭에 대한 설명이 없으셔서 정확히 어떻게 렌더링되는지 궁금합니다!! 정확한 원리를 자세히 모르겠습니다
해결됨
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
모던 을 위한 다양한 Javascript+EX6 배열 문법 이해1 16분 2초 const data1 = [1, 2, "dave", null]; const data2 = [ { name: "Dave Lee", age: 30 }, { name: "Alex", age: 40 }, ]; const data3 = [ [1, 2, 3], [4, 5, 6], ]; console.log(data1[0]); console.log(data2[0].name); console.log(data3[0][0]); 위 코드에서 마지막줄 console.log(data3[0][0]);만 결과가 나오지 않습니다. [0][1], [0][2], 등 나머지 index 번호를 적용했을 때 정상적으로 나오는데, [0][0]은 왜 결과가 누락되는걸까요? (undefined 라는 결과값도 나오지 않습니다.)
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 지금까지 강의 너무 잘 들었습니다. React와 TypeScript 강의를 듣고 복습겸으로 제공해주신 핸드북 사이트까지 참고하면서 공부하고 있습니다! 혹시나 Next.js의 핸드북 사이트를 제가 못 찾은건지 아니면 없다면 만드실 계획은 없으신지 궁금해서 질문 올려봅니다. 좋은 강의 만들어주셔서 감사합니다.
미해결
[React 1부] 만들고 비교하며 학습하는 React
수업 영상대로 따라갔을때 props가 undefined로 나오는데 별도의 설정이 필요할까요? SearchForm에서 다음 코드를 추가했을때도 동일하게 안되네요 constructor(props) { super(props); ... }
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
landingpage에서 useEffect로 fetchProducts를 하고 있는데, VSCode development server를 켜놓고 하지 않습니까? 근데 vscode에서 save를 할 때 landingpage의 useEffect가 실행되는데, 이게 원래 이런건가요? useEffect는 컴포넌트가 처음 마운트 될 때만 실행되는 것으로 알고 있는데, 개발모드에서 save할 때는 save할 때마다 실행되나요? 궁금하네요.
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
upward070@gmail.com 권한요청드렸습니다!
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 modal을 구현하고있는데 궁금증이 생겨 질문드립니다. modal을 구현할 때 intercepting routes를 사용하는 이유가 궁금합니다. 단순히 parallel로만 띄우면 안되는건가요? 아래는 제가 구현한 코드예시입니다. https://github.dev/datoybi/next-playground simple-modal1은 parallel routes만 사용하였고, simple-modal2는 parallel routes + intercepting routes를 사용하였습니다. 두개 다 구현을 해보았는데 새로고침을 해도 둘의 결과값이 같습니다. 무엇때문에 intercepting routes를 사용하는 건가요? 미리 감사합니다!
해결됨
한 입 크기로 잘라먹는 Next.js
all books 를 가져오는 fetch 에서 한부분은 no-store 로 적용되고 한 부분은 force-cache 로 적용된다고 했을 때 한 부분이 no-store 이기 때문에 force-cache 한 부분도 계속 갱신되어질까요?
해결됨
한 입 크기로 잘라먹는 Next.js
기존처럼 사용하면 빌드시 타입 오류가 나와서 따로 type을 Promise 로 만들어 사용해줘야 하는 듯합니다. nextjs 링크도 첨부해두었습니다. https://nextjs.org/docs/app/building-your-application/upgrading/version-15#params--searchparams 참고로 search/page.tsx 에서 searchParams 를 다음과 같이 타입 적용해주었더니 정상 빌드되었습니다. type SearchParams = Promise<{ q?: string }>;
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
쌤~ 문득 궁금해져서 질문드립니다. 보통 파일작성하실 때 jsx확장자로 하시는데 왜 유독 util폴더에 있는 파일은 js확장자 인가요? jsx나 js든 자유롭게 써도 되는건지 어떤 규칙이나 의도가 있으신지 궁금합니다.!
미해결
코드로 배우는 React 19 with 스프링부트 API서버
api 서버에서 Todo 엔티티 에는 content 로 했는데 왜 이번 섹션4 강의부터 갑자기 writer 가 나오는 건가요? 원래 writer 인데 content로 잘못 만드신건데 그냥 사용하신건가요? 그냥 계속 진행 해도 별 문제 없는 건지 궁금합니다
