방구석 개발자의 놀이터

무한 스크롤을 하기 앞서 가장 중요한 포인트는 Scroll Bar의 위치를 찾는것이다. 1. Scroll Bar의 위치 찾는법 const onScroll = e => { console.dir(e.target.scrollingElement); } document.addEventListener("scroll", onScroll); 위와 같은 코드를 사용하여 콘솔창을 확인해보면 위와 같이 수많은 정보가 나온다. 여기서 필요한 정보는 scrollHeight: 1231 , scrollTop: 340, clientHeight: 891 이렇게 3가지 정보가 필요하다. 그 이유는!!! 무한 스크롤에서 필요한 Scroll을 가장 아래로 내렸을 때가 바로 body 영역의 총 길이 = scrollHeight = scroll..

웹에서 사용하는 이미지는 크게 2가지로 나뉘어 진다. 1. 비트맵 : 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster) 이미지라고도 부름 (.jpeg, .gif, .png) - 정교하고 다양한 색상을 자연스럽게 표현 - 확대/축소 시 계단 현상, 품질 저하 2. 벡터 : 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지 (.svg) - 정교한 이미지(인물, 풍경 사진 같은)를 표현하기 어려움 - 확대/축소에서 자유로움, 용량 변화가 없음

1. 주소창에 페이지 주소 입력 2. 해당 주소에 맞는 서버로 최초 요청(Request) 3. 최초의 요청이 서버로 들어오게 되면 사용자의 브라우저로 최초 응답(Response - HTML) 전달 4. 응답 받은 HTML을 렌더링하고 css, js, img 등 추가 Resource들을 서버로 요청한다 5. 서버에서 브라우저에서 요청한 css, js, img 등 추가 응답을 해준다.

event.stopPropagation을 알아보기 전에 HTML에서 사용자 이벤트 전달 과정을 이해해야 한다. 1. 버블업(Bubble Up) - 웹 페이지 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 되는데 이것을 버블업(Bubble Up)이라고 한다. 테스트 위의 코드를 예를 들면 a 태그를 클릭 했을 때 : a 태그의 onClick -> li 태그의 onClick -> ul 태그의 onClick 을 실행하게 된다. 만약 ul 태그에 onClick 이벤트가 있다면 a 태그를 클릭하는 순간 의도하지 않게 ul 태그의 onClick 이벤트가 실행된다. 이것을 방지하기 위해 event.stopPropagation()을 사용한다. 2. event.stopPropagation - 부..

1. Script import 방법 내용 // script 호출 //index.js let test = document.querySelector("#test"); test.addEventListener("click", function(){ alert("Hello Test") }); 로 호출할 수 있다. 위의 예제에서 index.js파일 경로는 html과 같은 폴더안에 있어서 경로를 생략했다. 2. Script 파일 위치 script를 head 태그 안에 위치할 수 있다. 하지만 이 경우에는 위의 예시에서는 오류가 발생한다. 오류를 방지하기 위해서는 위 예시의 index.js를 아래처럼 바꿔야 한다. //index.js window.onload = function(){ let test = document...

React 에서는 일반적으로 react-router-dom 패키지를 이용하여 페이지 전환을 하지만 jsp혹은 일반 html에서는 태그를 이용해서 페이지 전환을 한다. 1. 태그 - 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려버리게 됨 - 렌더링된 컴포넌트들도 모두 사라지고 다시 처음부터 렌더링 2. Link 컴포넌트 - 페이지를 전환하면, 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경 - Link컴포넌트 자체는 태그로 이루어져 있지만, 페이지 전환을 방지하는 기능이 내장

1. Callback 함수 예제 - Callback 함수란 함수의 파라미터로 함수를 넣어 다음 함수로 실행 시키는것. -> 말이 조금 어려운데 예제를 보면 쉽게 이해 가능 function increaseAndPrint(n, callback){ setTimeout(()=>{ const increased = n + 1; console.log(increased); if(callback){ callback(increased); } }, 1000); } increaseAndPrint(0, n => { console.log('끝'); //결과 : 1, '끝' }); - 위의 예제에서는 callback 함수에 n => {console.log('끝');} 함수를 넣은 것 2. Callback 지옥 - Callback함..

vscode에서 함수형 컴포넌트를 작성할 때 항상 작성되는 폼이 있는데 이 때 Snippet 설정을 한다면 생산성을 높일 수 있다. 1. 원하는 Snippet 모양을 작성한다. (ex. 함수형 컴포넌트) import React from 'react'; function ${TM_FILENAME_BASE}(){ return( ); } export default ${TM_FILENAME_BASE}; 여기서 ${TM_FILENAME_BASE} 는 파일의 확장명을 제외한 파일명을 의미한다. 즉, Sample.js 파일에 생성을하면 Sample이 들어가게 된다. 2. snippet-generator.app/ 에 들어가서 위의 코드를 붙여넣는다. ①번에는 만드려는 Snippet의 설명 (ex. create funct..

&.blue{ background: $blue; &:hover{ background: lighten($blue, 10%); } &:active{ background: darken($color: $blue, $amount: 10%); } } &.gray{ background: $gray; &:hover{ background: lighten($gray, 10%); } &:active{ background: darken($color: $gray, $amount: 10%); } } &.pink{ background: $pink; &:hover{ background: lighten($pink, 10%); } &:active{ background: darken($color: $pink, $amount: 10%); ..

1. 반복자 (Iterator) next 메소드를 갖고 있다 next 메소드는 value와 done 속성값을 가진 객체를 반환 done 속성값은 작업이 끝났을 때 참이 된다 2. 반복 가능(Iterable) 객체 Symbol.iterator 속성값으로 함수를 갖고 있다 해당 함수를 호출하면 반복자(Iterator)를 반환