173만명의 커뮤니티!! 함께 토론해봐요.
미해결
React Native with Expo: 제로초에게 제대로 배우기
안녕하세요 제가 파일 구조를 보다가 하나 궁금한점이 생겼는데요 [username] 폴더는 제 마이페이지를 보여주는걸로 아는데 모달로 route가 되어있잔아요 라우트가 근데 [username]파일 안에 index 파일에 패스 url 언디파인일때 보여주는 거 같더라고여 이거는 혹시 다른 상황에 대비해 패스 경로가 언디파인이여도 정상적으로 보여줄수 있도록 설계가 되있는 건지 궁금해서 질문 남깁니다..!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vercel 배포는 한명 한테만 되는건가요? 그리고 링크를 전달해서 당사자가 링크에 들어가면 로그인을 하라고 뜨는데 제 아이디로 로그인 하지 않으면 프로젝트를 사용할 수 없는데 이게 원래 맞는건가요?
미해결
따라하며 배우는 리액트 네이티브 기초
강의에서 하라는대로 했고, qr코드 아이폰 카메라로 인증 했는데 이렇게 뜨는데 어떤걸 수정하면 이런오류가 나지 않을까요? 오류가 나는 이유도 모르겠는데 답변 부탁드립니다.
미해결
Next + React Query로 SNS 서비스 만들기
auto export default function Weekday() { return ( <Suspense fallback={<WeekdayBannerLoading />}> <WeekdayMiniBanner /> </Suspense> ); } export default function WeekdayMiniBanner() { const { banners } = use(getBanners( params )); if (banners.length === 0) return null; return ( <div className={cn('wrapper')}> <WeekdaySwiper data={banners} /> </div> ); } 이런 식으로 코드를 짰는데요. 해당 페이지를 새로고침하면 초기엔 컨텐츠영역 아무것도 노출되지않다가 잠깐 fallback ui가 노출되고 fetch가 완료되면 컨텐츠를 노출시킵니다. suspense는 promise가 pending 중일 때 promise를 catch해서 fallback ui 를 노출시키는걸로 알고 있는데 왜 새로고침 시 페이지 초기로드단계에선 빈화면이 노출되는지 궁금합니다... 아님 제가 잘못 설계한 걸까요..?? 리액트 공식문서 suspense 예시 코드 에선 버튼 누르자마자 바로 fallback ui를 노출시키는데 말이죠... 참고로 WeekdaySwiper 내부는 react swiper로 구성되어있습니다! (클라이언트 컴포넌트)
미해결
Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
export default function Weekday() { return ( <Suspense fallback={<WeekdayBannerLoading />}> <WeekdayMiniBanner /> </Suspense> ); } export default function WeekdayMiniBanner() { const { banners } = use(getBanners( params )); if (banners.length === 0) return null; return ( <div className={cn('wrapper')}> <WeekdaySwiper data={banners} /> </div> ); } 이런 식으로 코드를 짰는데요. 해당 페이지를 새로고침하면 초기엔 컨텐츠영역 아무것도 노출되지않다가 잠깐 fallback ui가 노출되고 fetch가 완료되면 컨텐츠를 노출시킵니다. suspense는 promise가 pending 중일 때 promise를 catch해서 fallback ui 를 노출시키는걸로 알고 있는데 왜 새로고침 시 페이지 초기로드단계에선 빈화면이 노출되는지 궁금합니다... 아님 제가 잘못 설계한 걸까요..?? 리액트 공식문서 suspense 예시 코드 에선 버튼 누르자마자 바로 fallback ui를 노출시키는데 말이죠... 참고로 WeekdaySwiper 내부는 react swiper로 구성되어있습니다! (클라이언트 컴포넌트)
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 정환님 강의 잘 보고 있습니다. 이번 섹션 8 . 7.1) 서버 액션을 소개합니다. 에서 궁금한게 있는데요 이전에 섹션 4 . App Router에서 32. 3.2)페이지 라우팅 설정하기 강의에서 " URL 파라미터나 searchParams, Query String 같은 값은 Promise로부터 꺼내써야 되는걸로 알고 그렇게 변경해서 사용했습니다." const BookDatail = async ({ bookId }: { bookId: string }) => { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${bookId}` ); // ... 생략 /* 저의 code */ export default async function Page({ params, }: { params: Promise<{ id: string }>; }) { const { id } = await params; return ( <div> <BookDatail bookId={id} /> </div> ); } /* 정환님이 강의해서 사용한 code */ export default function Page({ params, }: { params: {id:string}; }) { return ( <div> <BookDatail bookId={params.id} /> </div> ); } 경로 app/book/[id]/page.tsx URL 파라미터 값을 Promise로부터 꺼내와야 된다는 업데이트 강의 부분을 보고 한거라서 이게 맞는지 헷갈리네요 강의 전체를 아직 수강 전 인데 헷갈릴까봐 질문드립니다.
미해결
함수형 프로그래밍과 JavaScript ES6+
function FlatEvaluation(evaluation: Array<[string, { score: number }]>) { return pipe( evaluation, filter(([key]) => key !== "overallAssessment"), map(([key, value]) => ({ key: key, score: value.score })) ); } function findPros(evaluation: { [x: string]: { score: number } }) { return pipe( Object.entries(evaluation), FlatEvaluation, filter((item) => item.score >= 80), reduce((item, acc) => (item.score > acc.score ? item : acc)), (item) => item.key ); } // A의 경우 findPros({ a: { score: 90 }, b: { score: 85 }, c: { score: 75 } }) // B의 경우 findPros({ a: { score: 70 }, b: { score: 65 }, c: { score: 75 } }) 안녕하세요 선생님 강의 잘 듣고 있습니다. 다름이 아니라 한 가지 궁금한 점이 있어서 이렇게 질문을 드립니다 (나중에 뒤에 가서 이 문제에 대한 해답이 나오거나, 이미 앞에 이런 문제에 대한 해결 방법이 나왔다면 참 부끄러워질 거 같긴 합니다) 다름이 아니라 FxTS를 사용해 기존의 프로젝트 일부를 함수형으로 리팩토링 해보고자 하는 중이었습니다. { [x: string]: { score: number } } 타입의 객체를 인자로 받아 제일 고득점을 한 인원의 이름(key)를 리턴해야 합니다. A의 경우 80점 이상의 득점자가 두 명이 있고, 그 중 더 높은 득점을 한 a의 이름이 잘 리턴됩니다. 그런데 B의 경우 80점 이상의 득점자가 하나도 없다보니 filter가 적절한 값을 리턴하지 못해 reduce에서 에러가 납니다. 이런 경우에는 어떻게 처리하는 게 옳을지 궁금합니다.
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
Ads.txt 스니펫을 시도하고 ads.txt 를 퍼블릭에 추가해주고 업로드했는데도 자꾸 아래 문구가 뜨네요 사이트를 확인할 수 없습니다 사이트를 확인할 수 없습니다. 사이트의 변경사항이 게시되었고 Google 애드센스 크롤러가 이를 액세스할 수 있는지 확인하세요. 문제가 계속 발생하는 경우 다른 방법을 시도해 보세요.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
노란색 경고줄이 안뜨는데 뜨게 하는 방법이 무엇인가요??
미해결
한 입 크기로 잘라먹는 Next.js
백엔드 서버 연결 환경 세팅 중 npm run seed를 CLI창에 입력하였는데 오류가 발생되어 확인 부탁드립니다. 깃허브 레포지토리 링크 : https://github.com/hyunji1117/onebite-books-server-main
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
자바스크립트 강의때 하단에 있는건 확인했는데 리액트 강의에서 짬짬히 듣느라 직접 코드 수정하지 못했더니 다음 강의까지 연계되는 파일이 많아 이전 강의를 다시 수강해야하는 귀찮음이 있습니다 깃허브에 따로 올려두신 게 있으신지요?
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
안녕하세요. Cursor 실습에 사용하기 위해서 클로드 3.5 or 4.0을 사용하기 위해서 유료로 구매를 하고 강의를 따라 가야하는지 문의 드리오니 답변 부탁드립니다. 클로드 3.5도 유료로 되어 있군요. ㅠㅠ 그리고, 혹시 클로드 3.5 무료로 실습 할 수 있는 방법이 있으면 갈켜주세요. 감사합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
<div className='todos_wrapper'> {filterTodos.map((todo) => { return <TodoItem key={todo.id} {...todo} />; })} </div> 위에서 검색어 검색 기능을 보여 주기 위해서 filterTodos로 map 해 주는 건 이해가 가는데 처음에 초기값 보여 주는 건 어디에서 하는 건지 궁금합니다 초기값도 저기서 기능을 해 주는 거 아닌가요? 초기값은 애초에 filter 하지 않았기 때문에 todo.id에 따른 모든 값들을 보여 주는 걸까요 ??? 초기에 모든 값을 보여 주는 건 어디서 하는 건지 이해가 안 됩니다 ㅠ
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요 , 1. 그랩 선생님 소스 코드와 동일 하게 아래 작성한 index.js 소스 첨부 하는데요, 실행 하면 , 1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이 에러가 발생 합니다. 이 에러는 어떻게 해결 할 수 있을까요? -------- 2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 목 mock 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 그리고, 추가적으로 아래 그랩님 답변 본 뒤 다시 시도해 본 후 질문이 있어 추가적으로 글을 적습니다. 현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지 하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁 드립니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이 쇼핑몰 만들기 강의는 관리자페이지 만드는건 없나요
미해결
Next + React Query로 SNS 서비스 만들기
아래 코드와 같이 template.tsx에서 서버fetch 후 사용처인 클라이언트 컴포넌트로 props 넘겨주도록 세팅해놓았습니다. //template.tsx 자식 컴포넌트 export default async function Sidebar() { const { isSucceed, body } = await getUserGetInfo(params); return ( <SidebarLayout> <GiftIcon isNewGift={!!body?.info.new_gift} /> 'use client' export default function GiftIcon({ isNewGift }: { isNewGift: boolean }) { const { onClose } = useModal('SIDEBAR'); return ( <Link className={isNewGift ? cn(st['active']) : ''} /// <Icon type="Present" title="선물함" w={25} h={25} /> 이 상태에서 next 페이지 이동 시 서버fetch는 리렌더링 되는것을 확인했는데 이상하게 클라이언트는 리렌더링이 되지 않습니다. 즉 서버 응답값은 상태가 바뀌어도 클라이언트 상태값은 바뀌지 않더라구요... 왜 이런걸까요ㅠㅠㅠ
해결됨
Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
아래 코드와 같이 template.tsx에서 서버fetch 후 사용처인 클라이언트 컴포넌트로 props 넘겨주도록 세팅해놓았습니다. //template.tsx 자식 컴포넌트 export default async function Sidebar() { const { isSucceed, body } = await getUserGetInfo(params); return ( <SidebarLayout> <GiftIcon isNewGift={!!body?.info.new_gift} /> 'use client' export default function GiftIcon({ isNewGift }: { isNewGift: boolean }) { const { onClose } = useModal('SIDEBAR'); return ( <Link className={isNewGift ? cn(st['active']) : ''} /// <Icon type="Present" title="선물함" w={25} h={25} /> 이 상태에서 next 페이지 이동 시 서버fetch는 리렌더링 되는것을 확인했는데 이상하게 클라이언트는 리렌더링이 되지 않습니다. 즉 서버 응답값은 상태가 바뀌어도 클라이언트 상태값은 바뀌지 않더라구요... 왜 이런걸까요ㅠㅠㅠ
미해결
바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기
코드 따라해서 했는데 파일을 업로드해도 무한로딩이 됩니다 에러내용: OMP: Error #15: Initializing libiomp5.dylib, but found libiomp5.dylib already initialized. OMP: Hint This means that multiple copies of the OpenMP runtime have been linked into the program. That is dangerous, since it can degrade performance or cause incorrect results. The best thing to do is to ensure that only a single OpenMP runtime is linked into the process, e.g. by avoiding static linking of the OpenMP runtime in any library. As an unsafe, unsupported, undocumented workaround you can set the environment variable KMP_DUPLICATE_LIB_OK=TRUE to allow the program to continue to execute, but that may cause crashes or silently produce incorrect results. For more information, please see http://www.intel.com/software/products/support/ . 어떻게 해야하나요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
저는 처음에 과제를 할때 setTotal 을 직접 prop 으로 내렸는데 handleTotal 을 만들어서 함수로 내려준 이유가 있을까요?? 차이점과 장단점에 대해서가 궁금합니다. import Counter from "./Counter"; import React, { useState } from "react"; function Main() { const [Total, setTotal] = useState(0); return ( <main> <h2>Main Component</h2> <h1>{Total}</h1> <br /> <br /> <Counter Total={Total} setTotal={setTotal} /> <br /> <br /> <Counter Total={Total} setTotal={setTotal} /> </main> ); } export default Main;
미해결
[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
true && '안유진'을 썼으면 안유진이 나오는게 아니라 양쪽이 true 니까 true가 나와야 하는거 아닌가요?
