46일차 - 서드파티 패키지의 Parallax, 백엔드 입문
서드파티 패키지의 Parallax
parallax는 서드파티 패키지로 자주 쓰이는 핵심 기능 중 하나이며, 일부 요소가 페이지의 나머지 부분보다 느린 속도로 스크롤되는 시각 효과를 말한다.
위 이미지는 parallax 효과를 보여주는 이미지인데, 페이지를 스크롤해서 내렸더니 이미지의 안보이던 부분이 보이고 있다. 실제로 페이지가 스크롤되는 것보다 느리게 움직이며 이미지의 안보이는 부분으로 스크롤된다.
이 parallax 효과는 여러 사이트에서 이용해볼 수 있지만 가장 기본적인 효과의 구현을 위해 수업에서는 https://simpleparallax.com/라는 사이트를 이용했다.
이 패럴렉스 효과를 적용하기 위해 사이트에서 제공하는 script 경로를 넣고 직접 만든 웹페이지에 적용하기 위해 별도의 자바스크립트 파일을 만들어서 이미지를 상수로 저장해주었다.
위 이미지의 new 키워드 라인은 심플패럴렉스 사이트에서 제공하는 코드로, 이걸 넣어야 구현이 된다. 그리고 기본값을 조금 조정하기 위해 두 번째 매개변수를 객체값으로 설정하여, 사이트에서 제공하는 키를 넣고, 값을 조정해보았다.
백엔드(Backend) 기초
우리가 인터넷 쇼핑몰에서 제품을 골라 장바구니에 담으면 장바구니 페이지에 최소 며칠간은 해당 제품이 담겨있는 HTML 페이지를 볼 수가 있다. 이는 해당 쇼핑몰의 서버에 나의 장바구니 정보가 저장되어 있는 별도의 페이지이다. 별도의 페이지라 함은 다른 사람은 볼 수 없고, 나만 볼 수 있다는 것인데, 이렇게 사용자가 볼 수 없는 영역에서 사용자와 관리자가 서버를 통해 정보를 주고받을 수 있도록 코도를 구축하는 것이 백엔드이고, 이를 위해 서버와 그 서버를 이루고 있는 코드들이 필요하다.
여기서 첫 날 배운 웹의 작동방식을 다시 한번 살펴보았다. 사용자가 웹주소를 입력하여 접속하면 웹사이트를 보고 싶어하는 사용자의 요청이 서버 컴퓨터에 전송된다. 이 서버 컴퓨터에는 웹사이트 코드가 저장되어 있는데, 이를 브라우저에 응답으로 사용자에게 전송되어서 사용자가 웹사이트를 볼 수 있게 되는 게 웹의 작동방식이다.
백엔드는 전송과 응답부분을 담당하는 역할이라고 보면 될 것 같다.
동적 웹사이트와 정적 웹사이트
브라우저는 항상 HTML, CSS, 자바스크립트만 수신한다. 브라우저가 구문을 분석하고 처리할 수 있는 방법은 이것이 전부이기 때문이다. 여기서 HTML, CSS, 자바스크립트로만 이뤄진 웹사이트를 정적 웹사이트라 하며, 사용자를 위한 서버 측 코드가 필요한 웹사이트 즉, 백엔드가 적용된 웹사이트를 동적 웹사이트라고 한다.
백엔드의 대표적 언어
백엔드 코드를 작성하는 프로그래밍언어로는 대표적으로 Python, PHP, C#, 노드JS 등이 있다. 이 외에도 JAVA나 C++ 등의 여러 언어가 있지만 일부는 최적화되지 않았거나 너무 복잡할 수 있다. 실제로 C++은 웹개발에 사용되지 않으며, 일부 언어는 웹페이지에 맞지 않기도 하다.
노드JS는 브라우저 외부의 자바스크립트이다. 원래 자바스크립트는 브라우저 내에서 기능 구현을 하라고 만든 언어인데 이것의 용도가 확대되어서 브라우저 외부에서 작동하지만 실제로는 브라우저의 자바스크립트 코드의 실행을 책임지도록 할 수 있게 되었다. 그게 노드JS이다.
이 노드JS의 장점은 브라우저 외부의 자바스크립트임에도 자바스크립트 코드를 실행할 수 있다는 것이다. 자바스크립트를 실행하는 경우에 보안상 이유로 브라우저 내부에서는 사용할 수 없는 더 많은 기능을 사용해서 자바스크립트 코드를 좀 더 풍부하게 만들 수 있다. 예를 들어 앞으로 해볼 파일 시스템과의 상호 작용이나 데이터베이스 접근 작업 같은 것을 이 노드JS로 할 수 있는 것이다.
