173만명의 커뮤니티!! 함께 토론해봐요.
미해결
맛집 지도앱 만들기 (React Native & NestJS)
TypeOrmModule.forRoot({ synchronize: true, }), 제가 놓친건진 모르겠는데 실제 서버 배포할땐 false로 바꿔주고 배포해야되는거죠?
미해결
Next + React Query로 SNS 서비스 만들기
쌤 하트나 리포스트를 누를 때 마다 가끔씩 TypeError: data.pages.map is not a function 이런 에러 PostRecommend 섹션에 뜨는데 이런 경우가 종종 발생할까요 ?
미해결
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요! 천천히 따라서 코딩 하고 있었는데, 잘 따라 한것 같은데 InputField 설정 이후에 LoginScreen에서 placeholder 가 작동하지 않아서보니 클릭해도 키보드가 열리지 않더라고요 InputField.tsx import 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.tsx import 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.ts const 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 서비스 만들기
안녕하세요! 강의 잘 듣고 있습니다! 다름이 아니라, 수강 중 여쭤볼게 있어 질문 드립니다..! 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 mac node 22.13 react-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)
에뮬 실행시 정상적으로 작동은 되나 저 에러가 꼐속 떠있어서 이유가 궁금해 여쭤봅니다!
미해결
Next + React Query로 SNS 서비스 만들기
[username] 슬러그 / 즉 유저 프로필 페이지에서 params값을 받아서 유저정보를 불러오는데 params의 값을 출력해보니 값이 나오긴하는데 인코딩된 값이 나옵니다 ㅠㅠ encodeURIComponent 함수를 사용한 적이 없는데 왜 이렇게 나오는지 궁금합니다
미해결
Next + React Query로 SNS 서비스 만들기
회원가입 후 바로 로그인 된 상태에서 home으로 가면 트렌드를 가져올 수 없다고 뜨는데 혹시 로그인 후 로그아웃버튼이 뜨지 않았던 상황과 비슷한 상황인가요 ? 로그아웃 버튼처럼 prop으로 session정보를 넘겨줘야 하는건지 궁금합니다
미해결
Next + React Query로 SNS 서비스 만들기
해당 코드를 수정했던 강의가 어디였는지 기억이 안나 여기에 글 남깁니다. 아래는 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)
안녕하세요 강사님 강의수강 중에 궁금한 점이 있어 문의드립니다. 강사님 PC에서는 해당 오류가 안나는데 저 소스에선 해당 에러가 뜨네요. 1.update response = newPost.id 관련해서 타입을 지정하지 않는건 의도 한부분인지 궁금합니다. 2.eslint 설정이 안뜨는 rule 설정이 궁금합니다. 'unknown' 형식에 'id' 속성이 없습니다.ts(2339) ❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
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 서비스 만들기
제가 알기로는 서버 액션은 현재 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 & NestJS)
질문을 계속해서 죄송합니다 네비게이션 설치후 로그인스크린 구현후 에뮬레이터를 실행하려고하니 전까지 잘되던데 계속 에러가 뜨면서 실행이 안됩니다 ㅠㅠ
미해결
맛집 지도앱 만들기 (React Native & NestJS)
말씀드린대로 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. 이러한 에러가 거의 모든 파일에 계속 나는데 왜그러는 걸까요.. ㅠ ㅠ
미해결
맛집 지도앱 만들기 (React Native & NestJS)
선생님 준비중인 강의가 혹시 있으실까요? 선생님같은분이 강의를 안한다는건 정말 재능 낭비인것 같습니다. 만족도가 이렇게 높은 강의는 첨음이거든요 그래서 혹시 다른 준비중인 강의가 있는지 묻고싶습니다. 계속 기다리고 있어서 두통이 생깁니다. ㅎㅎ 개인적으로는 next 실무강의를 해주시면 좋겠지만 ㅎㅎ
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요 현재 맥북을 사용중이고 강의영상처럼 iTerm으로 명령어를 작성해서 폴더를 만들고 비주얼스튜디오까지 열기부분에서 저는 외장하드를 연결해서 배경화면에 있는 외장하드폴더 안에 짐코딩강의라는 폴더 안에 react-test 라는 폴더를 만들어 사용할려고 하는데 이렇게 되면 명령어를 어떻게 작성하면 되는지 궁금합니다.
미해결
맛집 지도앱 만들기 (React Native & NestJS)
윈도우-안드로이드로 수강하는 중인데 이전 강의까지 잘 되다가 navigation 설치하고나서 이런 오류가 떠서 구글링도 해봤는데 해결이 잘 안되네요 (yarn이 잘 안돼서 npm 설치과정 따라서 설치했습니다.) 이런 오류가 뜨길래 구글링을 통해 android { ... compileOptions { sourceCompatibility JavaVersion.VERSION_11 targetCompatibility JavaVersion.VERSION_11 } kotlinOptions { jvmTarget = "11" } } 이렇게 해보라길래 해봐도 오류가 뜨네요 ㅠㅠ node -v : v20.18.1 java --version : openjdk 11.0.25
