173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
The authenticity of host ' github.com (20.200.245.247)' can't be established. ED25519 key fingerprint is SHA256:+DiY3wvvV 위와같은 문구가 뜨고 안되네요. ㅠㅠ
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
이렇게 뜨는데 어떤 익스텐션 설치해야될까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. useQuery로 가져온 data가 console로 찍어보면 두번찍히는데 왜 렌더링이 두번도는지 알 수 있을까요?
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
!e.nativeEvent.isComposing 해당 코드가 이해가 되지 않아 찾아보았지만(아래 설명..), 정확히 어떻게 쓰이는지 잘 모르겠습니다. 설명 좀 부탁합니다. ev.nativeEvent.isComposing 은 복잡한 문자 입력 도중 발생하는 이벤트를 처리하기 위한 속성으로, IME를 통한 입력이 완료되지 않았을 때 특정 키 이벤트를 무시하는 데 사용됩니다. 이를 통해 불완전한 입력에 대한 처리를 방지할 수 있습니다
미해결
코드로 배우는 React 19 with 스프링부트 API서버
세션 10번 강의 보면서 따라가고 있는데 org.springframework.dao.DataIntegrityViolationException: could not execute statement [(conn=335) Cannot add or update a child row: a foreign key constraint fails (`apidb`.`tbl_cart_item`, CONSTRAINT FKs7vg62w3nq7igdxgssq1u0biw FOREIGN KEY (`product_pno`) REFERENCES tbl_product (`pno`))] [insert into tbl_cart_item (cart_cno,product_pno,qty) values (?,?,?) returning cino]; SQL [insert into tbl_cart_item (cart_cno,product_pno,qty) values (?,?,?) returning cino]; constraint [null] 에러가 나오더라구요.. 그래서 제가 세션 10 완성 소스 보면서 잘못된 곳을 찾아 보려는데 ... 올라건 소스가 잘못된거 같아요... 세션 10의 소스가 아닙니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
public ResponseEntity searchLinkOrderNumberOutput( @ApiParam("주문 번호") @RequestParam(required = false) List<String> orderNumbers, @ApiParam(name = "startDate", value = "yyyyMMdd", required = true) @RequestParam String startDate, @ApiParam(name = "endDate", value = "yyyyMMdd", required = true) @RequestParam String endDate, @ApiParam(name ="confirmationStatus", value="확정여부(Y/N)") @RequestParam String confirmationStatus, @ApiParam(name = "pageSize", value = "한 페이지에 보여줄 주문 개수 (미 입력시 기본값 20)") @RequestParam(defaultValue = "20") int pageSize, @ApiParam(name = "pageNumber", value = "데이터를 조회 할 페이지 숫자 (미 입력시 기본값 1)") @RequestParam(defaultValue = "1") int pageNumber) { 궁금한 점이 있습니다 선생님 만일 controller에서 string으로 날짜값을 받으면 이제 별도의 파싱작업을 거쳐서 LocalDateTime 형식으로 변환해 줘야하는데 LocalDateFormatter을 사용하면 해당 작업을 생략할 수 있는건가요???
미해결
코드로 배우는 React 19 with 스프링부트 API서버
@Override public PageResponseDTO<ProductDTO> searchList(PageRequestDTO pageRequestDTO) { log.info("----------------------searchList-------------------------"); Pageable pageable = PageRequest.of( pageRequestDTO.getPage() -1, pageRequestDTO.getSize(), Sort.by("pno").descending()); QProduct product = QProduct.product; QProductImage productImage = QProductImage.productImage; // from 절 JPQLQuery<Product> query = from(product); // join // @ElementCollection을 join 할때는 아래와 같이 사용해야합니다. // product.imageList를 productImage로 사용하겠다. query.leftJoin(product.imageList, productImage); query.where(productImage.ord.eq(0)); Objects.requireNonNull(getQuerydsl()).applyPagination(pageable,query); List<Tuple> productList = query.select(product,productImage).fetch(); // 쿼리를 실행시키기 위함. long count = query.fetchCount(); log.info("======================="); log.info(productList); return null; } 이 코드에서 return 값을 넘기고 싶어서 수정하는데 어떻게 해야 값이 넘어가는지를 잘 모르겠습니다... TodoSearchImpl에서는 new PageImpl<>() 사용하셔서 넘기셨는데 여기서는 어떻게 처리해야 될까요?? 2. ProductServiceImpl의 getList() 메서드와 동일한 역할인거같은데, ProductSearchImpl 에서는 querydsl을 사용하셔서 보여주신거고 ProductServiceImpl에서는 jpa를 사용하는 방법을 보여주신게 맞는지 궁금합니다!
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Context를 이용하여 props를 분리하고, onUpdate, onCreate같이 한번만 수행되는 함수들은 useMemo를 이용하여 메모이제이션을 한다고 했습니다. 아래 코드처럼요 const memoDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete, }; }, []); 그런데 이전 시간에 각각의 함수를 useCallback를 통해 메모이제이션 했는데 한번 더 하는 이유가 이해 가지 않아 질문 드립니다. 아래 코드처럼 useCallback를 통해 처음 렌더링 될 때만 실행되고 이후에는 실행되지 않도록 코드를 작성 했는데 맨 위의 코드처럼 한번 더 감싼? 이유가 잘 이해가 되지 않습니다. const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", targetId: targetId, }); }, []);
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
자식 컴포넌트 Bulb와 Counter를 해당 강의에서 분리했는데 다음과 같은 의문이 생겼습니다. 이렇게 분리했더라도 결국 Counter의 state가 변경되면서 Counter가 리렌더링 되는 걸로 알고 있습니다. 이러한 경우 부모 컴포넌트인 App도 리렌더링되면서 Bulb 컴포넌트도 리렌더링되는 것 아닌가요?
미해결
[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
npx create-expo-app@latest 이렇게 설치했는데 강의랑 설치하는게 다르고 폴더구성도 다르더라구요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
1. npm create vite@latest 2. 프로젝트 이름 입력 3.react 선택 4. javascript 선택 5.패스 이동후 npm i 6.npm run dev 로 했을떄 import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import App from './App.jsx' import './index.css' createRoot(document.getElementById('root')).render( <StrictMode> <App /> </StrictMode>, ) 이런식으로 나오네요 .. 일가장 프로젝트는 import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; import "./index.css"; import { BrowserRouter } from "react-router-dom"; ReactDOM.createRoot(document.getElementById("root")).render( <BrowserRouter> <App /> </BrowserRouter> ); { "name": "webproject", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.9.0", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^9.9.0", "eslint-plugin-react": "^7.35.0", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.9", "globals": "^15.9.0", "vite": "^5.4.1" } } 현재 설정파일은 이렇습니다. 이렇게 되어있는데 두개 차이가 뭐때문에 생기는건지 궁금합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
예를들면 헤더컴포넌트에서 실시간으로 현재 시간을 보여주고싶은 경우가 있다면 헤더 컴포넌트는 모든 페이지에서 보여지는 레이아웃이기때문에 클라이언트 라우터 캐시가 되어서 제가 새로고침을 하는게 아니라면 모든 페이지에서 시간이 멈춰있다는건데 해당 기능을 구현하기 위해서 클라이언트 라우터 캐시를 사용안할수는없나요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onClick에 onClickButton(-10) 이 아닌 화살표 함수를 이벤트 핸들러로 설정하고 그 안에 호출하는 이유가 어렵습니다 ㅜㅜ 5.5)이벤트처리하기, 6.3) 기능구현하기 강의에서 함수호출의 결과를 넣으면 안되고 인수를 넘기기 위해서 라고 하셨는데 바로 onClickButton(1)를 왜 넣으면 안되는지 모르겠어요,, 자바스크립트만 하다 리액트 하려니 헷깔리네여 ㅜㅜ <button onClick={() => { onClickButton(-10); }} > 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
미해결
실무 중심! FE 입문자를 위한 React
학습노트 pdf에서 4-2 실습코드 링크와 4-3 실습 코드 링크가 동일합니다. 수정 부탁드립니다. 그리고 5-1 강의에서 HTML과 리액트의 onclick/onClick 설명해주시는 화면에 둘 모두 onclick으로 되어 있음을 제보 드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
지금 section04 포트폴리오 리뷰까지 왔는데 지금은 작성자, 비밀번호 , 제목 , 내용을 입력하고 등록하기 버튼을 눌러도 등록안되고 에러뜨는게 정상인건가요? 저만 안되는건가 싶어서요
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 Next.js 강의를 잘 보고 있습니다. Next.js 장단점 내용을 보고 궁금한 점이 생겨서 질문드립니다. 1. 8:59초에 서버에서 모든 컴포넌트를 사전 렌더링을 한다고 말씀하셨는데, 작성한 모든 컴포넌트 의 HTML을 서버에 생성해놓는다는 의미인가요? 그렇다면 그 HTML을 받아서 브라우저가 파싱할 때, 서버로부터 받는 스크립트는 해당 컴포넌트의 관련된 로직의 js 파일을 받아오는건가요? 이 동작까지 Next.js에서 담당해주는건가요..? 사용자의 접속 요청이 들어왔을 때, FCP는 빠르겠지만 이 과정에서 서버에서 모든 컴포넌트의 사전 렌더링이 진행되고, 하이드레이션 과정까지 있습니다. 전처리 작업은 늘어난 것 같고, 사용자의 인터렉션이 불가한 지점까지 있는데 이 부분은 어떻게 핸들링하는지와 과연 FCP가 단축된게 장점이라고 할 수 있는지 궁금합니다. 해소가 안되는 부분들이 계속 생기는데, 영상을 계속 보다보면 뒤에서 다 설명을 해주시는 부분들일까요...?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useMemo 강의에서 함수를 작성할 때, const { totalCount, doneCount, notDoneCount } = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone; ).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount }; }, [todos]); 위의 코드처럼 작성하고 아이템의 체크 박스를 누르면 아래 사진과 같은 오류가 발생합니다. todos 배열 객체의 isDone 속성이 정의되지 않았다고 하는 것 같은데 해결 방법을 몰라 질문 드립니다...ㅠㅠ 혹시 몰라 List.jsx 전체 코드도 같이 올려두겠습니다. 항상 좋은 강의 만들어주셔서 감사합니다! import "./List.css"; import { useState, useMemo } from "react"; import TodoItem from "./TodoItem"; function List({ todos, onUpdate, onDelete }) { const [search, setSearch] = useState(""); const searchHandler = (e) => { setSearch(e.target.value); }; const filterFunc = () => { if (search === "") { return todos; } return todos.filter((todo) => todo.content.toLowerCase().includes(search.toLowerCase()) ); }; const filterArr = filterFunc(); const { totalCount, doneCount, notDoneCount } = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone; ).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount }; }, [todos]); return ( <div className="List"> <h4> Todo List 🌱</h4> <div> <div>total: {totalCount}</div> <div>done: {doneCount}</div> <div>notDone: {notDoneCount}</div> </div> <input placeholder="검색어를 입력하세요" onChange={searchHandler} value={search} ></input> <div className="wrapper"> {filterArr.map((todo) => { return ( <TodoItem key={todo.id} {...todo} onUpdate={onUpdate} onDelete={onDelete} /> ); })} </div> </div> ); } export default List;
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! Header.jsx 파일에서 이 오류가 사라지지 않아서 질문 드립니다! 어떻게 해결해야 하나요...?
해결됨
한 입 크기로 잘라먹는 Next.js
파라미터를 받아서 특정 도서 상세페이지로 이동하는 [id].tsx에서 이전에 사용하던 export default async function fetchBooks(q?: string): Promise<BookData[]> { let url = `http://localhost:12345/book`; export default async function fetchBooks(q?: string): Promise<BookData[]> { let url = `http://localhost:12345/book`; if (q) { url += `/search?q=${q}`; } try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return await response.json(); } catch (err) { console.error(err); return []; } } 이 코드에서 아래와 같은 방식도 가능할까요? export default async function fetchBooks(q?: any): Promise<BookData[]> { let url = `http://localhost:12345/book`; if (typeof q === "string") { url += `/search?q=${q}`; } else if (typeof q === "number") { url += `/${q}`; } try { const response = await fetch(url); if (!response.ok) { throw new Error(); } return await response.json(); } catch (err) { console.error(err); return []; } }
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 선생님! 해당 수업에서 On-Demand-ISR을 적용하기 위해 page/api/revalidate.ts 파일에 재 생성을 요청하는 handler 함수를 정의를 했습니다. // 강의에서 작성한 handler 코드 export default async function handler( req: NextApiRequest, res: NextApiResponse ) { try { // 인덱스 페이지를 요청받을 때 revalidate 되도록 하기 await res.revalidate("/"); // 재 생성이 잘 완료되었다는 걸 리턴함 return res.json({ revalidate: true }); } catch (err) { // 재생성 실패 했을 떄 실행할 코드 res.status(500).send("실패"); console.error(err); } } 현재 강의에서는 직접 localhost:3000/api/revalidate 를 입력해 수동으로 페이지를 재 생성했는데, 만약 인덱스 페이지 접속할 때마다 자동으로 페이지를 재 생성하고 싶으면 useEffect 훅을 사용하면 될까요? 아래는 제가 작성한 코드입니다! useEffect(() => { fetch("/api/revalidate") .then((res) => res.json()) .then((data) => { if (data.revalidate) { console.log("페이지가 성공적으로 재생 성되었습니다."); } }); }, []);
