173만명의 커뮤니티!! 함께 토론해봐요.
미해결
하울의 안드로이드 인스타그램 클론 만들기
현재 홈화면에 최근에 올린 게시물이 아닌 맨 먼저 올린 게시물이 상단에 위치하는데, 최근에 올린 게시물이 상단에 노출되도록 하려면 어떻게 해야 할까요?>?
해결됨
애플 웹사이트 인터랙션 클론!
쌤 코드 기준으로 질문드려여 :> case 0: 일 경우, 동영상이 밑의 사진처럼 로드시 drawImage 처리를 해줘야 스크롤 처리가 없어도 한번에 뜨는 반면에, case2:일 경우는 동영상이 로드 시의 처리 없이도 바로 뜨는데 이게 왜그런지 궁금하네유
해결됨
BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론
(() => { 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 (); })();
미해결
하울의 안드로이드 인스타그램 클론 만들기
사유는 Unresolved Reference 라고 뜹니다. 분명 전 강좌에서 id로 추가했는데 왜 이런지 알 수 있을까요??
해결됨
애플 웹사이트 인터랙션 클론!
강의 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 클론 코딩하기 [무작정 플러터]
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 클론 코딩하기 [무작정 플러터]
안녕하세요! 강의 다시 따라하고 있는데 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;
미해결
인스타그램 클론 - full stack 웹 개발
마지막 완성된 페이지를 구동시켜보고 싶습니다. 최소한으로 필요한 세팅과 다운해야하는 첨부파일을 정리해서 알려주세요! 완성된 페이지를 통해 작동하는 원리를 배우면서 하고 싶습니다. 해당 강의 번호 및 페이지를 작동시키는 순서 알려주시면 감사하겠습니다.
미해결
페이스북 클론 - full stack 웹 개발
마지막 완성된 페이지를 구동시켜보고 싶습니다. 최소한으로 필요한 세팅과 다운해야하는 첨부파일을 정리해서 알려주세요! 완성된 페이지를 통해 작동하는 원리를 배우면서 하고 싶습니다. 해당 강의 번호 및 페이지를 작동시키는 순서 알려주시면 감사하겠습니다.
미해결
인스타그램 클론 - full stack 웹 개발
1. 인스타그램 클론 작동시키기 1) backend 마지막 강의까지 완료된 코드 frontend: backend에서 static: 프론트앤드 파트 예제파일 업로드 다운로드 받았습니다. backend: 마지막까지 완성된 수정 코드 어디서 받을 수 있는지 알고 싶습니다. 2) backend 마지막 강의까지 완료된 코드로 배포해서 구현하기 제로베이스 기준에서 어떤어떤 강의를 듣고 환경을 설정해야 마지막 배포까지 할 수 있는지 알려주시면 직접 배포해서 환경에서 돌아가는 것 까지 스스로 해보고 싶습니다. 2. 제주도 카페 클론 작동시키기 기초 :: Django 에서 기초 전체 소스코드 다운 받았습니다. 마찬가지로 어떤어떤 강의를 보고 최소한의 세팅을 해야 배포까지 해서 작동하는지 알고 싶습니다. 30분 요약시리즈부터 맨앞부터 하는데 frontend가 끝나니까 벌써 조금 지쳐서 힘들어서 보고 싶어지네요.. 감사합니다~~
미해결
Flutter 입문 확장판 - 인스타그램 클론 2.0
flutter bloc, stream 패턴 관련된 강의계획 있으신지 궁금합니다'-'ㅎ
미해결
인스타그램 클론 - full stack 웹 개발
새글|수정|삭제 :: forms 여기 파트 강의영상이 죄송합니다 이 동영상은 잠시 후 시청 가능합니다. 이러면서 영상이 안나옵니다.. 빠르게 수정 부탁드려요
