[shopping mall] Sass, request response, carousel (2021 02 23) - adelakim5/fe-w3-shopping GitHub Wiki

정리해야 할 것들

express 설치
carousel

sass를 위한 parcel 설치

참고자료: Parcel

[시작하기] 카테고리에 나온대로 설치를 하면 된다.
parcel-bundler를 설치하고 나면, SCSS 에셋으로 가서 sass를 설치한다.

js 파일에서도 scss 파일을 import할 수 있다는데, 이건 dart-sass를 설치해야 가능한 것 같다.

나는 html파일에 scss를 포함시켜서 로드하는 방식으로 구현했다.

index.html이 있는 폴더 안으로 들어간 후 CLI 창에 다음과 같이 치면, 포트번호 1234로 페이지가 로드된다.

parcel index.html

request, response 구현 방법

나는 express로 서버를 구축하고, parcel로 클라이언트를 구축한 상태이다.

그래서 쇼핑몰 컨텐츠 데이터를 받아오기 위해 다음과 같은 방식을 생각했다.

                    request
    (client)       -------->       (server)
[localhost:1234]               [localhost:3000]
                   <--------
                    response

그러면 client에서 fetchAPI를 통해 데이터를 request하고, server에서는 요청한 데이터를 response 해주어야겠네?

그래서 express의 app.js에 json-data를 로드한 일종의 변수를 가지고 있다가, 클라이언트에서 요청하면 json형식으로 보내주는 코드를 짜야겠다고 생각했다.

내가 찾는 방법은 node의 global 변수에 json-data를 담아놓고, 클라이언트 요청이 들어오면 global 변수에 담아두었던 그 json-data를 뿌리는 식으로.. (좋은 방법인지는 모르겠지만) 최선이었다 ㅎㅎ.

주의사항

cors 때문에 안된다는 에러가 난다.
cors를 enable해주는 부분을 추가해주어야 한다. Express cors middleware