처음 index페이지에 접근할 땐 사전렌더링 후 하이드레이션 과정을 거치게 되고 그 후 라우팅을 하며 페이지 이동과정에선 CSR 방식으로 동작하는 걸로 이해하고 있습니다! 책 디테일 페이지의 경우 서버 컴포넌트이며 데이터 페칭을 받아 렌더링 되는 코드가 적혀있는데 만약 인덱스 페이지에서 디테일 페이지로 링크 컴포넌트를 통해서 페이지를 이동하게 되면 서버에서 클라이언트로 데이터 페칭을 마친 후 RSC 페이로드를 내려주는 게 맞을까요?? 그리고 클라이언트에서는 이 페이로드를 역직렬화 하여 화면에 렌더링 해주게 되는 걸까요? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요! 이정환 강사님. next 강의를 거의 다 수강해가는 것 같아서 배운걸 활용해 혼자 간단한 투두리스트를 구현해보고 있는데요. 새로고침 시에도 할일목록이 유지되도록 하기 위해 로컬스토리지에 저장된 목록을 가져오고 또 저장하는 로직을 작성하였더니 ReferenceError: localStorage is not defined 이와 같은 오류를 만나서 useEffect를 사용해서 아래와 같이 작성하였습니다. // useTodo 커스텀 훅 일부 const [todoList, setTodoList] = useState<Todo[]>([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const storedTodos = getStoredTodoFromLocalStorage(); setTodoList(storedTodos); setIsLoading(false); }, []); useEffect(() => { if (todoList.length > 0) saveTodoToLocalStorage(todoList); }, [todoList]); // ToDoItemList.tsx export default function ToDoItemList({ isLoading, todoList, toggleTodoCompletion, }: ToDoItemListProps) { if (isLoading) { return <S.ToDoItemList>로딩중...</S.ToDoItemList>; } if (todoList.length === 0) return ( <S.ToDoItemList> <S.EmptyList>할일을 생성해보세요✨</S.EmptyList> </S.ToDoItemList> ); return ( <S.ToDoItemList> {todoList.map(todo => ( <ToDoItem key={todo.id} todo={todo} toggleCompletion={toggleTodoCompletion} /> ))} </S.ToDoItemList> ); } 처음엔 로딩상태를 만들지 않고 todolist.length가 0이면 "할일을 생성해보세요"가 보이고 아니면 할일 목록을 보여주도록 했습니다. 하지만 그렇게 하니까 할일 목록을 작성하고 새로고침을 누르면 "할일을 생성해보세요"가 잠깐 나타나고 기존에 작성한 할일 목록이 나타나더라구요... 그래서 로딩중을 추가했는데 이제는 이 투두리스트에 처음 접근한 사람도 아직 아무 데이터도 없는데 로딩중이 보이고 할일을 생성해보세요가 나타나게 되는 문제에 직면했습니다. 이러한 로직은 어떻게 다루어야 좋을까요?? 제가 의도했던 건 처음 투두리스트 작성하려는 유저에겐 "할일을 생성해보세요"가 바로 보이고, 할일을 작성하면 할일목록을, 새로고침을 해도 할일목록을 보여주기 이전에 작성한 투두리스트가 있는 유저에겐 할일 목록을 보여주고 새로고침을 해도 그대로 유지해서 보여주기 인데 어떻게 해결할 수 있을지 모르겠습니다... 🥲
우선, 강의대로 따라했을 때 index.html 에서는 헤더와 푸터 인클루드가 잘됩니다. 따로 test.html 을 만들어서 인클루드 해봐도 잘 됩니다. 하지만 html/class-detail.html 에 인클루드를 하면 헤더와 푸터가 인클루드 되지 않습니다. custom.js 의 경로를 바꿔봐도 안되네요 ㅜㅜ 인클루드가 안되는 이유를 알 수 있을까요 ?
먼저, 유익한 강의 감사드립니다.!!! 계단 경사면 적용 후 바닥면을 평탄화 하려고 아래 엣지 선택 후 S - Z - 0 입력하니 계단 형상의 모서리 라운드 크기가 줄어듭니다. ※ Scale의 Z 값을 0이 아닌 값(예: 0.1)으로 입력하니 모서리는 줄어들지는 않는데요. 제가 뭔가 놓친 부분이 있을까요?
페이지 라우터의 경우 props를 통해서 데이터를 받을 수 있다고 하셨는데 index파일 부모컴포넌트가 아닌 하위 child 컴포넌트에서는 데이터를 불러올 수 없는 건가요?? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요 정환님. SSR 개념 강의 이후 실습을 위해서 서버 세팅을 하는 과정 중 데이터베이스 스키마 설정하는 부분에서 진행이 되지 않아 문의드립니다. supabase DATABASE_URL 환경변수 설정 npx prisma db push 명령어 실행 스키마 설정이 진행되지 않음 [버전] prisma : 5.13.0 @prisma/client :5.13.0 Node.js : 20.11.1
제가 강의를 따라하면서 설치를 잘 못하여서 sc delete RabbitMQ 명령어를 사용했고 이후 재설치하여 진행을 하는데 아래와 같이 실패를 하고 있습니다. 그래서 호환이 문제이가 싶어서 github에서 버전호환으로 다시 시도를 해도 같은 문제가 발생합니다. RabbitMQ 커멘드로 삭제 다운 실행 관련 명령어를 사용해도 권한 문제가 발생을 했고, 관리자 모드로 명령어를 날려도 권한 문제가 발생했습니다. 혹시 몰라서 cmd 관리자 권한으로 날려도, RabbitMQ-server에 sbin이라는 위치로 들어가서 명령어를 날려도 같습니다. https://stackoverflow.com/questions/16001047/rabbitmq-fails-to-start 위 stackoverflow에서 관련 정보를 찾아서 진행을 했는데 같은 문제가 발생 됩니다. 지금 한 3시간 정도 삽질을 하니 진이 빠지네요.. 도와주세욥...
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 ! 강의 도중에 강의 정답에서 입력받은 문자의 끝을 . 로 구분하는 코드가 getline(cin,s) 로 받아서 if (s==".")break; 로 되어 있는데 .일때 break 되면 while 문 박으로 나가게 되는거 아닌가요? 또 "." 로 할때와 '.' 으로 할때의 차이가 궁금합니다.
안녕하세요! 강의 잘 듣고 있습니다. 제 공부 스타일은 먼저 풀어보고 강의를 듣습니다! 일단 강의의 내용은 잘 이해가 되었습니다. 하지만 저는 시작을 기준으로 잡고 풀었는데 제 생각에는 예외처리를 잘 해서 문제가 없다고 생각하는데 혹시 뭐가 문제인지 알 수 있을까요? 백준 질문게시판에 있는 반례도 다 통과합니다..ㅠㅠ http://boj.kr/97290f63c432442f952ce3c865ada540
안녕하세요 4분 45초에 ReactDom.create 이렇게 되어있는데 저의 경우 createRoot (document.g e 로 시작합니다. 구글에 찾아보니 17과 18의 차이라는데 https://velog.io/@citron03/React-18%EC%97%90%EC%84%9C-ReactDOM.render%EC%99%80-createRoot 그대로 진행해도 문제되지 않을까여 ? 감사합니다.
영상처럼 시작 템플릿 바꾸고 오토스케일링 그룹 설정 새로운버전으로 바꾸고 로드밸런서 dns 주소로 health체크를 해봤는데 502에러가 뜨고 안되서 여러가지 다 확인해봤는데 ec2 만들어지고 git clone 자체가 안되었더라고요 사용자 데이터 명령어 자체가 실행이 안됩니다 직접 들어가서 명령어를 치면 먹습니다 네트워크 문제도아니고 패키지 다운로드 안한것도 아닌데 사용자 데이터 명령어가 git clone 시작도 안되면 어떻게 해결해야될까요? git clone은 되었지만 괜한 root 계정 밑에서만 조회해서 못봤던거... 강사님 해결해주셔서 감사합니다!
좋은 강의 감사드립니다. - 좋은 UX의 사례: MockupWorld를 꼽았습니다. Mockup World는 유/무료 목업 자료를 제공하는 사이트입니다. 전체적인 디자인이 일관되게 통일되어있어 보는데 편했습니다. 대응의 원리를 잘 적용하여 사용자가 자주 사용하는 search bar를 상단 네비게이션과 같이 두는 것이 아니라 따로 하단에 크게 배치하여 사이트에 들어가자마자 사용자가 바로 검색할 수 있게 유도했다 생각합니다. search bar 하단에는 카테고리 분류를 칩 버튼으로 두어 무료 목업이 필요한 의도가 높은 사용자들이 검색 없이도 원하는 아이템을 찾을 수 있게 해두었습니다. (바로 아래에 광고가 있는 것이 아쉽지만) 이는 의도가 낮은 사용자라 할지라도 둘러볼 가능성을 높일 것이라 생각 됩니다. - 나쁜 UX의 사례: 미리캔버스를 꼽았습니다. 미리캔버스는 미리 캔버스는 저작권 없이 디자인 분야를 잘 모르는 사람들도 다양한 템플릿을 제작할 수 있는 사이트입니다. 1. 카테고리를 썸네일을 사용해 공간 차지를 많이 하다 보니 어떤 템플릿이 있는지 한 눈에 보기 힘듭니다. 위의 Mockup world처럼 이미지 없이 칩 버튼을 사용해 사용자가 원하는 템플릿을 한번에 찾을 수 있게 도와주면 좋을 것 같다는 생각을 하게 되었습니다. 2. 템플릿 사이즈에 일관성이 없습니다. 이미지도 화려해 눈이 피로하다 느꼈습니다. 템플릿에 대한 타이틀과 어떤 템플릿인지의 대한 설명도 없어 사용자는 직접 눌러보며 알아봐야 합니다. 카드형 UI로 만들어 템플릿에 대한 기본정보를 넣으면 어떨까 하는 생각이 들었습니다. 3. 화면에서는 안 나와있지만 '이번 주 인기 카드 뉴스', '이번 주 인기 포스터' 가 하단에 있습니다. 주 단위로 바뀌고, 사용자가 자주 찾는 인기 있는 목록이라면 추천 목록처럼 상단에 있어야 더 적합하다고 생각합니다. 강의를 듣기 전에는 막연하게 잘 사용하면 그게 좋은 UX가 아닌가? 라는 생각을 했지만, 강의를 들은 후 UX 디자인의 원리를 통해 어떤 것이 더 사용자에게 사랑 받는 디자인인지 과제를 통해 감을 잡을 수 있었습니다. 좋은 강의 감사드리며 남은 강의도 열심히 수강 하겠습니다. 감사합니다.
