본문 바로가기

JavaScript20

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.
클로저(Closure) 이해하기 클로저(Closure)란? 함수는 중첩이 가능한데, 내부 함수 객체가 생성되면 이 객체는 자신을 생성한 외부 함수에 대한 활성 객체의 참조를 가지게 된다. 이를 클로저(closure)라 한다. 즉, 클로저를 통해 내부 함수에서 외부 함수의 스코프에 접근 할 수 있다. ✅ 자바스크립트는 함수가 호출되면 활성 객체(activation object)가 만들어진다. 이것은 숨겨진 데이터 구조로써 호출된 함수의 반환 주소와 실행에 필요한 정보를 저장하고, 이를 호출된 함수에 바인딩 해준다. 렉시컬 스코핑(Lexical scoping) 이해하기 활성 객체(Activation object) 이해하기 클로저는 함수와 그 함수가 선언된 주변 객체에 대한 참조(렉시컬 환경)와의 조합이다. 렉시컬 스코핑(Lexical sc.. 2021. 9. 17.
import, export, export default 이해하기 지식 늘리기 VS 내가 당장 필요한 것 처음 ES Module을 사용할 때가 강의를 통해 클론코딩을 했을 때였다. 코드 이해하기에도 바쁘고 모듈화까지 하려니 그저 배워야하는 또 하나의 지식으로 느껴졌다. (그러니 다 까먹을 수밖에..) 그렇게 시간이 지나고 포트폴리오 사이트를 제작하던 중에 내 예전 프로젝트들을 보게 되었다. 그 중 스스로 만든 날씨와 옷차림을 알려주는 프로젝트의 코드를 보았는데 main.js라는 파일 안에 모든 코드를 다 쏟아낸 것이 아닌가..이걸 보고나서 리팩토링을 하고싶은 욕구가 솟아났다. 그 중 ES Modules를 '필요로' 하다 보니 스스로 해당 내용을 찾게 되고 '아~이래서 이게 안됐었던 거구나' '이런식으로도 되네?' 라는 공감도 하게 되면서 좀 더 재미있게 진행하게 되었다.. 2021. 8. 26.
스크롤 이벤트로 와이즐리 헤더 만들기 탐나는 와이즐리 홈페이지의 헤더 이벤트 한때 와이즐리 사용자로서 이벤트를 하길래 오랜만에 들어와봤다. 옛날과 달리 홈페이지가 엄청 깔끔하고 보기에 편해진 것 같다. 그 중 와이즐리의 헤더 UI가 너무너무 신기했다. '이 UI 탐난다. 따라해봐야지' 생각하고 바로 실행에 옮겨봤다. 먼저 와이즐리의 헤더에 발생하는 이벤트를 정리해보자. 스크롤을 내리면 헤더의 배경 색상이 바뀐다. (transparent -> #fff) 조금 더 내리면 헤더가 올라간다. (translateY 사용) 스크롤을 올리면 헤더가 내려온다. (translateY 사용) 스크롤이 맨 위에 도착하면, 헤더의 배경 색상이 바뀐다. (#fff -> transparent) HTML, CSS 헤더의 기능 구현에 목적을 두어서 페이지는 간단하게 만.. 2021. 8. 22.
반응형