[FISH-NEWS] 프로젝트 기록

주저리

요즘 해가 잘 안든다...

드림코딩 엘리 새로운 강의를 오늘부터 수강해서 프로젝트는 남는 시간에 잠깐씩 만지려고 했는데

생각보다 오늘 강의 할당량을 빨리 끝내서 살짝 만졌다

해봤자 한시간정도지만

 

 

오늘 목표

큰 목표는 없이 부족하거나 이상한 부분을 정리하는 것을 목표로 두었다

 

 

문제 상황

1. main_left : gentleman's fashion부분 꿀렁거림

 

 

영상을 보면 알 수 있듯이 :hover과 active 클래스가 들어가는 곳에 마우스를 가져다대면 꿀렁거린다

 

• 문제 해결 과정

#mainNews__left .mainNews__item .active,
#mainNews__left .mainNews__item h3:hover{
border:3px solid white;
background-color: #a3895f;
border-radius: 5px;
transition:background-color 300ms linear;
}

아이템이 active되거나 :hover될 때 변하는 것은 border가 생기고 , backgroundcolor가 생기며, border-radious가 지정된다는 점이다.

이 border가 생겨나면서 몇 픽셀을 차지하게 되고 이 때문에 꿀렁거리는 현상이 생긴다고 판단하여

 

눈에 보이지 않은 border값을 위 코드와 같은 크기로 만든 다음에 active, hover 될 때만 눈에 보이게 만들면 될 것이라고 생각했다.

처음에는 display:none을 적었지만

1초만에 이건 아니라는 것을 깨닫고

 

#mainNews__left .mainNews__item h3{
margin-bottom:4px;
font-weight: bold;
text-align: center;
border:3px solid transparent;
background-color: transparent;
border-radius: 5px;
}

h3, 즉 border값과 background-color이 생기는 곳에

border,

background-color,

radius

값을 transparent로 주었다.

 

hover, active가 되면서 늘어날 픽셀 값을 진작 주어 더이상 꿀렁거리지 않게 작동될 것이라 예상했다

 

결과

잘 작동된다 :)

 

 

2. 원하는 곳이 아니라 다른 곳이 눌려도 이 부분이 event.target 안에 포함되어 있어서 undefined 값이 나오는 문제

 

 

원인은 단순하다.

mainItems.addEventListener('click',(e)=>{
const target = e.target.dataset.value
const image = document.createElement('img')
image.src = `images/${target}.png`
image.classList= 'mainNews__left_img'
deleteImg()
mainImage.prepend(image)
activeBtn(e)
})

mainItems 안에 원하는 버튼과 span이 함께 들어있어 span을 클릭할 때도 target의 value를 image.src에 집어넣고

activeBtn이라는 function을 통해 border와 background-color을 만들어내기 때문이다.

 

 

• 문제 해결 과정

따라서 target의 값을 원하는 곳으로 한정하고

만약 원하지 않는 값이 mainItems 안에 포함되어 있더라도 event의 실행을 막으면 된다.

---

event의 동작을 막는 방법은 여러 가지가 있다

1. preventDefault()

default 동작을 막는다

2. stopPropagation()

bubbling or capturing을 막는다

3. stopImmediatePropagation()

현재 event 제외 다른 event들도 막는다

 

이 중 나는 click의  default 동작만 막으면 됐기 때문에

mainItems.addEventListener('click',(e)=>{
const target = e.target.dataset.value !== undefined ? e.target.dataset.value : e.target.preventDefault()
const image = document.createElement('img')
image.src = `images/${target}.png`
image.classList= 'mainNews__left_img'
deleteImg()
mainImage.prepend(image)
 
activeBtn(e)
})

target 부분을 이렇게 바꾸어주었다.

e.target.dataset.value 값이 undefined가 아닌게 true이면 e.target.dataset.value 값을 target으로 하고.

e.target.dataset.value 값이 undefined가 아닌게 false이면 e.target.preventDefault()를 통해 click의 동작을 차단한다

 

 

 

결과

 

 

3.

breaking 부분 <span>안 <h2>부분

(안봐도 h2부분은 맨 첫 자 하나이고

span은 나머지 부분이다.)

 

이 중복되어 나오는 현상이 발생하고 있었다.

 

 

function changeBreaking (or){
image.classList ="breaking__img"
breaking.prepend(image)
image.src = `images/breaking/breaking${imgArray[or]}`
 
breakingInfo.prepend(span)
span.innerText = txtArray[or]
span.prepend(h2)
h2.innerText = span.innerText.substr(0,1)
}

span의 innerText를 txtArray의 순서(=or)로 삼고

이 span 안에 h2를 집어넣은 다음

h2의 안에 span의 innerText에서 처음 한 글자를 집어넣는다

여기서 span의 innerText에서 처음 한 글자를 빼주어야 중복이 사라질 것이다.

 

function changeBreaking (or){
image.classList ="breaking__img"
breaking.prepend(image)
image.src = `images/breaking/breaking${imgArray[or]}`
 
breakingInfo.prepend(span)
span.innerText = txtArray[or].slice(1)
span.prepend(h2)
h2.innerText = txtArray[or].substr(0,1)
}

따라서 span의 innerText에 txtArray의 배열이 되는 문장에서 맨 맨 처음 하나를 뺀 나머지(맨 마지막까지)를 가져와 집어넣어줬다.

그 다음에 h2 안에는 기존의 span.innerText에서 substr을 하는 것이 아닌

txtArray 배열에서 substr을 했다.

 

이유는 맨 앞 한 글자를 제거한 나머지 문장으로 이루어져 있는 span의 첫 글자는 한 글자가 제거된 다음의 글자이기 때문이다.

배열 안에 있는 문장은 아무것도 제거되지 않았으니 여기서 맨 처음 한 글자를 가져오는 것이 맞다