학습한 내용 이미지와 코드를 블로그에 올려도 되나요??

안녕하세요 강사님깃헙 파일에서 누락된 코드를 확인하였습니다.https://github.com/winterlood/onebite-next/blob/main/section07/chapter03/src/components/review-editor.tsx [변경 전]<input name="bookId" value={bookId} hidden /> [변경 후]<input name="bookId" value={bookId} hidden readOnly/>

5.1)실습 준비하기 강의에서 "no-unused-vars":"off",입력하여 기능을 끈다고 하셨는데코드를 입력하니까 Duplicate key 'no-unused-vars'. 라고 에러가 발생합니다.어떻게 해결해하나요?? 

에러나 로딩을 전역적으로 상태로 봐서 에러나 로딩을 띄우는게 아닌, 페이지별로 전부 다 복붙으로 넣는 이유가 따로 있나요..? 일단 따라해보고있긴 한데, 뭔가 좀 아닌것 같아서 질문 드립니다ㅠㅜ

안녕하세요.강의 24분쯤의 내용입니다.parsedData를 콘솔에 찍으면 아무것도 나오지 않고 있습니다.Application에 로컬스토리지에 보면 4개의 데이터가 잘 저장되어있는데요.인강을 몇번 돌려 봐도 계속 그런 상태인데 제가 뭐 놓치고 있는게 있을까요?function reducer(state, action) { let nextState; switch (action.type) { case "INIT": return action.data; case "CREATE": { nextState = [action.data, ...state]; break; } case "UPDATE": { nextState = state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); break; } case "DELETE": { nextState = state.filter((item) => String(item.id) !== String(action.id)); break; } default: return state; } localStorage.setItem("dairy", JSON.stringify(nextState)); return nextState; } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, []); const idRef = useRef(0); useEffect(() => { const storedData = localStorage.getItem("diary"); if (!storedData) { return; } const parsedData = JSON.parse(storedData); console.log(parsedData); }, []);

서버 배포 강의를 들으며 실습 중인데 cloudflare 에서 등록을 한 상태에서 aws 에 등록을 하면 어떻게 되는 건가요? 최신 등록 플랫폼에 종속 되고 이전 플랫폼은 해지 되는 건가요?

코드 제공은 안되나요? 글씨가 작아서 잘 보이않아요. 화면보고 따라서 작성하기가 힘드네요. 강의자료에 없는거 같아서 여쭤봅니다.

문제 발생: npm run start:dev 시 위와 같은 에러 발생Error: connect ECONNREFUSED ::1:6379 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1615:16) { errno: -4078, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 6379 }  문제 원인:Redis 연결 실패 → 애플리케이션이 Redis 서버(포트 6379)에 연결하려 했지만 거부됨.ECONNREFUSED 오류는 Redis가 실행되지 않거나, 접근할 수 없는 상태일 때 발생. 문제 해결:Redis 기본 설정은 IPv6 (::1)을 사용함.IPv4(127.0.0.1)로 강제 변경해 해결localhost가 아닌 127.0.0.1로 변경// .env 기존 코드 REDIS_URL=redis://localhost:6379 // .env 변경 코드 REDIS_URL=redis://127.0.0.1:6379 위 에러 만나고 애쓴 부분 공유합니다. 혹시 잘못된 해결 방법이라면 알려주시면 감사하겠습니다!

window.scrollTo({ top: 0, behavior: "smooth" }); 제 화면은 왜 부드럽게 스크롤 이동이 안되는걸까요? behavior 빠졌을 때와 차이가 없어보여요.. 사용 브라우저는 크롬입니다

콘솔창에 Lottie 관련으로 경고 메시지 같은게 뜨는데 해당 내용은 어떻게 해야 해결할 수 있나요?혹시페이지에 문제가 생기지는 않는건가요? 문서를 봐도 무슨 말인지 모르겠네요.componentWillUpdate has been renamed, and is not recommended for use. See https://react.dev/link/unsafe-component-lifecycles for details.* Move data fetching code or side effects to componentDidUpdate.* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.Please update the following components: Lottie2

왜인지 모르게 npm install로 npm install --save @react-native-vector-icons/fontawesome5이런식으로 설치를 해주고 나서import FontAwesome5 from '@react-native-vector-icons/fontawesome5'; 을 하면 icon을 가지고 오지 못해서 [runtime not ready]: Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes, stack: invariant@2200:25~위에와 같은 오류가 발생합니다,,, font가 제대로 카피되지 않아서 벌어지는 일 같아용,,,그래서 여러가지 시도해본 결과 다른거 할 필요없이import FontAwesome5 from '@react-native-vector-icons/fontawesome5';이런식으로 Icon이 아니라 FontAwesome5를 해주니까 되더라구요,,? 그런 후에 다시 import Icon from '@react-native-vector-icons/fontawesome5';이렇게 Icon으로 해주니까 font들이 제대로 카피가 되더라구요,,?위에 사진처럼 복사되면 제대로 된거죠?(Icon 잘 나옵니다,,)혹시 바로 import Icon했을때는 왜 안된건지 아실까요?

git에 있는 chapter 03에 있는 거 그대로 copy 하고index.js 수행 해도 아래와 같은 오류가 떠요..버전은 16이구요..어디가 잘 못 된걸까요?Cannot read properties of undefined (reading 'S') TypeError: Cannot read properties of undefined (reading 'S') at http://localhost:3001/static/js/bundle.js:19184:56 at ./node_modules/react-dom/cjs/react-dom-client.development.js (http://localhost:3001/static/js/bundle.js:20831:2) at options.factory (http://localhost:3001/static/js/bundle.js:29391:31) at __webpack_require__ (http://localhost:3001/static/js/bundle.js:28833:32) at fn (http://localhost:3001/static/js/bundle.js:29050:21) at ./node_modules/react-dom/client.js (http://localhost:3001/static/js/bundle.js:21060:20) at options.factory (http://localhost:3001/static/js/bundle.js:29391:31) at __webpack_require__ (http://localhost:3001/static/js/bundle.js:28833:32) at fn (http://localhost:3001/static/js/bundle.js:29050:21) at ./src/index.js (http://localhost:3001/static/js/bundle.js:28617:74)

강의 설명에서는 아래 사진처럼 되어져 있는데-> false의 위치가 틀렸어요이게 맞습니다(아래 사진)아마 1번 사진처럼 하면, Info.plist오류라고 뜨면서 앱이 실행이 안됩니다! 2번 사진처럼 붙여넣어주셔야 합니다,,제대로 설정되면 Info.plist를 Property List로 열었을때 오류 없이 잘 열릴꺼에요(1번 처럼하면 PropertyList 안열림)열려서 Fonts provided by application에 추가한 폰트들이 잘 들어가져있다면 잘 설치된거에요~ cf1) 이렇게 했는데 갑자기 잘 안된다면 podfile제거하고 다시 설치해보세용cd iospod deintegratepod install이렇게 하시면 되용cf2) 만약에No script URL provided. Make sure the packager is running or you have embedded a JS bundle in your application bundle. unsanitizedScriptURLString = (null)이런 에러가 뜨면 터미널로 가서 npm start해주면 됩니다..저처럼 헷갈리시는 분들이 있을까봐 남겨용 학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

해당 강좌 default.tsx에서 기본 페이지로 사용시킬때 default.tsx를 처리해두고 빈페이지를 구성하는 형태를 사용하는 예제를 따라서 진행해보았는데요. 여기서 궁금한점이 page.tsx를 @modal에 하나더 유지시키고 return null 처리를 하는 컴포넌트를 두어도 똑같이 동작은 되는데, default.tsx를 좀 더 권장하는 이유가 있을까요?

아래가 제가 이해한 내용인데 맞을까요?요청 메모화ssr 요청 사이클 내에서만 페치 결과를 캐싱하여 중복 요청 방지 (한 서버 요청 사이클 끝나면 초기화)예를들어 Home컴포넌트와 자식 컴포넌트인 Header 컴포넌트에서 렌더링 시에 동일한 요청을 날렸다면 Home컴포넌트의 요청이 캐싱되고 Header 컴포넌트의 요청은 캐싱된 값 사용데이터 캐시한 ssr 요청 사이클 내 뿐만 아니라 서버에 전역적으로 유지되는 캐시요청 메모화와 다르게 서버 요청 끝나도 초기화되지 않고 지속됨즉, 여러 클라이언트 요청 간에도 유지됨A가 먼저 페이지 요청 → 백엔드에 요청 후 넥스트 서버에 데이터 캐싱B가 같은 페이지 요청 → 백엔드 요청 없이 넥스트 서버 캐시에서 데이터 반환결론즉, 요청 메모화는 렌더링 최적화, 데이터 캐시는 네트워크 요청 절약을 위한 것

예전에는 분명이프로젝트 소개 및 준비 영상인가그다음에 있었던 것 같은데로컬 셋팅하는게 없어졌어요 라우팅 설명하고 바로section13번 열라고 강의에 나오는데그 section13번을 셋팅하는 강의가 사라진 것 같아 문의드립니다.

프로젝트를 설치하고 npm run dev로 실행하니 > section02@0.1.0 dev> next dev이 두 줄 나오고 바로 종료되는데 뭐때문에 그런걸까요?

안드로이드 설정 과정이 전체가 약간 헷갈려있게 되어있는 것 같아서,,, 이게 맞는지 궁금해서 남깁니다npm i react-native-splash-screen --save 을 통해서 npm을 설치한다앱로고와 스플래시 화면을 준비해준다아래 사이트에서 앱 로고를 만들어준다EasyAppIcon - Create Mobile App Icon앱 아이콘들을 android폴더에 넣어준다android/app/src/main/res의 아래에 mipmap-hdpi~로 시작하는 파일들에 이름에 맞춰서 앱 아이콘들을 넣어준다 스플래시 화면(아마도 이미지)을 android/app/src/main/res/drawable폴더에 넣어준다반드시 launch_screen이라는 이름으로 넣어준다 -> launch_screen.png android/setting.gradle에 가서 아래처럼 설정해준다include ':react-native-splash-screen' project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')  android/app/build.gradle (113번 줄)implementation project(':react-native-splash-screen') android/app/src/main/java/com/coin/MainActivity.kt에 7번째 줄에import android.os.Bundle; import org.devio.rn.splashscreen.SplashScreen; android/app/src/main/java/com/coin/MainActivity.kt에 12~15번째 줄에 override fun onCreate(savedInstanceState: Bundle?) { SplashScreen.show(this) super.onCreate(null) }  . . . /MainApplication.kt (14번 줄)에import org.devio.rn.splashscreen.SplashScreenReactPackage . . . /MainApplication.kt (24번 줄)에SplashScreenReactPackage() 스플래시 화면을 숨겨주기 위해 App.tsx에아래 내용을 추가해준다useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 500); }); // 의존성 배열 없음 - 매 렌더링마다 실행됨 values.colors.xml파일을 만들어서 아래 내용을 추가해준다<?xml version="1.0" encoding="utf-8"?> <resources> <!-- 다른 색상들이 있다면 유지하세요 --> <color name="status_bar_color">#000000</color> <!-- 원하는 색상 코드로 변경 가능 --> </resources> 질문1. 잘 나오는 것 같기는 한데 총 과정이 이게 맞을까요?질문2. 그리고 스플래시화면이 뜨기 전에 앱 로고가 전체적으로 뜨고(흰바탕에 설정한 앱 로고가 중앙에 작게 나옴) 스플래시 화면이 뜨는데 원래 이런거 맞나요?질문3. 그리고 values/colors.xml파일은 왜 설정해주는 건가요? 

iOS에서 splash screen을 RN에서 설정해보기 위해서 RN으로 작업을 해봤는데요,,,AppDelegate파일에서 import RNSplashScreen에서 pod install을 하고 진행을 했는데도 모듈을 찾을 수 없다고 뜨더라구요ㅠpodfile에는 RNSplashScreen가 있는거는 확인했습니다.. 그러므로 설치는 된 거 같은데,, 프로젝트가 모듈을 못찾는 것 같아요ㅠ다른 프로젝트 참고해보려고 해도, 저는 AppDelegate.swift파일이고 .h파일이나 .m파일은 없어서 여기서 설정을 하지를 못하겠어요ㅠ(cf. 찾아보니까 해당 라이브러리가 옛날버전이고 지금 RN의 iOS랑 호환이 되지 않아서 발생하는 문제 같은데, 이때 브릿징 헤더를 설치해야 한다고 본거 같아요 => 이 문제가 맞을까요?)강의가 android기준으로만 설명되서,,, 혹시 RN으로 어떻게 iOS 스플래시 화면을 설정해야 하는걸까요?학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

  import BoardCommentWriteUI from "./boardCommentWrite.presenter"; import { ChangeEvent, useState } from "react"; import { useMutation } from "@apollo/client"; import { CREATE_BOARD_COMMENT, UPDATE_BOARD_COMMENT, } from "./boardCommentWrite.queries"; import { useRouter } from "next/router"; import { FETCH_BOARD_COMMENTS } from "../list/boardCommentList.queries"; import { IMutation, IMutationCreateBoardCommentArgs, IMutationUpdateBoardCommentArgs, } from "../../../../commons/types/generated/types"; import { IBoardCommentWriteProps } from "./boardCommentWrite.types"; export default function BoardComment(props: IBoardCommentWriteProps) { const [createBoardComment] = useMutation< Pick<IMutation, "createBoardComment">, IMutationCreateBoardCommentArgs >(CREATE_BOARD_COMMENT); const [updateBoardComment] = useMutation< Pick<IMutation, "updateBoardComment">, IMutationUpdateBoardCommentArgs >(UPDATE_BOARD_COMMENT); const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [comment, setComment] = useState(""); const [star, setStar] = useState(0); const router = useRouter(); const handleChangeWriter = (event: ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); }; const handleChangePassword = (event: ChangeEvent<HTMLInputElement>) => { setPassword(event.target.value); }; const handleChangeComment = (event: ChangeEvent<HTMLTextAreaElement>) => { setComment(event.target.value); }; const updateComment = () => { alert("수정하기 입니다."); }; const onClickSubmitComment = async () => { try { if (typeof router.query.boardId !== "string") { alert("시스템에 문제가 있습니다."); return; } const result = await createBoardComment({ variables: { createBoardCommentInput: { writer, password, contents: comment, rating: star, }, boardId: router.query.boardId, }, refetchQueries: [ { query: FETCH_BOARD_COMMENTS, variables: { boardId: router.query.boardId }, }, ], }); } catch (error) { if (error instanceof Error) { alert(error.message); } } setWriter(""); setComment(""); setPassword(""); setStar(0); }; return ( <BoardCommentWriteUI handleChangeWriter={handleChangeWriter} handleChangePassword={handleChangePassword} handleChangeComment={handleChangeComment} onClickSubmitComment={onClickSubmitComment} updateComment={updateComment} setStar={setStar} writer={writer} comment={comment} password={password} el={props.el} /> ); } boardCommentWriter.container.tsx 에서 updateComment 바인딩이 안된것인지함수가 작동을 안하는 것인지updateComment의 "수정하기 입니다. " 알림창이 안뜹니다.수정/삭제 버튼 onClick 내부에서 해봐도 태그 바깥에서 삼항연산자를 써보아도 적용이.. 안됩니다. onClickSubmitComment 함수는 제대로 작동하는데 말이죠 ㅠㅠ 도저히 왜 안되는지 모르겠어요import * as S from "../../board/commons/style/style"; import * as Own from "./boardCommentWrite.styles"; import { IBoardCommentWriteProps } from "./boardCommentWrite.types"; export default function BoardCommentWriteUI(props: IBoardCommentWriteProps) { console.log(props.el); return ( <S.BoardWrapper> <S.Row> <Own.Writer placeholder="작성자" onChange={props.handleChangeWriter} value={props.editComment ? props.el?.writer : props.writer} readOnly={props.editComment} /> <Own.Password placeholder="비밀번호" onChange={props.handleChangePassword} value={props.password} /> <Own.RankWrapper> <Own.RateComment value={props.editComment && props.el.rating} onChange={props.setStar} /> </Own.RankWrapper> </S.Row> <Own.Comment onChange={props.handleChangeComment} placeholder="댓글을 입력해주세요." value={props.editComment ? props.el.contents : props.comment} /> <Own.BottomComments> <S.Row> <p>0</p> <div>/</div> <p>100</p> </S.Row> {/* <Own.SubmitButton onClick={ props.editComment ? props.updateComment : props.onClickSubmitComment } > {props.editComment ? "수정하기" : "등록하기"} </Own.SubmitButton> */} {props.editComment ? ( <Own.SubmitButton onClick={props.updateComment}> 수정하기 </Own.SubmitButton> ) : ( <Own.SubmitButton onClick={props.onClickSubmitComment}> 등록하기 </Own.SubmitButton> )} </Own.BottomComments> </S.BoardWrapper> ); }