[NodeJs] 애플 홈페이지 프론트엔드+백엔드 (풀스택) 샘플코드

Apple HomePage / front-end / back-end / Full Stack Sample Code

 

  프론트엔드 + 백엔드 풀스텍 연습겸 애플 홈페이지 스타일의 웹사이트를 만들어보았다.

수정을 통해 본인의 웹사이트로 사용하여도 좋고,

소스를 다운 받아 본인의 학습 용도로 사용해도 좋다.

 

  프론트엔드 사용 기술 목록

1. Html

(Html5 표준 사용)

2. Css

(프레임워크 없이 순수 CSS5만을 사용하여 가볍게 동작 구현)

3. Javascript

(라이브러리 사용 없이 순수 바닐라 자바스크립트만을 사용)

 

  백엔드 사용 기술 목록

1. NodeJs

(반응형 메인 페이지를 우선 구현해 보았는데,

이후 포스팅에서 상품 상세페이지 등 다양한 페이지 추가 구현할 예정이다)

2. json

(서버측의 json파일 활용으로 데이터베이스를 생략하였다.

상품 이미지 등은 구글 등의 포탈 사이트에 올리고

이미지 url link를 긁어 오는 방식으로 대체하고

로그인 인증은 추후에 카카오/네이버/구글 로그인 을 통해

구현하게 되면 데이터 베이스가 굳이 필요없을거라 판단하였다.)

 

샘플 코드의 Part는

Nav, Body, Foot 총 세가지로 나누어 보았는데,

각각 파트별로 다른 함수를 통해 랜더링 하는 방식이다.

 

 

메뉴의 구성은

nav.json 파일의 수정을 통해서 작성하면 된다.

알아보기 쉽게 작성해 놓아서 코딩을 따로 몰라도

수정만으로 메뉴의 구성이 가능하다.

메뉴의 개수는 제약을 두지 않았으나,

너무 많아지면 모바일에서는 문제없게

하단으로 메뉴가 펼쳐지지만,

pc환경에서는 부자연스러워 보일수 있으니

5개-8개 사이 설정하는 것이 적당할 것같다.

 

 

상품의 업로드는 

body.json 파일의 수정을 통해서 작성하면 된다.

앞서 언급한 바와 같이 이미지는 url 링크로 대체 하였는데,

각자의 환경에 알맞는 포털 사이트를 통해

이미지를 업로드하고 이미지 주소 복사를 통해

link에 기재하면 된다.

상품 안내 관련 폰트 색상 또한 추가로 수정 가능하게 구현해 보았다.

 

 

마지막으로 페이지 가장 하단의

회사,저작권 정보는 foot.json 파일의 수정을 통해 작성하면 된다.

 

 

하단의 업로드 된 소스를 다운받아

vsCode에서 실행하면 되고,

서버에 업로드시 웹사이트 사용이 가능하다.

반응형으로 제작하였고,

연습용으로 하루만에 제작하여

버그가 있을수 있으니 참고바람

 

webPage.zip

0.01MB