묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결iOS/Android 앱 개발을 위한 실전 React Native - Basic
안드로이드 에뮬레이터 에러...
react-native run-android info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.(node:18259) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency(Use node --trace-warnings ... to show where the warning was created)Jetifier found 866 file(s) to forward-jetify. Using 12 workers...info Starting JS server...info Launching emulator...info Successfully launched emulator.info Installing the app...FAILURE: Build failed with an exception.* What went wrong:Could not initialize class org.codehaus.groovy.runtime.InvokerHelper> Exception java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.reflection.ReflectionCache [in thread "Daemon worker"]* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 255mserror Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081FAILURE: Build failed with an exception.* What went wrong:Could not initialize class org.codehaus.groovy.runtime.InvokerHelper> Exception java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.reflection.ReflectionCache [in thread "Daemon worker"]* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 255ms at checkExecSyncError (node:child_process:885:11) at execFileSync (node:child_process:921:15) at runOnAllDevices (/Users/heejinroh/Desktop/희진/react-native/my_first_app/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:94:39) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Command.handleAction (/Users/heejinroh/Desktop/희진/react-native/my_first_app/node_modules/@react-native-community/cli/build/index.js:182:9)
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드 질문있습니다.
<DiaryItem key={it.id} {...it} />스프레드 연산자는 이해가 가는데 key={it.id} 옆에 바로 붙혀서 state객체를 넣을수 있는건가요 ?? 이건 어떤 문법일까요 <DiaryItem key={it.id} {...it} /><DiaryItem key={it.id} diary={it} />...을 써서 넣는거랑 안쓰고 앞에 diary = {it}으로 명시하고 넣는거랑 어떤차이가 있을까요 ? 전 이렇게 바꿨는데 ..이해가 안되서import DiaryItem from "./DiaryItem"; const DiaryList = ({diaryList})=> { console.log(diaryList); return ( <div className="DiaryList"> <h2>일기리스트</h2> <h4>{diaryList.length}개의 일기가 있습니다</h4> <div> {diaryList.map((it) => ( <DiaryItem key={it.id} diary={it} /> ))} </div> </div> ); }; DiaryList.defaultProps = { diaryList : [], } export default DiaryList;
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
axios 이용해서 백엔드로 이미지 전송 중 새로고침
안녕하세요 강사님.현재 axios 이용해서 백엔드로 이미지 전송하기 강의 수강 중npm i axios로 Axios 모듈 설치 후다음과 같이 코드 작성, npm run start 후 제출 버튼 누를 때 계속하여 새로고침이 됩니다.. ㅠ 원래라면 preventDefault로 새로고침이 되지 않아야 할텐데계속해서 새로고침이 되는 문제입니다. 혹시 문제가 뭘까요? ㅠ
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
스터디 관련 질문
안녕하세요! 해당 강의를 통해 프론트엔드 기술을 학습 중인 취준생입니다. 본 학습 자료의 저작권은 코드캠프에 있어 무단 도용, 배포, 복제를 금지한다고 적혀있는데 그럼 혹시 개인 블로그에 내용을 공부한 내용을 정리하는 것이 문제가 되는 사항인지 여쭤봅니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
이 프로젝트를 배포해서 실서비스로 사용할 수 있나요?
새로운 기능을 붙여서 배포해 서비스하려고 합니다.예외처리 같은 것을 추가해서 배포해도 문제가 없을까요?
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
파이참 유료버전으로 비spa방식 인스타그램 클론 코딩 따라하는 경우
안녕하세요좋은 강의 항상 감사히 잘 듣고 있습니다!혹시 파이참 유료버전으로 비spa방식 인스타그램 클론 코딩 따라하는 경우이 수업 대신섹션 12 / 보너스: 파이썬/장고 개발환경 구축하기 (2022년 버전)을 보고 따라하면 되는걸까요? 아니면 파이참 유료 버전에서는 자동으로 세팅이 되는걸까요? 앞에서 쭉 파이참으로 실습하다가 혼란이 와서 질문드립니다.(왕초보 수강생이라 양해부탁드려요..ㅎㅎ) 즐거운 명절 보내세요. 감사합니다..^^(파이참 쿠폰 감사합니다!)
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Server Cannot be Reached
vscode에서 계속 오류 떠서 playground에서 보내보았는데 server cannot be reached가 계속 뜨면서docs도 무한 로딩중이에요 ㅠ
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
firebase 초기화 오류
firebase에 이메일로 회원가입 기능 구현 강의를 듣고 있는데이메일과 이름 비밀번호를 입력하고 제출을 누르면 Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app). 이런 오류 코드가 나오면서 firebase에 저장이 되지 않는데 뭐가 문제일까요
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
명령 프롬프트에서 conda 명령어에 오류가 나서 질문드립니다.
안녕하세요? 강의를 수강하며 파이썬을 설치하려고 하는데 오류가 나서 질문드립니다.아나콘다 최신 버전을 설치하고 강의에서 알려주신 대로 명령 프롬프트에서 conda --version 명령어를 실행하였는데 '내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다'라는 오류가 납니다.검색해 보았더니 환경변수를 추가하라고 해서 추가도 해봤는데 계속 오류가 납니다. Anaconda Prompt에서는 실행이 되는 것 같은데, 왜 그런지 궁금해서 질문드립니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요, 리덕스를 통해서 좋아요 기능구현을 해보고 있는데 디스패치와 충돌이 나는것 같습니다.
안녕하세요, 좋은 강의 감사드립니다. 제가 좋아요 기능구현을 해보고 있는데, 클릭이 되면 state(clicked)를 통해 true로 만들어서 빨강색으로 만들고 1를 추가시키고 다시 클릭하면 false가 되면서 검게 되고 1을 감소하게 하는 기능을 구현하려고 하는데요. 각각 빨/검 1추가시키기는 되는데 둘이 합치려니까 1을 올리면서 리렌더링이 되고 clicked라는 스테이트가 바로 false로 초기화되버리는것 같습니다. 혹시 방법이있을까요? 뭐라고 검색해야 할지 감이 잘안잡혀서 질문남깁니다. const Heart = ({ pageId, id, currentIndex, postId, }) => { const dispatch = useDispatch(); const { coursePosts } = useSelector((state) => state.coursePost); const { clicked, setClicked } = useState(false); const heart = coursePosts[currentIndex].CourseReview[id].heart; const onClickHeart = () => { if (!clicked) { dispatch(coursePostActions.clickCourseReviewHeart({ pageId, postId })) } else { dispatch(coursePostActions.clickCourseReviewHeartAgain({ pageId, postId })) } setClicked(!clicked); } return ( <button type="button" onClick={onClickHeart} className={clicked === true ? styles.active : ""}> <FontAwesomeIcon icon={faHeart} /> <span>{heart}</span> </button> ); }; export default CourseReviewItems;const coursePostSlice = createSlice({ name: "coursePost", initialState, reducers: { clickCourseReviewHeart(state, action) { const postIndex = state.coursePosts.findIndex((v) => v.id === Number(action.payload.pageId)); const reviewIndex = state.coursePosts.findIndex((v) => v.id === action.payload.postId); state.coursePosts[postIndex].CourseReview[reviewIndex].heart += 1 }, clickCourseReviewHeartAgain(state, action) { const postIndex = state.coursePosts.findIndex((v) => v.id === Number(action.payload.pageId)); const reviewIndex = state.coursePosts.findIndex((v) => v.id === action.payload.postId); state.coursePosts[postIndex].CourseReview[reviewIndex].heart -= 1 } }
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
강좌 끝나고 댓글 수정 기능 만들어 보고 있습니다
{commentFormOpened && ( <div> {commentEditMode ? <CommentContent post={post} commentEditMode={commentEditMode} onClickUpdateComment={onClickUpdateComment} onCancelUpdateComment={onCancelUpdateComment} /> : ( <> <CommentForm post={post} /> <CommentContent post={post} commentEditMode={commentEditMode} onClickUpdateComment={onClickUpdateComment} onCancelUpdateComment={onCancelUpdateComment} /> </> ) } </div> )} //PostCard.js import React, { useCallback, useEffect, useState } from 'react'; import { Avatar, Comment, List, Input, Button, Popover } from 'antd'; import { useDispatch, useSelector } from 'react-redux'; import Link from 'next/link'; import PropTypes from 'prop-types'; import { EllipsisOutlined } from '@ant-design/icons'; import { UPDATE_COMMENT_REQUEST } from '../reducers/post'; const {TextArea} = Input; const CommentContent = ({ post, onCancelUpdateComment, commentEditMode, onClickUpdateComment }) => { const dispatch = useDispatch(); const id = useSelector((state) => state.user?.me.id); const { updateCommentLoading, updateCommentDone } = useSelector((state) => state.post); const [editText, setEditText] = useState(post.Comments.content); useEffect(() => { if (updateCommentDone) { onCancelUpdateComment(); } }, [updateCommentDone]); const onChangeCommentText = useCallback((e) => { setEditText(e.target.value); }, []); const onChangeComment = useCallback(() => { dispatch({ type: UPDATE_COMMENT_REQUEST, data: { PostId: post.id, CommentId: post.Comments.id, UserId: id, content: editText, }, }); }, [post, id, editText, post.Comments.id]); return ( <div> {commentEditMode ? ( <> <TextArea value={editText} onChange={onChangeCommentText} /> <Button.Group> <Button loading={updateCommentLoading} onClick={onChangeComment}>수정</Button> <Button type="danger" onClick={onCancelUpdateComment}>수정 취소</Button> </Button.Group> </> ) : <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={(item) => ( <li> <Comment actions={[<Popover key="more" content={ <Button.Group> {id && item.User.id === id ? ( <> <Button onClick={onClickUpdateComment}>수정</Button> <Button type="danger"> 삭제 </Button> </> ) : ( <Button>신고</Button> )} </Button.Group> } > <EllipsisOutlined /> </Popover>,]} author={item.User.nickname} avatar={ <Link href={`/user/${item.User.id}`}> <a><Avatar>{item.User.nickname[0]}</Avatar></a> </Link> } content={item.content} /> </li> )} /> } </div> ) } CommentContent.propTypes = { post: PropTypes.shape({ id: PropTypes.number.isRequired, Comments: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, })) }), onCancelUpdateComment: PropTypes.func.isRequired, onClickUpdateComment: PropTypes.func.isRequired, commentEditMode: PropTypes.bool }; CommentContent.defaultsProps = { commentEditMode: false, } export default CommentContent; //CommentContent.js case UPDATE_COMMENT_REQUEST: draft.updateCommentLoading = true; draft.updateCommentDone = false; draft.updateCommentError = null; break; case UPDATE_COMMENT_SUCCESS: draft.updateCommentLoading = false; draft.updateCommentDone = true; const post = draft.mainPosts.find((v) => v.id === action.data.PostId); post.Comments = post.Comments.find((v) => v.id === action.data.CommentId); post.Comments = post.Comments.find((v) => v.id === action.data.UserId); post.Comments.content = action.data.content; break; case UPDATE_COMMENT_FAILURE: draft.updateCommentLoading = false; draft.updateCommentError = action.error; break; //reducers/post.js function updateCommentAPI(data) { return axios.patch(`/post/${data.PostId}/comment`, data); } function* updateComment(action) { try { const result = yield call(updateCommentAPI, action.data); yield put({ type: UPDATE_COMMENT_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: UPDATE_COMMENT_FAILURE, error: err.response.data, }); } } // sagas/post.js router.patch('/:postId/comment', isLoggedIn, async (req, res, next) => { // PATCH post/2/comment try { await Comment.update({ content: req.body.content, }, { where: { PostId: req.params.postId, UserId: req.user.id, }, }); res.status(200).json({ PostId: parseInt(req.params.postId, 10), UserId: req.user.id, content: req.body.content, }); } catch (error) { console.error(error); next(error); } }); //routes/post.js이렇게 PostId, UserId, content가 보내지고, 실패가 뜨면서 새로고침을 하면 해당 글에 달았던 댓글들이 모두 다 "zzz"로 변경되어 있습니다. 그래서 CommentId를 보내줘야 될 거 같은데 여기서 막혀서 감이 도무지 잡히질 않습니다.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
수업 커리큘럼에 대한 질문입니다~!
안녕하세요^^수업을 듣다 보니 이전 수업들에서 만든 것을 버리고?새로 시작하는 거 같은데 맞을까요??혹시 이유가 무엇인지 설명해주실수 있을까요?갑자기 새로 처음부터 시작하는 이유를 몰라서 혼란스럽니다^^
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
ImageList 컴포넌트에서 업로드 한 사진을 리스트에서 바로 보기 위해 이 방법도 괜찮나요??
ImageList 컴포넌트 안에 있는 useEffect 종속배열 안에 images를 넣게 되면 images가 변경될 때마다 get을 호출해서 사진을 불러오기 때문에 결과적으로 사진을 업로드하면 리스트에 바로 보여지긴 하는데 안 좋은 방법인가요? 선생님께서 ContextAPI를 사용해 관리하는 것과 제가 생각한 방법의 장단점이 궁금해요 const [images, setImages] = useState([]); useEffect(() => { axios .get("/images") .then((res) => setImages(res.data)) .catch((err) => console.log(err)); }, [images]); // images 추가!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
data에 utility type으로 명시할 때 문제
섹션 8 강의 1:02:21 부분에서 문제가 발생했습니다 ㅠ utility type을 배우기 전 이렇게 해놨을 때는 문제가 없었습니다. 근데 강의처럼 바꾸어주니까 문제가 발생했고 IBoardWriteUIProps의 data 뒤에 물음표 때문인가해서 물음표를 주니까 container는 괜찮아 졌는데 presenter에서는 아직 defaultValue에 문제가 있다고 표시가됩니다.. data?.fetchBoard.writer -> data?.fetchBoard?.writer 이런식으로 바꿔줘도 defaultValue에 문제 발생... 분명 이렇게 타입명시를 잘 해줬는데 왜 강의처럼 안되는 건지 모르겠습니다..
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
"한줄씩 디버깅하는 법" 질문있습니다.
안녕하세요. 기존에는(강의 듣기전) visual studio 2019 버전 C++로 코드를 작성하고 F10, F5 등으로 한줄씩 디버깅을 진행했던 경험이 있습니다.그런데 프론트엔드쪽에 관심을 가지면서 해당 강의를 수강하고 있는데, visual studio code를 통해 html, css와 javascript 역시 F10과 F5를 활용하면 한줄씩 디버깅하면서 해당 변수에 어떠한 값이 할당되는지 알 수 있을까요?예를 들면 싸이월드 만들기 4탄에서 javascript를 통해 끝말잇기 게임을 만들었는데 해당 javascript의 동작 과정을 한줄씩 디버깅 해보고 싶습니다.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
python3 manage.py showmigrations 에서 오류
# python3 manage.py showmigrationsTraceback (most recent call last): File "manage.py", line 21, in <module> main() File "manage.py", line 17, in main execute_from_command_line(sys.argv) File "/usr/local/lib/python3.6/dist-packages/django/core/management/__init__.py", line 401, in execute_from_command_line utility.execute() File "/usr/local/lib/python3.6/dist-packages/django/core/management/__init__.py", line 395, in execute self.fetch_command(subcommand).run_from_argv(self.argv) File "/usr/local/lib/python3.6/dist-packages/django/core/management/base.py", line 328, in run_from_argv self.execute(*args, **cmd_options) File "/usr/local/lib/python3.6/dist-packages/django/core/management/base.py", line 369, in execute output = self.handle(*args, **options) File "/usr/local/lib/python3.6/dist-packages/django/core/management/commands/showmigrations.py", line 52, in handle return self.show_list(connection, options['app_label']) File "/usr/local/lib/python3.6/dist-packages/django/core/management/commands/showmigrations.py", line 71, in show_list loader = MigrationLoader(connection, ignore_no_migrations=True) File "/usr/local/lib/python3.6/dist-packages/django/db/migrations/loader.py", line 49, in init self.build_graph() File "/usr/local/lib/python3.6/dist-packages/django/db/migrations/loader.py", line 274, in build_graph raise exc File "/usr/local/lib/python3.6/dist-packages/django/db/migrations/loader.py", line 248, in build_graph self.graph.validate_consistency() File "/usr/local/lib/python3.6/dist-packages/django/db/migrations/graph.py", line 195, in validate_consistency [n.raise_error() for n in self.node_map.values() if isinstance(n, DummyNode)] File "/usr/local/lib/python3.6/dist-packages/django/db/migrations/graph.py", line 195, in <listcomp> [n.raise_error() for n in self.node_map.values() if isinstance(n, DummyNode)] File "/usr/local/lib/python3.6/dist-packages/django/db/migrations/graph.py", line 58, in raise_error raise NodeNotFoundError(self.error_message, self.key, origin=self.origin)django.db.migrations.exceptions.NodeNotFoundError: Migration accounts.0001_initial dependencies reference nonexistent parent node ('auth', '0012_alter_user_first_name_max_length')powershell에서 python3 manage.py showmigrations명령을 수행했을때 위와같은 오류가 뜨네요.. 뭐가 문제인걸까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn generate 실행시 YAML Error 발생하는 분들!
참고 - https://stackoverflow.com/questions/19975954/a-yaml-file-cannot-contain-tabs-as-indentationcodegen.yaml 파일에서 들여쓰기를 모두 지우고 띄어쓰기(space 키) 2번씩으로 바꿔주시면 해결됩니다!(plugins와 config는 띄어쓰기 4번, - typescript와 typesPrefix: I 는 띄어쓰기 6번, 이런식으로)
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
개정 버전은 언제 업로드 예정이실까요?
우선 수업 재미나게 잘 듣고 있습니다.공지에서 개정 버전을 새로 업로드 하신다는 글을 봤는데 언제 업로드 예정인지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
@graphql-codegen/cli 설치시 EPERM: operation not permitted 에러나시는 분들!
섹션8 - graphql-codegen 설치 및 실습과 기타 타입 영상시간 0:18:13 구간에서 yarn add --dev @graphql-codegen/cli 설치 시 에러가 날 경우 해당 프로젝트의 node_modules 를 삭제yarn install 명령어로 node_modules를 재설치다시 yarn add --dev @graphql-codegen/cli 로 설치이렇게 해주면 에러없이 잘 설치가 됩니다! 혼자 검색도 해보고 컴퓨터랑 vscode 껐다켜보기도 하고 여러 시도 끝에 겨우 해결했네요 ㅠ 다른 수강생분들은 저처럼 시간낭비하지 않으시길 바라겠습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
댓글 기능 컴포넌트 구조
강사님 안녕하세요~!자유게시판의 댓글 기능과 중고마켓의 댓글 기능을 리팩토링하면서 공통으로 뺄 수 있는 부분은 최대한 빼보려고 하고 있는데요. 댓글생성, 댓글수정 등등 각각의 뮤테이션도 모두 다르고 조건(회원/비회원, 자유게시판/중고마켓) 따라 보여지는 부분도 상당히 달라서 최대한 공통인 부분으로 잘게 쪼개봤는데도 코드 길이가 너무 길어집니다 ㅜㅜ 받아오는 데이터의 타입들도 각기 달라서 점점 더 미궁속으로 빠지고 있습니다 .... 자유게시판과 중고마켓 각 디렉토리에서 댓글 컴포넌트를 만들고 그 안에서 공통 UI 컴포넌트와 사용하는 뮤테이션들을 추가하는 방식으로 하고 있는데 계속 생각해봐도 비효율적이라는 생각이 들어서요 ..데이터 타입, 뮤테이션, 렌더링 조건 등등이 모두 다른 이런 상황에서 공통으로 기능을 어떻게 빼야할지 조언 부탁드려도 될까요?🥹