_.go( Images.fetch(), Images.tepl, $.el, $.append($.qs('body')), _.tap( $.findAll('img'), L.map(img => { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { new Promise((resolve, reject) => { img.onload = () => resolve(img) img.src = img.getAttribute('lazy-src') img.onerror = () => reject() }).catch(_ => { img.src = 'https://images.chosun.com/resizer/u9nJRxs0BbtjygJ4HzKukecXnOk=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/UVBJZL3RXAB36BDSHVM3MW2WNY.jpg' }) $.addClass('fade-in', img) } }) }) return () => observer.observe(img) }), C.takeAllWithLimit(8), _.each(_ => _) ), $.findAll('.remove'), $.on('click', async ({currentTarget}) => { await Ui.confirm('정말 삭제하시겠습니까?') && _.go( currentTarget, $.closest('.image'), $.remove ) } ) )뷰 포트에 보이는 이미지 엘리먼트만 이미지를 로드해주고 싶은데 이렇게 코드를 작성해도 괜찮을까요? 더 좋은 방법이 있다면 알고 싶습니다!

(사진)

안녕하세요 강의 잘 듣고있습니다. 저장소 체크아웃 이후에 설정까지 수업대로 한후에 npm t를 입력하니 아래와 같은 오류가 나는데 혹시 어떤게 문제가 있는지 봐주실수 있으신가요?

d위 이미지처럼 가로 스크롤이 생기는 데 overflow-x: hidden 기능이 적용되지 않아서 생기는 문제일까요?

강의 초반부에 말씀하신 웹서비스는 동시성을 보장에 대해 헷갈려서 질문 드립니다. 제가 이해 하기로는 여러사람이 하나의 ID에 대해 수정을 할때, 중간에 수정된 최근정보를 제공하는것이 좋기때문에, 페이지 진입시 Id값을 이용해 최신 정보를 불러와야한다.라는 뜻으로 이해하는것이 맞을까요? 그리고 그 최신데이터 보장은 페이지의 성격에 따라 협의를 봐야한다?라고 이해하면 되는것일까요?   그리고 지금 강의 들으면서 드는 질문인데, 강의 초반부에 페이지 컴포넌트는 드라이하게 작성하는것이 좋다고 말씀하시면서 비즈니스 로직(form submit등)이 없이 작성하고 비즈니스 로직은 components안에서 작성하는것이 좋다고 하셨는데, 이번에 view폴더에있는 MainPage.vue에는 비즈니스로직을 작성을 하신 이유가 있을까요?

useMemo 강의 잘 듣고 있습니다. 그런데, useMemo(() => { //생략 }, [data.length]); 한 것과   useEffect(() => { //생략 }, [data.length]); 한 것과 차이가 있을까요?   제가 생각했을때는 둘이 같이 작동할 것 같은데.. 어떻나요?

const dataId = useRef(0) 질문입니다. 강의 들을 때는 그냥 음~ 하면서 들었는데 나중에 생각해보니.. 왜 useRef를 쓰는 건지 잘 모르겠습니다. 그냥 const [dataId, setDataId] = useState(0); 해도 문제 없을 것 같은데.. 어떨까요??

스크롤도 늘어나질 않고 스티키도 안보이고 씬도 변하질 않고 계속 0에 있어요ㅜㅜ 첨부하겠습니당 const main = () => { let y0ffset = 0; const sceneInfo = [ { //0 type: 'sticky', heightNum: 5, //브라우저 높이의 5배로 scrollHeight 세팅 scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-0') } }, { //1 type: 'normal', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-1') } }, { //2 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-2') } }, { //3 type: 'sticky', heightNum: 5, scrollHeight: 0, objs: { container: document.querySelector('#scroll-section-3') }, } ]; function setLayout() { //각 스크롤 섹션의 높이 세팅 for (let i = 0; i < sceneInfo.length; i++) { sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight; sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`; } console.log(sceneInfo); } function scrollLoop() { } window.addEventListener('resize',setLayout); window.addEventListener('scroll',() => { y0ffset = window.pageXOffset; scrollLoop(); }); setLayout(); }; main();

async에서 catch 질문 있습니다. async function getName(){ // return Promise.resolve("Tom"); throw new Error("err.."); // 왜 이걸로 하면 } console.log(getName()); getName() // .then(name=>{ // console.log(name); // }) .catch(err => { console.log(err); }); 여기서 계속 error가떠서 async&await.js:5 Uncaught (in promise) Error: err.. at getName (async&await.js:5:9) at async&await.js:8:13 Uncaught (in promise)를 구글링 해보니, catch를 제대로 하지 않아서 그렇다고 하더군요. (참고 : https://www.codegrepper.com/code-examples/javascript/uncaught+in+promise+error) 하지만, 거기서도 작성하라는 catch문이 수업시간에 한 catch문 그대로 였습니다. 어떻게 해야 이 error를 해결할까요?

안녕하세요, 유림님의 친절하고 상세한 설명에 쉽게 완강할 수 있었습니다.   다 듣고 나서 궁금증이 생겨서 질문을 드리게 되었습니다.   현재 강의 기준(37 빌드한 결과물 github page로 배포하기) 후에 제가 추가로 소스를 수정하게 되면   예를들어 생성버튼의 이름을 생성123으로 변경했다고 가정했을 시 main branch를 통해서 소스 수정한 부분을 github에 배포를 하고서 cat-jjal-maker-cra 폴더로 가서 npm run build, npm run deploy를 실행해주면 되는걸까요?   소스 배포를 안하더라도 수정 이후에 npm run build, npm run deploy를 했을 경우 제 페이지에서 수정되는게 확인은 가능해서 위 질문을 드리게 되었습니다. ( commit, push를 안해도 페이지의 내용은 변경되지만 그럼 결국 main branch 와는 상이한 소스가 되니 변경된 소스를 commit, push를 해주는 걸까요? )

이 영상을 보기전에 학습하면 좋은 영상을 추천해주실수 있나요??기초적인 문법지식만 가지고 보기에는 어려운것 같아서요. 추천 부탁드립니다.

 데이터는 잘 불러와지는데, 렌더가 작동이 안되다는 오류 메세지 때문에, 공식 문서에서 찾아보았습니다.더 이상 render함수가 더이상 전달인자로 받지 않기 때문에  import ListView from './ListView.vue' import { h } from 'vue' export default function createListView(name) { return { //재사용할 인스턴스(컴포넌트) 옵션들이 들어갈 자리 name : name, created() { this.$store.state.loading = true this.$store.dispatch('FETCH_LIST', this.$route.name) .then(() => { console.log('success LIST') this.$store.state.loading = false }) .catch((error) => console.log(error)) }, render() { return h(ListView); } }   } h 를  'vue'에서 불러와서 사용하더라구요. 이때 h 는 어떤 역활을 해주게 되나요? 위처럼 수정해서 정상적으로 화면에 표시 됩니다!

props등이나 데이터들을 넘길때, 항상 작명을 관련있지만 다르게 하시잖아요? (ex : userInfo , info)  수업중에 작명을 다르게 할 수 있다는걸 보여주시기 위해 작명을 다르게 한다고도 하셨는데, 실무에서 다른 개발자들이랑 개발을 진행할때, 데이터 이름을 서로 같게 해주는게 좋은지, 수업에 하시는것처럼 다르게 작명해주는게 좋은지   오히려 같게 해주면 거슬러 올라가거나 수정하기가 더 어려울거 같다는 생각도 드네요.. 개인적으로는 뷰가 아직 덜 익숙해서 그런지, 데이터 이름이 다르니 조금 헷갈리는 부분이 있어서 ㅎㅎ 같게 해주고 있습니다. 

- 학습에 관련된 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   post_list.html에서는 변수를 소문자로 변환한 모델명 + _list 로 사용했는데 post_detail.html에서는 변수를 소문자로 변환한 모델명(post)로 사용한건가요? 어떤 방식으로 하는건지 설명이 없어서요...

잘 따라 하다가 또잉 이런 애러가 계속 나서 1시간 해매다가 바보같이  main.js   import { createApp } from 'vue' import App from './App.vue' import router from './routes/router' import store from './store/store' createApp(App).use(router, store).mount('#app') 이렇게 했다가 import { createApp } from 'vue' import App from './App.vue' import router from './routes/router' import store from './store/store' createApp(App).use(router).use(store).mount('#app') 이렇게 고쳤더니 store를 잘 인식하네요..수업 초반에 히힛 난 vue3 써야지~ 하고 강사님말 안듣고 여기까지 오다보니 다시 Vue2로 돌아갈 자신이 없어 돌아가지 못하네요      

1.markers라는 빈 배열을  전역으로 선언하고 그 배열안에 marker1이라는 마커좌표들을 넣어서 출력하고 싶은데요 marker1은 addmarker라는 함수 안에서 선언된 변수입니다. 그래서 함수 안에서 marker1이라는 값을 push해서 배열에 추가했는데 함수 바깥에서는 값이 사라집니다   2.그리고...marker1의 값이 push로 markers에 넣어지는데 //markers.push(marker1) markers = marker1과는 값이 다르게 나와서 결과물이 다르네요. 어떻게해야  markers=marker1처럼 나오게 배열에 넣을 수 있을까요       var markers = []; function addMarker(position) {                         // 마커를 생성합니다                         var marker1 = new kakao.maps.Marker({                             position: position                         });                         markers.push(marker1);                         console.log(markers)                     }                     console.log(markers);  

선생님 안녕하세요. 해당 강의 보다가 궁금한 점이 있어서 질문 드립니다.   혹시 배열의 특정 원소가 m보다 크면, (만약 m=5이고 [1,7,1,2,3] 이라는 배열이 주어진다면) 어떻게 풀이가 되는지 알려주실 수 있을까요?

인프런 아이디: tsseo.dev@gmail.com 인프런 이메일: tsseo.dev@gmail.com 깃헙 아이디: tsseo.dev@gmail.com 깃헙 username: 3rd-big

안녕하세요! L.map을 직접 만들어서 사용하셨는데 기존에 존재하는 내장함수인 iterable.map() 같은 함수를 사용하지 않고 매번 L.map과 같은 함수를 구현해줘야만 지연 평가를 할 수 있는 것인지 궁금합니다! 감사합니다.

# 의문 - 리액트에서 배열 사용하기 1 - 리스트 렌더링 (조회) 강의 중 12분 쯤 - 리액트에서 props를 내려줄 때 undefined 값일 수도 있는데 그 때 defaultProps 문법을 사용해도 되지만 ? 문법을 사용해도 코드가 동작합니다. 두 개 중 선택할 때 뭘 기준으로 선택하는지 궁금합니다.  - 참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining   ```javascript=   {<h4>{diaryList ? diaryList.length : 0}개의 일기가 있습니다.</h4>}   DiaryList.defaultProps = {     diaryList: [], } ```