I'm a Fig, Not a Pig

목차 1. 무한 스크롤이란? 2. 구현 방식 3. 자바스크립트 fetch API 4. async / await 5. 구현 과정 6. 전체 코드 1. 무한 스크롤이란? 컨텐츠를 페이징하는 기법 중 하나로 스크롤을 이용해 맨 아래까지 도달할 때 새로운 컨텐츠를 불러오는 방식을 말한다. 2. 구현 방식 스크롤을 끝까지 내렸을 때 fetch된 새로운 데이터를 엘리먼트에 계속 추가(append)하는 방식으로 구현했다. 3. 자바스크립트 fetch API 자바스크립트에서는 fetch로 리소스를 비동기 요청을 할 수 있다. 주로 API를 호출하고 응답 데이터를 받아오는 데에 주로 사용한다. fetch("https://jsonplaceholder.typicode.com/posts") .then(function(res)..

overflow 속성은 크기가 제한된 영역에서 많은 양의 컨텐츠를 보여줄 때 유용하다. visible overflow 속성을 별도로 명시해주지 않았을 때 적용되는 기본값이다. overflow 속성을 생략하거나, overflow 속성값을 visible로 지정해줄 경우 컨텐츠가 경계선 밖으로 삐져나온다. 또한 overflow 속성이 visible로 설정되어 있는 HTML 요소(element)는 내부 공간보다 담아야하는 컨텐츠가 더 많은 경우, 컨텐츠를 밖으로 밀어내는 한이 있더라도 끝까지 보여준다. See the Pen Untitled by lin (@nnlynn) on CodePen. hidden 반대로 overflow 속성을 hidden으로 설정해주면 해당 HTML 요소 밖으로 삐져나오는 컨텐츠를 숨길 ..

transform 이 속성은 이미 만들어진 태그, 혹은 이미지를 늘리거나 회전시킬 때 사용한다. 1. translate (이동) 요소를 각각 x축과 y축으로 지정 한 값 만큼 이동시킨다. .box:hover { transform: translate(100px, 50px); } px대신 %도 가능하며 위 코드는 평소에는 원래 위치해있고, 마우스 오버시 X 100px, Y 50px씩 이동한다. 2. scale (늘리거나 줄이거나) 요소의 크기를 변경하는 태그이며 (좌우, 상하)로 늘어난다. translate과 마찬가지로 scale(X, Y)로 입력해 사용하며 단위는 '기존 사이즈의 몇 배' 이므로 width, height의 속성과는 다르다. .box:hover { transform: scale(2, 1.5)..

C에서는 정수나 문자열 외에도 다양한 데이터 타입이 정의되어 있다. 또한 각 타입에 맞는 형식 지정자를 통해 적절한 포맷으로 출력하고, 다양한 연산자를 통해 조건문을 설정하거나 데이터 값을 계산할 수 있다. 데이터 타입 아래 목록은 변수의 데이터 타입으로 사용할 수 있는 것들이다. bool: 불리언 표현, (예) True, False, 1, 0, yes, no char: 문자 하나 (예) 'a', 'Z', '?' string: 문자열 int: 특정 크기 또는 특정 비트까지의 정수 (예) 5, 28, -3, 0 long: 더 큰 크기의 정수 float: 부동소수점을 갖는 실수 (예) 3.14, 0.0, -28.56 double: 부동소수점을 포함한 더 큰 실수 * int는 대략 40억까지 셀 수 있기 때문..

isEven() isEven 함수는 주어진 숫자가 짝수인지의 여부를 반환한다. 나머지 연산자(%)를 활용하여 아래와 같이 홀/짝인지 확인할 수 있는 코드를 짤 수 있다. const isEven = n => n % 2 === 0; console.log(isEven(8)); // true console.log(isEven(23)); // false console.log(isEven(514)); // true

1. parseFloat() parseFloat()는 문자열을 실수로 바꾸는 함수이다. 수로 시작할 때 그 수를 실수로 바꾼다. 띄어 쓰기로 여러 개의 수가 있으면 첫번째 수만 바꾼다. 공백으로 시작하면 공백은 무시한다. 수가 아닌 문자로 시작하면 NaN을 반환한다. 구문 parseFloat( string ) 2. parseInt() parseInt()은 문자열을 정수로 바꾸는 함수이다. string을 n진법일 때의 값으로 바꾼다. n은 옵션으로 2부터 36까지 입력할 수 있다. 입력하지 않으면 10으로 처리한다. string의 처리는 parseFloat()와 거의 같다. 소수 부분은 버린다. 0x로 시작하면 16진법으로 처리한다. 구문 parseInt( string, n ) 3. isNaN() isNa..

Math.sqrt() : 제곱근 구할 때 Math.max() : 배열에서 최대 값 구할 때 Math.min() : 배열에서 최소값 구할 때 Math.PI() : 원주율 반환 Math.random() : 난수 생성 Math.abs() : 인자값에 대한 절대값을 반환하는 함수 Math.trunc() : 소수점 이하는 버림 Math.round() : 반올림 Math.floor() : 내림 floor => 바닥까지 내린다고 생각 3.5 -> 3 -3.5 -> -4 Math.ceil() : 올림 ceiling => 천장까지 올린다고 생각 3.5 -> 4 -3.5 -> -3 * 주의할 점 Math.trunc()는 소수점 이하는 다 버리기 때문에 숫자가 -23.3 음수인 경우에도 -23을 Return한다. Math...

목차 1. 증감 연산자 2. 후위 연산자 (Postfix Operator) 3. 전위 연산자 (Prefix Operator) 1. 증감연산자 증가연산자 ++ 감소연산자 -- 로 나뉜다. 전위 ++n 와 후위 n++ 로 나뉜다. 증감 연산자만 단독으로 사용할 때는 큰 차이가 없지만 다른 변수에 할당할 때는 위치에 큰 차이가 난다. 2. 후위 연산자 (Postfix Operator) n++; n--; #include int main() { int num1 = 2; int num2 = 2; int num3; int num4; num3 = num1++; // num1의 값을 num3에 할당한 뒤 num1의 값을 1 증가시킴 num4 = num2--; // num2의 값을 num4에 할당한 뒤 num2의 값을 1..

Shift + Alt + F : 코드 자동 정렬 Alt + Shift + A: 블럭 주석 처리 control + shift + L : 선택한 단어와 같은 단어 모두 선택 변수명 변경: f2 alt + shift + 아래: 라인 복사

1. include() includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다. - MDN 구문 arr.includes(valueToFind[, fromIndex])​ includes() 메서드는 문자열에 다른 문자열이 포함되어 있는지 여부를 확인해주는 용도로 사용된다. 문자열에서 valueToFind가 발견되면 true를 반환하고, 그렇지 않으면 false를 반환한다. 예제 includes() 메서드를 사용하여 문자열에 @이 들어있는지 확인해보면 @이 들어있는 경우 true를 반환한다. let email = 'ab123@example.com'; console.log(email.includes('@')); // true 또한 includes()는 대소문자를 구분하기 때문에 다음의 코드..