본문 바로가기
반응형
Node.js에서 스크래핑을 해보자 웹 스크래핑(크롤링) 하기 원본 URL의 콘텐츠를 스크래핑(크롤링)해서 상세 페이지를 구현할 일이 생겼다. 구글링과 여러 삽질 끝에 결국 성공했다. 직접 코드를 작성 해보면서 테스트 하는 것도 빠르고 좋은 방법인 것 같다. 시작 하기전 원본 URL의 HTML을 가져올 때 사용하는 라이브러리와 그 결과로 원하는 콘텐츠를 뽑아서 사용할 라이브러리 설치가 필요하다. 나같은 경우 브라우저와 Node.js 환경에서 둘 다 사용이 가능한 axios와 비교적 예제도 많고 문법이 익숙한 cheerio를 선택했다. axios 외엔 request cheerio 외엔 puppeteer, playwright 등이 있다. 설치하기 npm i cheerio axios 가져올 콘텐츠 정하기 예시로 CSR과 SSR 이해하기 글의 콘.. 2021. 10. 29.
ZUM 기술 블로그 Fade in, Fade out 구현하기 IntersectionObserver API로 Fade in, Fade out 구현하기 ZUM 기술 블로그를 구경하다 디자인이 깔끔하고 이뻐서 클론해봤다. 정확히는 사이트의 Fade in, Fade out의 동작 방식이 궁금해서 직접 구현해봤다. 근데 이제 UI/UX를 곁들인.. 기능 구현 외에도 깔끔한 UI/UX 덕분에 가독성도 좋았다. 뭔가 집중이 된달까..그래서 전체적인 분위기나 모바일 대응도 구현했다. 동작 방식 알아보기 해당 블로그는 첫화면에 노출되는 포스트는 shown 클래스를 생성해서 바로 보여주게 된다. ➡️ 동적으로 클래스를 만듦 그 후 포스트들은 스크롤 다운 시 animate 클래스를 생성해서 보여주게 된다. ➡️ moveUp 애니메이션 작동, 포스트가 올라옴 ➡️ 각각 다른 anima.. 2021. 10. 10.
IntersectionObserver API로 무한 스크롤 만들기 무한 스크롤(Infinite scroll) IntersectionObserver API로 TOC 만들기 글에 이어서 이번엔 무한 스크롤을 만들어 봤다. 이젠 구현만이 목적이 아닌 코드 스타일이나 프로그래밍 방식에 대해서도 신경을 쓰고 있다. '그래도 성장은 하고 있구나 🌱'라고 생각한다. 개발 전용차선 강의 사이트 다음과 같은 상황이라고 생각하고 구현을 했다. 내가 훗날 남을 가르칠 정도의 실력이 된다 느껴져서 나만의 개발 강의 사이트를 만들려고 한다. 편하게 강의 목록을 볼 수 있도록 무한 스크롤을 구현한다. 서버에서 받아온 응답 결과를 노출 시키기(강의 리스트 렌더링) 로딩하는 동안 로딩 중인 것을 표시하기 스크롤 바닥을 위치하면 새로운 강의 노출 더미 데이터 만들기 나는 일단 서버를 구현할 실력이 .. 2021. 10. 8.
함수형 자바스크립트 기본기 정리 함수형 자바스크립트에서의 기본기 평가란? 코드가 계산(Evaluation) 되어 값을 만드는 것 // 🌱 평가(Evaluation)하기 const log = console.log; log(1); // 1로 평가 log(1 + 2); // 3으로 평가 log(3 + 4); // 7로 평가 log([1, 2]); // 배열 [1, 2]로 평가 log([1, 2 + 3]); // 배열 [1, 5]로 평가 log([1, 2, [3, 4]]); // 배열 [1, 2, [3, 4]]로 평가 log([1, 2, ...[3, 4]]); // 배열 [1, 2, 3, 4]로 평가 일급이란? 값으로 다룰 수 있다. 변수에 담을 수 있다. 함수의 인자로 사용될 수 있다. 함수의 결과로 사용될 수 있다. // 🌱 일급이란? /.. 2021. 10. 3.
일급 함수 함수형 프로그래밍과 일급 함수 함수형 프로그래밍의 이점들을 활용해 로직을 구현하고, 컨셉을 이해하기 위해 일급 함수에 대해 먼저 알아보자. 자바스크립트에서 함수는 일급 함수이다. 다시 말해 함수를 값으로 다룰 수 있다는 뜻이다. 함수를 변수에 담기 // ✅ 일급 함수는 변수에 함수를 담을 수 있다. const foo = function (a) { return a * a; }; console.log(foo); // ƒ (a) { // return a * a; // } 위 예제를 보면 변수 foo에 함수를 할당하고 출력해보면 함수가 담긴 것을 확인할 수 있다. 변수를 사용하여 끝에 괄호 ()를 추가하면 함수를 호출할 수 있다. // ✅ 변수 끝에 괄호 ()를 사용해서 함수를 호출할 수 있다. const fo.. 2021. 9. 21.
순수 함수 성공적인 프로그래밍은 무엇을 의미 할까? 모든 프로그래밍 패러다임은 성공적인 프로그래밍을 위해 존재한다. 좋은 프로그램을 만드는 일은 곧 성공적인 프로그래밍을 의미한다. 좋은 프로그램은 사용성, 성능, 확장성, 기획 변경에 대한 대응력 등이 좋다. 위와 같은 사항들을 효율적이고 생산적으로 이루는 일이 성공적인 프로그래밍이다. 그 중 함수형 프로그래밍은.. 함수형 프로그래밍은 성공적인 프로그래밍을 위해 부수 효과를 최소화, 조합성을 강조하는 프로그래밍 패러다임이다. 부수 효과를 최소화 한다? -> 순수 함수를 만든다. 조합성을 강조한다? -> 모듈화 수준을 높인다. 순수 함수 순수 함수란 들어온 인자가 같다면 항상 동일한 결과를 리턴하는 함수를 뜻한다. 그리고 순수함수는 함수가 받은 인자 외에 다른 외부의.. 2021. 9. 20.
IntersectionObserver API로 TOC 만들기 IntersectionObserver API 특정 요소에 관측자(observer)를 생성해서 교차점을 관측할 수 있게 해주는 Web API이다. 따라서 클라이언트의 뷰포트(옵션 기본값)에 따라 다양한 동작을 넣을 수 있다. 이미지나 컨텐츠의 지연 로딩(lazy-loading) -> 초기 렌더링 시간 ⬇️ 사용자 경험 ⬆️ 사용자가 다른 페이지에 이동하지 않아도 되는 무한 스크롤(infinite-scroll) -> 예를 들면 유튜브, 앱 사용 시간 ⬆️ 뷰포트에 따라 애니메이션 효과 구현 -> 예를 들면 페이드인(fade-in), 페이드아웃(fade-out) 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고 -> 사용자가 해당 광고를 봤는지 안봤는지 관측 나는 IntersectionObserver()로.. 2021. 9. 20.
반응형