7.2 구글 로그인 1 - AuthUI 구현 구글 로그인 관련 질문드립니다.

Unsupported provider: provider is not enabled애러 메시지를 보니 provider가 enable이 안된것으로 보이네요. 아래 이미지를 참고해서 Google Login 켜주시면 됩니다. (사진)

7.2 강 구글 로그인 1 강좌에서 redirectTo 로 설정해도 이동이 안되요.

Redriect URLs 설정이 없다면 기본 Site URL로 리다이렉트가 들어갑니다.

7.2 강 구글 로그인 1 강좌에서 redirectTo 로 설정해도 이동이 안되요.

(사진) Redirect URLsURLs that auth providers are permitted to redirect to post authentication. Wildcards are allowed, for example, https://*.domain.com 위 부분 설정을 하셨는지 체크 부탁드려요. 모든 Auth 설정에 공통 적용되는 설정인데요, 허용 가능 리다이렉트 경로를 화이트 리스팅 처리해야 합니다.

코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?

2) 태그를 감쌀때 어떤 것은 div로 컨테이너를 주시고 어떤것은 안주시는 경우가 있는데, 차이를 모르겠음.여러 목적이 있는데요.1.레이아웃 잡을 용도로 넣기도 합니다.2.스타일 wrapper 목적으로 넣기도 합니다.3.Tree를 깔끔하게 만들기 위해서도 넣습니다.3) useUIState에 저장된 변수 이름이 "homeCategory"인데, 제 생각엔 이것 보다는 "selectedSubject" 같은 이름이 더 직관적이라 생각하는데, 그럼에도 제 생각보단 선생님 생각이 맞을건데 제 생각이 어느부분이 부족한질 모르겠음.아뇨, 변수명에 정답이 없어서 생각해주신 방향으로 해주셔도 됩니다. 아래 중에서 제일 직관적인것을 생각하는것도 좋겠네요.음악 카테고리에 사용할 수 있는 변수명을 추천해드릴게요:1. genreFilter - 장르를 기준으로 필터링하는 경우2. moodFilter - 음악의 분위기나 감정을 기준으로 필터링하는 경우3. artistFilter - 아티스트를 기준으로 필터링하는 경우4. releaseYearFilter - 발매 연도를 기준으로 필터링하는 경우5. instrumentFilter - 악기를 기준으로 필터링하는 경우이 변수명들은 필터링하려는 기준에 따라 유연하게 사용할 수 있어요! 4) 위와 같은 문제들을 해결하고 싶어서, 책을 찾아보려 하는데 리액트 훅을 설명해주는 책들은 많은데, HTML CSS를 어떤 구조로 짜야 하는지, 리액트 앱 만들때 폴더구조는 어떻게 하는게 좋은지에 대한 책은 없어서 어떻게 해야할지 모르겠음.*HTML/CSS 구조를 예쁘게 만드는것이 개발자의 덕목이긴 합니다. 근데 실무에서는 마감일을 맞추고 잘동작하는것이 더 중요하죠. 이것을 선행후 리팩토링때 고려해보면 좋겠네요.HTML, CSS -> 조은님의 html , 구조는 시멘틱, 접근성 고려하면 좋겠네요.*https://www.inflearn.com/course/html-%ED%91%9C%EC%A4%80-%EA%B8%B0%EC%B4%88?srsltid=AfmBOop5ewJcABGFZYw6P38Xsdk-cuq3oAwsIp_Di0hrQOJdaE1-cSvS리액트 앱 만들때 폴더구조 -> 유용태 님의 FSD 글 추천합니다.https://velog.io/@teo/separation-of-concerns-of-frontend

코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?

1.components/elements vs components 의 차이를 제대로 말씀 안드리고 넘어갔을수 있겠네요.그 둘의 차이점은 elements는 조금 더 작은 컴포넌트 조각을 넣었구요.그를 이용한 더 큰 컴포넌트를 components에 정의했어요.*사람마다 다른 기준으로 묶기 때문에 각자의 원칙에 고민 해주시면 좋겠네요.

코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?

안녕하세요.1.화살표를 45px 움직인 이유는 기존의 컴포넌트를 커스터마이징 하기 위함입니다.! 처음부터 컴포넌트를 만들었으면 그럴 이유는 없겠죠. radix에서 제공하는 ui component로 빠르게 개발하는것에 대한 단점입니다. 아래는 순수 CSS 입니다. 이를 tailwind css로 바꾼것 입니다.```html 이 박스는 왼쪽으로 45px 이동했어요!``` ```css.relative-box { position: relative; /* 박스를 기준으로 위치를 설정 */ left: -45px; /* 박스를 왼쪽으로 45px 이동 */ background-color: lightblue; width: 200px; height: 100px; padding: 10px; border: 1px solid blue;}``` - position: relative: 요소의 위치를 기준으로 이동할 수 있도록 만들어줘요. 이 경우, 요소는 원래의 위치를 기준으로 상대적인 변화를 적용받아요.- left: -45px: 요소를 왼쪽으로 45픽셀 만큼 이동시켜요. - 값이기 때문에 왼쪽으로 이동하게 돼요.이 코드를 적용하면 .relative-box 요소는 원래 위치에서 왼쪽으로 45픽셀 이동된 상태로 렌더링돼요.

강의외 복잡한 ui 입력폼 관련 질문 있습니다

코드 런타임 환경이 아니라서 사실 정확하게 답변드리기 어렵습니다. 몇단계에서 막히는지 알려주시면 추가 답변가능할수 있어요.1.드래그 시작 이벤트가 작동하는가 ? 2.드래그 끝 이벤트가 작동 하는가?3.드래그 끝으로 상태 데이터가 변경 되었는가?4.데이터 변경에 따른 UI가 업데이트 되었는가?-> 불변성 문제일 가능성이 큽니다. 데이터의 depth가 깊기 때문에 이를 위한 관리가 필요하죠. -> 배열의 key 값이 고유하지 않아도 문제가 될 수 있어요.

npx랑 yarn이랑 같이 써도 되나요?

yarn 1.x 버전으로 패키지 매니저를 사용해서, npx를 써도 무관합니다만.깃헙에 이슈를 보니 package lock 파일이 만들어지는 경우가 있다고 하네요. 그런 경우에는 yarn lock 하나만 남겨주는게 좋겠습니다. yarn dlx는 yarn 2.x 이상을 사용하면 가능한데, 이번 강의 범위에서는 벗어나서 참고만 부탁드러요.~ npm : npx shadcn@latest add accordionyarn : npx shadcn@latest add accordion-> yarn dlx shadcn@latest add accordionpnpm : pnpm dlx shadcn@latest add accordionbunx : bunx --bun shadcn@latest add accordion

article / section 태그에 관해

안녕하세요. div보다는 하나의 의미가 담긴 콘텐츠를 구분할때 article 과 section 으로 사용하긴합니다. 제 기준에서,큰 의미가 달라지는 부분이라면 -> section 사용.section 내에서, 혹은 콘텐츠의 주제나 항목을 묶을 수 있을때 -> article 사용. 이러한 시멘틱 태그가 컨벤션 같은 부분이라 합리적인 선에서 직접 정해서 사용해보시면 좋을것 같아요.!

카테고리 변경 시 이미지 로딩

안녕하세요.! 백그라운드 이미지의 로딩이 문제인 경우 크게 2가지 방법으로 접근할 수 있겠습니다. 백그라운드 이미지 이므로, 너무 고해상도는 필요없습니다. 게다가 블러처리도 하기 때문이죠. next/image에서 quality 속성 사용해서 퀄리티를 낮출 수 있어요. Next.js의 next/image 컴포넌트는 이미지를 자동으로 최적화하면서, quality 속성을 통해 이미지의 품질을 낮출 수 있어요. 이 속성으로 이미지의 압축률을 조정할 수 있죠. 이미지를 next.js 서버가 아닌 CDN이 제공하도록 만들기. 이미지 같은 경우에는 CDN에 올리는것이 좋습니다. webp 포멧으로 변경해서, CDN에 올려 next.js의 작업분담을 줄여주는 방향으로 최적화 진행해보시길 바랍니다.!