안녕하세요! 제가 강의를 모두 수강하고 프로젝트에서 리액트 쿼리를 통해 SSR을 적용하려고 하고 있습니다. 아래 코드는 fetchAPISever 함수를 통해 백엔드 api로부터 데이터를 요청하는 함수입니다. 이때 fetchAPIsever 함수는 next/header 의 cookies() 를 통해 사용자의 토큰이 있으면 토큰을 넣어서 api를 요청하는 함수입니다. export const getBestAndPendingReviews = async (): Promise<ReviewePageResponse> => { const res = await fetchAPIServer('/api/review', 'GET'); if (res.code === 'SUCCESS') { return res.result; } throw new Error( `리뷰 페이지 데이터 불러오기 실패 ${res.code}-${res.message}`, ); }; 아래 코드는 리뷰 페이지에서 서버 사이드 렌더링으로 보여주기 위해 리액트 쿼리로 Hydration을 적용한 코드입니다. // src\app\reviews\page.tsx import { HydrationBoundary, QueryClient, dehydrate, } from '@tanstack/react-query'; import ReviewDashboard from './_components/ReviewDashboard'; import { getBestAndPendingReviews } from './_lib/getBestAndPendingReviews'; export default async function ReviewsPage() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['reviews', 'best'], queryFn: getBestAndPendingReviews, }); const dehydrateState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydrateState}> <ReviewDashboard /> </HydrationBoundary> ); } ' <ReviewDashboard/> 컴포넌트에서 UserInfo 컴포넌트를 반환하도록 설정하고 useQuery 훅을 사용하려 했으나, fetchAPIServer 함수에서 next/headers 를 import하고 있어서 클라이언트 컴포넌트에서 사용할 수 없다는 에러가 발생했습니다. 그러면 SSR을 적용하기 위해서는 getQueryData 를 사용해야하는 걸까요..? import { QueryClient } from '@tanstack/react-query'; import { ReviewePageResponse } from '../_lib/getBestAndPendingReviews'; export default function UserInfo() { const queryClient = new QueryClient(); const reviews = queryClient.getQueryData<ReviewePageResponse>([ 'reviews', 'best', ]); const { total } = reviews!; if (!reviews) return <p>리뷰가 없습니다.</p>; console.log('reviews', reviews); return <p>작성한 리뷰 {total || 0}</p>; } 또는 useQuery를 쓰되 쿼리 함수를 Promise.Resolve()로 서버에서 전달 받은 데이터를 받는게 나은가 요? 'use client'; import { useQuery } from '@tanstack/react-query'; export default function UserInfo() { const { data: reviews, isLoading } = useQuery({ queryKey: ['reviews', 'best'], queryFn: () => Promise.resolve(), // 서버 데이터 재활용 }); if (isLoading) return <p>Loading...</p>; if (!reviews) return <p>리뷰가 없습니다.</p>; const { total } = reviews!; console.log('reviews', reviews); return <p>작성한 리뷰 {total || 0}</p>; }
14:32 초 부근에 length 를 함수부분에서 널값이 있다 검색한다음에 호출하는것으로 이해했습니다. 궁금한점은.... Hello, world!에서 ","다음이 공란(널값)인데 수행이 멈추고 6이 출력되야 하지 않나 헷갈려서 문의드립니다. 정답은 13 공란이 포함되어 있던데 헷갈리네요^^;
1. 현재 학습 진도 몇 챕터/몇 강을 수강 중이신가요? 1-11 2. 어려움을 겪는 부분 첫 시도에서 count_to_all_zero 와 count_to_all_one이 모두 1이 나오는 이유가 첫번째 문자에 대해서 비교를 안하고 있다고 나와있는데, 첫번째 문자가 아니라 맨 마지막 문자를 비교 안하고 있는 것이 아닌가 궁금합니다! 첫 시작에서는 0번째 인덱스와 1번째 인덱스를 비교하지만 마지막 len(string) - 1번째 인덱스와 len(string)를 비교할 때는 마지막 문자에 대한 카운팅이 이루어지지 않는게 아닌가 하는데.. 제가 잘못 이해하고 있는걸까요..? ㅠㅠ
1. 현재 학습 진도 몇 챕터/몇 강을 수강 중이신가요? 1-10 2. 어려움을 겪는 부분 재취준을 준비하면서 여러 기업의 코딩테스트를 봤었는데요. 항상 시간 예외성 검사에 걸려서 코딩테스트를 탈락합니다. 그래서 이 문제를 보면서도 시간을 최대한 줄이고자 노력했습니다. 3. 시도해보신 내용 input = "abadabac" def find_not_repeating_first_character(string): while True: found_flag = False if len(string) > 1: target_char = string[0] for compare_char_index in range(1,len(string)): if target_char == string[compare_char_index]: found_flag = True break if found_flag: string = string.replace(target_char, "") else: return target_char else: return "_" result = find_not_repeating_first_character print("정답 = d 현재 풀이 값 =", result("abadabac")) print("정답 = c 현재 풀이 값 =", result("aabbcddd")) print("정답 =_ 현재 풀이 값 =", result("aaaaaaaa")) 제가 봐도 가독성이 안좋긴한데.. 저는 이 문제를 풀면서 가장 먼저 생각한 것이 '이미 한번 훑은 알파벳에 대해서는 순회를 제외한다' 였거든요. 그런데 글을 쓰면서 다시 확인해보니 string을 replace할 때 오히려 더 시간이 늘어날 것 같기도 하구요.. ㅠㅠ for문의 대상이 되는 객체를 for문 안에서 변경할 수 없기에 부득이하게 found_flag라는 변수를 선언해서 for문 밖에서 판단 후 replace 하는 식으로 코드를 작성했습니다. 궁금한 점이, 딩코딩코님은 이 접근법에 대해서 어떻게 생각하시나요? 저는 정말 간단할 수 있는 문제를 20분 정도의 시간을 고민하면서 풀었는데, 이런 부분 때문에 실제 코딩테스트를 응시할 때도 시간이 부족했습니다.. ㅠㅠ 코딩테스트를 보면 1 <= N <= 1,000,000,000 이런 식으로 제한을 두다 보니.. '길이 1억의 string이 주어졌을 때 전부 순회하면 시간이 너무 길어지지 않나..?' 하는 생각이 항상 발목을 잡는 것 같습니다.. 이런 문제를 접근할 때 어떤 식으로 접근해야 할지 조언 부탁드립니다.. 항상 좋은 강의 감사드립니다!! (_ _)
안녕하세요. airflow 파일의 폴더 구성에 대해 문의드립니다. airflow 를 사용하다보면 dag 외에 여러 파일이 필요한데 이때 해당 파일을 어떻게 정리하면 좋을지 궁금해서요. plugins 폴더에는 PythonOperator 에서 사용하는 함수 혹은 커스텀 오퍼레이터를 작성하는거 같습니다. 궁금한점은 오퍼레이터에 간접적으로 사용되는 함수도 plugins 폴더에 위치하는지 궁금합니다. 예를 들어 SQL 파일을 읽을때 SQL 파일을 읽어주는 함수를 작성한다고 해보면 해당 함수는 오퍼레이터에 간접적으로 사용됩니다. 그러면 해당 함수도 plugins 폴더에 위치하는게 권장되는걸까요 아니면 dags 폴더에 위치하는게 좋을까요? shell 파일은 plugins 폴더에 위치하는게 좋다고 하셨는데 그러면 sql 파일은 어떻게 위치하는게 좋은지 궁금합니다. 아래와 같은 방식이면 되는지 확인 부탁드립니다!. dags plugins ......ㄴ sql ............ㄴ read_table.sql ......ㄴ lib ............ㄴ common.py ......ㄴ shell ............ㄴ file_read.sh ......ㄴ custom_operator ............ㄴ file_parse.py dags 폴더에는 정말 dag 파일만 위치하는게 좋은지도 궁금합니다.
질문 남겨주셔서 감사합니다. 막히면 언제든 무엇이든 자주 질문 던져주세요. 수학/과학이나 알고리즘과는 달리 업무자동화 코딩은 고민해서 풀리는 경우가 정말 드뭅니다. 다시 말씀드리지만, 질문을 자주자주 남겨주세요. 저도 최대한 빠르게 회신 드리겠습니다. 당부드릴 두 가지가 있습니다. ① 가급적 구체적으로 설명해주세요. ② 특정 챕터 관련 질문 남겨주실 때는, 어느 챕터인지 알려주세요ㅜ ==================================== hwp.set_table_width() 이 함수가 특정 파일에선 안먹힙니다..ㅠㅠ 해당 한글 파일의 설정을 변경하거나 조정해야 할 부분이 있을까요? 일반적인 파일은 다 잘됩니다!
데이터 캐시 설정을 force-cache 로 했을 때 이걸 갱신하기 위한 방법으로 revalidate 옵션을 주거나 revalidateTag, revalidatePath 등이 있다고 하셨는데요. 그러면 RequestMemoization에 의해서 캐싱된 데이터는 브라우저 새로고침 등을 하면 다시 fetch 하면서 갱신이 되는건가요? RequestMemoization 에 의해서 캐싱된 데이터는 언제 갱신되는지 궁금합니다. 그런데 제가 이해한 바로는 유저가 처음 브라우저를 통해 애플리케이션에 접근해서 해당 url 에서 요청을 보냈을 때 특정 데이터를 페칭하는 함수가 여러 컴포넌트에 있어서 그 데이터를 불러오기 위한 요청을 한 번만 함으로써 서버에 요청이 가는 것을 줄여주는것이 RequestMemoization 이라고 저는 이해를 했는데요. 어차피 처음에 같은 데이터를 보여주기 위해 여러 번의 요청을 하는 것은 불필요한 네트워크를 타게 되고 성능상에 좋지 않으니까요. 이런 경우라면 사실 RequestMemoization 은 캐싱된 데이터를 갱신할 필요가 없을 수도 있겠다는 생각이 듭니다. 그래서 제로초님이 별다른 언급이 없으셨나? 하는 생각도 드네요. 감사합니다.
next.js 15 로 따라가면서 진행 중인데 리액트 쿼리를 설치하려고 하니 리액트19 가 아직 안정적이지 않아서 npm 설치할 때 충돌이 생긴다고 에러가 뜨는 것 같습니다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: z-com@0.1.0 npm ERR! Found: react@19.0.0-rc-66855b96-20241106 npm ERR! node_modules/react npm ERR! react@"19.0.0-rc-66855b96-20241106" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^18 || ^19" from @tanstack/react-query@5.62.7 npm ERR! node_modules/@tanstack/react-query npm ERR! @tanstack/react-query@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. ------- 리액트 19 안정화 버전으로 업데이트 진행했습니다! 그랬더니 next 와 리액트19 사이에 에러가 발생해서 next 도 latest 로 업데이트 해주고 리액트 쿼리를 설치하니까 되네요! 이 방법이 맞는지는 모르겠지만 일단 이렇게도 되긴 합니다!
const weatherSearch = function (position) { console.log(position); fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=9756434244216c3d2f9c08591b54bede`) } // 위치 정보를 처리하는 함수 const acessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, // 위도 longitube: position.coords.longitude // 경도 (오타: longitube → longitude) }; console.log(positionObj); // 위치 정보 출력 console.log(position); // 전체 위치 데이터 출력 weatherSearch(positionObj) }; 2.5로 수정햇는데 오류가 뜨네요 어떠한 오류인 지 모르겠습니다 밑 코드는 // DOM 요소 선택 const todoInput = document.querySelector("#todo-input"); // 할 일 입력 필드 const todoList = document.querySelector("#todo-list"); // 할 일 목록 // localStorage에서 저장된 데이터를 불러오기 const savedTodoList = JSON.parse( localStorage.getItem("saved-items") ); /* 문자열로 저장된 데이터를 JSON.parse를 통해 배열로 변환 */ // 새로운 할 일을 생성하는 함수 const createTodo = function (storageData) { let todoContents = todoInput.value; // 입력 필드에서 가져온 값 if (storageData) { todoContents = storageData.contents; // 저장된 데이터가 있으면 그 내용을 사용 } // 할 일을 나타내는 DOM 요소 생성 const newLi = document.createElement("li"); // li 요소 생성 const newSpan = document.createElement("span"); // span 요소 생성 (할 일 내용 표시) const newBtn = document.createElement("button"); // 완료 버튼 생성 // 완료 버튼 클릭 시 해당 할 일을 완료 상태로 변경 newBtn.addEventListener("click", () => { newLi.classList.toggle("complete"); // 완료된 상태를 토글 saveItemsFn(); // 변경 내용을 저장 }); // 할 일을 더블클릭하면 삭제 newLi.addEventListener("dblclick", () => { newLi.remove(); // li 요소 제거 saveItemsFn(); // 변경 내용을 저장 }); // 저장된 데이터가 완료 상태면 완료 표시 추가 if (storageData?.complete) { // 옵셔널 체이닝 사용 newLi.classList.add("complete"); // 완료 클래스 추가 } // 할 일 내용을 span에 추가 newSpan.textContent = todoContents; // li 요소에 버튼과 span을 자식으로 추가 newLi.appendChild(newBtn); newLi.appendChild(newSpan); // 할 일 목록에 li 추가 todoList.appendChild(newLi); // 입력 필드를 비우기 todoContents.value = ""; // 변경된 목록 저장 saveItemsFn(); }; // Enter 키를 눌렀을 때 할 일 추가 const keyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); // 입력값이 있으면 할 일을 생성 } }; // 전체 삭제 기능 const deleteAll = function () { const liList = document.querySelectorAll("li"); // 모든 li 요소 선택 for (let i = 0; i < liList.length; i++) { liList[i].remove(); // 모든 할 일 제거 } saveItemsFn(); // 변경 사항 저장 }; // localStorage에 저장하는 함수 const saveItemsFn = function () { const saveItems = []; // 저장할 데이터를 담을 배열 // 현재 목록의 할 일들을 객체로 변환하여 저장 for (let i = 0; i < todoList.children.length; i++) { const todoObj = { contents: todoList.children[i].querySelector("span").textContent, // 할 일 내용 complete: todoList.children[i].classList.contains("complete"), // 완료 상태 }; saveItems.push(todoObj); // 객체를 배열에 추가 } // 배열이 비었으면 localStorage에서 데이터 제거, 아니면 저장 saveItems.length === 0 ? localStorage.removeItem("saved-items") // 데이터가 없으면 키 삭제 : localStorage.setItem( "saved-items", JSON.stringify(saveItems) // 배열을 문자열로 변환 후 저장 ); }; // 저장된 데이터가 있으면 불러와 화면에 표시 if (savedTodoList) { for (let i = 0; i < savedTodoList.length; i++) { createTodo(savedTodoList[i]); // 저장된 데이터로 할 일을 생성 } } const weatherSearch = function (position) { console.log(position); fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=9756434244216c3d2f9c08591b54bede`) } // 위치 정보를 처리하는 함수 const acessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, // 위도 longitube: position.coords.longitude // 경도 (오타: longitube → longitude) }; console.log(positionObj); // 위치 정보 출력 console.log(position); // 전체 위치 데이터 출력 weatherSearch(positionObj) }; // Geolocation API로 사용자 위치 요청 const askForLocation = function () { navigator.geolocation.getCurrentPosition( acessToGeo, // 위치 정보를 가져오면 실행할 콜백 (err) => { console.log(err); // 에러가 발생하면 에러 정보를 출력 } ); }; // 위치 요청 실행 askForLocation();
기존 강의에서 elem = browser.find_element_by_id("query") 였는데 이제는 elem = browser.find_element("id","query") 이렇게 작성해야함 ㅜㅜ 계속 AttributeError 떠서 미치는줄 알았는데 구글링해서 찾다보니 나와서 써보니 문법이 바뀐거였음
안녕하세요. 강의를 전부 수강한 수강생입니다. 강사님의 강의를 보다가 궁금한 것이 있어서 질문 남깁니다. 강의에서는 API 요청 방식을 fetch를 사용하여 전부 Next 서버에서 요청을 보내는 방식이던데 클라이언트 컴포넌트에서 fetch를 사용하여 브라우저를 통해 요청하는 방법과 강의와 같이 사용하는 방법, API Route(Handle) 방식을 사용하는 방법의 차이를 알 수 있을까요?? 또한 Next 서버의 부하는 괜찮은지 궁금합니다.
파이썬 동시성 프로그래밍 : 데이터 수집부터 웹 개발까지 (feat. FastAPI, async, await)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. from app.config import NAVER_API_ID, NAVER_API_SECRET 가 아닌 from app.config import get_secret 로 import 한 이유가 궁금합니다. 클래스 내에 NAVER_API_ID = get_secret("NAVER_API_ID") NAVER_API_SECRET = get_secret("NAVER_API_SECRET") 로 변수 선언한 이유가 있을까요? get_secret은 config 파일에서 이미 수행해 NAVER_API_ID와 NAVER_API_SECRET을 변수로 가지고 있으니, 위처럼 클래스 내에 변수롤 또 선언하면 config 파일에서 get_secret 함수를 이용해 변수를 만든 이유가 없다고 생각이 들었습니다. from app.config import NAVER_API_ID, NAVER_API_SECRET config 파일에서 NAVER_API_ID와 NAVER_API_SECRET을 import해서 바로 사용하면 어떤 차이가 있나요?
한글2024 버전에선 이 코드로 한글 문서가 안열리는데 다른 방법을 써야 하나요? import win32com.client as win32 hwp = win32.gencache.EnsureDispatch("hwpframe.hwpobject") hwp.XHwpWindows.Item(0).Visible = True
질문은 동영상 강의에 들어가서 오른쪽에 커뮤니티 버튼을 통해 해주세요. 그래야 어떤 강좌에서 질문하셨는지 알 수 있습니다. 영상에서 몇 분 몇 초 대를 알려주셔야 제가 한 번에 질문 내용 확인이 가능합니다. 이미 다른 누군가가 질문을 한 이력 이 있을 수 있습니다. 질문 게시판을 한 번 확인 부탁드립니다. 학교의 과제나 타 강사의 코드 등 외부 수업 자료에 대해서는 답변하지 않습니다. 제가 다루는 커리큘럼 외의 이론이나, 너무 디테일한 컴퓨터 이론에 대해서는 답변 드리지 않습니다. 시험에 안 나오는 경우가 많고, 나와 봤자 1문제 나오는데 외워야 할 부분이 많은 것 등 (예시: 서브넷 마스크 계산) 질문을 올릴 때 이 글은 모두 지우고 내용을 입력해주세요. 유튜브로 3회차 합격률 영상보다가 20프로 할인한다는 거 보고 구매했습니다. 2025년도 되면 강의라든가 24년도 3회차 기출문제 풀이 이런것도 최신화가 되나요??
저는 한글 2014를 사용하고 있습니다. 엑셀문서 값을 필드에 입력하기를 실행했을때 강의에 올라온 영상처럼 엑셀에 있는 자료가 페이지별로 하나하나 생성 되는것이 아닌 마크만 입력되고 나머지는 입력이 되지 않습니다. 제가 타이핑한것이 잘못 됐나 싶어서 강의에 있는 소스를 붙여 넣기 해서 실행을 해봐도 마크만 입력되고 나머지 자료들은 입력이 되지 않는데 왜 그럴까요?
