본문 바로가기
반응형
CSR과 SSR 이해하기 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR) 어떤 회사는 CSR을 사용하고, 어떤 회사는 SSR을 사용한다. 또 어떤 회사는 둘의 방식을 섞어서 사용하기도 한다. 각기 다른 방식을 사용하는 이유와 장단점들 그리고 어떻게 하면 더 좋게 개선할 수 있을까 등을 알아보자. 먼저 웹 트렌드와 역사(SPA 시대까지)를 살펴보면서 해당 방식이 등장하게 된 이유를 살펴보자. 웹의 역사(SPA 시대까지) 1990년대 중반 - 정적 웹 사이트들 1990년대 중반까지는 모두 정적 웹 사이트들(Static Sites)이었다. 이미 잘 만들어진 HTML 문서들이 만들어져 있고, 사용자가 브라우저에서 해당 사이트에 접속하면 서버에 이미 배포되어져 있는 HTML 문서를 받아와서 보여주는 방식이다. 예를 들어 .. 2021. 10. 15.
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.
함수형과 객체지향의 다른점 데이터(객체)가 먼저? 함수가 먼저? 데이터(객체) 기준 cat.moveLeft(); cat.moveRight(); dog.moveLeft(); dog.moveRight(); 객체를 기준으로 객체가 먼저 나온다. 객체지향 프로그래밍은 데이터를 먼저 디자인한 후 그 데이터에 맞는 메서드를 만드는 방식으로 프로그래밍을 한다. 예를 들면 moveLeft()를 갖기 위해 Animal 클래스를 만든 다음 cat과 dog가 상속을 받아 메서드를 갖게 되고, 같은 규격의 객체가 된다. 함수 기준 moveLeft(dog); moveRight(cat); moveLeft({ x: 5, y: 2}); moveRight(dog); 함수를 기준으로 함수가 먼저 나온다. 함수형 프로그래밍에서는 함수를 만든 후 그 함수에 맞게 데.. 2021. 9. 22.
일급 함수 함수형 프로그래밍과 일급 함수 함수형 프로그래밍의 이점들을 활용해 로직을 구현하고, 컨셉을 이해하기 위해 일급 함수에 대해 먼저 알아보자. 자바스크립트에서 함수는 일급 함수이다. 다시 말해 함수를 값으로 다룰 수 있다는 뜻이다. 함수를 변수에 담기 // ✅ 일급 함수는 변수에 함수를 담을 수 있다. const foo = function (a) { return a * a; }; console.log(foo); // ƒ (a) { // return a * a; // } 위 예제를 보면 변수 foo에 함수를 할당하고 출력해보면 함수가 담긴 것을 확인할 수 있다. 변수를 사용하여 끝에 괄호 ()를 추가하면 함수를 호출할 수 있다. // ✅ 변수 끝에 괄호 ()를 사용해서 함수를 호출할 수 있다. const fo.. 2021. 9. 21.
순수 함수 성공적인 프로그래밍은 무엇을 의미 할까? 모든 프로그래밍 패러다임은 성공적인 프로그래밍을 위해 존재한다. 좋은 프로그램을 만드는 일은 곧 성공적인 프로그래밍을 의미한다. 좋은 프로그램은 사용성, 성능, 확장성, 기획 변경에 대한 대응력 등이 좋다. 위와 같은 사항들을 효율적이고 생산적으로 이루는 일이 성공적인 프로그래밍이다. 그 중 함수형 프로그래밍은.. 함수형 프로그래밍은 성공적인 프로그래밍을 위해 부수 효과를 최소화, 조합성을 강조하는 프로그래밍 패러다임이다. 부수 효과를 최소화 한다? -> 순수 함수를 만든다. 조합성을 강조한다? -> 모듈화 수준을 높인다. 순수 함수 순수 함수란 들어온 인자가 같다면 항상 동일한 결과를 리턴하는 함수를 뜻한다. 그리고 순수함수는 함수가 받은 인자 외에 다른 외부의.. 2021. 9. 20.
반응형

티스토리툴바