묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
Mac Os / npx eas build --platform android --profile development 질문
Vscode 터미널에서 npx eas build --platform android --profile development 명령어를 입력하면Resolved "development" environment for the build. Learn moreNo environment variables with visibility "Plain text" and "Sensitive" found for the "development" environment on EAS.✔ Using remote Android credentials (Expo server)✔ Using Keystore from configuration: Build Credentials B93ecKpj4X (default)Compressing project files and uploading to EAS Build. Learn more✖ Compressing project filesFailed to upload the project tarball to EAS BuildReason: EPERM: operation not permitted, scandir '/Users/development/.Trash' Error: build command failed.GPT는 Trash를 우회해서 하라는데 우회해도 안되고.. .easignore 파일에 .Trash.DS_Storenode_modules.git**/.Trash!./.Trash # 만약 현재 디렉토리에 있다면 포함시킴를 작성해도 계속 같은 에러가 발생합니다ㅠ.ㅠ어떻게 해결하면 될까요 ?
-
해결됨Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
색션1 예제 코드 질문드립니다.
안녕하세요,Next.js 라우팅은 어떻게 구현 했을까?색션에서 예제코드 주소를 알 수 있을까요?
-
해결됨(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
rem 단위를 쓰는 이유
'전체 레이아웃 잡기' 강의에서 7분 쯤 내용에css 단위를 rem을 사용하시는데, 픽셀 대신 rem을 쓰는 이유가 무엇인가요?
-
해결됨(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
리액트를 선택한 이유
'수익형 웹사이트 사이트' 강의에서여러가지 프론트엔드 프레임워크 중,리액트를 선택하신 이유를 알고 싶습니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
서버 컴포넌트의 등장 배경에 대한, 추가적인 질문이 있습니다.
강의 이외에, 추가적으로 서버 컴포넌트에 대해 궁금증이 생겨 여러 블로그를 참고 하는 와중, 하나 헷갈리는 개념이 있어 여쭤 보려고 합니다. <알고 싶은 내용>서버 컴포넌트의 등장 배경 중 "waterfall 문제" 라는 내용이 알맞는 내용인 지 궁금합니다. <과정>제가 참고했던 여러 블로그에서 공통적으로 언급한 내용 중 하나가 "서버 컴포넌트의 등장 배경 중 하나로 클라이언트 컴포넌트의 waterfall 문제 " 라는 내용이 있었습니다.그리고, 위의 문제는 서버 컴포넌트 도입 이후, 데이터 요청을 서버에서 사전에 처리하여 해결되었다고 간단히 설명하고 마치는 내용이었습니다. <제가 헷갈리는 부분>그렇다면 waterfall 문제는 결국, 서버 컴포넌트 이전의 SSR 방식으로도 해결 수 있는 문제가 아닐까? " 라는 의문이 들었습니다.이유는 SSR 방식 역시 서버에서 데이터를 미리 가져와 HTML을 생성한 후 클라이언트에 전달하기 때문에, 서버 컴포넌트가 waterfall 문제를 해결했다면 기존 SSR 방식으로도 해결할 수 있지 않을까 하는 생각이 들었습니다. <결과>위의 내용을 알아보기 위해 아래의 내용을 바탕으로 검색을 해봤지만, 확실한 대답을 찾지 못해 질문을 남겨봅니다.SSR 렌더링 방식에서 waterfall 문제가 발생하는 지의 여부SSR과 RSC의 차이
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
rafce 기본 템플릿 적용 및 폴더 파일 대소문자 관련 부분
기본 템플릿 생성 rafce 적용할 때 파일명 기준으로 객체 변수(NavBar) 생성 되는데 오타 때문에 삭제하고 재생성(Navbar)하면 처음 만들었던 이름 그대로 유지되는 습성이 있는데 삭제 하고 다시 만들때 바로 적용 되도록 환경 설정 따로 하는게 있는지 궁금합니다. Components 및 Page 폴더 파일 대소문자 구분 생성 이유가 따로 있는지 아니면 개인적인 개발 습관인지 답변 부탁드립니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
nextjs 15버전 사용 가능할까요?
영상하고 15버전하고 차이가 좀 있는거 같습니다
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[9.2 투두리스트 업그레이드] id undefined
안녕하세요. 투두리스트 업그레이드 중 "UPDATE" 에서 질문있습니다.업그레이드 하며 체크박스를 선택했을 때 다음과 같은 오류가 발생합니다.업그레이드 이전까지는 잘 돌아가서 업그레이드 하며 오타 문제가 아닐까 하는데 원인을 찾기가 어려워 질문 드립니다.. ㅜ APP.jsx 와 List.jsx 코드 올려드립니다.- APP.jsximport "./App.css"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; import { useState, useRef, useReducer } from "react"; const mockData = [ { id: 0, isDone: false, content: "Study React.js", date: new Date().getTime(), }, { id: 1, isDone: false, content: "do laundry", date: new Date().getTime(), }, { id: 2, isDone: false, content: "wanna go home", date: new Date().getTime(), }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => { item.id === action.targetId ? { ...item, isDone: !item.isDone } : item; }); case "DELETE": return state.filter((item) => item.id !== action.targetId); default: return state; } } function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = (content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }; const onUpdate = (targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }; const onDelete = (targetId) => { dispatch({ type: "DELETE", targetId: targetId, }); }; return ( <div className="App"> <Header /> <Editor onCreate={onCreate} /> <List todos={todos} onUpdate={onUpdate} onDelete={onDelete} /> </div> ); } export default App; List.jsx import "./List.css"; import TodoItem from "./TodoItem"; import { useState } from "react"; const List = ({ todos, onUpdate, onDelete }) => { const [search, setSearch] = useState(""); const onChangeSearch = (e) => { setSearch(e.target.value); }; const getFilteredData = () => { if (search === "") { return todos; } return todos.filter((todo) => todo.content.toLowerCase().includes(search.toLowerCase()) ); }; const filteredTodos = getFilteredData(); return ( <div className="List"> <h4>Todo List 🎈</h4> <input value={search} onChange={onChangeSearch} placeholder="검색어를 입력하세요" /> <div className="todos_wrapper"> {filteredTodos.map((todo) => { return ( <TodoItem onDelete={onDelete} onUpdate={onUpdate} key={todo.id} {...todo} /> ); })} </div> </div> ); }; export default List;
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
ISR on-demand 사용해서 전체 새로고침 없이 새로운 추천도서 받아오기
안녕하세요!ISR on-demand 활용해서 인덱스 페이지에서 전체 페이지 새로고침 없이"새로 추천 받기" 버튼을 눌렀을 때 추천 도서(recoBooks)만 새롭게 받아오도록 구현하고 싶습니다.getStaticProps를 통해 전달된 recoBooks가 useState의 초기값으로 들어갈 때,해당 데이터도 여전히 빌드 타임에 fetch되어 정적 HTML과 함께 포함되는지 궁금합니다.개발자 도구를 보면 정적으로 렌더링되는 것 같은데, useState로 상태를 만들었기 때문에 초기 렌더링이 정적인지 아니면 클라이언트 측에서 동적으로 할당되는건지 헷갈립니다.// CSS Module import SearchableLayout from '@/components/searchable-layout'; import style from './index.module.css'; import { ReactNode, useState } from 'react'; import BookItem from '@/components/book-item'; import { InferGetStaticPropsType } from 'next'; import fetchBooks from '@/lib/fetch-books'; import fetchRandomBooks from '@/lib/fetch-random-books'; export const getStaticProps = async () => { console.log('인덱스 페이지'); const [allBooks, recoBooks] = await Promise.all([ // 병렬로 함수 호출하기 fetchBooks(), // fetchRandomBooks(), ]); return { props: { allBooks, recoBooks, }, }; }; export default function Home({ allBooks, recoBooks }: InferGetStaticPropsType<typeof getStaticProps>) { const [recommended, setRecommended] = useState(recoBooks); const revalidate = async () => { try { const response = await fetch('/api/revalidate'); const result = await response.json(); // console.log(result); if (result.revalidate) { //페이지 갱신이 됐을 때 const rebooks = await fetchRandomBooks(); setRecommended(rebooks); } else { //페이지 경신 안됐을 때 } } catch (err) { //에러처리 console.error(err); } }; // console.log(recoBooks); return ( <div className={style.container}> <section> <h3>지금 추천하는 도서</h3> <button onClick={revalidate}>새로 추천 받기</button> {recommended.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> <section> <h3>등록된 모든 도서</h3> {allBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> </div> ); } Home.getLayout = (page: ReactNode) => { return <SearchableLayout>{page}</SearchableLayout>; };
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
2.7 글로벌 레이아웃 질문
강사님 영상대로 했는데 왜 저부분이 왜 적용이 안되는걸까요 혹 index.module.css 해도 배경을 하얀색으로 해야 하나요 강의 내용에는 별 말씀이 없으셨는데
-
미해결한 입 크기로 잘라먹는 Next.js(v15)
데모사이트 기능이 동작 오류
알려주신 완성본(완성본) 데모사이트 링크https://inf.run/fBsfH가서 경험해보려고 가니 검색기능도 안되고 상품 클릭해도 정보가 안나오네요
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
해결은 못했습니다만...
거듭된 질문에 한결같이 답변을 해주셔서 감사합니다.교재 9장까지는 문제없이 잘 진행되어서, 10장 부터 새로 작성한, 엔티티, DTO, Repository 싹 다 지우니, 앞서 작성한 테스트는 그나마 제대로 실행이 되는군요. 다시 엔티티부터 하나씩 깔면서, 동시에 테스트를 다시 진행해봐야 겠습니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
화면 새로고침 문의
안녕하세요 제로초님 !강의보고 따라해보고 있는데 화면 새로고침할때깜빡거리는걸 없애고 싶은데 getServerSideProps을 사용해서 상태값을 변경해주면 가능한걸까요??
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
testInsertByProduct() 와 관련된 에노테이션은 교재하고 똑같이 했고, log.info만 남기고 나머지 코드는 다 지웠는데도, 여전히 Test Failed가 뜨고, testInsertProduct() 메소드로 진입조차 안되는 군요.
testInsertByProduct() 와 관련된 에노테이션은 교재하고 똑같이 했고, log.info만 남기고 나머지 코드는 다 지웠는데도, 여전히 Test Failed가 뜨고, testInsertProduct() 메소드로 진입조차 안되는 군요.
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
CartRepositoryTests.java 에서 테스트 실행을 시켰더니 tests failed 가 뜹니다.
교재를 똑같이 따라왔는데, testInsertByProduct()에서 tests failed 메시지가 뜨는 군요.서버코드는 cookie_00@naver.com으로 첨부했습니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
선언되었지만 아직 사용하지 않은 함수에 대한 빨간줄
defined but never used.eslint@typescript-eslint/no-unused-vars 만들고 아직 다른 곳에서 import 하거나 사용하지 않아서 빨간줄이 뜹니다. 문제는 없으나 헷갈리기도 하고 ,, 강의에서 강사님은 빨간줄이 안뜨는데ESLint 설정을 따로 하신 걸까요? 헷갈리니 설정을 하는 것을 추천하시나요?
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
testInsertByProduct()에 아예 들어가지를 못하네요...
교재 9장까지 잘 따라왔습니다.10장 장바구니 api 만들기에 들어와서 CartRepository 만들고CartItemRepository를 만들고CartRepositoryTests를 만들었습니다.그리고, testInsertByProduct()를 테스트 하는데,Tests failed 가 나왔습니다.코드 몇 군데에서 로그를 확인해봤는데, configuration 부분은 잘 통과했는데, testInsertByProduct() 메소드로는 진입조차 못하고 있습니다.실습환경은 "인텔리제이" 입니다. 아래 캡쳐는, 에러가 시작되는 경계로 생각되는 부분입니다.질문 내용이, 답변 주시기에 좀 부족하다면, 더 필요한 코드 부분이나, 에러로그를 보충해서 다시 질문에 올리도록 하겠습니다.
-
해결됨아바타 커뮤니티앱 만들기 (React Native Expo)
useGetMe 함수 관련 질문
❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) useGetMe 함수 만드실 때, useQuery 옵션으로 onSuccess, onError 사용 안하시고, useEffect로 사이드 이펙트를 처리하시는 이유가 궁금합니다!
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
폰트 적용 관련 오류
한번씩 폰트 적용이 안되는데새로고침을 하면 적용이 됩니다. 혹시 관련해서 해결 방법이 정리된게 있을까 해서 글 올려봅니다!
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
싸이월드: Background 이미지 반복
싸이월드 백그라운드를 만드는 중인데 이미지가 이렇게 반복되는건 어떻게 고치나요? AI로 고치려고 해도 안고쳐지네요..감사합니다