묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. 프론트엔드 세팅하기 챕터 질문입니다.
안녕하세요 zerocho님. 이번 강의에서 [프론트엔드 세팅하기] 챕터 관련해서 질문드립니다. 강의 후반부에서 babel이 image, css 파일 등을 js파일로 변환한다고 하셨는데 그게 아니라 webpack의 loader(style-loader, file-loader) 가 js파일로 번들링 해주는거 아닌가요? 혹시 제가 모르는 부분이 있나해서 이렇게 문의드립니다. 혹시 참고할만한 문서가 있다면 같이 주시면 도움 될 것 같습니다:) 감사합니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
커스텀 훅 useInput에서 Dispatch<SetStateAction<T>>에 관한 설명을 어디서 찾아볼수 있을까요?
커스텀 훅 useInput에서 Dispatch<SetStateAction<T>>에 관한 설명을 어디서 찾아볼수 있을까요?
-
해결됨애플 웹사이트 인터랙션 클론!
비디오에 맞춰 텍스트가 나타나는 타이밍 질문입니다
안녕하세요 선생님 강의 잘 듣고있습니다!! 다름이 아니라 스크롤 섹션 2의 경우에는 비디오 타이밍에 맞춰 텍스트가 나오는데 그 타이밍 설정은 직접 콘솔로 scrollRatio 값을 확인해가면서 정하면 되는걸까요??
-
해결됨애플 웹사이트 인터랙션 클론!
스크롤 이벤트 시작하는 위치 질문입니다
안녕하세요 선생님 강의 잘 듣고 있습니다. 다름이 아니라 스크롤 이벤트를 시작하는 위치 구하는 부분에서 이벤트가 실행될 scroll-section의 offsetTop으로 구하는 것과 이벤트가 실행될 scroll-section 위에 존재하는 scroll-section들의 높이 합으로 구하는 것이 차이가 있는지 궁금합니다.
-
미해결하울의 안드로이드 인스타그램 클론 만들기
파이어베이스 -> Database가 아닌 Cloud Firebase입니다.
파이어베이스 -> Database가 아닌 Cloud Firebase입니다. 업데이트 되어 영상과 좀 다릅니다. rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.auth.uid != null; } } }
-
미해결하울의 안드로이드 인스타그램 클론 만들기
[개선코드]비밀번호 6자리일 땐 오류 납니다. 다음 코드 확인해주세요.
// 회원가입 or 로그인하는 코드fun signinAndSignup(){ auth?.createUserWithEmailAndPassword(email_edittext.text.toString(), password_edittext.text.toString()) ?.addOnCompleteListener{ task -> if(task.isSuccessful){ println("_________________________________________task succesful") // creating a user account moveMainPage(task.result?.user) } else if(task.exception?.message.isNullOrEmpty()){ println("_________________________________________FUCKING ERROR") //show the error message Toast.makeText(this, task.exception?.message, Toast.LENGTH_LONG).show() } else { println("_________________________________________FUCKGING SIGNIN EMAIL") if(password_edittext.text.toString().length < 6){ println("_________________________________________FUCKGING SIGNIN EMAIL_PASSWORD LENGTH PROBLEM") println("_______________________________________${password_edittext.text.toString().length}") Toast.makeText(this, "패스워드는 최소 6자리 이상이여야 합니다. 다시 입력 바랍니다.", Toast.LENGTH_LONG).show() }else{ println("_________________________________________FUCKGING SIGNIN EMAIL_SIGNINEMAIL") println("_______________________________________${password_edittext.text.toString().length}") // login if you have account signinEmail() } } }} 프린트문은 지우고 하셔두 됩니다. // 회원가입 or 로그인하는 코드fun signinAndSignup(){ auth?.createUserWithEmailAndPassword(email_edittext.text.toString(), password_edittext.text.toString()) ?.addOnCompleteListener{ task -> if(task.isSuccessful){ // creating a user account moveMainPage(task.result?.user) } else if(task.exception?.message.isNullOrEmpty()){ //show the error message Toast.makeText(this, task.exception?.message, Toast.LENGTH_LONG).show() } else { // 비밀번호가 6자리 미만일 때 Toast 띄우기! if(password_edittext.text.toString().length < 6){ Toast.makeText(this, "패스워드는 최소 6자리 이상이여야 합니다. 다시 입력 바랍니다.", Toast.LENGTH_LONG).show() }else{ // 비밀번호가 6자리 이상일 때, 회원가입하고 로그인하기 signinEmail() } } }}
-
미해결하울의 안드로이드 인스타그램 클론 만들기
9분 30초경 onCreate 오류나면 확인하세요.
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) ActivityCompat.requestPermissions(this, arrayOf(android.Manifest.permission.READ_EXTERNAL_STORAGE), 1) android.Manifest 입니다,
-
미해결하울의 안드로이드 인스타그램 클론 만들기
프로필 사진 관련
원래는 유저의 프로필 사진이 떠야하는 부분이 저렇게 제가 업로드한 이미지로 뜨는데 activity에서는 설정한대로 기본이미지로 뜨는데 실행하면 저렇게 뜨는데 어느부분을 수정해야할까요?
-
미해결하울의 안드로이드 인스타그램 클론 만들기
로그인 후 어플 종료
일반 아이디 비밀번호 입력, 페이스북 , 구글 로그인이 원래는 로그인 후 main으로 넘어가고 user에도 잘 뜨던게 어느 순간부터 저런 메시지가 뜨고 버튼만 누르면 그냥 자동으로 앱이 종료가 됩니다,, 근데 user에는 표시가 되는데 그다음이 문제인거 같아요 이메일 주소당 여러계정은 허용해놨습니다 ( 저번 질문에서 비슷한 문제를 앱크래시?라고 알려주셔서 crashlytics를 해봤는데 아무것4도 안뜨네요 ㅠㅠ)
-
해결됨애플 웹사이트 인터랙션 클론!
캔버스 크기 관련 질문
안녕하세요. 질문이 있는데요 저는 캔버스 화면을 애플 공홈처럼 꽉 채우고 싶은데 innerHeight에 맞춰서 그런가 이런 식으로 나오네요(1920*1080 모니터 기준) outHeight나 그 외 다른 height 값들을 대신 넣으면 화면이 꽉 차는 대신 화면이 안 예쁘게 늘어납니다. f11하면 제가 원하는대로 1920*1080 풀사이즈 정확하게 나오고요. 어떻게 수정해야 할까요? const heightRatio = window.innerHeight / 1080; sceneInfo[1].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`;
-
미해결하울의 안드로이드 인스타그램 클론 만들기
유저가 없으면 구글 로그인이 안되는 부분
강의와 같이 users정보를 삭제하고 실행을 후 구글 로그인을 누르면 앱이 종료가 되고 실행 후 아이디 비번을 입력하고 signup을 누르고 하면 로그인이 됩니다,, 혹시 이게 맞는건가요?
-
미해결하울의 안드로이드 인스타그램 클론 만들기
현재 홈화면에 최근에 올린 게시물이 아닌 맨 먼저 올린 게시물이 상단에 위치하는데, 최근에 올린 게시물이 상단에 노출되도록 하려면 어떻게 해야 할까요?>?
현재 홈화면에 최근에 올린 게시물이 아닌 맨 먼저 올린 게시물이 상단에 위치하는데, 최근에 올린 게시물이 상단에 노출되도록 하려면 어떻게 해야 할까요?>?
-
해결됨애플 웹사이트 인터랙션 클론!
switch(currentScene) case2번 질문드려요!
쌤 코드 기준으로 질문드려여 :> case 0: 일 경우, 동영상이 밑의 사진처럼 로드시 drawImage 처리를 해줘야 스크롤 처리가 없어도 한번에 뜨는 반면에, case2:일 경우는 동영상이 로드 시의 처리 없이도 바로 뜨는데 이게 왜그런지 궁금하네유
-
해결됨BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론
action이 true일때 실행되는데 false에서 초기화가 안되요ㅠ
(()=>{ const actions = { birdFlies(key){ if(key){ document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`; } else{ document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`; } }, birdFlies2(key){ if(key){ document.querySelector('[data-index="5"] .bird').style.transform = `translate(${window.innerWidth}px, ${-window.innerHeight * 0.7}px`; } else{ document.querySelector('[data-index="5"] .bird').style.transform = `translateX(-100%)`; } } }; const stepElems = document.querySelectorAll('.step'); const graphicElems = document.querySelectorAll('.graphic-item'); let currentItem = graphicElems[0]; let ioIndex; const io = new IntersectionObserver((entries, observer) => { ioIndex = entries[0].target.dataset.index * 1; }); for(let i = 0; i < stepElems.length; i++){ io.observe(stepElems[i]); stepElems[i].dataset.index = i; graphicElems[i].dataset.index = i; } function activate(action){//활성화 currentItem.classList.add('visible'); if(action){ actions[action](true); } } function inactivate(action){//비활성화 currentItem.classList.remove('visible'); if (action) { actions[action](false); } } window.addEventListener('scroll', () => { let step; let boundingRect; for(let i = ioIndex - 1; i < ioIndex + 2; i++){ step = stepElems[i]; if(!step) continue; boundingRect = step.getBoundingClientRect(); if(boundingRect.top > window.innerHeight * 0.1 && boundingRect.top < window.innerHeight * 0.8){ inactivate(); currentItem = graphicElems[step.dataset.index]; activate(currentItem.dataset.action); } } }); window.addEventListener('load', () => { setTimeout(() => scrollTo(0, 0), 100); }); activate(); })();
-
미해결하울의 안드로이드 인스타그램 클론 만들기
email_edittext와 password_edittext가 붉은 글씨로 뜹니다
사유는 Unresolved Reference 라고 뜹니다. 분명 전 강좌에서 id로 추가했는데 왜 이런지 알 수 있을까요??
-
해결됨애플 웹사이트 인터랙션 클론!
클린코드(8:02부분)
강의 8:02에 .local-nav-links .product-name을 하여 .local-nav-links a보다 우선순위를 올려 주셨는데 앞서 작성하신 .local-nav-links a:not(.product-name)에 fontr-size를 정해주고 .porduct-name에 굵기, 크기를 조절해준다면 더 클린한 코드 아닌가요? 사실 크게 상관 없을거 같은데 궁금해서 질의 합니다. 8:02부분과 이 코드를 비교하시면 제질문이 이해되기 쉬울거 같습니다. .product-name { margin-right: auto; font-size: 1.2rem; font-weight: bold; } .local-nav-links a:not(.product-name) { margin-left: 2em; font-size: 0.8rem; }
-
미해결Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터]
snapshot.data 오류
error: The argument type 'Map<String, dynamic> Function()' can't be assigned to the parameter type 'Map<String, dynamic>'. (argument_type_not_assignable at [netflix_clone_test] lib/model/model_movie.dart:17) snapshot.data 자체에 오류가 발생하는데 원인 파악을 못하겠습니다..ㅜㅠ
-
해결됨애플 웹사이트 인터랙션 클론!
블로킹
이미지 경로의 문제가 있는건가요???
-
미해결Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터]
bottom overflowed by 6.0 pixels
안녕하세요! 강의 다시 따라하고 있는데 ui 설정을 하고나니 하단에 저렇게 bottom overflowed 6.0 pixels가 떠서요 구글링으로 Scaffold 하위에 resizeToAvoidBottomPadding: false, 를 줘보긴했는데 해결이 안되서..(물론 제가 잘못했을수도 있습니다) 어떻게 해결,,하면 좋을까요!? ════════ Exception caught by rendering library ═════════════════════════════════ The following assertion was thrown during layout: A RenderFlex overflowed by 6.0 pixels on the bottom. The relevant error-causing widget was Tab lib\widget\bottom_bar.dart:35 The overflowing RenderFlex has an orientation of Axis.vertical. The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex. Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size. This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView. The specific RenderFlex in question is: RenderFlex#76b9b relayoutBoundary=up11 OVERFLOWING ════════════════════════════════════════════════════════════════════════════════
-
해결됨애플 웹사이트 인터랙션 클론!
오류
검은 박스가 밖에서 안으로 들어오려는거 같은데 원인을 알 수 있을까요? case 3: // 가로, 세로 모두 100%로 채우기 위한 세팅(계산 필요) const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / objs.canvas.height; let canvasScaleRatio; if (widthRatio <= heightRatio) { // 브라우저 width < 캔버스 width인 경우 canvasScaleRatio = heightRatio; } else { // 브라우저 height < 캔버스 height 경우 canvasScaleRatio = widthRatio; } objs.canvas.style.transform = `scale(${canvasScaleRatio})`; objs.context.drawImage(objs.images[0], 0, 0); // 캔버스 사이즈에 맞춰 가정한 innerWdth와 innerHeight const recalculatedInnerWidth = document.body.offsetWidth / canvasScaleRatio; const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio; if (!values.rectStartY) { // values.rectStartY = objs.canvas.getBoundingClientRect().top; values.rectStartY = objs.canvas.offsetTop + (objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2; values.rect1X[2].end = values.rectStartY / scrollHeight; values.rect2X[2].end = values.rectStartY / scrollHeight; } const whiteRectWidth = recalculatedInnerWidth * 0.15; values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2; values.rect1X[1] = values.rect1X[0] - whiteRectWidth; values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth; values.rect2X[1] = values.rect2X[0] + whiteRectWidth; // 좌우 화이트박스 그리기 // objs.context.fillRect(values.rect1X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // objs.context.fillRect(values.rect2X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); objs.context.fillRect( parseInt(calcValues(values.rect1X, currentYOffset)), 0, parseInt(whiteRectWidth), objs.canvas.height ); objs.context.fillRect( parseInt(calcValues(values.rect2X, currentYOffset)), 0, parseInt(whiteRectWidth), objs.canvas.height ); break;