강의 중 스토리북이 테스트를 위한 라이브러리라고 말씀하신 부분이 있는데요, 스토리북 테스트 라이브러리가 yarn pnp와 의존성 간의 충돌이 있는 것으로 보입니다. 혹시 yarn pnp 환경에서 스토리북으로 컴포넌트에 대한 테스트를 진행하고 싶으면 어떻게 진행하면 좋을까요?
tailwindcss의 버전이 4.x로 변경됨에 따라 강의 내용의 일부인 npx tailwindcss init -p 시 오류가 발생하는 것이 확인되었습니다. 최대한 강의를 따라가기 위하여, 일단 제 임의로 3.4.3 버전으로 다시 설치를 한 상황인데요. 강사님께서 npm install -D tailwindcss postcss autiprefixer 를 하셨을 때 설치되는 버전을 알고싶습니다.
강의 잘 보고 있습니다. 무한 스크롤 기능 구현 해보았는데요 영화가 60개까지 나오고 진행이 되지 않다가 개발자 도구를 켜면 더 스크롤이 되는데 그것도 120번 영화에서 끊깁니다. 머가 문제일까요 ...ㅠ 검색기능에서 title 첫글자 대소문자 상관없이 하려면 어디를 수정해야 하나요?
안녕하세요 강의 잘 보고 있습니다. 린캔버스 수정1 강의 부분을 보고 있는데 조금씩 점점 어려워 질수록 헷갈리는 부분이 많은데 handleNotesChange 함수의 section, updatedNotes 의 매개변수가 작성이 되었는데 아직 초보자인 제가 이처럼 함수를 작성할 때 매개변수가 필요한지 필요하지 않는지에 대해 잘 모르겠더라구요. 정말 간단한거 예를 들어 삭제기능을 할땐 삭제할 id가 필요하니 id를 매개변수로 받아오고 이러한 부분은 이해를 하지만 지금처럼 조금 복잡해질때 어떤 매개변수가 필요하고 왜 필요한지에 대해 아직 어려운데 이럴때 어떤식으로 공부를 하면 좋을까요?
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 안녕하세요, smtp 부분 이메일 인증 부분 진행하고있는데, smtp를 설정해야하는건가요? 그렇다면 어떻게 설정해야할까요? 리센드를 이용하면 도메인이 무조건 필요한거같아서요
안녕하세요 삭제기능 구현 강의를 보다가 조금 어려운 부분이 있어 질문을 드립니다. canvas.js 파일에서 getCanvases함수와 createCanvas함수는 canvases.get, canvases.post앞에 return이 붙었고 이건 다른 곳에서 사용할 수 있다라고 알고 있습니다. 그럼 deleteCanvas는 왜 똑같이 return을 사용하지 않고 async await을 사용했는지 궁금하고 왜 위에 두 함수는 return을 사용했는지도 궁금합니다.
안녕하세요! React로 프로젝트를 진행할 때 여러 함수들(이벤트 핸들러나 로직 처리 함수 등)을 구현하게 되는데, 이런 함수들을 어느 위치에서 정의하고 관리하는 것이 좋은지 궁금합니다. 예를 들어, B 컴포넌트 안에 A 컴포넌트가 있고, A에서 어떤 이벤트 함수가 필요하다면 그 함수를 B에서 정의하고 props로 A에 전달하는 식으로 처리하는 것이 React에서 일반적인 방식인가요? 그리고 만약 그 함수가 여러 컴포넌트에서 재사용되어야 한다면, 이들 컴포넌트의 공통 상위 컴포넌트까지 올라가서 정의한 후 각 컴포넌트에 전달하는 방식이 맞는지도 궁금합니다. 혹시 더 좋은 구조나 패턴이 있다면 조언 주시면 감사하겠습니다!
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 모듈 에러가 뜨는데 수파베이스 설치를 잘못 한 것일까요? 검색해서 이리 저리 해보아도 잘 해결이 되지 않네요. 도와주세요~
안녕하세요. 얕은복사와 깊은복사에 대해 질문합니다. 제가 알기론 지금 예시를 든 let person1 = {firstName:'짐', lastName:'코딩'}; let person2 = {...person1}; person1.firstName = 'GYM' console.log('person1: ', person1); console.log('person2: ', person2); 이거를 깊은 복사라고 하셨는데 얕은 복사 아닌가여?? 값이 원시값이라서 참조 공유 문제가 안생기는거 아닌가요?? 깊은 복사는 모든 깊이까지 값 자체를 완전하게 복사해야되는걸로 알고 있어서 cloneDeep이나 JSON.parse(JSON.stringify(person1)) 이런식으로 써야되는걸로 알고 있거든여. const items = [...todos] 도 얕은 복사지만 새로운 배열 주소를 만들어서 리액트에서는 변화가 생겼다고 판단하고 리렌더링이 되는걸로 알고 있는데 아닌가요??
Loading UI & Streaming 강의 수강 중 강의 내용대로 따라 했는데 잘 안되는 부분이 있어서 질의드립니다! dashboard/page 에서의 page loading...은 정상적으로 나오는데 Card 컴포넌트 각각의 loading도 page loading 이후 한번에 로드되면서 각각의 loading이 나오지 않습니다. 혹시 어떤 문제가 있는지 알려주실 수 있으실까요? 아래에는 해당 깃허브 링크와 이미지 첨부했습니다! https://github.com/holdn2/NextJS-Inflearn-Chatgpt
퍼블리셔로 일하고 있는데.. 설정하는 부분이 녹록치 않아 이렇게 질문드립니다. 제가 하고자 하는 것은 라이트,다크 테마시 주요 컬러와 기타 색상등을 변경하려고 하는데요.. css 변수 처리 예는 아래와 같습니다. /* root 라이트테마 기본 변수 */ :root { --text-color: #000; --bg-color: #fff; } /* 다크 테마 기본변수 */ .dark { --text-color: #fff; --bg-color: #000; } 테마 설정은 다음과 같이 진행했습니다. preivew.tsx 에 decorators 배열로 추가함. import { withThemeByClassName } from '@storybook/addon-themes'; 이렇게 하니까 dark 클래스는 잘 붙고 있는데.. 문제는 상단 패널에 기본적으로 레이어로 떠서 클릭할수 있는 라이트,다크테마는 컴포넌트 화면의 배경컬러가 변경되지만 제가 애드온한 것은 토글버튼은 라이트,다크버튼이 나오더라구요.. 근데 문제는 애드온 한것은 클래스만 제어되고 있고 컴포넌트의 배경컬러를 제어하려니까 잘 안되더라구요.. 상단 기본 패널의 테마설정 부분과 애드온 한 부분의 싱크가 안맞는 부분도 있구요.. 이것을 어떤 식으로 처리해야하는지.. 조언을 구하고 싶습니다. 강의 잘 듣고 있습니다. 감사합니다.
안녕하세요 강의 너무 잘 보고 있습니다. 공부를 하다가 궁금한점이 생겨서 질문을 드립니다. 메모를 추가 삭제 기능에서 처음에는 추가같은 경우에는.... const handleAddNote = () => { setNotes([...notes, {id: "", content: ""}]) } 이런식으로 ...notes로 기존 값에다가 id, content로 새로운 메모를 추가하는 기능으로 알고 있는데 나중에는... // 새로운 캔버스 export function createCanvas() { const newCanvas = { title: uuid().substring(0, 4) + '새로운 린 캔버스', lastModified: dayjs().format('YYYY-MM-DD HH:mm:ss'), category: '신규', }; return canvases.post('/', newCanvas); 이런식으로 추가기능을 만들고 삭제도 filter를 이용을 하는데 나중에는 export async function deleteCanvas() { await canvases.delete(`/${id}`); } 이런식으로 삭제 기능을 작성이 되었더라구요. 첫번째 코드들은 처음에는 추가, 삭제기능이 되지만 새로고침 후에는 다시 원래대로 나오고 두번째 코드들은 서버에서 추가, 삭제 기능을 만들어서 새로고침을 하면 실제로도 추가, 삭제 기능을 하게 되는 것인가요? 만약 그렇다면 첫번째 코드들은 새로고침을 하면 원대대로 되는데 왜 사용이 되는건지 궁금합니다.
안녕하세요! 강사님! 그리드 레이아웃과 관련되어 질문이 있습니다. 보통 디자이너들은 모바일, 태블릿, 데스크탑을 분리해서 개별적인 그리드 시스템을 활용해서 디자인을 진행하는 것으로 알고있습니다. <div class="container mx-auto"> <div class="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12"> <div class="col-span-4"> a </div> <div class="col-span-4"> b </div> <div class="col-span-4"> c </div> </div> </div> 이런식으로 각 섹션마다 container mx-auto로 컨테이너를 생성해주고 내부 row를 grid-cols로 그리드화하고 그리드 레이아웃에 맞게 컬럼들을 확보해서 하는 방식은 실제로는 잘 사용되지 않는 방법일까요 ?! 여러 군데를 찾아보아도 실제 grid를 사용하는 곳은 카드 UI들을 동일한 간격으로 배치하는 구조로만 사용하더라구요!