[JS] 프로그래밍 언어 검색(프로그래머스)

데브매칭 과제 테스트 중 하나를 실험적으로 따라해봤다.

api가 따로 없어서, 그냥 express로 서버 간단하게 만들어서 켜놓고 있었다...ㅋㅋㅋ

바닐라로 spa로 만드는걸 처음해보는데 정말..정말.....익숙하지못해서 그런가?

https://codesandbox.io/s/recursing-kowalevski-ughmzd

 

recursing-kowalevski-ughmzd - CodeSandbox

이걸하면서 알게 된 점!

dataset을 통해 인덱스 값을 가져올수 있다는 점!

하지만 보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것입니다.라고 적혀있다. 

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

데이터 속성 사용하기 - Web 개발 학습하기 | MDN

 

 

 

그리고 이것!

https://developer.mozilla.org/ko/docs/Web/API/Element/closest

Element.closest() - Web API | MDN

이전에 리스트의 최근접 조상의 id값을 가져오고 싶었는데, 불가능해서 울 뻔했던 기억이 생각이난다. 이걸 사용하면 더 쉽게 접근할 수 있겠구나 싶었다. 어제는 그냥 따라쳤으니, 오늘은 처음부터 내가 구상해서 다시 구현해보는걸 목표로 할 것이다~! 아래다가 다시 올릴 것!

---

https://codesandbox.io/s/happy-black-zsk9se

happy-black-zsk9se - CodeSandbox

백지공부법으로 하면 빨리 익힌다는 얘기가있다..!! 위에꺼 다시해보는중..! 

advanced 말고 다 했구.. 그리고 선택된 언어 목록리스트에서 삭제하는 것까지 구현했다

디바운싱이랑 캐시랑 새로고침 시 유지해보는게 목표..!

디바운싱은 메인 프로젝트때 다른 분이 구현을 하셨었는데, 그 때 자료찾아보고 이런게 디바운싱이구나 하고 말았었다. 

메인 프로젝트 리팩토링할 때 폼에서 확인 버튼을 눌렀을 때, api연결을 하게 되는데, 디바운싱을 사용한다면  좋을 것 같다..! 우선 여기서해봐야자~

https://onlydev.tistory.com/151 

https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa

참고한 블로그!

 

 

+이걸  프로젝트 들어가기전에 먼저 공부했다면
프로젝트할때 리액트에 대해서 더 이해도가 높지않았을까싶다