여기서 align-items 랑 align-content가 개념이 잘 안잡혀요..ㅠ 인터넷에 검색해보니깐 한줄 두줄의 차이라고 하는데...모바일사이즈일때는 한줄이 아니니깐 align-content라고 쓴걸까요? 아니면 justify-items: center; 코드가 있어서 일까요? 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 

새 일기를 쓰려고 하면 다음과 같은 에러가 발생합니다.해결해보려고 했는데 어떻게 손대야할지 막막하더라구요ㅠ코드를 뒤져보고 강의도 몇번씩 돌려보고 깃헙 소스코드랑 비교도 해봤습니다... 어떤식으로 에러를 해결해야하는지 찾는 방법도 함께 알려주시면 정말정말 감사하겠습니다..!! 아래는 제가 작성한 소스코드입니다!Home.jsimport { useContext, useEffect, useState } from "react"; import { DiaryStateContext } from "../App"; //components import MyButton from "./../components/MyButton"; import MyHeader from "./../components/MyHeader"; import DiaryList from "../components/DiaryList"; const Home = () => { const diaryList = useContext(DiaryStateContext); const [data, setData] = useState([]); // 날짜 저장 state const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; useEffect(() => { if (diaryList.length >= 1) { const firstDay = new Date(curDate.getFullYear(), curDate.getMonth(), 1).getTime(); const lastDay = new Date(curDate.getFullYear(), curDate.getMonth() + 1, 0).getTime(); setData(diaryList.filter((it) => firstDay <= it.date && it.date <= lastDay)); } else { setData([]); } }, [diaryList, curDate]); // useEffect(() => { // console.log(data); // }, [data]); const increaseMonth = () => { setCurDate(new Date(curDate.getFullYear(), curDate.getMonth() + 1, curDate.getDate())); }; const decreaseMonth = () => { setCurDate(new Date(curDate.getFullYear(), curDate.getMonth() - 1, curDate.getDate())); }; return ( <div> <MyHeader headText={headText} leftChild={<MyButton text={"<"} onClick={decreaseMonth} />} rightChild={<MyButton text={">"} onClick={increaseMonth} />} /> <DiaryList diaryList={data} /> </div> ); }; export default Home; App.jsimport React, { useReducer, useRef } from "react"; import "./App.css"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Diary from "./pages/Diary"; const reducer = (state, action) => { let newState = []; switch (action.type) { case "INIT": { return action.data; } case "CREATE": { newState = [action.data, ...state]; break; } case "REMOVE": { newState = state.filter((it) => it.id !== action.targetId); break; } case "EDIT": { newState = state.map((it) => (it.id === action.data.Id ? { ...action.data } : it)); break; } default: return state; } return newState; }; export const DiaryStateContext = React.createContext(); export const DiaryDispatchContext = React.createContext(); const dummyData = [ { id: 1, emotion: 3, content: "오늘의 일기 1번", date: 1702273692142, }, { id: 2, emotion: 2, content: "오늘의 일기 2번", date: 1702273692143, }, { id: 3, emotion: 5, content: "오늘의 일기 3번", date: 1702273692144, }, { id: 4, emotion: 1, content: "오늘의 일기 4번", date: 1702273692145 }, { id: 5, emotion: 4, content: "오늘의 일기 5번", date: 1702273692146, }, ]; function App() { const [data, dispatch] = useReducer(reducer, dummyData); const dataId = useRef(0); // CREATE const onCreate = (date, content, emotion) => { dispatch({ type: "CREATE", date: { id: dataId.current, date: new Date(date).getTime(), content, emotion, }, }); dataId.current += 1; }; // REMOVE const onRemove = (targetId) => { dispatch({ type: "REMOVE", targetId }); }; // EDIT const onEdit = (targetId, date, content, emotion) => { dispatch({ type: "EDIT", data: { id: targetId, date: new Date(date).getTime(), content, emotion, }, }); }; return ( <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onEdit, onRemove }}> <BrowserRouter> <div className="App"> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="/diary/:id" element={<Diary />} /> </Routes> </div> </BrowserRouter> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> ); } export default App;DiaryList.jsimport { useState } from "react"; import { useNavigate } from "react-router-dom"; import MyButton from "./MyButton"; import DiaryItem from "./DiaryItem"; const sortOptionList = [ { value: "latest", name: "최신순" }, { value: "oldest", name: "오래된 순" }, ]; const filterOption = [ { value: "all", name: "전부 다" }, { value: "good", name: "좋은 감정만" }, { value: "bad", name: "안좋은 감정만" }, ]; const ControlMenu = ({ value, onChange, optionList }) => { return ( <select className="ControlMenu" value={value} onChange={(e) => onChange(e.target.value)}> {optionList.map((it, idx) => ( <option value={it.value} key={idx}> {it.name} </option> ))} </select> ); }; const DiaryList = ({ diaryList }) => { const navigator = useNavigate(); const [sortType, setSortType] = useState("latest"); const [filter, setFilter] = useState("all"); const getProcessedDiaryList = () => { const filterCallBack = (item) => { if (filter === "good") { return parseInt(item.emotion) <= 3; } else { return parseInt(item.emotion) > 3; } }; // 비교함수 const compare = (a, b) => { if (sortType === "latest") { return parseInt(b.date) - parseInt(a.date); } else { return parseInt(a.date) - parseInt(b.date); } }; const copyList = JSON.parse(JSON.stringify(diaryList)); const filteredList = filter === "all" ? copyList : copyList.filter((it) => filterCallBack(it)); const sortedList = filteredList.sort(compare); return sortedList; }; return ( <div className="DiaryList"> <div className="menu_wrapper"> <div className="left_col"> <ControlMenu value={sortType} onChange={setSortType} optionList={sortOptionList} /> <ControlMenu value={filter} onChange={setFilter} optionList={filterOption} /> </div> <div className="right_col"> <MyButton type={"positive"} text={"새 일기쓰기"} onClick={() => navigator("/new")} /> </div> </div> {getProcessedDiaryList().map((it) => ( <DiaryItem key={it.id} {...it} /> ))} </div> ); }; DiaryList.defaultProps = { diaryList: [], }; export default DiaryList;

안녕하세요!강의 수강 시작하고 지금 싸이월드 실습 막 시작한 학생입니다.다름이 아니라 회원가입 부분 실습 마지막 몇 부분을 남기고 막혀서모범코드(?) 같은걸 확인하고 싶은데, 학습자료 부분에가도 싸이월드 코드랑피그마 링크만 안내되어있고 회원가입코드는 안보여서요!일단 이렇게 이미지로 질문을 드려봅니다.남성/여성 라디오버튼을 크기맞추고 가운데정렬까지 했는데 텍스트가 이렇게 세로로 정렬되어 버립니다. 체크박스버튼은 어떻게 손을봐야 할지 모르겠습니다 ㅜ

docker-compose.yml파일에 아래와같이 작성했습니다.포트번호를 5808로 지정해준 이유는 5432로 지정해서 접속했을때 현재 pc에 설치했던 postgresql과 충돌이 나서 로그인이 안돼서 바꾸어 주었습니다.도커 컴포즈 실행후 postgresql 컨테이너는 정상적으로 실행이 됐으나 nest앱과 postgresql explorer에서도 연결이 되지 않았습니다. 어떻게 해결해야하는지 질문드립니다# 서비스정의 services: postgres: image: postgres:15 # 실행시마다 재시작 restart: always # 도커컴포즈 파일에 존재하는 위치에 실제 데이터를 hostOS에 저장 volumes: # 현재 도커컴포즈 파일이 존재하는 경로 : 이미지안에존재하는 경로 매핑 - ./postgres-data:/var/lib/postgresql/data ports: #hostport:이미지의포트 #5432포트 요청 -> 이미지의 포트로 요쳥 - '5808:5432' environment: POSTGRES_USER: postgres POSTGRES_PASSWORD: '1111' POSTGRES_DB: postgresimport { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { PostsModule } from './posts/posts.module'; import { TypeOrmModule } from '@nestjs/typeorm'; import { PostsModel } from './posts/entities/posts.entity'; @Module({ //다른 모듈을 등록 //forRoot메서드는 typrorm과 nestjs와 연결할떄 사용 (DB) imports: [ PostsModule, TypeOrmModule.forRoot({ //데이터베이스 타입 type: 'postgres', host: '127.0.0.1', port: 5808, username: 'postgres', password: '1111', database: 'postgres', //entities폴더에 작성한 PostsModel 가져오기 entities: [PostsModel], synchronize: true, }), ], controllers: [AppController], providers: [AppService], }) export class AppModule {}

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 아래와 같이 풀어도 될까요 ?아래와 같은 경우에 시간복잡도는 어떻게 될까요 ...?const solution = (k, arr) => { let answer = Array.from({ length: k }, () => 0); for (let i = 0; i < arr.length; i++) { if (!answer.includes(arr[i])) { answer.unshift(arr[i]); answer.pop(); } else { let tmp = answer.filter((v) => v !== arr[i]); tmp.unshift(arr[i]); answer = tmp; } } return answer; }; console.log(solution(5, [1, 2, 3, 2, 6, 2, 3, 5, 7]));

혹시 2편은 언제 올라 오나요? ㅎㅎ바로 구매 하고 싶습니다

uuid를 사용하지 않으면 id 값이 너무 단순해 보이는데 값이 쉽게 예측됨으로써 발생하는 보안 문제는 없을까요..? 실제 현업에서는 uuid를 사용하는지 사용하지 않는지 궁금하네요.. 그리고 uuid를 more than을 통해 값을 비교햐여 pagination을 구현하는 것이 가능한가요?

저는 강의대로 vue2를 사용하고 있습니다.그런데 영상에선 main.js에 내용이new Vue({ el: '#app, render: h => h(App), });이렇게 되어있어서 el 밑에 store을 추가하셨는데,new Vue({ render: h => h(App), }).$mount('#app')저는 이렇게 되어있어서요. .$mount('#app')을 지우고영상과 같이 el: '#app'으로 변경하고 그 밑에 store을 추가하라는 말씀이신가요?

해당 영상도 또 안나와서 이상해서 개발자도구 켜보니까/course/lecture?courseSlug=nestjs-%EB%B0%B1%EC%97%94%EB%93%9C-%EC%99%84%EC%A0%84%EC%A0%95%EB%B3%B5-%EB%A7%88%EC%8A%A4%ED%84%B0-%ED%81%B4%EB%9E%98%EC%8A%A4-1&unitId=184136:1 Access to fetch at 'https://vod.inflearn.com/key/9d2b2df0-4061-42e6-a634-42fb7a946b91/68?key=d6303460076ac117c072323d06f3d269d6bd8dfde7e4a95ba3292cce2fdc879f' from origin 'https://www.inflearn.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.vod.inflearn.com/key/9d2b2df0-4061-42e6-a634-42fb7a946b91/68?key=d6303460076ac117c072323d06f3d269d6bd8dfde7e4a95ba3292cce2fdc879f:1 Failed to load resource: net::ERR_FAILED 인프런 자체 에러가 같은데 원인을 모르겠습니다.

무한 로딩상태에서 진전이 없어요~확인부탁드립니다.

import { useState, useCallback } from "react"; import ThemeContext from "./ThemeContext"; import MainContent from "./MainContent"; function DarkOrLight(props) { const [theme, setTheme] = useState("light"); const toggleTheme = useCallback(() => { if (theme === "light") { setTheme("dark"); } else if (theme === "dark") { setTheme("light"); } }, [theme]); return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> <MainContent /> </ThemeContext.Provider> ) } export default DarkOrLight;import React from "react"; const ThemeContext = React.createContext(); ThemeContext.displayName = "ThemeContext"; export default ThemeContext;MainContent가 ThemeContext의 하위 컴포넌트입니다.그러면 <ThemeContext.Provider> 안에 있는 <MainContent /> 컴포넌트는 ThemeContext.Provider 안의 props.children으로 간주될텐데 ThemeContext 에 {props.children}가 없어도 <MainContent />가 표시되는 이유가 궁금합니다. .privider메서드(메서드로 지칭하는게 맞나요...?ㅎ)를 사용하면 자동으로 하위 컴포넌트를 표시하는 기능(암묵적으로 {props.children}를 사용한다던지...)이 있는 건가요?

제 인터넷 문제인줄 알았으나, 영상이 문제 인것 같습니다.0:41초 되면 안나옵니다.다른 영상들은 문제 없이 잘나옵니다.

state: { num: 10 }, mutations: { printNumbers(state) { return state.num; }, sumNumbers(state, anotherNum) { return state.num + anotherNum; } } this.$store.commit('sumNumber', 20);여기서첫번째 인자는 무조건 state라고 하셨는데, 그게 문법인가요? 아니면, printNumbers(state)처럼 값을 넣었기 때문인가요? state: { storeNum: 10 }, mutations: { modifyState(state, payload) { console.log(payload.str); return state.storeNum += payload.num; } } this.$store.commit('modifyState', { str: 'passed from payload', num: 20 });여기서도 modifyState를 호출하면서 같이 넘기는 값이, payload에 담기는건 항상 처음은 state이기 때문인가요? 

포기 하지 않고 끝까지 풀어서 정답을 맞추게 된것 같습니다.문제가 생각 보다 어려운것 같습니다 ㅠㅠfunction solution(arr) { let answer = []; let mento = []; const maxNum = []; for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { const index = arr[i].indexOf(arr[0][j]); for (let k = 0; k < index; k++) { maxNum.push([arr[0][j], arr[i][k]]); } for (let z = 0; z < arr[i].length; z++) { if (j < z) { mento.push([arr[i][j], arr[i][z]]); } } } } for (p = 0; p < maxNum.length; p++) { mento = mento.filter( (t) => !(maxNum[p][0] === t[0] && maxNum[p][1] === t[1]) ); } answer = new Set(mento.map((v) => v.join(""))); return [...answer].length; } const question = [ [3, 4, 1, 2], [4, 3, 2, 1], [3, 1, 4, 2], ]; console.log(solution(question));좋은 코드는 아닌것 같지만, 최대한 노력을 했습니다const question = [ [3, 4, 1, 2], [4, 3, 2, 1], [3, 1, 4, 2], ]; console.log(solution(question)); let arr = [[1, 2, 3, 4, 5]]; console.log(solution(arr)); let arr2 = [ [19, 15, 4, 17, 12, 18, 6, 3, 11, 14, 1, 8, 13, 9, 2, 20, 5, 16, 10, 7], [5, 20, 18, 17, 14, 11, 19, 3, 10, 16, 6, 8, 13, 9, 2, 12, 4, 7, 1, 15], ]; console.log(solution(arr2));다른 답들도 다 정답은 나옵니다.

저는 main.js 파일을 보면new Vue({ render: h => h(App), }).$mount('#app')이렇게 되어있습니다.이게 el:'#app' 과 같다는건 아는데,store은 강의 내용과 같이 new Vue({ })안에넣으면 될까요? 아니면,.$mount('#app').$mount('store')이렇게 적어야 하나요?

안녕하세요 강의를 만족하며 보고있습니다.제가 강의를 수강하면서 모르는 부분만 보거나, 필요한 내용들을 그때마다 찾아서 공부하고 있습니다.하지만 강의가 차례로, 순서대로 해야만 학습 가능한 부분들이있어 공부 하기가 어려운 점이 많습니다. 또 전체적인 코드로 한눈에 흐름을 파악하여 해당 강의 내용을 보고 싶을 때도 많은데, 차례로 강의를 따라가야지만 전체를 볼 수 있기 때문에 어렵습니다.그래서 세션을 공부하기 위한 베이스 코드나, 강의를 하고 난 완료된 코드를 받고 싶은데 부탁드리겠습니다.감사합니다.

컴포넌트가 unmount될때 해당 컴포넌트에서 관리하는 state도 함께 사라지는건가요?컴포넌트가 리랜더링될때 해당 컴포넌트에서 관리하는 state는 여전히 유지되나요?부모컴포넌트가 리랜더링 될때 자식컴포넌트도 리랜더링 되는 건 알고있는데요, 이때 자식컴포넌트가 unmount됐다가 리랜더링되나요? ps) 질문이.. 뭔가 너무 당연한 것 같다는 생각도 드네요..?

아래의 코드에서함수선언문을 만나면 {getBook : function object}로 설정되고,자바스크립트 엔진이 다시 돌면서 var 키워드로 선언된 getBook으로 인해 {getBook : undefined } 로 설정이 된 후 코드 실행단계에서 함수선언문은 건너뛰고, getBook을 호출하면 undefined가 나와야하는거 아닌가요? 왜 "책1"이 출력되는지 모르겠습니다! function getBook() { return "책1"; } console.log(getBook); var getBook;

안녕하세요! 수업 잘 듣고있습니다.수업소스를 보면 함수도 항상 const를 쓰는데 let을 안쓰고 const를 사용하는 이유가 궁금합니다!!