안녕하세요 제로초님.Parallel Routes에 대하여 질문있습니다 (공식문서 폴더구조)우선 공식문서대로 위와같은 폴더구조로 한 후  export default function Layout({ children, team, analytics, }: { children: React.ReactNode analytics: React.ReactNode team: React.ReactNode }) { return ( <> {children} {team} {analytics} </> ) }Layout에 team과 analytics를 props로 주게되면team과 analytics에 있는 page.js가 잘 렌더링 되는 것을 확인하였습니다.  그래서 이것을 강의에 응용해보려고 했습니다. (강의 폴더구조 및 응용) src/app/(afterLogin)/@team(afterLogin)폴더에 @team 폴더를 만들고 그 안에 default.tsx랑 page.tsx파일을 만들었습니다. default.tsx파일이 없으면 404 not found 가 뜹니다. 그 후 AfterLoginLayout에 team을 props로 두어 렌더링하였습니다. 결과는 default.tsx가 렌더링 되었습니다. src/app/(afterLogin)/layout.tsx type Props = { children: ReactNode; team: ReactNode}; export default async function AfterLoginLayout({ children, team }: Props) { return ( <> {children} {team} </> ); } 공식문서에서 default.tsx는 "초기 로드 또는 전체 페이지 다시 로드 중에 일치하지 않는 슬롯에 대한 폴백으로 렌더링할 default.js 파일을 정의할 수 있습니다." 즉 파일을 찾지 못하여 default.tsx를 렌더링 한다는 말이라고 이해했습니다.   즉 궁금한 것은 공식문서 폴더구조에서는 @team폴더의 page.tsx를 렌더링하는 반면 강의 폴더구조에서는 page.tsx를 렌더링하지 않고 default.tsx를 렌더링하는지 궁금합니다.해당 강의에서 설명해주신 것 같아 여러번 보았지만 저의 이해력이 안좋아 질문드립니다. ㅜㅜ 항상 좋은강의 감사드립니다! 

강사님의 컴포넌트를 나눌 때의 기준이 궁금한데요. 지금까지 제가 이해한 내용으로는반복되는 부분은 컴포넌트 화 시켜서 공통컴포넌트 _component폴더에 두시는것 같습니다.  제가 궁금한 것은 (afterLogin)/home/page.tsx 내부 구조가 컴포넌트만 있는데 (사진첨부)(afterLogin)/layout.tsx파일의 내부구조는 컴포넌트화 되어있는 부분이 섞여있습니다page는 모두 컴포넌트화 시키셨는데 layout은 왜 모두 컴포넌트화를 시키지 않으셨을까요? 따로 컴포넌트화 하시는 기준이 있을까요?

강의를 들으면서 이해하기 어려운 부분강의를 따라하는데 에러가 발생하는 부분강의에는 없지만 스토리북에 대해 궁금한 부분들을 자유롭게 질문으로 올려주세요!확인하는대로 최대한 빠르게 답변드리겠습니다 이런것도 여기 질문해도 되나요? 강사님 VS Code 테마가 예뻐서 어떤거 쓰시는지 궁금합니다 ☺ 찾아봤는데 비슷한게 안보여서 질문드렸어요

처음 세팅중인데 읽기전용이라 떠서 커뮤니티에 뜨는대로 따라했는데 올려두신 사진과 같은 내용이 뜨질않아서 어떻게 세틍을 해야하나 질문드려봅니다..

Material--icons_4.0.0.woff2 는 리소스 크기가 3mb인데 해당 폰트는 font-display:block으로 하지 않는이상 폰트 다운드로 전에 영어를 출력시키거나 안보이도록 해야하는되 이 부분 레이아웃 시프트 발생하지 않도록 cls 잡는 방법이 무엇이 존재할까요???

안녕하세요리액트를 사용해서 웹 페이지를 배포 후 반응형 테스트를 위해 여러 기종에서 테스트 중인데요안드로이드 핸드폰에선 기종 상관 없이 전부 잘 보이는데아이폰에서는 아무것도 보이지 않고 하얀 화면만 보이는 문제가 생겼습니다혹시 리액트로 배포 후 ios 기기 호환성을 위해 따로 해줘야하는 작업이 있을까요?

첫번째 사진은 터미널창에서 yarn dev를 하니 리엑트 버전을18.2.0 버전으로 해야 한다고 합니다. .전에 eslint 설치중에 오류가 나서 node_modules, eslintrc.js , yarm.lock 을 지웠다가 재설치를 했습니다.이때문에 오류가 난것 같은데 구글링해도 해결방법을 모르겠어서 질문남깁니다 ㅜ

shadcn는 next.js에서만 사용가능한 라이브러리 인가요?

await updateProfile(auth.currentUser, { displayName: data.name, photoURL: `http://gravatar.com/avatar/${md5(createdUser.user.email)}?d=identicon` }) realtime db와는 아무런 연관이 없는데요??db에서 변화가 되면 프로필상에도 바뀌어야되는데 원칙이 아닌가요??    

yarn add --dev husky과 npx husky install 하니.husky 폴더가 생겼는데 강의와는 다른 폴더들이 많이 있구요 이후에 npx husky add .husky/pre-commit "yarn lint"실행하니 add 명령어를 권장하지 않는다고 뜹니다이 경우에 어떻게 해야할까요??

5-2강의 내용은 문제 없이 잘 됐고, 그 다음부터 5-5까지도 문제가 없었습니다.에러가 다음과 같이 나옵니다.어떤 게 문제일지 잘 모르겠습니다. 도움을 구합니다.<콘솔로그 상 오류 메시지>Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'from')  npm으로 설치를 진행하였으며, npx create-next-app@latest로 최신버전입니다. 

강의 1분쯤에 jest.config.cjs로 쓰는 것과 package.json에서 작성하는 법 2가지를 알려주셨을 때 전자대로 적용해 실행하니 아래와 같은 에러가 발생했습니다! 이후에 package.json에 작성해서 실행하는 방법으로 변경하니 정상적으로 작동했는데 혹시 이 원인을 알 수 있을까요? modules를 import하지 못한 이유를 잘 모르겠습니다!

import/export가 아닌 require/module.export로 파일 불러오고 있는데요. action.type 값 전달에서 궁금한 점이 있어서 질문 남겼습니다! 먼저 아래 코드로// main.jsx const SET_WINNER = 'SET_WINNER'; const CLICK_CELL = 'CLICK_CELL'; const CHANGE_TURN = 'CHANGE_TURN'; exports.SET_WINNER = SET_WINNER exports.CLICK_CELL = CLICK_CELL exports.CHANGE_TURN = CHANGE_TURN// td.jsx const { SET_WINNER, CLICK_CELL, CHANGE_TURN } = require('./tiktaktok_functional');불러오면 action.type이 undefined로 출력됩니다. 근데 아래 방식대로 작성하면 action.type이 불러와집니다.1.// main.jsx exports.SET_WINNER = SET_WINNER = 'SET_WINNER'; exports.CLICK_CELL = CLICK_CELL = 'CLICK_CELL'; exports.CHANGE_TURN = CHANGE_TURN = 'CHANGE_TURN';// td.jsx // 불러오지 않음2.// main.jsx const SET_WINNER = 'SET_WINNER'; const CLICK_CELL = 'CLICK_CELL'; const CHANGE_TURN = 'CHANGE_TURN'; exports.SET_WINNER exports.CLICK_CELL exports.CHANGE_TURN// td.jsx const CLICK_CELL = 'CLICK_CELL'; const CHANGE_TURN = 'CHANGE_TURN';원래라면 module.export 사용 중이면 어떻게 불러와야 되나요?

최소 최대 가격을 수정할 때최소 금액이 0보다 작을 때최대 금액이 최소 금액보다 작을 때위 같은 조건을 처리할 때 관련 질문입니다describe 사용 여부 // 1 describe('최소 최대 가격 확인 테스트', () => { it("최소 금액이 0보다 작을 때, 이렇게~ 처리", () => {}); it("최대 금액이 최소 금액보다 작을 때, 이렇게~ 처리", () => {}); it("최소 최대 가격을 수정하면 setMinPrice, setMaxPrice action이 호출된다", () => {}) }) // 2 it("최소 금액이 0보다 작을 때, 이렇게~ 처리", () => {}); it("최대 금액이 최소 금액보다 작을 때, 이렇게~ 처리", () => {}); it("최소 최대 가격을 수정하면 setMinPrice, setMaxPrice action이 호출된다", () => {})위 같은 조건 테스트를 작성 하는게 좋은지 아니면 아예 입력 처리를 해서 작성 안하는게 좋은지 확인 (0보다 작은수는 입력되지 않고, 최대 금액은 최소 금액보다 무조건 크게 작성하도록 처리 등)  

12분40초에 New.js 파일을 DiaryEditor.js 파일로 옮기는 작업에서 오류가 납니다.

안녕하세요 선생님여쭤보고 싶은 부분이 있습니다. 유저정보 수정 후 서버세션을 업데이트하려는데검색해도 생각처럼 잘 되지 않더라구요.혹시 업데이트 방법을 아실까해서 문의드립니다.

데이터를 bbb 같은 데이터에 담고 그걸 presenter에 담으면 presenter에서 데이터를 알아보기 어려우니까 3번과 같이 map 자체를 <div> 에 담아서 렌더링 한다고 말씀하셨는데요, 그렇다면 3번과 같은 렌더링은 컨테이너의 return에 적는걸까요 아니면 presneter의 return에 적는걸까요?

안녕하세요. beforeLogin과 afterLogin 둘다 layout.tsx를 가지고 있는데, localhost:3000에서 beforeLogin의 layout.tsx를 렌더하는 이유가 궁금합니다. page.tsx가 있으면 그쪽을 인식하는 건가요?

제목 그대로 tno값은 어떻게 초기화 시키나요? testDelete 함수를 이용해서 삭제후 다시 testInsert 함수를 이용해서 1 ~ 100까지 만들고 싶은데, tno값은 1부터 시작하는게 아닌, 기존의 tno값부터 1씩 증가됩니다.

회원가입 css까지 다 완성했는데 비교해보니 비슷한 느낌은 나는것 같습니다. 혹시 코드 예제? 라던지 대표적인 완성코드를 볼 수 있는건 없나요?? 한번 비교해보고 싶어서요.. 추가로 남성/여성 부분 radio 동그라미가 피그마 원본? 상에는 크고 회색으로 칠해져 있는데 저건 어떻게 적용하나요?? 가입하기 버튼 위 구분선도 제게 사라졌는데 원인을 알수있을까요?<!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link href="./02-signup.css" rel = "stylesheet"> </head> <body> <div id="tBox"> <h2 id="title">회원 가입을 위해 <br/> 정보를 입력해주세요</h2> <input class = "underline" type="text" placeholder="*이메일"><br><br> <input class = "underline" type="text" placeholder="*이름"><br><br> <input class = "underline" type="pw" placeholder="*비밀번호"><br><br> <input class = "underline" type="pw" placeholder="*비밀번호 확인"><br><br> <!-- <select> <option disabled="true" selected="true">지역을 선택하세요</option> <option>서울</option> <option>경기</option> <option>인천</option> <option>부산</option> <option>울산</option> <option>김해</option> </select> --> <div id = "gender"> <input type="radio" name="gender">여성 <input type="radio" name="gender">남성 </div> <br><br> <div class="checkbox-container"> <input type="checkbox" id="terms"> <label for="terms">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.</label> </div> <br> <div class = "register"> <button class = "button">가입하기</button> </div> <!-- <input type="button" value="가입하기"> --> </div> </body> </html>* { box-sizing: border-box; } #title { width: 466px; height: 94px; color: #0068ff; font-size: 32px; font-family: Noto Sans CJK KR; text-align: justify; } #tBox { width: 670px; height: 960px; border: 1px solid #aacdff; margin-top: 60px; margin-left: 625px; padding: 100px; box-shadow: 7px 7px 39px 0px #0068ff; border-radius: 20px; display: flex; flex-direction: column; align-items: center; } input[type="text"]{ width: 466px; height: 80px; padding: 10px; margin: 10px 0; border: 1px solid #797979; } input[type="pw"]{ width: 466px; height: 80px; padding: 10px; margin: 10px 0; border: 1px solid #797979; } button { padding: 10px 20px; color: #fff; background-color: #0068ff; border: none; border-radius: 5px; cursor: pointer; } input.underline { border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 1px; } #gender { width : 140px; height: 23.94px; border : 1px solid #fff; display: flex; justify-content: space-between; } .checkbox-container { width: 466px; height: 21.06px; border: 1px solid #fff; border-radius: 3px; align-items: center; display : flex; } .checkbox-container input[type="checkbox"] { margin-right: 10px; } .register { border-top : 1px solid #e6e6e6; width: 470px; height: 1px; } .button { background-color: #FFFFFF; border :1px solid #0068FF; width: 470px; height: 75px; border-radius: 10px; font-size : 18px; color : #0068FF; text-align: center; font-weight: 400; line-height: 26.64px; font-family: Noto Sans CJK KR; }