Kdt5 jeong tae uk #66

peacepiece7 · 2023-04-06T04:39:13Z

Bluebottle clone

레이아웃 클론 과제 제출합니다.

구조

KDT5-M1
├── dist // 이곳에 번들링한 결과물이 쌓입니다.
├── README.md
├── index.html // 메인화면을 보여주는 HTML파일입니다.
├── public
│   ├── images
│   └── svg
└── src
    ├── header.js
    ├── interior-view.js
    ├── main.js // SCSS, JS의 entry입니다.
    ├── swiper.js
    ├── view.js
    └─── scss // <section>별로 SCSS파일을 분리했습니다.
        ├── _config.scss
        ├── card-category.scss
        ├── footer.scss
        ├── header.scss
        ├── interior-view.scss
        ├── left-categories.scss
        ├── main-view.scss
        ├── main.scss
        ├── our-story.scss
        └── subscription.scss

라이브러리

swipersjs
eslint
parcel

언어

HTML
JavaScript
SCSS

상세 설명

header, section 등 시멘틱 태그를 최대한 활용했습니다.
CSS 전처리도구 SCSS를 사용했습니다.
Parcel을 사용하여 번들링 했습니다.
HTML, CSS로 구현하기 힘들다고 생각한 부분은 JavaScript로 구현했습니다.
반응형을 구현하지 않았습니다. max width가 1278px미만일 경우 원본가 상이한 부분이 생길 수 있습니다.
GNB의 모든 기능이 구현되지 않았습니다. 원본과 동일하게 동작하지 않을 수 있습니다.
접근성을 고려해서 wai-aria를 최대한 활용했습니다. (bluebottle 웹사이트에 aria관련 속성이 많았습니다.)

eslint, prettier, webpack 설정을 추가했습니다.

블루 보틀 메인 페이지 에서 쓰이는 svg icons, images 추가

프로젝트 구조가 깔끔하게 잡히지 않고, 관련 설정을 찾아보는 시간이 프로젝트 규모에 비해 손해라는 느낌이 들어서 변경합니다. 일단 프로젝트를 완성하고, webpack관련 강의를 수강한 뒤 도전하겠습니다!!

반응형이 적용되지 않은 헤더완성 & js를 이용한 fade in/out 기능 추가

메인화면 이미지 전환 효과 추가, 이미지 몇 장 추가

shop으로 가는 아이템이 swipe되는 section 추가했습니다. subscription 섹션도 구조만 살짝 잡았습니다.

subscribe section안에 두 개의 article로 나눠서 개발했습니다.

mediaquery가 적용되지 않은 footer입니다.

- 함수, 이벤트 리스너에 주석 추가했습니다 - .prettierrc 추가했습니다 - .scss파일은 예외적으로 pretter가 동작하도록 변경했습니다. - devDocs.md의 setting, linting 부분을 합치고 parcel관련 설명을 추가했습니다. - favcon을 추가했습니다.

- slide 기능이 들어가있습니다. - swiperjs를 사용하였습니다. - _config.scss에 $color-begie가 추가 되었습니다. (devDocs.md도 수정했습니다)

landscape면 자연풍경이 나와야할 거 같은데 막상 사진을 보니까 건물 내부 인테리어를 슬라이드로 보여주고 있어서 변경했습니다.

- 영어로 되어있는 사이트라서 접근성, title 속성을 영어로 변경했습니다. - 아이콘(svg)에서만 대체 문자를 넣었습니다.

ruddnjs3769 · 2023-04-07T17:22:22Z

index.html

+    <link rel="icon" type="image/x-icon" href="./public/svg/favicon.ico">
+    <title>Whole Bean Coffee | Blue Bottle Coffee</title>
+    <meta name="description" content="Blue Bottle Coffee is a specialty coffee roaster with cafes in LA, SF, NYC, & Japan. Enjoy our freshly roasted coffee, brewers and guides online & in-store.">
+    <script defer type="module" src="/src/main.js"></script>


index.html파일에 css파일을 불러오는 link태그가 없고 index.html에 연결된 main.js파일에서 다른 scss파일과 연결된 main.scss 파일을 import하셨습니다. 가독성과 유지 보수의 용이성을 고려해서 이러한 방식으로 작성하신게 맞을까요?

parcel번들러와 scss를 같이 사용할 수 있는 방법을 찾아보고 제일 먼저 찾았던 방법을 적용하였습니다.
사실 좀 더 좋은 방법이 있는지에 대해서 고민해보진 못했습니다.

우선적으로 생각했던 부분은
최종적으로 배포시 css파일을 불러오는 태그와 js파일을 불러오는 태그를 나누어서 브라우저가 병렬적으로 css파일과 js파일을 불러오기를 바랬습니다.

production 코드가 dist폴더에 생성되는데, npn run build시 생성된 index.html파일을 보면
아래와 같이 파일이 분할되는 것을 확인했었습니다.

<link rel="stylesheet" href="/index.5c07bd4b.css"> <script defer type="module" src="/index.e446e3de.js"></script>

혹시나 싶어서 금방 네트워크 탭으로 확인해봤는데 (이렇게 확인하는게 맞을까요?)
둘 다 병렬적으로 처리되는것을 확인했습니다.

iamidlek

고생하셨습니다.
번들링 뿐만 아니라 eslint, prettier 설정 까지
잘 하신 것 같습니다.
파일도 기준 가지고 잘 나누신 것 같습니다.

중복되는 부분은 코멘트 하지 않았습니다.

HTML

시멘틱 하게 잘 작성해 주신 것 같아요.
접근성 부분도 고려 하신 것 같아서 좋습니다.

CSS

scss 잘 활용하여 주셨습니다.

JS

파일 분리도 해주시고 동작을 위한 로직도
고민하시면서 작성 하신 것 같아 충분한 것 같습니다.

iamidlek · 2023-04-09T15:23:16Z

index.html

+            </div>
+            <div class="logo">
+              <a href="/" title="Back to the home">
+                <svg stroke="transparent" viewBox="0 0 23 57" xmlns="http://www.w3.org/2000/svg">


svg는 파일로 관리하면 편리할 것 같습니다.

iamidlek · 2023-04-09T15:24:07Z

index.html

+    </header>
+    <!-- Left menu section -->
+    <section id="left-menu">
+      <div class="l-shop menu" data-category="shop" style="display : none">


인라인 스타일을 주신 이유가 있을까요?

인라인 스타일을 주신 이유가 있을까요?

Left menu관련 함수를 만들 때 생각없이 인라인으로 작성했는데 스타일 시트로 옮기는게 좋을것 같습니다. 감사합니다!

iamidlek · 2023-04-09T15:33:00Z

src/scss/left-categories.scss

+  height: 100%;
+  background-color: $color-cream;
+  padding-left: 3.75rem;
+  box-sizing: border-box; // body에서 상속이 안되네요...?!


box-sizing 은 상속되지 않습니다.

…ound 수정 - left categorty section에서 display : none을 인라인으로 작성한 부분을 stylesheet로 이동했습니다. - view.js의convertBackground 함수가 반복하는 조건을 명시적으로 작성

peacepiece7 added 20 commits March 28, 2023 16:01

chore : add configuration settings

08dfe1b

eslint, prettier, webpack 설정을 추가했습니다.

chore : add svg icons & imgs

3558fe2

블루 보틀 메인 페이지 에서 쓰이는 svg icons, images 추가

chore : add svg icons & imgs

791cff7

블루 보틀 메인 페이지 에서 쓰이는 svg icons, images 추가

sync : 임시 저장 커밋

ce5c1bf

feat : header 레이아웃 추가

dcaa9f1

반응형이 적용되지 않은 헤더완성 & js를 이용한 fade in/out 기능 추가

feat : 메인화면 이미지 전환기능 추가

861129f

메인화면 이미지 전환 효과 추가, 이미지 몇 장 추가

feat : add card-category section

9539ddb

shop으로 가는 아이템이 swipe되는 section 추가했습니다. subscription 섹션도 구조만 살짝 잡았습니다.

feat : subscribe section 추가

c878ffe

subscribe section안에 두 개의 article로 나눠서 개발했습니다.

feat : footer section 추가

197469a

mediaquery가 적용되지 않은 footer입니다.

feat : add landscape section

d8fe391

- slide 기능이 들어가있습니다. - swiperjs를 사용하였습니다. - _config.scss에 $color-begie가 추가 되었습니다. (devDocs.md도 수정했습니다)

refector : landscape -> interior-view로 변수명 변경

77da73b

landscape면 자연풍경이 나와야할 거 같은데 막상 사진을 보니까 건물 내부 인테리어를 슬라이드로 보여주고 있어서 변경했습니다.

feat : add our story section

79495f3

fix : gnb shop 눌렀을 때 나오는 category가 닫히지 않는 문제 수정

80af8cc

refector: icon으로 된 버튼 타이틀(툴팁) 추가

12a2749

fix : our-story section content position 수정

e939e20

docs : README.md 작성 & 필요없는 주석 제거

d747b47

docs : readme.md 코드 하이라이트 type json제거

b4861dc

refector : 접근성 관련 태그 수정

0d827f5

- 영어로 되어있는 사이트라서 접근성, title 속성을 영어로 변경했습니다. - 아이콘(svg)에서만 대체 문자를 넣었습니다.

ruddnjs3769 reviewed Apr 7, 2023

View reviewed changes

iamidlek reviewed Apr 9, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Kdt5 jeong tae uk #66

Kdt5 jeong tae uk #66

peacepiece7 commented Apr 6, 2023

ruddnjs3769 Apr 7, 2023

peacepiece7 Apr 8, 2023 •

edited

Loading

iamidlek left a comment

iamidlek Apr 9, 2023

iamidlek Apr 9, 2023

peacepiece7 Apr 10, 2023

iamidlek Apr 9, 2023

Kdt5 jeong tae uk #66

Are you sure you want to change the base?

Kdt5 jeong tae uk #66

Conversation

peacepiece7 commented Apr 6, 2023

Bluebottle clone

구조

라이브러리

언어

상세 설명

ruddnjs3769 Apr 7, 2023

Choose a reason for hiding this comment

peacepiece7 Apr 8, 2023 • edited Loading

Choose a reason for hiding this comment

iamidlek left a comment

Choose a reason for hiding this comment

HTML

CSS

JS

iamidlek Apr 9, 2023

Choose a reason for hiding this comment

iamidlek Apr 9, 2023

Choose a reason for hiding this comment

peacepiece7 Apr 10, 2023

Choose a reason for hiding this comment

iamidlek Apr 9, 2023

Choose a reason for hiding this comment

peacepiece7 Apr 8, 2023 •

edited

Loading