안녕하세요, 선생님! 8장 강의 학습 중에 궁금한 부분이 있어 이렇게 질문드립니다. 8장 실습 중 WebRTC 관련 예제를 크롬에서 먼저 실행한 뒤, 익스플로러 엣지에서 실행했더니 첨부한 이미지와 같은 현상이 발생했는데요, 혹시 이 경우가 왜 발생하는 건지 조언 구드려도 될까요? 강의 덕분에 많은 걸 배워가고 있습니다. 무더운 여름 건강 유의하시고, 감사합니다!
게시글 등록 컴포넌트 생성해서 렌더링 하는 것 같은데, 등록 페이지는 피그마에서 보여지는 "트립토크 등록" 컴포넌트 UI를 스스로 생성해서 연결하라는 뜻인가요? 아니면 레퍼런스 코드에 있는 것처럼 단지 렌더링만 하는 코드를 작성하라는 건가요? 그리고 모든 과제는 피그마를 참고하면서 A-Z 까지 스스로 하는건가요?
안녕하세요. 강의 잘 보고 있습니다. 제가 서비스하고 싶은 사이트는 지금 예시로 만든 mbti 서비스처럼 정적웹으로는 조금 운영이 어려운 사이트입니다. 그래서 db 연결이 필수인데, rdbms 든, noSQL 기반 db 이든 클라우드 db를 써서 연결을하자니 용량에 따라 과금이 돼서 사실 부담이 좀 됩니다. 코배투님도 결국 사이트를 키우시면서 db는 선택이 아니라 필수로 연결하셨을것 같은데 어떤걸 선택하셨나요? 만약 추천하신다면 어떤걸 추천하시나요?
안녕하세요, Roboflow에서 Dataset 다운로드 받을 수 있게 알려주셨는데, 영상과 같이 다운로드 받으면 실제 zip 파일에 README.dataset.txt파일과 README.roboflow.txt 파일만 존재합니다. 데이터셋파일도 강의자료로 올려주시면 감사합니다.
커서 자동완성 기능 때문에 놓치는 코드들이 있어서 github에서 특정 시점 코드를 받아서 npm install eas build --platform android --profile development 를 통해 빌드를 생성하려는데, 빌드가 실패해서 expo 관리자에서 로그를 확인해보니 아래와 같은 에러가 계속 나고 있습니다. npm error npm ci can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with npm install before continuing. package.json과 package-lock.json이 동기화가 안됐다는 것 같아서 package-lock.json 삭제 후 npm install 로 다시 설치 후 빌드를 해도 계속 위와 같은 에러가 나고 있습니다. ㅠㅠ 해결 방법이 있을까요?
카카오톡 공유 API 연동 중 SDK 오류에 대한 질문 선생님, 안녕하세요. Next.js 프로젝트에 카카오톡 공유 API를 연동하는 과정에서 지속적으로 'SDK error'가 발생하여 질문드립니다. 제가 이해하고 적용한 방식이 올바른지 검토가 가능하시다면 답변 부탁드립니다.! 1. JavaScript 키 관리 방식 (.env.local) 민감한 정보인 카카오 JavaScript 키를 안전하게 관리하기 위해 .env.local 파일을 사용하고 있습니다. Next.js 환경의 특성상, 클라이언트 사이드(브라우저)에서 해당 키를 사용해야 하므로 환경 변수 이름에 아래와 같이 저장하는 것이 올바른 방법인지 궁금합니다. .env.local NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY="여기에_발급받은_자바스크립트_키" 2. SDK 연동 및 초기화 과정 카카오 개발자 가이드를 참고하여 아래와 같은 순서로 SDK 연동 및 초기화를 진행했습니다. 이 과정이 올바른지 확인하고 싶습니다. 1단계: SDK 불러오기 웹 페이지에 아래 스크립트 태그를 추가하여 JavaScript SDK를 불러왔습니다. ${VERSION} 과 ${INTEGRITY_VALUE} 는 카카오 개발자 사이트에서 제공하는 최신 값으로 적용했습니다. HTML <script src="https://t1.kakaocdn.net/kakao_js_sdk/${VERSION}/kakao.min.js" integrity="${INTEGRITY_VALUE}" crossorigin="anonymous"></script> 2단계: SDK 초기화 불러온 SDK를 초기화하기 위해 Kakao.init() 함수를 호출했습니다. 이때, 인자 값으로 .env.local 에 저장한 process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY 를 사용했습니다. JavaScript // SDK를 초기화합니다. Kakao.init(process.env.NEXT_PUBLIC_KAKAO_JAVASCRIPT_KEY); // SDK 초기화 여부를 콘솔에 출력하여 확인합니다. console.log(Kakao.isInitialized()); 전체 코드 예시 최종적으로 아래와 같은 구조로 코드를 작성하여 초기화를 시도하고 있습니다. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Kakao JavaScript SDK</title> <script src="https://t1.kakaocdn.net/kakao_js_sdk/v1/kakao.min.js" integrity="sha384-..." crossorigin="anonymous"></script> <script> // 2. SDK 초기화 // 실제로는 Next.js 환경 변수를 사용합니다. Kakao.init('YOUR_JAVASCRIPT_KEY'); // 초기화 여부 확인 console.log(Kakao.isInitialized()); </script> </head> <body> ... </body> </html> 요약 질문하자면.. Next.js 프로젝트에서 카카오 JavaScript 키를 .env.local 파일에서 관리 하는 방식이 올바른가요? script 태그로 SDK를 로드한 후, Kakao.init() 함수에 환경 변수 값을 넣어 초기화 하는 현재의 구현 방식이 정확한가요? 만약 위 과정에 문제가 없다면, 'SDK error'가 발생할 수 있는 다른 일반적인 원인 (예: 카카오 개발자 사이트의 플랫폼 도메인 설정 오류, 앱 키 오타 등)은 무엇이 있을까요? 바쁘시겠지만 시간 나실 때 확인 부탁드립니다. 감사합니다!
styles/globals.css의 내용을 삭제하니 _app.jsx에서 import 에러가 생기고 import를 삭제하니 화면에 Link 의 내용과 404화면이 함께 나옵니다 그리고 다음강의에서 Layout.tsx도 Module not found: Can't resolve '@/layouts/Layout.tsx' 이러한 에러가 나오는데 next 15버전이라서 에러가 나는걸까요?..
안녕하세요! 섹션 9 마지막 강의 듣던 중 궁금한 점이 생겨서 질문 드립니다. 모달 뒤쪽에 모달이 띄워지기 이전 페이지를 병렬로 렌더링 하기 위해 Parallel Route를 이용해서 루트 레이아웃에 modal을 전달하면, 리턴 내부의 {modal} 에 모달 컴포넌트가 나타나는 건가요? 앞서 createPortal 에서 두 번째 인수( document.getElementById("modal-root") )는 모달이 렌더링 될 위치라고 들었던 것 같은데, 루트 레이아웃에 모달이 렌더링 되는 위치를 나타내는 div 태그( modal-root 라는 id값을 가지는 div 태그)와 {modal} 이 함께 있는 것이 문제가 되지는 않는지, 모달 컴포넌트가 중복되어 열리는 건 아닌지 궁금합니다..!
안녕하세요. 강사님. 콜백함수 챕터에서 repeat 함수에서 호출하는 Callback 함수에 인수를 하나로 넣어주고 있는데 callback 함수가 어떤 함수 인지 모르는 상태에서 인수가 여러개인 함수를 넣어 준다면 오류가 발생하지 않을까요? callback 함수로 들어오는 인자가 잘못된 경우 안에서 타입 체크등을 하기도 하는지 궁금합니다.
안녕하세요. Loading UI & Streaming 강의를 따라 하는데, 캐시 비우기 및 강력 새로고침으로 해도 page loading... 이 안보이네요. 개발자도구 띄우고 '캐시 비우기 및 강력 새로고침'으로 하면, 개발자도구 > 네트워크 에서 dashboard페이지가 '대기중' 상태이고, 미리보기에서 보이는 내용은 없습니다. route.ts에서 랜덤 지연시간이 지난 후 VSCode 에서 data { data: '4057만에 응답완료!' } 라고 뜬 후에 브라우저 개발자도구 > 네트워크에서 dashboard페이지 미리보기를 보면 " 루트 레이아웃대시보드 레이아웃 page loading..." 이라고 보이는데, 지연시간이 지난 후이라서 그런지 브라우저 상에서는 "루트 레이아웃대시보드 레이아웃 대시 보드 페이지" 으로만 보입니다. datashboard 페이지의 응답이 지연 시간이 지난 후에 하는거 같은데 왜 이럴까 궁금해지네요.
안녕하세요! 강의 잘 듣고 있습니다ㅎㅎ 이번 강의에서 React dev tools의 ' Highlight updates when components render' 옵션을 통해서 컴포넌트가 언제 리렌더링 되는지 감지하는 방법을 알려주셔서 해당 내용 학습 중에 궁금한게 생겨 질문 드립니다. 해당 옵션을 켜고, 이번 강의의 실습 내용 중에서 input 영역을 input component로 분리하면 다른 component와 어떠한 영향도 주고 받지 않으니까 input을 작성할 때 input 영역만 highlight가 될 거라 예상 했는데요, 실제로는 형제 컴포넌트도 다 같이 리렌더링 되는 것 처럼 보이더라구요. 이 현상이 제 코드의 문제인건지, 다른 이유가 있는건지 궁금합니다. input component를 분리한 App.jsx와 Input.jsx를 아래에 코드로 첨부했습니다. [App.jsx] import { useState, useEffect, useRef } from 'react' import "./App.css" import Viewer from './components/Viewer' import Controller from './components/Controller' import Even from './components/Even' import Input from './components/Input' function App() { const [count ,setCount] = useState(0); const handleClickCount = (addValue) => { setCount(count + addValue) } return ( <div className="App"> <h1>Simple Counter</h1> <section> <Input /> </section> <section> <Viewer count={count} /> {count % 2 === 0 ? <Even /> : null} </section> <section> <Controller onCount={handleClickCount}/> </section> </div> ) } export default App [Input.jsx] import { useState } from "react"; const Input = () => { const [input, setInput] = useState(""); return ( <input value={input} onChange={(e) => { setInput(e.target.value) }} /> ) } export default Input;