Skip to content

HTML, CSS, JS #1

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.

Sign up for GitHub

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

Jump to bottom
Open
shyjnnn wants to merge 71 commits into
base: main
Choose a base branch
from
Open

HTML, CSS, JS #1

shyjnnn wants to merge 71 commits into from

Conversation

@shyjnnn
Copy link
Contributor

@shyjnnn shyjnnn commented Jun 26, 2024 •
edited
Loading

사전 과제 설명

  • 수강생에게 전달한다는 가정 하에 멘토링 내용을 작성해 주세요.
  • ‘코드 리뷰‘는 멘토링이 필요하다고 생각하는 파일에만 남기면 됩니다.
    • 실제 멘토로서 수강생에게 코드 리뷰를 한다고 가정하여 격려, 개선, 제안, 참고할 문서 링크, 코드 의도에 대한 질문 등을 자유롭게 남겨주세요.
  • 수강생의 ‘질문사항‘도 답변을 남겨주시기 바랍니다.

배경 설명

  • 디자인 시안

  • 큰 변경사항

    • 반응형 디자인을 적용
    • 웹 컴포넌트 사용
    • css 효과 적용
    • palette에 있는 color값들을 css 변수로 등록해서 사용
구체적인 요구사항은 다음과 같습니다.

필수 요구사항

전체

  • 반응형 디자인을 적용해 주세요. (아래는 width를 기준으로 한 분기 지점 입니다.)
    • PC: 1200px 이상
    • tablet: 768px 이상 ~ 1199px 이하
    • mobile: 375px 이상 ~ 767px 이하
    • 375px 미만 사이즈의 디자인은 고려하지 않음

PC, tablet

  • "/shared" 페이지에서 아래 내용을 볼 수 있도록 구현합니다.
  • Linkbrary 로고 클릭하면 "/" 페이지로 이동합니다.
  • 검색 영역의 placeholder는 "원하는 링크를 검색해 보세요."로 설정하고, 입력가능하게 해주세요.
  • card 컴포넌트 호버시 디자인에 맞게 배경색이 변하고, 이미지가 1.2배 확대되게 해주세요.
  • card 컴포넌트는 클릭하면, 새 창으로 "https://www.codeit.k"로 이동하도록 만들어 주세요.
  • card 컴포넌트에 별모양 아이콘 클릭시 회색, 파랑색으로 변하는 토글 스위치를 만들어 주세요.
  • card 컴포넌트에 설명글이 두 줄 보다 길어지면 ellipsis 설정해 주세요.
  • footer영역은 루트 페이지("/") 와 동일하게 만들어 주세요.

tablet 1100px 미만

  • 1100px 이상은 card 컴포넌트가 세 열로 배치되지만, 1100px 미만에서는 card컴포넌트가 두 열로 배치됩니다.
  • 이때 card 컴포넌트 크기, 열 간의 간격은 고정되어 있고, card 컴포넌트들을 감싸는 영역의 좌우 여백이 커지도록 합니다.

모바일

  • mobile 크기에서 card컴포넌트는 하나의 열로 배치됩니다.
  • card 컴포넌트 크기는 고정되어 있고, card 컴포넌트들이 들어있는 영역의 좌우 여백이 커지도록 합니다.

선택 요구사항

전체

  • palette에 있는 color값들을 css 변수로 등록해서 사용해 주세요.
  • 반복되는 요소들을 웹 컴포넌트로 만들어 재사용해 주세요.

Key Changes

  • 웹 컴포넌트를 사용해 gnb, footer, card, card-list, star 컴포넌트를 만들어 적용했습니다.
  • Card-list component에서 card를 생성했고, card component에서 star를 생성해 사용했습니다.
  • fetch를 사용해 data.json의 mockup 데이터를 가져오고 이를 바탕으로 카드를 만들었습니다.
  • sessionStorage를 사용해 사용자 email과 password를 임시 저장해서 활용했습니다. 추후 수정이 필요해보입니다.
  • 웹 컴포넌트의 생명주기 중, constructor, connectedCallback를 사용해서 돔에 추가될때의 callback을 분리하고자 했는데 맞는 로직인지 잘 모르겠습니다.ㅎ

질문 사항

질문 사항1

disconnectedCallback, attributeChangedCallback을 활용하려 했으나 잘 되지 않았습니다.
특히, attributeChangedCallback을 사용해 star toggle을 구현하려 했는데, attribute를 변경해도 attributeChangedCallback이 실행되지 않았습니다. 임시방편으로 현재는 isStarted 변수와 toggle 메소드를 생성해서 구현하긴 했어요. 생명주기 메서드를 올바르게 사용하는 방법이 있을지, 문제점이 무엇인지 궁금합니다.

질문 사항2

웹 컴포넌트에서 innerHTML 대신 createElement를 사용해 DOM node를 구성했습니다. 이렇게 하면 코드 가독성이 많이 떨어지는지 궁금합니다. 웹 컴포넌트에서 DOM을 조작할 때 createElement를 사용하는 것이 좋은지, 아니면 다른 더 나은 방식이 있는지 조언 부탁드립니다.

질문 사항3

현재 card 컴포넌트를 forEach를 사용해 반복적으로 구현했습니다. 만약 하나의 카드만 추가해야 하는 경우, 이를 따로 추가하는 메소드를 구현하지 못했습니다. 웹 컴포넌트에서 효율적으로 개별 카드를 추가하는 방법이 있을까요?

shyjnnn and others added 30 commits April 2, 2023 01:31
@shyjnnn
Merge pull request #28 from shyjnnn/eva
6a03414 
[에바] - Week2
@shyjnnn
docs: README 요구사항 update - 구현 완료
2c50dbe
@shyjnnn
refactor: 불필요한 removeEventListner 제거
d74adb4
@shyjnnn
fix: 최초 접속 시 eye-slash여도 비밀번호 보이는 이슈
6be699e
Merge pull request #45 from shyjnnn/main
34164d9 
[에바] - Week3
@shyjnnn
refactor: 들여쓰기 formating
596d91d
@shyjnnn
style: 함수 style arrow로 변경
588bff4
@shyjnnn
docs: Week4 요구사항 update
d0a5220
@shyjnnn
style: html title 변경
9937188
@shyjnnn
feat: card compoenet 생성
16a8419
@shyjnnn
docs: card compoenet 목업 데이터 생성
54e0e15
@shyjnnn
feat: card-list-compoenet 생성
2ad4989 
- card-component.js css 경로 수정
- kebab.svg 추가
@shyjnnn
feat: shared html card-list-component 추가
dbb2eca
@shyjnnn
feat: card component css 구현
6d70510
@shyjnnn
feat: gnb component 구현 및 css 적용
0c100b4
@shyjnnn
feat: footer component 구현 및 css 적용
69fa4ba
@shyjnnn
feat: searchBar Component 구현 및 css 적용
a209d13
@shyjnnn
feat: shared 레이아웃 및 css 구현
aa302ef
@shyjnnn
feat: card-list-component grid 적용
865a612
@shyjnnn
refactor: 경로 수정 및 불필요한 주석, console 제거
68218a6 
global style font명 변경
@shyjnnn
feat: media query 적용
4eff8e1 
3가지 css media query 적용
- card-component 크기
- 검색바 위아래 여백
- shared page heading section 여백
@shyjnnn
feat: global_style_css에 color 변수 등록 및 전체 적용
45dbbcb
@shyjnnn
refactor: connectedCallback 등록
1d22b0d
@shyjnnn
refactor: card connectedCallback 등록
a8a612f
@shyjnnn
feat: card star component 구현 및 toggle 기능 추가
a51d198
@shyjnnn
feat: 로그인 여부에 따른 gnb 수정
ab1d203
@shyjnnn
feat: 로그인 시 sessionStorage에 저장
e2ccbc1
@shyjnnn
feat: card 컴포넌트 mouse hover 이벤트 구현
64708d7
@shyjnnn
feat: card 컴포넌트 z-index 부여
a6429e1
@shyjnnn
feat: 자잘한 css 수정
9693db0
shyjnnn and others added 27 commits April 19, 2023 12:53
@shyjnnn
refactor: cardlist와 fetch card data 분리
7ddfa22
@shyjnnn
refactor: cardlist url 은닉화
6787233
@shyjnnn
refactor: gnb 컴포넌트 isLoggedIn 은닉화
503def0
@shyjnnn
refactor: star 컴포넌트 isStarred 은닉화 및 event handler 분리
9efcf53
@shyjnnn
feat: folderInfo 컴포넌트 생성
6eaec08
@shyjnnn
feat: folder api 생성
d0c1dfe
@shyjnnn
feat: folderInfo 컴포넌트로 folder api로 받아온 데이터 전송
d5786d2
@shyjnnn
fix: folderInfo 컴포넌트의 stylesheet 적용 안되는 이슈 수정
ba19353
@shyjnnn
rename: js파일명 camelCase로 변경
b4f7734
Merge pull request #53 from shyjnnn/eva-week4
56552b6 
[에바] - week4
@shyjnnn
feat: gnb 컴포넌트에 user api로 받아온 데이터 전송
87f333c
@shyjnnn
docs: update README.md
1198e0e
@shyjnnn
chore: 불필요한 콘솔문 제거
47c4ae7
@shyjnnn
feat: card component에 folder api에서 받아온 데이터 전송
1aef5ea
@shyjnnn
feat: 카드 생성날짜 포맷에 맞게 변경
4c988ea
@shyjnnn
chore: 불필요한 함수 및 import문 제거
2096e2a
@shyjnnn
feat: cardComponent로 데이터 전달하는 방식 변경
14bd4d9 
- 기존 방식: 생성자 함수에 파라미터로 데이터 전달
- 수정 후 방식: 접근자 프로퍼티로 데이터 전달
@shyjnnn
feat: cardCreate에 현재 날짜와 카드 생성날짜 차이 계산 후 포맷팅 적용
bd72146
@shyjnnn
docs: README 구현완료 사항 update
4dd01ef
@shyjnnn
refactor: gnb Component DOM 구성 template으로 변경
bfeac81
@shyjnnn
chore(mentor): star Component 프로퍼티명 변경 및 style 노드 생성 template으로 변경
b42aad5
@shyjnnn
refactor(mentor): 구조 변경 및 hover css로 변경
89939b6
@shyjnnn
fix: global css 미적용 버그 해결
4609f0b
@shyjnnn
chore(mentor): 코드리뷰 반영
7158c81 
- 삼항연산자 안에서 코드를 실행하는 부분 수정
- 불필요한 메소드 및 주석 제거
- 가독성을 위한 뛰어쓰기 수정
- 복수 메소드 명 단수로 변경
@shyjnnn
fix: footerComponent { 버그 해결
bcabc1d
@Aningaaq
Merge pull request #60 from shyjnnn/eva-week5
c103fbc 
[에바] - week5
@shyjnnn
docs: delete readme.md
9623225
@vercel
Copy link

vercel bot commented Jun 26, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
mentor-assignment-js ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 26, 2024 0:41am

@shyjnnn shyjnnn changed the title Eva week4 HTML, CSS, JS Jun 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@shyjnnn @Aningaaq