Skip to content
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

[step1] 리팩토링 하기 전 #6

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

limkhl
Copy link
Member

@limkhl limkhl commented Jun 26, 2021

솔루션 영상 보기 전 결과물입니다.
영상 보고 나서 리팩토링해서 다시 PR 올려볼게요!

📚 프로젝트 진행하면서 배운 점

  • fetch API로 JSON 데이터 받아오기
  • addEventListener API 사용법
  • innerHTML API를 이용해 HTML 조작하는 방법
  • HTML 태그 내 'data-키워드' attribute를 이용해서 데이터 필터링하는 방법
  • flex를 이용한 반응형 레이아웃
  • css 내 변수 사용

🕳 프로젝트 진행하면서 만났던 함정

  • a 태그 안에 img 태그가 있을 때, event.target은 img element가 된다
  • for 문을 이용해 btns[i].addEventListener()를 실행시키면 btns[0]에서만 정상 작동하고 나머지 버튼에서는 반응하지 않는다 -> for of 문으로 고쳐서 해결했지만 아직도 이유는 모르겠다

@limkhl limkhl changed the title [step1] 맨땅에 헤딩 [step1] 리팩토링 하기 전 Jun 26, 2021
@limkhl
Copy link
Member Author

limkhl commented Jun 27, 2021

영상 보고 나서 간단한 부분 리팩토링했습니다.

"image": "../img/pink_s.png"
},
]
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

지금 마지막에 ⛔ 이러한 이모티콘이 있는 이유는 개행을 하지 않아서인데요,
파일 끝에는 항상 개행을 해야 한다고 하네요!
그렇지 않으면 이 파일이 아직 끝나지 않았다고 인식을 하기 때문인데요,
이거를 EOL(End of Line)이라고 표현하더라고요.
자세한 내용은 참고 링크를 보시고 이해하시면 될 거 같습니다!

참고 링크: https://velog.io/@doondoony/posix-eol
p.s 'prettier' 확장 프로그램을 사용하시면 자동으로 EOL을 해주기 때문에, 'prettier' 사용을 추천드려요~!

src/main.js Outdated

const filterData = (event) => {
let dataValue = "";
const filterData = (event, items) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

함수 표현식이랑 함수 선언문의 차이에 관련된 링크예요!

src/main.js Outdated
Comment on lines 16 to 18
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", filterData);
return items;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

버블링 캡쳐링 관련된 링크예요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants