(사진)

안녕하세요 강의 너무 잘 듣고 있습니다 공부를 하다가 map메소드에 대해 궁금한점이 있습니다. 예를 들어 items.map((item) => ) 여기서 어떨때에는 items.map((item) => () ) 화살표 다음에 ()가 오고 또 어떤 상황에는 items.map((item) => {}) 이렇게 {} 가 작성되는데 어떤 차이점이 있는지 궁금합니다.

안녕하세요 강사님 코드를 따라치면서 학습을 하고 있는데 <View style={styles.fixed}>이 style 부분에 No overload matches this call.Overload 1 of 2, '(props: ViewProps): View', gave the following error.Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'StyleProp<ViewStyle>'.Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'ViewStyle'.Types of property 'position' are incompatible.Type 'string' is not assignable to type '"absolute" | "static" | "relative" | "fixed" | "sticky" | undefined'.Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'StyleProp<ViewStyle>'.Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'ViewStyle'.Types of property 'position' are incompatible.Type 'string' is not assignable to type '"absolute" | "static" | "relative" | "fixed" | "sticky" | undefined'.ts(2769)ViewPropTypes.d.ts(203, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'ViewPropTypes.d.ts(203, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'(property) style?: StyleProp<ViewStyle>View Problem (Alt+F8)이런 에러가 뜨는데 제가 어느 부분에서 잘못했는지, 왜 이런 에러가 발생했는지 모르겠습니다....전체 코드는 아래와 같습니다.import CustomButton from '@/components/CustomButton'; import InputFiled from '@/components/InputFiled'; import { colors } from '@/constants'; import { StyleSheet, View } from 'react-native'; export default function LoginScreen() { return ( <> <View style={styles.container}> <InputFiled label="이메일" placeholder="이메일을 입력해주세요" ></InputFiled> <InputFiled label="비민번호" placeholder="비밀번호를 입력해주세요" ></InputFiled> </View> <View style={styles.fixed}> <CustomButton label="로그인하기"></CustomButton> </View> </> ); } const styles = { container: { flex: 1, margin: 16, gap: 16, }, fixed: { position: 'absolute', bottom: 0, width: '100%', borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: colors.GRAY_300, paddingTop: 12, paddingHorizontal: 16, }, };

수강후기 남기는 창을 벗어나니 다시 수강후기를 남길수 있는 방법이 없는데요 수강후기 남길수 있는 링크좀 전달 해주시면 감사하겠습니다.

ReadComponent.js 파일을 만들고 ReadPage의 리턴 내용에 ReadComponent의 tno 값을 추가한 후에 npm start를 실행했는데 아래와 같은 에러가 발생했습니다. [eslint] src\components\menus\todo\ReadComponent.jsLine 13:29: 'useState' is not defined no-undefLine 16:9: 'getOne' is not defined no-undefSearch for the keywords to learn more about each error. ReadComponent.js의 useState와 getOne 로직 부분이 잘못 된 거 같아서 강의 영상을 다시 봤는데 틀린 부분이 없어 보여 어떤 게 문젠지 질문을 드리고 싶습니다.참고용으로 ReadComponent.js의 내용을 추가해놓겠습니다. import React, { useEffect } from 'react'; const initState = { tno:0, title:'', writer:'', dueDate: '', complete: false } function ReadComponent({tno}) { const [todo, setTodo] = useState(initState) useEffect(() => { getOne(tno).then(data => { console.log(data) setTodo(data) }) }, [tno]); return ( <div> </div> ); } export default ReadComponent;덧붙여서 툴은 vscode를 쓰고 있습니다. 잘 부탁드리겠습니다.

안녕하세요~!소플님 덕분에 리액트 강의 잘보고 있습니다~!chapter_07 입장버튼을 10번 눌렀을때 콘솔로그가 밑에 처럼 찍히는건 이해가 되었는데======================useEffect() is called.isFull: falseCurrent count value: 10 밑에로그는 왜 다시 찍히는건가요??======================useEffect() is called.isFull: true 9번까지는 위에로그가 안찍히는거 같은데 10번째에 로그가 찍히는 이유가 궁금합니다~!  

privacy policy는 무조건 영문으로만 작성하는거에요? 한글로 작성하면 안되나요?

vercel이랑 비교 시 netlify 배포는 어떤가요?

안녕하세요 현재 리액트 강의 6.2) UI 구현하기를 수강 중 문제가 발생해서 질문 드립니다. App.css에서 스타일을 정의하고 적용을 하니 요소들이 오히려 우측으로 치우치고 화면을 축소 및 확대를 시켜도 중앙 정렬이 이루어지지 않습니다. 원인을 모르겠어서 질문 드립니다.

  Next.js 버전때문인지 tailwind.config.js가 설치가 안되고 posts.config.mjs가 설치가 됐는데 이게 맞나요 ,,? 

--ignore 공백 ./client' ", 에서공백을 해놨는데도 왜 에러가 뜨는지 그 이유를 잘 모르겠습니다

iOS로 구글 로그인하는거는 잘됩니다!근데 aos로 로그인하면 이런 에러가 떠요,,, 학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

이 에러는 무슨 에러인가요?  학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

개발하면서 제가 불필요한 렌더링을 줄이기 위한 기법이 아니라, 리액트를 사용하게 되면 자연스럽게 얻을 수 있는 성능 최적화 효과라고 보면 되나요?

이런식으로 실제 앱에서만 사용이 가능하다고 뜹니다ㅠ찾아보니까 디버깅을 끄라는데 개발자 도구를 켜봐도(ctrl+m /cmd+m켜서 들어가는,,) Debugging을 끄는 부분이 안보여요,,,+ Debug JS Remotely라는 부분을 끄라고 구글링을 하니까 나오는데 이 부분이 아예 개발자도구에서 안보입니다.. 학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

app-91cf9a3….js:2 Uncaught (in promise) Error: We couldn't find the correct component chunk with the name "component---src-pages-index-tsx" at t.loadComponent (app-91cf9a3….js:2:25195)해당 오류가 나며 하얀화면만 뜹니다. 블로그 글로 url작성해서 들어가면 정상적으로 뜹니다.

최대한 자료를 찾아봐서 이해해보려고 했는데, 너무 헷갈려서 도움을 구하고자 질문을 올립니다.강의에서 search page에는 페이지 이동 시 javascript bundle로써 전달 될 client component가 없기 때문에 그냥 rsc payload만 전달되는 것이라고 하셨는데, searchpage만 보면 client component가 없는 것이 맞지만, (with-searchbar)폴더 안에 layout으로 Searchbar component를 포함시킨 것은 어떻게 되는 것인지 궁금합니다.Searchbar component가 client component이므로 search page에서 직접적으로 import를 하지는 않았지만, 레이아웃으로써 사용되었기에 어쨌든 search page안에 client component가 포함되는 것은 아닌가요?이해가 명확하게 되지 않아 질문조차 조금 난해하게 쓴 것 같아서 죄송합니다!감사합니다.

'12.11) Home 페이지 구현하기 2. 기능' 강의의 9분 17초에서 App 컴포넌트의 context를 Home 컴포넌트로 보내주기 위해 DiaryStateContext와 DiartDispatch를 익스포트 해주는데요.문제 1) 저는 익스포트하게 되면 아래 사진과 같이 오류가 뜨고 [문제 2]에서 설명드린 부분도 실행이 되지 않습니다. (Home 컴포넌트에서 임포트 후 다시 App 컴포넌트로 돌아와 익스포트를 작성해주긴 했습니다 => 작성 순서 바뀜)이미지의 오류 문구 (refresh only works when a file exports components. Move your react context to a separate file.) 문제 2) 그리고 강의 영상에선 익스포트 후 Home 컴포넌트에 App 컴포넌트에서 익스포트한 것 들을 import 해주고 필터를 통해 각 달에 해당하는 일기 데이터를 추출 후 콘솔창에 출력해줍니다. (강의 16:07)하지만 저는 아래 사진과 같이 콘솔창에 현재 월에 대한 데이터가 아무것도 뜨지 않습니다. 위에서 설명드린 익스포트가 제대로 되지 않은 문제로 인해 안 뜨는 것일까요? + 추가로 context들을 파일을 따로 만들고 App 컴포넌트에 임포트하고 새로고침해봤더니 아무것도 뜨지 않았습니다.. 이 내용은 깃허브에 업로드 되어있습니다.App과 Home 컴포넌트의 코드는 아래에 남겨두었습니다.(깃허브 : https://github.com/hsyo830/Section12.git )[App.jsx]import "./App.css"; import { useReducer, useRef, createContext } from "react"; import { Routes, Route } from "react-router-dom"; // /입력 시 Home, /new new, /diary diary 각각의 페이지를 가져오도록 하기 위함 import Diary from "./pages/Diary"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Notfound from "./pages/NotFound"; const mockData = [ { id: 1, createDate: new Date("2025-03-14").getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createDate: new Date("2025-03-13").getTime(), emotionId: 2, content: "2번 일기 내용", }, { id: 3, createDate: new Date("2025-02-25").getTime(), emotionId: 3, content: "3번 일기 내용", }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); case "DELETE": return state.filter((item) => String(item.id) !== String(action.id)); default: return state; } } // 일기 데이터를 공급할 Context export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, mockData); // 여러가지 일기 데이터를 가져야해서 []와 같이 빈 배열 const idRef = useRef(3); // 새로운 일기 추가 const onCreate = (createDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createDate, emotionId, content, }, }); }; // 기존 일기 수정 const onUpdate = (id, createDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createDate, emotionId, content }, }); }; // 기존 일기 삭제 const onDelete = (id) => { dispatch({ type: "DELETE", id, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; [Home.jsx]import { useState, useContext } from "react"; import { DiaryStateContext } from "../App"; import Header from "../components/Header"; import Button from "../components/Button"; import DiaryList from "../components/DiaryList"; import { data } from "react-router-dom"; const getMonthlyData = (pivotDate, data) => { const beginTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth(), 1, 0, 0, 0 ).getTime(); const endTime = new Date( pivotDate.getFullYear, pivotDate.getMonth() + 1, 0, 23, 59, 59 ).getTime(); return data.filter( (item) => beginTime <= item.createdDate && item.createdDate <= endTime ); }; const Home = () => { const data = useContext(DiaryStateContext); const [pivotDate, setPivotDate] = useState(new Date()); const monthlyData = getMonthlyData(pivotDate, data); console.log(monthlyData); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1)); }; const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() - 1)); }; return ( <div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth() + 1}월`} leftChild={<Button onClick={onDecreaseMonth} text={"<"} />} rightChild={<Button onClick={onIncreaseMonth} text={">"} />} /> <DiaryList /> </div> ); }; export default Home;  

typescript 버전 코드를 보고 있는데 package.json에 module:common.js로 되어있는데 어떻게 Import 구문을 사용할 수 있는지 궁금합니다

zustand에 저장과 cookie 저장에 대해 보안적으로는 cookie가 더 안전하다고 들었습니다. xss 공격에는 HttpOnly를 통해 해결할 수 있지만 반환된 accessToken을 js로 접근하지 못하다 보니 저장을 할 수 없는 문제가 있지만secure을 통해 https에서만 요청가게 할 수 있으며, sameSite를 통해 csrf의 공격에 방어할 수 있다 해서 secure, sameSite를 사용해 accessToken을 쿠키에 저장하는게 더 좋은 방법이라 생각 했는데 어떤 방식을 주로 사용하나요?