조은상_영화 검색 사이트 과제 #62
조은상_영화 검색 사이트 과제 #62
Conversation
|
은상님 2번째 프로젝트 하시느라 정말 고생 많으셨습니다. |
| const inputEl = this.el.querySelector('input') | ||
| inputEl.addEventListener('input', () => { | ||
| movieStore.state.searchText = inputEl.value | ||
| }) | ||
| inputEl.addEventListener('keydown', event => { | ||
| if (event.key === 'Enter' && movieStore.state.searchText.trim()) { | ||
| searchMovies(1) | ||
| } | ||
| }) | ||
| const btnEl = this.el.querySelector('.btn') | ||
| btnEl.addEventListener('click', ()=> { | ||
| if (movieStore.state.searchText.trim()) { | ||
| searchMovies (1) | ||
| } |
There was a problem hiding this comment.
작성해주신 서치 핸들러 코드 순수 js를 이용하셔서 디테일하게 연산자를 사용해서 조건문 작성하신것 인상 깊었습니다.
추가적으로 말씀 드리고 싶은 것은 좀더 코드를 간결하게 하는 방법도 있습니다! 물론 이는 지금처럼 JS에서 좀더 유용할거 같네요
만클릭 이벤트와 버튼 이벤트를 따로 작성하지 않고 form의 'submit' 을 이용해서 엔터와 클릭을 따로 코드 구현으로 설정하지 않고도
핸들러 함수 하나로 구현하는 방법도 있습니다! es6 문법이라고 볼 수 있겠네요 나중에 그렇게 구현해보시는 것도 좋은 경험이 될거 같네요!
There was a problem hiding this comment.
오 아직 submit는 사용해본 적이 없는데 찾아봐야겠네요! 코드를 간결하게 작성하는 부분을 좀더 고민해보겠습니다!
| .about .name { | ||
| font-size: 40px; | ||
| margin-bottom: 20px; | ||
| } | ||
| .about p { | ||
| line-height: 1.5; | ||
| text-align:center; | ||
| margin-bottom: 4px; | ||
| } | ||
| .about a { | ||
| color: var(--color-white); | ||
| text-decoration: none; | ||
| } | ||
| .about a:hover { | ||
| text-decoration: underline; | ||
| } | ||
|
|
There was a problem hiding this comment.
제가 봤던 이번 프로젝트중에 디자인적으로 가장 뛰어난 프로젝트는 은상님이신거 같은데요
한가지 추가적으로 알려드리고 싶은건 scss의 장점을 극대화하는 방법입니다.
scss의 기능은 여러가지가 있지만 일단 당장 쉽게 할 수 있는 것은 css와 달리 중첩 셀렉터를 쓸 수 있다는 것입니다.
이게 좋은 점이 class를 덜 선언해도 되고 코드가 주는데요
예를들면
.about {
p {
}
a {
&:hover
}
}
이런 식으로 좁혀 나갈 수 있어서 정말 도움이 많이 됩니다.
코드가 1000줄일때는 빛을 발합니다 나중에 한번 사용해보시는거 추천드려요!
| {path: '#/', component: Home}, | ||
| {path: '#/movie', component: Movie}, | ||
| {path: '#/about', component: About}, | ||
| {path: '.*', component: NotFound} |
There was a problem hiding this comment.
404 페이지 구현하시는 것 UI/UX 측면에서 아주 필수적인데 좋습니다!
| <ul> | ||
| ${this.state.menus.map(menu => { | ||
| const href = menu.href.split('?')[0] | ||
| const hash = location.hash.split('?')[0] | ||
| const isActive = href === hash | ||
| return /*html*/` | ||
| <li> | ||
| <a | ||
| class ="${isActive? 'active': ''}" | ||
| href="${menu.href}"> | ||
| ${menu.name}</a> | ||
| </li> | ||
| ` | ||
| }).join('')} | ||
| </ul> | ||
| </nav> |
There was a problem hiding this comment.
location 내장 메서드를 사용하여 메뉴바에 있는 UI를 동적으로 구현하신 거 같은데
굉장히 인상이 깊네요 바닐라 자바스크립트에서는 이렇게 했었구나라고 다시 저도 근본을 돌아보게 되네요
이러한 코드들은 인라인 스타일로 주어도 괜찮은거 같습니다
There was a problem hiding this comment.
location 매서드 이용해서 메뉴 버튼 활성화 하는 부분은 아직 스스로 구현하기 어렵지만, 앞으로 많이 공부해야겠네요!
인라인 스타일 방식을 사용할 생각은 못 했는데 참고하겠습니다!
There was a problem hiding this comment.
네넵 리액트에서는 종종 인라인 스타일을 쓰는게 동적으로 구현하는데 편할때도 있어서요
지금 class에 저렇게 변수 넣어서 쓰신 것은 충분히 리액트스럽네요!
| const theHedaer = new TheHeader().el | ||
| const theFooter = new TheFooter().el | ||
| const routerView = document.createElement('router-view') | ||
|
|
||
| this.el.append( | ||
| theHedaer, | ||
| routerView, | ||
| theFooter | ||
| ) | ||
| } | ||
| } |
There was a problem hiding this comment.
page가 렌더링되고 바뀌는 부분 상하로 header, footer 컴포넌트를 구현하셔서 코드를 간결하게 한 부분 멋집니다!
리액트에서는 어떻게 구현할 수 있을지 나중에 고민해보시면 좋을거 같네요!
There was a problem hiding this comment.
네! 리액트로 구현하는 방법도 고민해보겠습니다!
감사합니다!
|
|
네네 고생 많으셨습니다! |
🎬 영화 검색 사이트 만들기
실제 배포 사이트
기술 스택
과제 수행
❗ 필수
❔ 선택