묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
iOS오류 pod install오류
pod install 이든 npc pod install이든 계속 저 installing boost쪽에서 에러가 뜹니다 윈도우 pc에서 만들던 프로젝트 맥북을 구매하게 되어 맥북으로 하고있는데 안드로이드 에뮬레이터는 npx react-native run-android를 이용해 동일하게 잘 되는데 ios는 되지 않아 막막합니다 어떻게 해결해야 할까요??npx react-native run-ios 를 했을시 나오는 오류입니다 도와주시면 감사하겠습니다! https://github.com/boostorg/boost/issues/843#issuecomment-1872943124이것도 참고해봣지만 해결되지않았습니다 ios가 하고싶은데 너무 절실해서 부탁드릴게요 ㅠㅠ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
✖ Installing CocoaPods dependencies (this may take a few minutes) error bundler: failed to load command: pod
기존에 윈도우pc로 하다가 그램 노트북으로 작업하려고하니 돌아가질 않아 맥북프로를 사서 세팅을 다시하고 프로젝트를 만들어보고있는데 5시간넘게 저기서 해결이 되지않아 너무 답답해 해결방법을 알고싶습니다.또한 기존에 윈도우pc에서 만들던 프로젝트들은 윈도우이기 때문에 강사님이 중간중간에 pod install하라고하는 이런것들을 하지않았는데 혹시 만들던 프로젝트는 사용하지 못하는 것인가요??.. ㅠㅠ도무지 검색하고 찾아봐도 해결이 되지않아 꼭 도와주시면 감사하겠습니다버전 정보입니다.제발 도와주시면 감사하겠습니다 ㅠㅠ
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
빨간 밑줄 질문이요..
위와 같이 해당 변수나 값을 선언한거를 사용하지 않으면 이렇게 빨간 밑줄이 생기는데요. 이거 없앨수 없나요? 거슬리네요..ㅠ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
typeORM synchronize false는 언제하나요?
TypeOrmModule.forRoot({ synchronize: true, }), 제가 놓친건진 모르겠는데 실제 서버 배포할땐 false로 바꿔주고 배포해야되는거죠?
-
미해결Next + React Query로 SNS 서비스 만들기
질문
쌤하트나 리포스트를 누를 때 마다가끔씩TypeError: data.pages.map is not a function 이런 에러 PostRecommend 섹션에 뜨는데 이런 경우가 종종 발생할까요 ?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[3-2] TextInput 작동이 안됩니다
안녕하세요!천천히 따라서 코딩 하고 있었는데, 잘 따라 한것 같은데 InputField 설정 이후에 LoginScreen에서 placeholder 가 작동하지 않아서보니 클릭해도 키보드가 열리지 않더라고요InputField.tsximport React from 'react'; import { Dimensions, StyleSheet, Text, TextInput, TextInputProps, View, } from 'react-native'; import {colors} from '../constants'; interface InputFieldProps extends TextInputProps { disabled?: boolean; error?: string; } const deviceHeight = Dimensions.get('screen').height; function InputField({disabled = false, error, ...props}: InputFieldProps) { return ( <View style={[ styles.container, disabled && styles.disabled, Boolean(error) && styles.inputError, ]}> <TextInput editable={!disabled} placeholderTextColor={colors.GRAY_500} style={[styles.input, disabled && styles.disabled]} autoCapitalize="none" spellCheck={false} autoCorrect={false} {...props} /> {Boolean(error) && <Text style={styles.error}>{error}</Text>} </View> ); } const styles = StyleSheet.create({ container: { borderWidth: 1, borderColor: colors.GRAY_200, padding: deviceHeight > 700 ? 15 : 10, }, input: { fontSize: 16, color: colors.BLACK, padding: 0, }, disabled: { backgroundColor: colors.GRAY_200, color: colors.GRAY_700, }, inputError: { borderWidth: 1, borderColor: colors.RED_300, }, error: { color: colors.RED_500, fontSize: 12, paddingTop: 5, }, }); export default InputField; LoginScreen.tsximport React from 'react'; import {SafeAreaView, StyleSheet, View} from 'react-native'; import InputField from '../../components/InputField'; function LoginScreen() { return ( <SafeAreaView style={styles.container}> <View style={styles.inputContainer}> <InputField placeholder="이메일" error={'이메일을 입력해주세요.'} /> <InputField placeholder="비밀번호" /> </View> </SafeAreaView> ); } const styles = StyleSheet.create({ inputContainer: { flex: 1, margin: 30, }, container: { gap: 20, }, }); export default LoginScreen; color.tsconst colors = { WHITE: '#ffff', PINK_500: '#BF5C79', PINK_700: '#C63B64', RED_300: '#FFB4B4', RED_500: '#FF5F5F', GRAY_200: '#E7E7E7', GRAY_500: '#E8E8E8', GRAY_700: '#E575757', BLACK: '#000', }; export {colors}; 문제화면 몇번을 다시보고 input field를 다시 만들어서 해봐도 안되서 도움 요청드립니다 ㅜ
-
미해결Next + React Query로 SNS 서비스 만들기
재게시 관련 궁금한 사항
재게시를 클릭하면 Reposts 부분과 count부분을 수정하고 unShift함수를 사용해서 pages[0]에 글정보를 추가하게 되는데 재게시를 클릭할 때 마다 pages[0]에 {user:{},Original:{}} 부분이 계속 추가되는게 맞나요 ?인피니트쿼리는 한 페이지당 최대 10개의 객체를 받아오는 것으로 알고있는데 인피니트 쿼리랑은 상관 없는건가요 ?
-
미해결Next + React Query로 SNS 서비스 만들기
app/api/auth/[...nextauth].ts 는 next-auth를 사용하려면 무조건 저 경로여야할까요??
안녕하세요! 강의 잘 듣고 있습니다!다름이 아니라, 수강 중 여쭤볼게 있어 질문 드립니다..!5:44초쯤에 app/api/auth/[...nextauth].ts 의 이 경로 폴더명들은 next-auth를 사용하려면 무조건 저 경로여야할까요?예를들어, app/api/login/[...nextauth].ts 등 다른 경로는 불가능한가요?꼭 /api/auth/[...nextauth]의 경로를 바라보도록 설계해야 하는지 궁금합니다!
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
시뮬레이터는 열리는데 앱 실행이 안되고 그냥 핸드폰이 켜집니다
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 안녕하세요!프로젝트 생성하고 yarn start -> i 해서 실행을 했는데, 강의 상에는 시뮬레이터가 켜지면서 자동으로 맛집 앱이 켜지게 되는데, 저는 그냥 하나의 아이폰 핸드폰 화면만 보여집니다. m1 macnode 22.13react-native 0.76.0
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
조건부 렌더링에서 로직 처리 차이
export default function CourseItem({title, description, thumbnail, isFavorite}) { let defaultIconTag = "/img/heart/heart-icon.svg" if (isFavorite) { defaultIconTag = "/img/heart/heart-fill-icon.svg" } return ( <article className="course"> <img className="course__img" src={thumbnail} alt="강의 이미지"/> <div className="course__body"> <div className="course__title">{title}</div> <div className="course__description">{description}</div> </div> <div className="course__icons"> <button className="btn"> <img className="icon-heart" src={defaultIconTag} /> </button> </div> </article> ); }저는 기존 CourseItem메서드 내에서 변수를 생성해서 만들었는데 강의에서는 새로운 메서드를 생성해서 진행하더라고요.메서드를 따로 생성해서 버튼 태그랑 묶어서 같이 넘기신 이유가 있나요? 현업에서 어떤 방식을 더 선호할까요?
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[3-5] ref 오류
에뮬 실행시 정상적으로 작동은 되나 저 에러가 꼐속 떠있어서 이유가 궁금해 여쭤봅니다!
-
미해결Next + React Query로 SNS 서비스 만들기
params 질문
[username] 슬러그 / 즉 유저 프로필 페이지에서 params값을 받아서 유저정보를 불러오는데 params의 값을 출력해보니 값이 나오긴하는데 인코딩된 값이 나옵니다 ㅠㅠencodeURIComponent 함수를 사용한 적이 없는데 왜 이렇게 나오는지 궁금합니다
-
미해결Next + React Query로 SNS 서비스 만들기
트렌드섹션 질문
회원가입 후 바로 로그인 된 상태에서 home으로 가면 트렌드를 가져올 수 없다고 뜨는데 혹시 로그인 후 로그아웃버튼이 뜨지 않았던 상황과 비슷한 상황인가요 ? 로그아웃 버튼처럼 prop으로 session정보를 넘겨줘야 하는건지 궁금합니다
-
미해결Next + React Query로 SNS 서비스 만들기
middleware 관련 질문입니다
해당 코드를 수정했던 강의가 어디였는지 기억이 안나 여기에 글 남깁니다.아래는 auth.ts의 코드이고 callbacks 부분을 작성하셨다가 나중에 없애는 걸로 수정하셨는데 이 코드의 역할을 middleware에서 대신한다고 생각하면 될까요 ? export async function middleware() { const session = await auth(); if (!session) { return NextResponse.redirect('http://localhost:3000/i/flow/login'); } } // callbacks: { // async authorized({ request, auth }) { // if (!auth) { // return NextResponse.redirect('http://localhost:3000/i/flow/login'); // } // return true; // }, // },
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
newPost 'unknown' 형식에 'id' 속성이 없습니다.ts(2339)
안녕하세요 강사님 강의수강 중에 궁금한 점이 있어 문의드립니다. 강사님 PC에서는 해당 오류가 안나는데 저 소스에선 해당 에러가 뜨네요. 1.update response = newPost.id관련해서 타입을 지정하지 않는건 의도 한부분인지 궁금합니다. 2.eslint 설정이 안뜨는 rule 설정이 궁금합니다. 'unknown' 형식에 'id' 속성이 없습니다.ts(2339) ❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
axios post 사용할때 페이지 새로고침 문제
Home.jsx이렇게 하고 import { useEffect, useState } from 'react'; import HomeDataLength from '../components/HomeDataLength.jsx'; import HomeSearch from '../components/HomeSearch.jsx'; import CanvasItemList from '../components/CanvasItemList.jsx'; import SearchBar from '../components/SearchBar.jsx'; import GridFlexBTN from '../components/GridFlexBTN.jsx'; import { deleteHome, createHome, getHome } from '../api/home.js'; import { v4 as uuid } from 'uuid'; import dayjs from 'dayjs'; export default function Home() { const [isGrid, setIsGrid] = useState(true); const [search, setSearch] = useState(''); const [data, setData] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(false); useEffect(() => { const api = async () => { setIsLoading(true); setError(false); try { const response = await getHome(''); setData(response.data); } catch (err) { setError(err); } finally { setIsLoading(false); } }; api(); }, []); const [isLoadingCreate, setIsLoadingCreate] = useState(false); const [createError, setCreateError] = useState(false); // 등록버튼 누르면 새로운 데이터 저장 const handleNewCreate = async () => { // setIsLoadingCreate(true); // setCreateError(false); // try { const id = uuid(); const newCreate = { id, date: dayjs().format('YYYY-MM-DD HH:mm:ss'), text: `${id.substring(0, 4)}-테스트`, category: '테스트', }; await createHome(newCreate); console.log(123); // const res = await getHome(); // setData(res.data); // } catch (err) { // setCreateError(err); // console.log(createError, 'createError'); // } finally { // setIsLoadingCreate(false); // } }; const handleText = text => { const searchData = data.filter(d => d.text.toLowerCase().includes(text.toLowerCase()), ); if (searchData.length === 0) { setSearch(null); } else { setSearch(searchData); } }; const handleDelete = async id => { // const newData = data.filter(d => d.id !== id); // setData(newData); await deleteHome(id); }; return ( <> <> <div className="flex flex-col md:flex-row justify-between items-center"> <button className="hover:bg-blue-400 bg-blue-500 text-white rounded-md text-bold p-3" onClick={handleNewCreate} > 등록하기 </button> {isLoadingCreate && <p>등록중</p>} {createError && <p>{createError}</p>} <SearchBar handleText={handleText} /> <GridFlexBTN setIsGrid={setIsGrid} isGrid={isGrid} /> </div> <HomeDataLength data={data} error={error} isLoading={isLoading} /> <HomeSearch search={search} /> {!isLoading && !error && ( <CanvasItemList data={data || []} search={search} isGrid={isGrid} handleDelete={handleDelete} /> )} </> </> ); } home.js 파일은 아래와 같은 상태이면 import { home } from './http'; // 목록 조회 export const getHome = () => { return home.get('/'); }; // 등록 export const createHome = newCreate => { try { console.log('ㅅㅣ작'); } catch (error) { console.log('에러'); } finally { console.log('종료'); } // debugger; return home.post('/', newCreate); }; // 수정 // 삭제 export const deleteHome = id => { return home.post('/', id); }; db는 server-json을 사용하고 있습니다.그런데 get 요청을 할때는 잘 작동하는데post로 등록하거나 삭제할때는 db에 정상 등록, 삭제되는데 화면이 새로고침이 되버리는 상태입니다. Home.jsx 화면이 리렌더링이 되도록 하고싶은데 새로고침은 왜 그런지 모르겠습니다. postman으로도 post로 db에 저장했는데 리액트 화면이 자동으로 새로고침 되버립니다. 구글링도 해봤는데 해결이 안되서 문의드립니다.혹시나 해서 db.json이 변경되면 화면도 변경될까 싶어서 을 db.json --watch로만 해보고 --watch도 없애봤는데 안됩니다. const handleNewCreate = async () => { console.log('시작1'); const id = uuid(); const newCreate = { id, date: dayjs().format('YYYY-MM-DD HH:mm:ss'), text: `${id.substring(0, 4)}-테스트`, category: '테스트', }; const data = await createHome(newCreate); console.log(data, 'data'); console.log('시작2'); debugger; };debugger를 사용했을때이렇게 데이터 나오는데 디버거 끄는 순간 바로 화면이 새로고침 되고 있습니다. 그리고 콘솔창도 새창으로 이전 내역이 다 사라지는 상태입니다.
-
미해결Next + React Query로 SNS 서비스 만들기
서버 액션에서 msw의 핸들러를 호출하는 이유?
제가 알기로는 서버 액션은 현재 url, 강의 기준 /i/flow/signup으로 네트워크 요청이 일어나는거로 알고 있는데 msw의 핸들러로 fetch를 하신 이유가 궁금합니다. 작동하는 코드인가요?const onSubmit = async (formData: FormData) => { "use server"; let shouldRedirect = false; try { const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: "post", credentials: "include", body: formData, }); console.log(res.status); console.log(await res.json()); shouldRedirect = true; } catch (error) { console.error(error); } if (shouldRedirect) { redirect("/home"); } console.log("실행됨"); };위 코드는 SignupModal에서 msw의 핸들러로 form 제출 요청을 보내는 코드이고,http.post(`${baseUrl}/api/users`, () => { console.log("로그인 성공"); return HttpResponse.json({ message: "msw 성공", }); }),이 코드는 핸들러 코드입니다. 요청 url인 http://localhost:3000/api/users로 폼 제출이 정상적으로 이루어지는지 궁금합니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
react-native-safe-area-context & react-native-screens 에러
이러한 오류가 계속뜨는데 다른 질문에서 버전을 바꾸라고햇을떄 react-native-safe-area-context랑 react-native-screens 이것들의 버전을 바꾸는 방법을 모르겠습니다오늘 몇시간넘게 해결이 안돼 너무 답답해서 도와주시면 감사하겠습니다.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[2-3]에뮬레이터 실행 오류
질문을 계속해서 죄송합니다네비게이션 설치후 로그인스크린 구현후 에뮬레이터를 실행하려고하니 전까지 잘되던데 계속 에러가 뜨면서 실행이 안됩니다 ㅠㅠ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
[2-0] front파일로 옮길떄 에러
말씀드린대로 front파일을 만들고 그 안에 전부 프로그램을 옮겻을떄Parsing error: No Babel config file detected for C:\Users\user\Documents\react native-study\MatzipApp\front\index.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.이러한 에러가 거의 모든 파일에 계속 나는데 왜그러는 걸까요.. ㅠㅠ