github_start_9 박정후 과제 제출합니다 - #3
Conversation
| App.prototype.render = function(data) { | ||
| this.list.render(data); | ||
| }; | ||
|
|
There was a problem hiding this comment.
바닐라스크립트로 작성하시다니... 멋지십니당...👍
There was a problem hiding this comment.
감사합니다 ! 힘든 도전이였습니다 ㅋㅋㅋ 아쉬운 부분도 많았어요 ㅜㅜ
| const $paragraph = document.createElement("p"); | ||
| $paragraph.innerText = this.content; |
There was a problem hiding this comment.
엇... 그렇네요! 전역에서 render로 옮겨가는 과정에서 남아있었나봐요 ㅜㅜ
| } | ||
| }); | ||
|
|
There was a problem hiding this comment.
앜 ㅜㅜ 이때 prettier가 먹통이여서 그냥 진행했는데 prettier 없이 못살겠어요 ㅜㅜ
| (function() { | ||
| new App($("#app")); | ||
| })(); |
There was a problem hiding this comment.
App 인스턴스 생성 로직을 익명함수로 감싸서 실행되도록 작성해주셨는데
전역에서 실행하면 발생될 수 있는 side effect를 방지하려고 하신건가요??
어떤 이유에서 익명함수로 한번 감싸주셨는지 궁금해요!
There was a problem hiding this comment.
넵! 전역에서의 실행을 피해서 side effect를 방지하고 최초 실행되는 구문이라는걸 명시적으로 표현하기 좋을 것 같아서 사용했습니다 :)
| $listLow.classList.add("list-rows"); | ||
| $title.classList.add("list-title"); | ||
| $statCnt.classList.add("list-star"); | ||
| $title.innerText = data.name; |
There was a problem hiding this comment.
존재하지 않는 user name이라면 존재하지 않는 유저입니다 라는 안내 메시지를 띄워줘도 좋을 것 같아요!
There was a problem hiding this comment.
에러핸들링을 고려못했네요! 좋은 포인트!! 감사합니다 👍
| @@ -0,0 +1,19 @@ | |||
| export const $ = selector => document.querySelector(selector); | |||
There was a problem hiding this comment.
이곳을 참고해서
addEventListener나 addClassList도 dom util에 추가해서 정후님만의 돔 유틸 라이브러리를 만들면 좋을 것 같아요 ㅎㅎ
There was a problem hiding this comment.
오 정말 좋은아이디어네요! 👍 희라님 짱짱이십니다
| "scripts": { | ||
| "start": "npx http-server" | ||
| }, | ||
| "dependencies": {}, |
There was a problem hiding this comment.
혹시 node_modules 을 따로 올리신 이유가 있을까요?!
There was a problem hiding this comment.
아 제가 index.html에서 index.js를 모듈로 사용하고 있기때문에 javascript module 보안 요구사항 특성때문에 local에서 실행 시 CORS 오류가 발생됩니다 ㅎㅎ 그래서 이를 방지하고자 http-server에 올렸습니다!
자세한 설명은 아래 블로그에 잘 정리되어있습니다https://velog.io/@takeknowledge/%EB%A1%9C%EC%BB%AC%EC%97%90%EC%84%9C-CORS-policy-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3gk4gyhreu
| data.map(data => { | ||
| const $listLow = document.createElement("div"); | ||
| const $title = document.createElement("span"); | ||
| const $statCnt = document.createElement("span"); | ||
| $listLow.classList.add("list-rows"); | ||
| $title.classList.add("list-title"); | ||
| $statCnt.classList.add("list-star"); | ||
| $title.innerText = data.name; | ||
| $statCnt.innerText = data.stargazers_count; | ||
|
|
||
| $listLow.addEventListener("click", () => (location.href = data.html_url)); | ||
| $listLow.appendChild($title); | ||
| $listLow.appendChild($statCnt); | ||
| this.$listComponent.appendChild($listLow); | ||
| }); |
There was a problem hiding this comment.
각 리스트 아이템들은 템플릿 리터럴을 사용하면 어떨까요?! 더 명시적일 것 같아요 ㅎㅎ
There was a problem hiding this comment.
좋은방법입니다! 코드량도 줄이고 명시적으로 표현 가능할 것 같습니다:)
| List.prototype.makeComponent = function() { | ||
| this.$header = new ListHeader(); | ||
| this.$body = new ListBody(); | ||
| this.$searchResultComponent.appendChild(this.$header.$headerComponent); | ||
| this.$searchResultComponent.appendChild(this.$body.$listComponent); | ||
| }; |
There was a problem hiding this comment.
코드에 보면 변수앞에
There was a problem hiding this comment.
dom을 갖고있는 변수들앞에 $를 붙여서 구분을 해봤습니다 ㅎㅎ
|
npx가 먹통인지 빌드는 못해봤지만 바닐라 스크립트에 대해서 구글링도 해보고 이해도 해보는 시간이 되어서 좋았습니다!! 고생하셨어요 ㅎㅎ |
이번기회에 바닐라스크립트로 해보면서 많은 반성의 시간을 갖게되었습니다 :) |
10 participants
바닐라스크립트로 개발하였습니다.
npm install로 http-server 설치하시고
npm run start를 통해 실행하시면 됩니다!
오랜만에 바닐라스크립트를 사용하다보니 생각보다 시간이 오래걸렸네요 :(