-
Notifications
You must be signed in to change notification settings - Fork 3
KDT0_KimMinSeob 인터파크 홈페이지 클론코딩 #63
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from 35 commits
9857f16
bdacb96
d52cb2e
8f5fabe
42de03b
ae870af
5b6c632
3ab097d
617e08f
ecb18a0
5efd897
15e6aed
50d8f29
5010ced
68ef625
86954b2
0a013aa
7c6b5ba
19589cc
06e4ab1
3c42ea2
95f944c
4e905ba
0f6d227
662ba1d
e350f9f
6896fbe
0101229
cfa15d4
7196516
0ba56a2
4becc4d
6f54d7a
9458d91
f48751f
6093214
1374d8f
f03a500
4bdd5f4
8fc7595
5621db2
e62441b
f526127
f97a6ca
7e86fc1
c3162b0
d3a4585
34d16de
b30dbef
b4d4e5c
d84370c
7a9ea96
b4b2241
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| { | ||
| "arrowParens": "avoid", | ||
| "bracketSpacing": true, | ||
| "htmlWhitespaceSensitivity": "css", | ||
| "insertPragma": false, | ||
| "jsxBracketSameLine": false, | ||
| "jsxSingleQuote": false, | ||
| "printWidth": 80, | ||
| "proseWrap": "preserve", | ||
| "quoteProps": "as-needed", | ||
| "requirePragma": false, | ||
| "semi": true, | ||
| "singleQuote": false, | ||
| "tabWidth": 4, | ||
| "trailingComma": "none", | ||
| "useTabs": false, | ||
| "vueIndentScriptAndStyle": false | ||
|
||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,69 @@ | ||
| [참고 내용] | ||
| <img src="https://www.interpark.com/_next/static/media/ci.4836710e.svg" width="100%" height="50%" style="background:white" /> | ||
| <br/> | ||
| <br/> | ||
| <br/> | ||
|
|
||
| 👀 자신이 원하는 사이트 레이아웃 클론 | ||
| 원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. | ||
| 평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. | ||
| 과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! | ||
| # ✈️ 인터파크 홈페이지 클론 코딩 | ||
| 인터파크 페이지를 클론코딩하였습니다. | ||
| <br/> | ||
|
Comment on lines
+6
to
+8
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. prettier와 markdownlint 를 적용해서 md 파일을 포메팅해보세요!! |
||
|
|
||
| 과제 수행 및 제출 방법 | ||
| ## ✅ 사이트 주소 | ||
| <a href="https://www.interpark.com/"><img src="https://img.shields.io/badge/✈️INTERPARK-참고사이트-ffffff?style=flat-square&Color=white" width="200px"/></a> | ||
| <a href="https://internparkkimminseob.netlify.app/"><img src="https://img.shields.io/badge/✈️INTERPARK-클론코딩사이트-000000?style=flat-square&Color=black" width="230px"/></a> | ||
|
|
||
| 1. 현재 저장소를 로컬에 클론(Clone)합니다. | ||
| 2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름) | ||
| 3. 자신의 본명 브랜치에서 과제를 수행합니다. | ||
| 4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름) | ||
| 5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름) | ||
| ## ✅ 프로젝트 소개 | ||
| - 인터파크 홈페이지를 클론코딩하였습니다. html과 css와 야간의 js를 활용하여 홈페이지를 제작해보았습니다. | ||
|
|
||
| ## ✅ 프로젝트간 수행 목표 | ||
| ### 1. HTML | ||
| - 최대한 원 사이트와 비슷하게 제작을 진행하기 | ||
| - Semantic Tag들을 활용해서 html을 구성하기 | ||
| - 사용자 경험이 좋은 홈페이지를 만들 수 있는 UI 구성 방법을 체득하기 | ||
|
|
||
| - main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요! | ||
| - Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요! | ||
| - Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요! | ||
| - 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! | ||
| ### 2. CSS | ||
| - Flex 기능을 통한 정렬 기능을 숙지하기 | ||
| - Relative와 abolute를 통한 버튼과 모달창 같은 기능을 구현하기 | ||
| - 원 페이지에서 어떠한 구성을 통해 가독성이 높은 페이지를 제작하였는지 알아내기 | ||
|
Comment on lines
+23
to
+26
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ### 은 h3의 역할입니다. markdownlintMD022 |
||
|
|
||
| 필수 요구사항 | ||
| ## ✅ 구현 화면 | ||
| <br/> | ||
|
|
||
| - 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! | ||
| - 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! | ||
| - 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! | ||
| - 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. | ||
| <br/> | ||
|
|
||
| 선택 요구사항 | ||
|  | ||
|
|
||
| - < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요. | ||
| - 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요. | ||
| - 부분적으로 BEM 방법론을 도입해보세요. | ||
| - JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!) | ||
| - JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) | ||
| <br/> | ||
|
|
||
| 손쉬운 이미지 추출 방법 | ||
|
|
||
| 사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요. | ||
| ## ✅ 주요기능 및 사용한 것 | ||
|
|
||
| 1. 원하는 사이트 접속 | ||
| 2. Image Downloader 확장 프로그램 실행 | ||
| 3. 다운로드 원하는 이미지 선택 | ||
| 4. 서브 폴더 이름(Save to subfolder) 명시 | ||
| 5. 다운로드! | ||
| ### 1. 스크롤 반응 고정 네비게이션바 구현 | ||
|  | ||
| <br/> | ||
|
|
||
| ### 2. Swiper를 통한 가로방향 슬라이더 구현 | ||
|  | ||
| <br/> | ||
|
|
||
| ### 3. Hovering을 통한 모달창 구현 | ||
|  | ||
|
|
||
| ## ✅ 배운점 | ||
| ### 1. HTML 구성하기 | ||
| - 처음 클론코딩을 진행해보면서 UI를 사용할 때 최대한 간결하게 자세한 정보보다는 사진과 그래픽 위주로 구현하여 유저가 한눈에 페이지를 볼 수 있게 해야 한다는 것을 느끼게 되었습니다 | ||
|
|
||
| ### 2. Swiper 구성하기 | ||
| - Swiper 기능을 통해서 다양한 웹사이트에서 사용되는 슬라이더 기능을 구현해볼 수 있었습니다. 이를통해 앞으로 판매관련 웹사이트를 만들 때 어떠한 구성으로 웹페이지의 슬라이더를 구현할 수 있는 지를 알게 될 수 있었습니다. | ||
|
|
||
| ### 3. CSS 구성하기 | ||
| - CSS를 직접 제작해보면서 tailwind같은 css npm library들이 얼마나 편한 유저에게 제공하는 지를 알 수 있게 되었습니다. 또한 직접 하나하나 구현해보면서 flex를 비롯한 정렬 개념과 relative abolute를 통한 블록배치 기술을 터득할 수 있었습니다. | ||
|
|
||
| ## ✅ 아쉬운점 | ||
| ### 1. 반응형 웹사이트 만들기 | ||
| - CSS를 통한 반응형 웹사이트를 만드는데있어서 어려움이 있었습니다. 유저들이 모바일을 통한 기기를 많이 사용하기 때문에 수업을 통해서 반응형 웹사이트를 만들 수 있도록 노력할 것 입니다. | ||
|
|
||
| ### 2. 클린코드 | ||
| - html과 css 모두 반복되는 코드들이 상당했습니다. 특히 css의 경우 중복되는 기능들에서 약간의 차이로 인해 다시 css코드를 작성해야하는 어려움이 있었습니다. 그러다보니 코드가 계속해서 dirty해졌습니다. 따라서 학습을 통해 중복된 코드를 최대한 지향하는 클린코드를 만들 수 있도록 노력할 것입니다. | ||
|
|
||
| ### 3. Align-items를 통한 정렬 | ||
| - 각 section을 정렬하면서 align-items를 사용하였지만 제대로 구현되지 않아서 relative와 abolute를 통한 구현을 위주로 하였습니다. 따라서 절대적으로 계산에 의한 디자인이 만들어졌습니다. 이러한 문제를 해결하기위해서 앞으로는 미리 element들에 대한 구상을 진행하고 웹 페이지를 제작해야겠다는 것을 알게되었습니다. | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
필요한 것만 선언하는 것도 좋을 것 같습니다! 이 프로젝트에는 jsx가 없어서 불필요해보입니다
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
FixPrettierrc
.prettierrc파일을 수정하였습니다.말씀해주셨던 대로 Setting.json에서 formatOnSave 가 false가 되어있었습니다. 추가적으로 formatOnSave 값을 변동 하는 것 이외에 각각의
editor.defualtFormatter의 값 또한 VS-code의 기본 형식으로 저장되어 있었습니다.formatOnSave의 값을 true로 변경하고 각각의
editor.defaultFormatter의 값 또한esbenp.prettier-vscode으로 변경하여 파일에 prettier가 저장하면 반영이 되도록 변경하였습니다.prettier을 활용하는 방식에서 은지님의 코드를 봤을 때 다양한 방법이 많겠지만 package.json을 활용하는 방법과 prettierrc 파일을 활용하는 방법이 있었던 것 같습니다. 차이로는 전자는 다양한 설정들을 하나의 파일에서 관리할 수 있다는 장점이 있는 것 같고 prettierrc 파일은 prettier을 설정하는데 조금 더 자세히 설정할 수 있는 장점이 있는 것 같습니다. 앞으로 협업을 하게 된다면 어떠한 방식이 더 쉽고 직관적이게 활용될 수 있을 지에 대해서 고민해봐야 할 것 같습니다.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
추가적으로 메니저님한테 받은 메세지에 대해서 정말 감사드린다는 말씀을 드리고 싶어서 이렇게 코멘트에 남기게 되었습니다 😊😊
이번 클론 코딩을 진행하면서 클론코딩을 실행하는 목적은 진짜 웹 페이지를 따라 제작해보면서 html과 css를 구성하는 능력을 키우는 과정이라는 것을 인지하였고 또한 그러한 목적이 있는 활동이라고 생각합니다. 따라서 이 과정에서 멘토와 멘티의 역할을 나눈다면 멘토는 멘티가 작성한 코드의 개선점을 찾아서 피드백하고 고쳐주는 역할을 가지게 되고 멘티는 최대한 웹 사이트와 비슷하게 작성해야하고, 주어진 시간안에 프로젝트를 끝내는 과정 역할을 가지게 되었다는 생각합니다.
첫 번째로 "최대한 웹 사이트와 비슷하게 작성해야 한다" 라는 역할에 상응하려면 웹 페이지의 구조를 알아야 할 필요가 있었습니다. 하지만 지식이 부족하여 어떻게 웹의 구조를 만들어야 하는가, 그리고 그러한 구조에 class 이름은 어떻게 구현해야 하는 가에 대해서 고민을 많이 하게 되었습니다. 따라서 구조가 반복되는 처음 요소를 통해 점진적으로 구조를 스스로 잡아나갔습니다. CSS도 최대한 같아야 한다 라는 문제에 봉착했을 때 CSS 공부가 미흡하여 최대한 같게 하고자 원 페이지의 CSS를 많이 참고하였습니다.
두 번째로 "시간 내에 프로젝트를 끝내야 한다" 라는 역할에 상응하기 위해 html에 구조에 대해서 파악하고 공부하는데 시간을 많이 사용하여 중요한 CSS를 작성하는 요소를 간과하였습니다. 기본적으로 CSS 지식이 부족한 상황에서 프로젝트의 완성을 목적으로 작업을 하다 보니 CSS를 구성하기 위해 CSS 부분에서 원작자의 코드와 똑같아 진다는 문제가 발생하였습니다.
결론적으로 봤을 때 대 전제인 멘토와 멘티의 역할에서 해당 코드를 작성한 본인의 멘티의 역할은 사라지고 남은 것은 원작자의 코드였으며 멘토의 역할과 모순이 된다는 것을 이제야 알아차리게 되었습니다. 즉 클론 코딩의 의도 파악을 하지 못했고 내가 무엇을 모르는 지를 몰랐던 큰 문제가 있었던 것 같습니다. 이러한 문제를 이번 과제를 통해 빠르게 파악할 수 있어서 정말 다행이라 생각하고 역할에 모순이 발생한 코드임에도 불구하고 이렇게 꼼꼼하게 봐주시고 코드 리뷰를 해주셔서 정말 감사드린다는 말씀을 꼭 드리고 싶었습니다. 앞으로 JS 과제와 토이 프로젝트 등 중요한 과제들이 남아있는데 이러한 문제를 발견하지 못하고 그대로 이러한 방법론을 가지고 갔다면 정말 큰 문제가 발생 했을 수 도 있겠다는 생각이 많이 들었습니다. 남은 리펙토링 시간과 추가 시간을 활용해서 첫째로 남겨주신 코멘트들을 개선시켜 중복코드를 없애는 방법론에 대해서 공부하고 수정하겠습니다. 둘째로 rem을 통한 반응형 웹을 구현해보겠습니다. 마지막으로 현재 웹 페이지에서 개선되어야 할 UI를 하나 찾고 저만의 코드로 수정해보겠습니다. 모순이 있는 코드임에도 코멘트를 달아주시고 알고 있지 못했던 문제도 피드백 해주셔서 정말 감사합니다. ✨✨