Result
Goal
Header
- 현재 페이지가 어떤 페이지 인지를 h1 태그로 보여주지 말고, header의 요소를 이용하여 보여주는 것이 필요
검색 기능 고도화
- 검색 전에 여러 단어를 보여주고, 검색시 해당하는 단어만 보여주기
- 딱 하나의 단어만 보여주는 것이 아닌 여러개의 단어를 보여주기
(Ex. 방 을 검색시 방향,방면,방문하다,방송 등 여러 단어를 보여주기)
1. Header 기능 고도화
기존 Header
Header 컴포넌트에 h1 태그를 넣어서 어떤 페이지인지를 알려주고 있었음.
(그런데 뭔가 안예뻐보이고, header에 있는 nav bar가 사실상 페이지 이동말고는
하는게 없어서 할 일을 만들어주고자 함)
코드
import { CoreCompoent } from "../core/coreComponent";
export default class TheHeader extends CoreCompoent{
constructor(){
super({
tagName : 'header',
// state data 에 menus 배열을 전달
// menus 배열에는 라우팅될 페이지와 주소(href)을 저장
state: {
menus: [
{
name: 'Home',
href: '#/'
},
{
name: 'Noun',
href: '#/noun'
},
{
name: 'Verb',
href: '#/verb'
},
{
name: 'About',
href: '#/about'
},
{
name: '🔎',
href: '#/search'
},
]
}
})
// 페이지 변화가 있을때마다 렌더링
window.addEventListener('popstate',()=> {
this.render()
})
}
render(){
this.el.innerHTML = /* HTML */`
<h1>Al-Klimat</h1>
<ul>
<!-- State의 menu 배열을 map 메서드를 이용하여 콜백함수를 호출 -->
<!-- 콜백함수는 배열내 href 속성과 location 객체의 hash 값을 비교 -->
${this.state.menus.map(menu =>{
const href = menu.href.split('#/')[1]
const hash = location.hash.split('#/')[1]
// 만약 hash값과 같은 href 속성을 가진 페이지에 사용자가 있음 -> isActive 붙여주기
const isActive = href === hash
console.log(href,hash)
return /* html */`
<li>
<a
class = "${isActive ? 'active' : ''}"
href = "${menu.href}">
${menu.name}
</a>
</li>
`
}).join('')}
</ul>
`
}
}코드 요약
-
constructor 의 super 함수에 인수로 state를 전달할때, menus라는 배열을 담아서 전달
-
menus안에는 라우팅 될 페이지의 주소와 이름이 있음
-
popstate 이벤트 리스너를 달아주어 페이지 변화를 감지
-
페이지 변화 감지시, menus 배열의 href 속성과, location.hash 를 비교하여 동일한 href 찾기
-
동일한 href를 가진 HTML 요소에 클래스 이름(.active)을 달아줌
구현결과
보시다시피 사용자가 verb 페이지에 있음을 직관적으로 알 수 있다.
2. 뉴모피즘 디자인 적용
2020년 이후로 유행하고있는 디자인 패턴이 바로 뉴모피즘이라고 하길래
한번 적용해보았다.
참고링크를 통해 돌출형인지, 함몰형인지 등등을 아주 편하게 적용할 수 있고,
이를 CSS 코드로 옮겨주기까지 해서 매우 편하게 디자인 적용을 진행할 수 있었다.
2-2. 귀여운 favicon 추가
웃는 표정과 비슷한 ت 철자를 favicon으로 만들었다
참고 링크: Favicon.io
(본 페이지에서 사진, 텍스트, 이모지를 favicon 으로 만들 수 있다!)
남은 목표
검색 기능 고도화
- 검색 전에 여러 단어를 보여주고, 검색시 해당하는 단어만 보여주기
- 딱 하나의 단어만 보여주는 것이 아닌 여러개의 단어를 보여주기
(Ex. 방 을 검색시 방향,방면,방문하다,방송 등 여러 단어를 보여주기)
➡ 검색기능의 흐름이 filter(indexOf) -> map 이기때문에 하나밖에 못보여주는 구조이다.
- map -> filter -> map 방식
- 혹은 filter(indexOf) -> map의 일련의 과정을 for 문안에 넣어
반복 실행하는 방식 - 특정 이벤트 발생시 filter를 사용하는 방식
중 더 효율적인 것을 찾아서 구현해야 함.
단어 출력 관련
- 단어옆에 체크박스를 만들고 이를 클릭하면 뒤집히면서 한글뜻만 보이도록 하여 암기하는데 도움이 되는 기능 도입
➡ 사실 data 상에 memory:false 라는 key:value 가 있으면 조금더 쉽게 접근이 가능한데, 없기때문에 JS 상에서 변화를 감지해서 class를 toggle 해서
클래스가 있을때는 암기한 상태, 없을때는 모르는 상태로 만들 예정
- 단어 자체를 클릭하면 toggle 을 이용하여 예문과 예문의 뜻을 보여주는 기능 도입
➡ 1번과 비슷한 원리로, toggle을 이용하여 예문을 보여주었다가 숨겨줄 예정
