안녕하세요 😃신선한 그리드를 이용한 정렬을 재미있게 잘 보았습니다. 몇가지 궁금한 점이 있어서 질문 드려요~ Q1.보통 이러한 정렬은 자바스크립트를 이용하여 정렬하는 것이 일반적이라고 생각됩니다.(리액트나 기타 프레임워크를 보았을때..) 그럼에도, 이와 같이 CSS를 이용하여 정렬한다고 했을때, 어떠한 장점을 얻을 수 있을까요?? 🤔Q2.1분코딩님의 샘플 코드를 보면 큰 그리드 컨테이너 안에서 header, footer, 각각의 cards(section), 상단 버튼들이 위치하고 있습니다. 저 같은 경우는 큰 그리드 컨테이너를 잡고 그 안에 button-container, header, card-section, footer 이런 식으로 분류한후 card-section 안에서 다시 그리드를 잡아서 사용하게되었습니다. 이렇게 구조를 잡게되니, CSS만을 이용한 체크박스 이벤트를 활용할 수 없게 되었습니다.😅 제가 궁금한 점은, 그리드 레이아웃을 활용할 때는 (저처럼) 그리드 안에 섹션별로 컨테이너를 잡고 사용하지는 않고 바로 각각을 그리드 아이템으로서 위치를 잡아서 사용하게 되나요? 혹은 어느 방식을 많이 사용하게 되는지 궁금하네요. ( 질문드리고 나서 생각해보니, 캐바캐일거라는 생각이 들긴하네여. 😅)

 안녕하세요 강사님,postgresql 설치 과정에서 계속 오류가 뜨는데 도저히 해결 방법을 알 수 없어 질문 올립니다. 처음에 postgresql 설치를 homebrew로 미리 해봤다가,강의에서 설치하는 부분이 나오길래 homebrew로 설치한 버전은 삭제하고 강의해주신 내용 그대로 진행했으나 postgresql 14의 password를 입력하는 부분에서 2-3시간째 넘어가질 못하고 있습니다...  에러 내용: pg admin > postgresql 14 > password 입력 시 오류 (connection to server at localhost (::1), port 5432 failed: FATAL: password authentication failed for user "postgres"설치 시 알려주신 비밀번호대로 쭉 진행했습니다 기존 내용 전부 밀고 재설치를 계속 했는데도 안되고 있는 상황입니다. (재설치 시 비밀번호 입력하라는 창은 뜬 걸로 보아 기존 데이터까지 삭제는 옳게 한 것으로 보입니다) 아래 stackoverflow에서 말한 방법대로 했는데도 안됩니다. (https://stackoverflow.com/questions/8037729/completely-uninstall-postgresql-9-0-4-from-mac-osx-lion/9240197#9240197)

선생님 이번에 무한스크롤 구현하면서 지금 리퀘스트 요청이 여러번 발생하는걸 if문에 로딩시에만 if문이 발생하게 고쳐서 여러번 반복되게 하는걸 한번만 호출 할수있게 고치신걸로 아는데요 저도 분명히 고쳤는데 호출이 2번씩일어나는데 한번 봐주시면 감사하겠습니다. 코드 여러군데 봐도 왜 호출이 두번 일어나는지 모르겠네요 한번 봐주시면 감사하겠습니다.//index.js import React, { useEffect } from 'react' import { useDispatch, useSelector } from 'react-redux' import AppLayout from '../components/AppLayout' import PostForm from '../components/PostForm' import PostCard from '../components/PostCard' import { LOAD_POST_REQUEST } from '../reducers/post' const Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user) const { mainPosts, hasMorePost, getPostLoadding } = useSelector((state) => state.post) useEffect(() => { dispatch({ type: LOAD_POST_REQUEST, }) }, []) useEffect(() => { function onScroll() { console.log(window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight) if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) { if(hasMorePost && !getPostLoadding){ dispatch({ type: LOAD_POST_REQUEST, }) } } } window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('scroll', onScroll); } }, [hasMorePost, getPostLoadding]) return ( <AppLayout> {me && <PostForm />} {mainPosts.map((item) => <PostCard key={item.id} post={item} />)} </AppLayout> ) } export default Home  /reducers/post.js import shortId from 'shortid'; import produce from 'immer'; import faker from 'faker'; export const initialState = { mainPosts: [{ id: 1, User: { id: 1, nickname: '제로초', }, content: '첫번째 게실글 #해시태그 #익스프레스', Images: [{ id: shortId.generate(), src: 'https://bookthumb-phinf.pstatic.net/cover/137/995/13799585.jpg?udate=20180726', }, { id: shortId.generate(), src: 'https://gimg.gilbut.co.kr/book/BN001958/rn_view_BN001958.jpg', }, { id: shortId.generate(), src: 'https://gimg.gilbut.co.kr/book/BN001998/rn_view_BN001998.jpg', }], Comments: [{ id: shortId.generate(), User: { id: shortId.generate(), nickname: 'nero', }, content: '우와우와' }, { id: shortId.generate(), User: { id: shortId.generate(), nickname: 'wi', }, content: '힘내자' }], }], imagePath: [], hasMorePost : true, getPostLoadding: false, getPostDone: false, getPostErr: null, addPostLoadding: false, addPostDone: false, addPostErr: null, removePostLoadding: false, removePostDone: false, removePostErr: null, addCommentLoadding: false, addCommentDone: false, addCommentErr: null, } export const getDemmuyPost = (number) => Array(number).fill().map(() => ({ id: shortId.generate(), User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.paragraph(), Images: [{ src: faker.image.image(), }], Comments: [{ User: { id: shortId.generate(), nickname: faker.name.findName(), }, content: faker.lorem.sentence(), }], })) export const LOAD_POST_REQUEST = 'LOAD_POST_REQUEST' export const LOAD_POST_SUCCESS = 'LOAD_POST_SUCCESS' export const LOAD_POST_FAILURE = 'LOAD_POST_FAILURE' export const ADD_POST_REQUEST = 'ADD_POST_REQUEST' export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS' export const ADD_POST_FAILURE = 'ADD_POST_FAILURE' export const REMOVE_POST_REQUEST = 'REMOVE_POST_REQUEST' export const REMOVE_POST_SUCCESS = 'REMOVE_POST_SUCCESS' export const REMOVE_POST_FAILURE = 'REMOVE_POST_FAILURE' export const ADD_COMMENT_REQUEST = 'ADD_COMMENT_REQUEST' export const ADD_COMMENT_SUCCESS = 'ADD_COMMENT_SUCCESS' export const ADD_COMMENT_FAILURE = 'ADD_COMMENT_FAILURE' export const addPostAction = (data) => { console.log(data) return { type: ADD_POST_REQUEST, data } } export const addCommentAction = (data) => { console.log(data) return { type: ADD_COMMENT_REQUEST, data } } const dummyPost = (data) => ( { id: data.id, content: data.content, User: { id: 1, nickname: '제로초', }, Images: [], Comments: [], } ) const dummyComment = (data) => ( { id: shortId.generate(), content: data, User: { id: 1, nickname: '제로초', }, } ) const reducer = (state = initialState, action) => { return produce(state, (draft) => { switch (action.type) { case LOAD_POST_REQUEST: draft.getPostLoadding = true draft.getPostDone = false draft.getPostErr = null break; case LOAD_POST_SUCCESS: draft.getPostLoadding = false draft.getPostDone = true draft.mainPosts = action.data.concat(draft.mainPosts) draft.hasMorePost = draft.mainPosts.length < 50 break; case LOAD_POST_FAILURE: draft.getPostLoadding = false draft.getPostErr = action.err break; case ADD_POST_REQUEST: draft.addPostLoadding = true draft.addPostDone = false draft.addPostErr = null break; case ADD_POST_SUCCESS: draft.addPostLoadding = false draft.addPostDone = true draft.mainPosts.unshift(dummyPost(action.data)) break; case ADD_POST_FAILURE: draft.addPostLoadding = false draft.addPostErr = action.err break; case REMOVE_POST_REQUEST: draft.removePostLoadding = true draft.removePostDone = false draft.removePostErr = null break; case REMOVE_POST_SUCCESS: draft.removePostLoadding = false draft.removePostDone = true draft.mainPosts = state.mainPosts.filter((item) => item.id !== action.data) break; case REMOVE_POST_FAILURE: draft.removePostLoadding = false draft.removePostErr = action.err break; case ADD_COMMENT_REQUEST: draft.addCommentLoadding = true draft.addCommentDone = false draft.addCommentErr = null break; case ADD_COMMENT_SUCCESS: const post = draft.mainPosts.find((item) => item.id === action.data.postId) post.Comments.unshift((dummyComment(action.data.content))) draft.addCommentLoadding = false draft.addCommentDone = true break; case ADD_COMMENT_FAILURE: draft.addCommentLoadding = false draft.addCommentErr = action.error default: return state } }) } export default reducer import { delay, all, fork, takeLatest, put, throttle } from "redux-saga/effects"; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, REMOVE_POST_REQUEST, REMOVE_POST_SUCCESS, REMOVE_POST_FAILURE, ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, ADD_COMMENT_FAILURE, LOAD_POST_REQUEST, LOAD_POST_SUCCESS, LOAD_POST_FAILURE, getDemmuyPost } from '../reducers/post' import { ADD_POST_TO_ME, REMOVE_POST_TO_ME } from "../reducers/user"; import shortId from 'shortid'; function addPostAPI(data) { return axios.post('/api/addPost', data) } function* addPost(action) { try { // const result = yield call(addPostAPI, action.data) yield delay(1000) const id = shortId.generate(); yield put({ type: ADD_POST_SUCCESS, data: { id, content: action.data } }) yield put({ type: ADD_POST_TO_ME, data: id }) } catch (err) { yield put({ type: ADD_POST_FAILURE, data: err.response.data }); } } function removePostAPI(data) { return axios.post('/api/addPost', data) } function* removePost(action) { try { // const result = yield call(addPostAPI, action.data) yield delay(1000) yield put({ type: REMOVE_POST_SUCCESS, data: action.data }) yield put({ type: REMOVE_POST_TO_ME, data: action.data }) } catch (err) { yield put({ type: REMOVE_POST_FAILURE, data: err.response.data }); } } function addCommentAPI(data) { return axios.post('/api/addPost', data) } function* addComment(action) { try { // const result = yield call(addPostAPI, action.data) yield delay(1000) yield put({ type: ADD_COMMENT_SUCCESS, data: action.data }); } catch (err) { yield put({ type: ADD_COMMENT_FAILURE, data: err.response.data }); } } function loadPostAPI(data) { return axios.get('/api/posts', data) } function* loadPost(action) { try { // const result = yield call(addPostAPI, action.data) yield delay(1000) yield put({ type: LOAD_POST_SUCCESS, data: getDemmuyPost(10) }); } catch (err) { yield put({ type: LOAD_POST_FAILURE, data: err.response.data }); } } function* watchLoadPost() { yield throttle(5000, LOAD_POST_REQUEST, loadPost) } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPost) } function* watchRemovePost() { yield takeLatest(REMOVE_POST_REQUEST, removePost) } function* watchCommentPost() { yield takeLatest(ADD_COMMENT_REQUEST, addComment) } export default function* postSaga() { yield all([ fork(watchAddPost), fork(watchCommentPost), fork(watchRemovePost), fork(watchLoadPost), ]); }

post 게시글 하나를 삭제하면 해당 게시글과 foreignKey로 연결된 comment들도 Comment db에서 찾아서 삭제해줘야 하나요? 실무에선 어떻게 하는지 궁금합니다.

안녕하세요, 강의 잘 듣고있습니다.다름이 아니라 저는 먼저 배열을 정렬 한 다음, 큰수 -> 작은수 순서대로 더하면 합한 값도 큰 순서대로 될것이라 생각하여 다름과 같이 코드를 작성하였습니다.중복된 sum 값은 코드에서 볼 수 있듯, 이전 sum값과 같으면 제거를 해 주었고요.아래 제 코드가 어떤 면에서 잘못되었는지 궁금합니다!감사합니다.int solution(int n, int k, Integer[] arr) { // arr 중에 3장을 뽑아 적힌 수를 합하려고 할때, k번째로 큰수 Arrays.sort(arr, Comparator.reverseOrder()); int count = 0; int sum = 0; for (int i = 0; i < n; i++) { for (int j = i + 1; j < n; j++) { for (int l = j + 1; l < n; l++) { if (sum == arr[i] + arr[j] + arr[l]) continue; sum = arr[i] + arr[j] + arr[l]; count++; System.out.println(count + " : " + (arr[i] + arr[j] + arr[l])); if (count == k) return (arr[i] + arr[j] + arr[l]); } } } return -1; }

안녕하세요, 항상 강의 감사합니다.상속관계를 실제로 구현하다보니 엔티티를 저장할때는 어떻게 해야하는지 감이 오는데요.api 인터페이스에서 쿼리를 해서 가져올때 어떻게 구현하는게 좋을지 고민이 됩니다.전체 리스트를 가져오거나 단일 객체를 id로 불러올때,해당 type 이 어떤것인지 몰라 상위 Item 객체 (예시에서 보듯)로 리턴하게 되는데요.이때, 타입에 따라서 해당 프로퍼티를 넘겨주고 싶은데, 서비스 객체에서도 타입을 모르니 api 인터페이스에서 타입을 구분하는 로직 코드를 작성해야하더라구요.혹시 서비스 함수에서 깔끔하게 구현하려면 어떻게 해야하는지 알 수 있을까요?

바뀐 react 18에 따라서 작성된 코드입니다.바뀐 리엑트로 어떻게 코드 작성해야하는지 모르겠는 분들은 참고하시면 좋을것 같습니다! https://github.com/matt700395/first-meet-react/commit/7df1b7367e6a2c00f21ae30a92e39102959e373f

안녕하세요 좋은 강의 잘 수강하고 있습니다.프록시를 이용한 설계에서 질문이 있습니다 Front에서 Server를 바라보는 이유?동그라미 되어있는 1번의 의미가 궁금합니다.프론트엔드 서버에서 왜 벡엔드 서버를 가리키나요?클라이언트가 엔진엑스를 통해서 벡엔드 서버를 바라보는 것은 API 호출을 위함인 것은 이해가 됩니다.프록시를 하고, 밑에 axios.get("/api/values")여기에서, 호스트이름이나 포트를 안써도 되는 이유 설명이 조금 이상합니다. 6분42초쯤에서 해당 코드에 호스트 이름을 안써서 쓸 필요가 없다.. 이렇게 설명하셨는데 조금 보충 설명을 해주셨으면 좋겠습니다.엔젠엑스를 통해서 API를 호출하는 것이기 때문에 80번포트를 명시? 해야할 것 같고, 호스트이름도 없으면 해당 ip를 어떻게 찾나요? 

안녕하세요 강의를 보다가 강의 공부하는 순서가 헷갈리는데 교안을 먼저 보고 강의를 1주차 부터 보아야 하는건가요? C++은 처음 접하는 학생입니다

fibo[] 이전 시간복잡도 2^n fibo[] 이후 시간복잡도 어떻게 되나요?

실습시 사용하는 업로드 하시는 파일은 어디서 받나요? 제공해드린 파일을 업로드하라고 말씀하셨는데...

선생님 강의듣다 궁금증이 생겨 질문 남깁니다!!position을 사용시,1. left:0; width:100%;2. left:0; right:0;이렇게 두가지 방식으로 화면을 다 채우는 방법을 있는것으로 알고있는데,둘의 차이점을 알고싶습니다!

Line 7:29: 'Data' is not defined no-undefSearch for the keywords to learn more about each error.라며 자동이 안되고 data랑 toLocaleTimeString가 색이 안변한게 이상합니다import React from "react"; function Clock(props){ return( <div> <h1>안녕, 리액트!</h1> <h2>현재 시간: {new Data().toLocaleTimeString()}</h2> </div> ); } export default Clock;코드는 문제가 있는지 모르겠습니다 문제 될만한게 없는듯 합니다index.js 완전똑같습니다

트라이 위드 리소스 구문이없고 대신 close 가있는게아니라 use 가 있는거 아닌가요 ㅠㅠ? 강의내용이랑 햇깔려서 질문드려요

안녕하세요 선생님.영상을 보다 문득 궁금한게 있어 문의드립니다. !!보통 미디어 쿼리단위를 1px단위로 끊어서1024px이런식으로 작성하는거 같습니다.디바이스 화면크기가 소수점으로 떨어질 일은 없어보이지만저희가 실제 화면창을 리사이즈할시, 1023.9px이 나오는 경우도 있는데, 이런 경우에는 소수점으로 정의하는것이 좋은 방법인지 궁금하여 질문드립니다!

강의 내용 바탕으로 프로그래머스 알고리즘 시간 측정 테스트를 해보고 있는데첫 번째가 직접 구현된 reduce를 이용한 결과고 두번째가 일반 내장 메소드를 이용한 결과입니다.이것만 봤을 때는 내장 메소드를 썼을 때가 시간이 더 빨리 측정이 되는데이러한 경우에는 지연 평가를 이용한 것이 의미가 있는지 궁금합니다.브레이브 브라우저에서 직접 구현된 filter, 내장 메소드 filter, 지연 평가를 이용한 filter 순으로 각각 몇 차례 테스트를 해보았는데요. 우선은 이것만 봐서는 내장 메소드가 월등히 우수한 것으로 보입니다.[1,2,3,4,5]라는 간단한 배열을 이용해서 그런건가요? 만약에 평가될 항목이 많다고 가정하면 그 때는 지연 평가가 더 우수한건지 궁금합니다. 

강의 잘 듣고 있습니다github 접근 권한 요청드립니다mybluepeter@gmail.com

bind<T A0, A extends any[], R>(this: (this: T, arg0: A0, ...args: A) => R, thisArg: T, arg0: A0): (...args: A) => R;위 타입에서 this가 두번 나오는데 서로 의미하는 바가 다른 것 같습니다.두번째 this는 실제 함수에서 arguments로써 사용되는 this인 것 같은데const Func(this:someThing) {}첫번째 this가 의미하는바가 무엇인지 이해가 잘 안가네요.. 그리고 OmitThisParamter 타입을 분석을 해보려고 하니 아래 부분 비교를 한다는 것은 T에 this arguments가 존재한다는 뜻으로 이해를 했는데 ...args 만으로 표기를하면 this까지 포함되는게 아닌건가요?T extends (...args: infer A) => infer R제 생각에는 다음과 같이 되어야 할 것 같은데 어떻게 this를 제외한건지 명확하게 이해가 안갑니다T extends (this:unknown, ...args: infer A) => infer R  

안녕하세요, 강사님!제가 알기로는 @Length가 Hibernate에 종속적이어서 @Size가 더 가볍고 기능은 둘 다 동일하게 길이에 대한 유효성 검사를 하는 것으로 알고 있는데 혹시 @Length를 사용하는 추가적인 이유가 존재할까요..?

버추얼 머신을 통하여 우분투 설치 진행 시 해당 오류가 떠서 해결 방법에 대해 문의드립니다.상기 환경에서 시작 버튼을 누르면 하기와 같은 창이 뜹니다.위 창에서 첫번째 메뉴를 선택하면 하기와 같이 end kernel panic 창이 뜨고는 이후 진행이 되지 않습니다.상기 문제에 대하여 혹시 해결책을 알고계신다면 답신 부탁드립니다.좋은 강의 해주셔서 감사합니다.