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을 사용하면 해당 작업을 생략할 수 있는건가요???
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, }); }, []);
자식 컴포넌트 Bulb와 Counter를 해당 강의에서 분리했는데 다음과 같은 의문이 생겼습니다. 이렇게 분리했더라도 결국 Counter의 state가 변경되면서 Counter가 리렌더링 되는 걸로 알고 있습니다. 이러한 경우 부모 컴포넌트인 App도 리렌더링되면서 Bulb 컴포넌트도 리렌더링되는 것 아닌가요?
예를들면 헤더컴포넌트에서 실시간으로 현재 시간을 보여주고싶은 경우가 있다면 헤더 컴포넌트는 모든 페이지에서 보여지는 레이아웃이기때문에 클라이언트 라우터 캐시가 되어서 제가 새로고침을 하는게 아니라면 모든 페이지에서 시간이 멈춰있다는건데 해당 기능을 구현하기 위해서 클라이언트 라우터 캐시를 사용안할수는없나요?
onClick에 onClickButton(-10) 이 아닌 화살표 함수를 이벤트 핸들러로 설정하고 그 안에 호출하는 이유가 어렵습니다 ㅜㅜ 5.5)이벤트처리하기, 6.3) 기능구현하기 강의에서 함수호출의 결과를 넣으면 안되고 인수를 넘기기 위해서 라고 하셨는데 바로 onClickButton(1)를 왜 넣으면 안되는지 모르겠어요,, 자바스크립트만 하다 리액트 하려니 헷깔리네여 ㅜㅜ <button onClick={() => { onClickButton(-10); }} > 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요 Next.js 강의를 잘 보고 있습니다. Next.js 장단점 내용을 보고 궁금한 점이 생겨서 질문드립니다. 1. 8:59초에 서버에서 모든 컴포넌트를 사전 렌더링을 한다고 말씀하셨는데, 작성한 모든 컴포넌트 의 HTML을 서버에 생성해놓는다는 의미인가요? 그렇다면 그 HTML을 받아서 브라우저가 파싱할 때, 서버로부터 받는 스크립트는 해당 컴포넌트의 관련된 로직의 js 파일을 받아오는건가요? 이 동작까지 Next.js에서 담당해주는건가요..? 사용자의 접속 요청이 들어왔을 때, FCP는 빠르겠지만 이 과정에서 서버에서 모든 컴포넌트의 사전 렌더링이 진행되고, 하이드레이션 과정까지 있습니다. 전처리 작업은 늘어난 것 같고, 사용자의 인터렉션이 불가한 지점까지 있는데 이 부분은 어떻게 핸들링하는지와 과연 FCP가 단축된게 장점이라고 할 수 있는지 궁금합니다. 해소가 안되는 부분들이 계속 생기는데, 영상을 계속 보다보면 뒤에서 다 설명을 해주시는 부분들일까요...?
안녕하세요 선생님! 해당 수업에서 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("페이지가 성공적으로 재생 성되었습니다."); } }); }, []);
제가 백엔드 강의는 수강한 적이 없어서요, 대신 노드js 교과서 책을 구매해서 가지고 있는데.. 우선 프론트는 네트리파이로 배포 완료했습니다 https://admirable-donut-f22cc6.netlify.app/ 백엔드 배포는 선생님 책 노드js 교과서 722쪽 AWS 배포하기 부터 보면서 하면 별 문제없지 진행할 수 있을까요? 추가적으로 백엔드쪽 코드 수정이 필요할지.. 배포할 레포 구조는 아래 처럼 루트 폴더 하위에 백엔드, 프론트 폴더 각각 있습니다
투두를 수정, 삭제하는 강의를 보면서 버튼을 클릭할 때, 제가 누른 버튼이 어떤 버튼인지 알 수 없기 때문에 이벤트 객체를 이용해야 한다고 생각했습니다. 내가 클릭한 버튼의 아이디를 수정, 삭제하는 함수의 인수로 전달해야 한다고 생각해서 아래와 같은 코드로 작성해야한다고 생각했습니다. const onChageCheckBox = (e) => { onUpdate(e.target.id); }; const deleteHandler = (e) => { onDelete(e.target.id); }; 하지만 강의에서는 아래 코드처럼 알려주셔서요! const onChageCheckBox = () => { onUpdate(id); }; const deleteHandler = () => { onDelete(id); }; 이벤트 객체를 사용하지 않고 id만으로 함수가 실행되는 점이 이해가 가지 않아 질문 드립니다. 더불어 이벤트 객체를 사용해서 코드를 작성하는 방법도 있는지 질문 드립니다. 항상 좋은 강의해주셔서 감사합니다!
On-Demand ISR 사전 렌더링 방식을 보면서 현재 대부분의 SSR로 구현 되어 있는 어플리케이션을 좀 더 최적화 할 수 있겠다는 생각을 했습니다! 여기서 질문은 API Router를 생성해서 revalidate할 경로를 작성해서 해당 경로의 페이지를 On-Demand ISR 처리되도록 구현해주셨는데요..! 실제로 비지니스 로직을 작성할 때는 많은 페이지들이 존재하는데, 이럴때는 API Router에서 "/" 인덱스 페이지 경로를 하드코딩한 부분을 동적으로 받을 수 있게 처리해서 백엔드 서버와 통신 시, 정상응답을 받았을 때, 해당 API Router를 호출하게 하면 되는걸까요..?! 추가로, 페이징 기능 같은 페이지가 있는 경우에는 어떤식으로 On-Demand ISR을 적용하는지도 궁금합니다..!! 바쁘시겠지만 답변 해주시면 감사하겠습니다 😀 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
