공부한 기술들

이미지 무한로딩 :

설명 보기

무한 스크롤을 구현하기 위해 필요한 것
- 스크롤이 상단으로부터 얼마나 이동했는지 알아야 한다. (뷰포트의 높이 + 스크롤된 길이)

무한 스크롤 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .image-list img {
            width: 300px;
        }
    </style>
</head>
<body>
<h1>picsum images~</h1>
<ul class="image-list">

</ul>
<script>
    const imageList = document.querySelector(".image-list");
    let pageToFetch = 1;
    async function fetchImages(pageNum) {
        try {
            const response = await fetch(`https://picsum.photos/v2/list?page=${pageNum}&limit=10`);
            if (!response.ok) {
                throw new Error('네트워크 응답에 문제가 있습니다.');
            }

            const datas = await response.json();
            console.log(datas);

            makeImageList(datas);

        } catch (error) {
            console.error('데이터를 가져오는데 문제가 발생했습니다 :', error);
        }
    }
    function makeImageList(datas) {
        datas.forEach((item)=>{
            imageList.innerHTML += `<li><img src='${item.download_url}' alt=''></li>`
        })
    }
    window.addEventListener('scroll', ()=>{
        // 스크롤이 상단으로부터 얼마나 이동했는지 알아야 한다. (뷰포트의 높이 + 스크롤된 길이)
        // 화면에 로딩된 페이지(body)의 높이를 알아야 한다.
        // 뷰포트의 높이 + 스크롤된 길이 + 10 === 화면에 로딩된 페이지의 전체 높이
        if(window.innerHeight + document.documentElement.scrollTop + 10 >= document.documentElement.offsetHeight){
            fetchImages(pageToFetch++);
        }
    });
    fetchImages();
</script>
</body>
</html>

문제점1 : 앞에서 로딩했던 이미지도 추가 이미지를 로딩할 때 다시 로딩된다.
- 이미지를 3개씩 받아와서 요소를 추가하는 방식으로 변경

문제점2 : 로딩이 한번에 많이 된다 (스크롤 이벤트가 한번에 많이 발생)
- 쓰로틀링과 디바운싱
- 디바운싱 적용

문제점3 : 위로 커서를 올려도 이미지가 새로 받아진다.
- 갱신 범위를 줄여서 스크롤이 끝까지 갔을때 갱신되도록 함

문제점4 : 이미지가 추가될 때마다 앞에있던 이미지가 밀려서 스크롤을 올려도 보이지 않음
- 컨텐츠 박스 내부에 overflow가 일어나는 경우, 추가되는 item을 감싸기 위해선 wrap 속성을 넣어줘야 한다

이미지 잘릴때 가운데 부분 보이기 : https://multifidus.tistory.com/182

정규표현식(Regex) :

설명 보기

문자열에서 특정 문자 조합을 찾기 위한 패턴

JavaScript에서는 정규 표현식도 객체로서, 아래 메소드들과 함께 사용할 수 있다.
- RegExp의 exec(), test()
- String의 match(), matchAll(), replace(), replaceAll(), search(),split()
출처 : https://hamait.tistory.com/342
- 정규표현식 검사 사이트

정규 표현식 만들기

정규 표현식 리터럴 : 슬래시로 패턴을 감싸서 작성
```
const re = /ab+c/;
```
1. 스크립트를 불러올 때 컴파일 되므로, 바꿀 일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있다.

RegExp 객체의 생성자 호출 :
```
const re = new RegExp("ab+c");
```
1. 생성자 함수를 사용하면 정규 표현식이 런타임에 컴파일 된다
1. 바뀔 수 있는 패턴이나, 사용자 입력 등 외부 출처에서 가져오는 패턴의 경우 이렇게 사용하는 것이 권장된다.

정규 표현식의 용어들(Meta 문자)

표현식	의미
^x	문자열의 시작을 표현하며 x 문자로 시작됨을 의미한다.
x$	문자열의 종료를 표현하며 x 문자로 종료됨을 의미한다.
.x	임의의 한 문자의 자리수를 표현하며 문자열이 x 로 끝난다는 것을 의미한다.
x+	반복을 표현하며 x 문자가 한번 이상 반복됨을 의미한다.
x?	존재여부를 표현하며 x 문자가 존재할 수도, 존재하지 않을 수도 있음을 의미한다.
x*	반복여부를 표현하며 x 문자가 0번 또는 그 이상 반복됨을 의미한다.
x\|y	or 를 표현하며 x 또는 y 문자가 존재함을 의미한다.
(x)	그룹을 표현하며 x 를 그룹으로 처리함을 의미한다.
(x)(y)	그룹들의 집합을 표현하며 앞에서 부터 순서대로 번호를 부여하여 관리하고 x, y 는 각 그룹의 데이터로 관리된다.
(x)(?:y)	그룹들의 집합에 대한 예외를 표현하며 그룹 집합으로 관리되지 않음을 의미한다.
x{n}	반복을 표현하며 x 문자가 n번 반복됨을 의미한다.
x{n,}	반복을 표현하며 x 문자가 n번 이상 반복됨을 의미한다.
x{n,m}	반복을 표현하며 x 문자가 최소 n번 이상 최대 m 번 이하로 반복됨을 의미한다.

특수한 Meta 문자들

‘[]’은 내부에 지정된 문자열의 범위 중에서 한 문자만을 선택

표현식	의미
[xy]	문자 선택을 표현하며 x 와 y 중에 하나를 의미한다.
[^xy]	not 을 표현하며 x 및 y 를 제외한 문자를 의미한다.
[x-z]	range를 표현하며 x ~ z 사이의 문자를 의미한다.
\^	escape 를 표현하며 ^ 를 문자로 사용함을 의미한다.
\b	word boundary를 표현하며 문자와 공백사이의 문자를 의미한다.
\B	non word boundary를 표현하며 문자와 공백사이가 아닌 문자를 의미한다.
\d	digit 를 표현하며 숫자를 의미한다.
\D	non digit 를 표현하며 숫자가 아닌 것을 의미한다.
\s	space 를 표현하며 공백 문자를 의미한다.
\S	non space를 표현하며 공백 문자가 아닌 것을 의미한다.
\t	tab 을 표현하며 탭 문자를 의미한다.
\v	vertical tab을 표현하며 수직 탭(?) 문자를 의미한다.
\w	word 를 표현하며 알파벳 + 숫자 + _ 중의 한 문자임을 의미한다.
\W	non word를 표현하며 알파벳 + 숫자 + _ 가 아닌 문자를 의미한다.

Flag

Flag	의미
g	Global 의 표현하며 대상 문자열내에 모든 패턴들을 검색하는 것을 의미한다.
i	Ignore case 를 표현하며 대상 문자열에 대해서 대/소문자를 식별하지 않는 것을 의미한다.
m	Multi line을 표현하며 대상 문자열이 다중 라인의 문자열인 경우에도 검색하는 것을 의미한다.

예시

한글 코드 (단순) - /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/ 로 구성이 가능하다. 단, 한글 문제는 단순하지 않으므로 좀 더 좋은 방법을 찾는 것이 좋다.

숫자 - /[0-9]/g

이메일 - /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i

모든 공백 - /\s/g

전화번호 - /^\d{3}-\d{3,4}-\d{4}$/

핸드폰 번호 - /^01([0|1|6|7|8|9]?)-?([0-9]{3,4})-?([0-9]{4})$/

URL - ^(https?):\/\/([^:\/\s]+)(:([^\/]*))?((\/[^\s/\/]+)*)?\/?([^#\s\?]*)(\?([^#\s]*))?(#(\w*))?$

transform :

설명 보기
- 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여
- 기본값 : none
- 요소의 위치는 그대로 둔 채 원래의 형태를 변형한다
- Layout 배치에 영향을 주는 것은 아니다
- 키워드나 직접적인 값을 사용해서 효과를 주지 않고, 하나 이상의 함수를 사용하여 적용
- 여러 함수를 spacing(공백으로 구분해서 적용 할 수 있다.)
transform-function
1. scale, scaleX(), scaleY() : 크기 조절
  1. 2D로 크기를 조절하는 transform 함수
  1. scale( sx ) or scale(sx, sy) 형식으로 사용한다. (sx, sy는 number 자료형)
  1. 두 변수중 하나만 입력하면 가로와 세로가 같은 비율로 변경
  1. width, height 속성으로 크기를 조절하는 것과 다른 개념
    1. Layout에 영향을 주지 않고, 위치와 공간은 그대로 유지
  1. scaleX(), scaleY()는 하나의 변수만 갖는다
    1. 각각 가로와 세로 크기만 조절
```
#bob_ross{
  width: 400px;

  transform: scale(0.5);
}
```
1. rotate() : 회전
  1. 회전을 나타내는 transform 함수
  1. rotate(a) 형식으로 사용
    1. a는 angle 자료형
  1. angle 단위에는 deg / grad / rad / turn 이 있다
    1. rotate() 함수에는 숫자+단위의 변수를 사용한다.
  1. 양수는 시계방향, 음수는 반시계방향으로 회전
```
#bob_ross{
  width: 400px;

  transform: rotate(45deg);
}
```
1. translate() : 이동
  1. 이동을 담당하는 transform 함수
  1. 왼쪽 상단 (0, 0) 좌표를 기준으로 요소를 이동시킬 수 있다.
    1. 단순히 보이는 상태만 이동시키는 것. 절대 Layout 상에서 이동시키는게 아님
  1. translate(<x-length-percentage>, <y-length-percentage>) 형식으로 사용한다.
  1. length 혹은 percentage 값이 사용 가능
    1. %값은 부모나 viewport 기준이 아닌 요소의 길이 기준
  1. 하나의 변수만 입력받을 경우 x축으로만 이동
    1. X,Y 가 모두 적용되었던 scale()과 다르다
  1. 변수의 양수값은 각각 (오른쪽, 아래쪽)이다.
```
#bob_ross {
  transform: translate(100px, 30%);
}
```
1. skew() : 기울이기
  1. 기울임(왜곡) 변형을 나타내는 transform 함수
  1. rotate와 마찬가지로 angle 자료형을 값으로 사용
  1. skew(ax) 혹은 skew(ax, ay) 형식으로 사용
    1. 변수가 하나일 경우 x축으로만 기울인다.
```
#bob_ross {
  transform: skew(20deg, 20deg);
}
```
transform-origin : 기준점 변경 속성
1. 변형되는 기준점을 설정하는 프로퍼티(속성)
1. transform과는 별도로 사용되는 속성 (함수가 아니다)
1. 기본값 : center (width의 절반, height의 절반)
1. top, left, right, bottom의 키워드로 지정할 수도 있고, 별도의 지정값을 사용하여 좌표를 설정할 수 있다.

closure :

설명 보기
- mdn 정의 : 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합
- 자바스크립트 고유의 개념이 아니라 함수형 프로그래밍 언어들에서 사용되는 중요한 특성
```
function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  innerFunc();
}

outerFunc(); // 10
```
- 함수 outerFunc 내에서 내부함수 innerFunc가 선언되고 호출된다.
  - 이때 내부함수 innerFunc는 자신을 포함하고 있는 외부함수 outerFunc의 변수 x에 접근할 수 있다. (innerFunc가 outerFunc의 내부에 선언되었기 때문)
  - 렉시컬 스코핑 (Lexical Scoping) : 스코프가 함수를 호출할 때가 아닌 함수를 어디에 선언하였는지에 따라 결정되는 것
    - innerFunc의 상위 스코프는 함수 outerFunc
    - innerFunc가 전역에 선언되었다면, 상위 스코프는 전역 스코프
1. innerFunc 함수 스코프(함수 자신의 스코프를 가리키는 활성 객체) 내에서 변수 x를 검색한다. 검색이 실패하였다.
1. innerFunc 함수를 포함하는 외부 함수 outerFunc의 스코프(함수 outerFunc의 스코프를 가리키는 함수 outerFunc의 활성 객체)에서 변수 x를 검색한다. 검색이 성공하였다.

setTimeout() :

설명 보기
- 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정
```
var timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = setTimeout(function[, delay]);
var timeoutID = setTimeout(code[, delay]);
```
- function : 타이머가 만료된 뒤 실행할 function
- code : 함수 대신 문자열을 지정하는 대체 구문으로, 타이머가 만료될 때 코드로 컴파일 후 실행
  - 인자로 받은 코드를 caller의 권한으로 수행하는 위험한 함수이므로 사용X (https://developer.mozilla.org/ko/docs/Web/API/setTimeout)
- delay : 주어진 함수 또는 코드를 실행하기 전에 기다릴 ms 단위 시간.
  - 생략하거나 0을 지정할 경우 즉시(다음 이벤트 사이클)에 실행한다는 뜻
  - 하지만 실제 딜레이는 이것보다 길다.
- 반환값 : timeoutID
  - 양의 정수
  - setTimeout()이 생성한 타이머를 식별할때 사용
- clearTimeout() : setTimeout()으로 생성된 타임 아웃을 timeoutID를 통해 식별해 취소
  - 특정 타임아웃을 식별하지 못하면 아무 동작도 하지 못한다.
- setInterval() : 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행
  - 간격을 식별할 수 있는 intervalID를 반환하므로 나중에 clearInterval()함수를 호출해 제거할 수 있다.

높이 너비 구하기 :

설명 보기
offsetWidth, offsetHeight
- offsetWidth : padding, border 값을 포함한 컨텐츠의 너비 (scrollbar도 포함, margin만 제외)
- offsetHeight : padding, border 값을 포함한 컨텐츠의 높이 (scrollbar도 포함, margin만 제외)
clientWidth, clientHeight
- clientWidth : 현재 보여지는 요소의 너비 값 (padding까지 포함, border, scrollbar 크기 제외)
- clientHeight : 현재 보여지는 요소의 높이 값 (padding까지 포함, border, scrollbar 크기 제외)
scrollWidth, scrollHeight
- scollWidth : scroll 되는 부분을 포함한 실제 요소의 너비값 (스크롤바와 border을 제외)
- scrollHeight : scroll 되는 부분을 포함한 실제 요소의 높이값
scrollTop, scrollLeft
- scrollTop : 요소의 수직 스크롤바의 위치
  - 스크롤바 위치를 변경하려면 값을 할당하면 된다.
  - 최대 스크롤 수직값을 넘을 수는 없다.
- scrollLeft : 요소의 수평 스크롤바의 위치

RESTful API :

설명 보기
- RESTful API : 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스

defer, async :

설명 보기
- 웹 브라우저에서 돌아가는 스크립트들은 대부분 HTML 보다 용량이 크다.
- 브라우저는 <script>태그를 만나면 스크립트를 먼저 실행해야하므로 DOM생성을 멈춘다.
  - 외부에서 스크립트를 다운받고 실행한 후 에야 남은 페이지를 처리 가능
- 이로인해 발생하는 문제점
  - 스크립트 아래에 정의된 DOM 요소에 접근할 수 없다.
  - 용량이 큰 스크립트가 위에 있는 경우, 스크립트가 페이지를 막아버린다.
- 해결책
  - 스크립트를 DOM 요소 뒤로 보낸다
  - defer과 async를 사용한다
- defer : 스크립트를 백그라운드에서 다운로드하고, HTML DOM이 준비된 후에, DOMContentLoaded 이벤트 발생 전에 실행
  - defer 속성을 가진 여러 script가 있다면, 먼저 적힌 순서대로 실행된다.
- async : 페이지와 완전히 독립적으로 동작
  - defer 처럼 백그라운드에서 다운로드 되지만, HTML이 스크립트의 다운을 기다리지 않고, 페이지내 콘텐츠를 처리, 출력한다.
  - 다른 스크립트도 async 스크립트를 기다리지 않는다.

onload, onerror :

설명 보기
- onError : 에러가 발생했을때 동작
- onLoad : 모든 DOM 동작이 끝난 후, 호출되는 함수

동기 비동기 :

설명 보기
- 동기 : 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다.
  - 기본적으로 Javascript는 동기적인 언어이다.
- 비동기 : 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다.
  - Javascript는 비동기 처리를 통해 비동기적으로 작업할 수 있다
  - 비동기 처리 : 특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성
  - 처리 방식
  1. Callback 지옥 :
    1. Callback 함수 : 함수 안에서 어떤 특정한 시점에 호출되는 함수
    1. 보통 함수의 매개변수로 전달하여 특정 시점에 콜백함수를 호출
    1. 비동기 처리를 위해 콜백함수를 연속해서 사용할 때 콜백 지옥이 발생한다.
  1. Promise :
    1. ES6에 도입된 비동기 작업 보조 기능
    1. resolve : 작업이 성공적으로 끝난 경우, 그 결과를 나타내는 value와 함께 호출
    1. reject : 에러 발생 시 에러 객체를 나타내는 error와 함께 호출한다.
    1. state(상태) : 프로미스의 처리과정
      Pending : 비동기 처리 로직이 아직 완료되지 않은 상태 (대기)
      Fulfilled : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 (성공)
      Rejected : 비동기 처리가 실패하거나 오류가 발생한 상태 (실패)
  1. async / await :
    1. ES8 문법으로서 가장 최근에 나온 문법
    1. 모든 async 함수는 promise를 리턴
    1. 모든 await 함수는 일반적으로 promise가 된다.
    1. 함수 앞에 async를 붙이고 호출할 비동기 함수(promise) 앞에 await 키워드를 붙인다.
    1. 함수 앞에 async가 선언 되어야만 await를 사용할 수 있다.
    1. await를 만나면 promise가 처리될 때 까지 기다린다. 결과는 그 이후에 반환
      async function 함수명(){ await 비동기처리_메서드명(); }
      function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function process() { console.log('안녕하세요!'); await sleep(1000); // 1초쉬고 console.log('반갑습니다!'); } process();

Readme :

설명 보기

기타 :

설명 보기
- 독립적으로 존재하는 요소는 굳이 특정 섹션아래에 둘 필요는 없다. Body 아래에 둬도 괜찮음

정리할 것

RESTful API : https://aws.amazon.com/ko/what-is/restful-api/

onload, onerror : https://ko.javascript.info/onload-onerror

동기 비동기 : https://inpa.tistory.com/entry/👩‍💻-동기비동기-블로킹논블로킹-개념-정리

글자 움직이기 : https://inpa.tistory.com/entry/CSS-💍-이미지-hover-디자인-🖌️-모음

그리드 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Grids

stack-context : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index

출처

정규표현식 : https://ccambo.blogspot.com/2014/10/regular-expression.html

transform : https://velog.io/@mangozoo20/CSS-transform-변형-정리

closure : https://poiemaweb.com/js-closure

높이 너비 구하기 : https://apost.dev/706/ , https://abcdqbbq.tistory.com/86, https://mong-blog.tistory.com/entry/JS-최대-스크롤값-구하는-법scrollTop-scrollLeft

Readme : https://velog.io/@gmlstjq123/Readme.md-파일-작성법

defer, async : https://ko.javascript.info/script-async-defer

비동기 처리 : https://velog.io/@daybreak/Javascript-비동기-처리

'Dev > ESTsoft 오르미' 카테고리의 다른 글

Java 기초 (0)	2024.02.22
강사님 코드리뷰 (0)	2024.02.22
JavaScript3 (DOM,AJAX) (0)	2024.02.22
JavaScript2 (타입 ~) (0)	2024.02.22
JavaScript1 (~조건문과 반복문) (0)	2024.02.22

이미지 무한로딩 :

정규표현식(Regex) :

정규 표현식 만들기

정규 표현식의 용어들(Meta 문자)

특수한 Meta 문자들

Flag

예시

transform :

transform-function

transform-origin : 기준점 변경 속성

closure :

setTimeout() :

높이 너비 구하기 :

offsetWidth, offsetHeight

clientWidth, clientHeight

scrollWidth, scrollHeight

scrollTop, scrollLeft

RESTful API :

defer, async :

onload, onerror :

동기 비동기 :

Readme :

기타 :

정리할 것

출처

'Dev > ESTsoft 오르미' 카테고리의 다른 글

티스토리툴바