[FISH-NEWS] 프로젝트 기록

 

주저리

오늘 나쁘지 않았다

생각보다 js부분을 빠르게 했다

css가 문제였지 js는...

최소한 가동은 되는구나... 

코드가 얼마나 깨끗하고 효율적인지의 문제는 덮어두고 일단 가동이 된다!

 

나는 아직 주니어조차 아니고 그냥 걸음마중인 아기나 다름없기 때문에 작은 성과에도 큰 칭찬을 해줘야 한다.

어쨌든 칭찬!

 

 

오늘 목표

오늘의 목표는 game section을 뺀 나머지 부분 css를 동적으로 만들고 

js 중 breaking 부분만 하는 것이 목표였다

 

 

진행 상황

css는 분명 완벽하지는 않지만 어느 정도 동적으로 잘 구현되었다.

스마트폰에서 화면이 깨지는 것은 js까지 마무리 한 다음에 다시 손보기로 했다.

 

하지만 생각보다 breaking 부분을 빠르게 마무리하고

main left 부분까지 완료했다.

 

 

문제 상황

 

1. 

breaking부분을 만들 때 두 가지 방법을 생각해 보았다

- breaking에 들어가는 부분을 

function createHTMLString(m) {
return `
<li class="item">
<img src="${m.image}" alt="${m.type}" class="item__thumbnail">
<span class="item__description">${m.gender}, ${m.size}</span>
</li>
`;
}

이런식으로 HTML 부분을 그대로 작성해서 img와 span을 가져올 것인가

 

- 그냥 js 파일 내부에 배열을 만들어서 배열을 가져오는 방식으로 슬라이드 될 이미지와 span을 가져올 것인가

 

 

• 문제 해결 과정

처음에는 첫 번째 방식으로 진행하려고 했다

엘리 쇼핑몰 클론코딩에서 배웠던 방법이고 그냥 json 파일을 만들어서 이용하면 될 것이라고 생각했다.

하지만 json 파일을 따로 만들어야 할 만큼 자료가 다양하지도 않고 딱 4가지 로 많지도 않았다.

따라서 json 파일을 만들어서 js에 연결하는 것보다 (사실 효율적으로 연결하는 방법에 대한 고민도 있었다) js 파일 내부에 img배열 하나, span용 배열 하나 두 개의 배열을 만드는 것이 나을 것이라고 생각했다.

 

 

2.

어쨌든 배열을 두 개 만들어서 여기서 오른쪽을 가리키는 손가락을 누르면 배열이 +1씩 진행되고

왼쪽을 가리키는 손가락을 누르면 배열이 -1씩 진행되면서 화면을 변경하기로 했다

js로 슬라이드를 만들 때 이 방법이 효율적인지는 모르겠지만

 

일단 배운 것들을 활용해서 만든다는 것에 의의를 두고 만들기 시작했다.

 

당시 내가 계획했던 방법

배열을 만들고 그 안에 img src를 집어넣는다

이와 함께하는 span src 배열을 만든다

=> 배열을 순회하며 breaking에 img-> span 차례로 내용을 보여준다.

 

처음에는 forEach를 이용해 배열을 순회하려고 했지만

txtArray.forEach(e => {
console.log(e)
});

이게 아니라는 것을 빠르게 알았다

 

• 문제 해결 과정

일단 내가 원하는 배열이 제대로 화면에 찍힐지 테스트해보았다

잘 찍힌다

let i = 0
rightBtn.addEventListener('click',(e)=>{
console.log('move to right')
if(i < 4){
console.log(i)
i ++
}else{
i = 0
}

오른쪽을 가리키는 손가락의 이벤트를 클릭하면

i(배열에서 배열 순서를 나타내는 용도로 이용)

image와 span이 각각 4개씩밖에 없었기 때문에

i가 4보다 작을 때 클릭할 때 마다 i를 하나씩 키운다.

i가 4보다 크면 i를 0으로 만들려고 했다,

그러면 다시 i가 if(i<4)부터 시작하겠지..?

 

하고 만들었는데 음.. 그냥 i가 4보다 크게 되면 i는 0이 되고 끝났다.

i < 4 에서 다시 if를 순회하지 않았다.

 

어쨌든 이렇게 원하던 img와 span이 떠서 감격

 

계속 오른쪽 손가락을 누르면

이렇게 내가 만들어둔 image와 span이 중첩해서 뜨게 된다.

 

새로운 문제.

어떻게 기존의 image와 span을 삭제할 것인가?

를 고민하다가

 

• 문제 해결 과정

그냥 전에 있던 image와 span을 없애는 function을 만들어내기로 했다

그렇게 해서 만들어진 것이

// delete breakings
function deleteBreaking(){
const image = document.querySelector(".breaking__img")
const span = breaking.querySelector('span')
image.remove()
span.remove()
}

전에 만들어진 image와 span을 .remove()로 삭제 한 다음

// Add more breakings
function changeBreaking (or){
const image = document.createElement("img")
const breakingInfo = document.querySelector(".breaking__info")
const span = document.createElement('span')
const h2 =document.createElement('h2')

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)
}

image와 span을 다시 배열에서 가져다 넣는 것이다

너어무...감격스럽다!!!!!!!!!!!!!!

이렇게 내가 예상하던 결과가 나오면 너무 행복하다!!

밑에 엑박과 undefined는.. 또 다른 문제다

 

• 문제 해결 과정

이렇게  undefined와 엑박(undefined)가 뜨는 현상은

i가

let i = 0
rightBtn.addEventListener('click',(e)=>{
console.log('move to right')
if(i < 4){
deleteBreaking()
changeBreaking(i)
i ++
}else{
i = 0
deleteBreaking()
changeBreaking(i)
}

이 안에서 0,1,2,3까지 커지고 난 다음에 다시 한번 순회할 때 생기게 된다.

따라서 만들어져 있던 if문의 문제를 고쳐야 한다.

 

i가 4보다 작을 때 기존의 image와 span을 없애고 // deleteBreaking()

새로운 image와 span을 배열에서 가져와 삽입한다 // changeBreaking(i)

그리고 i가 4와 같거나 클 때

i를 0으로 규정하고

기존의 image와 span을 없앤 뒤 // deleteBreaking()

새로운 image와 span을 **위 if문에서 첫 번째 배열부터 가져와 삽입한다 //changeBreaking(i)

이 부분이 잘못되었다.

i = 0으로 규정하면 다시 위 if문으로 올라가는 것이 아니라 그냥 i= 0인 상태로 진행되는 것이다.

**(더군다나 i++가 위 if문 안에 들어있다)

else문에 console.log(i)를 찍어보고 문제를 알 수 있었다.

 

따라서 if문을 고쳐야 한다.

 

i를 새로 정의하는 것이 아니라 나누기의 나머지를 이용하기로 했다.

 

0 나누기 4의 나머지는 0

1 나누기 4의 나머지는 1

2 나누기 4의 나머지는 2

3 나누기 4의 나머지는 3

4 나누기 4의 나머지는 0

5 나누기 4의 나머지는 1

.

.

.

따라서 클릭 수와 비례하여 i가 1씩 커질 때

**(아무것도 누르지 않았을 때는 함수를 한번 돌려 배열 0번의 image와 span을 보여준다)

i가 배열의 length보다 큰 3을 벗어날 때 부터 i에 4를 나눈 나머지 값에 해당하는 배열을 불러오면 되는 것이다.

rightBtn.addEventListener('click',()=>{
i++
if(i > 3){
or = i % 4
deleteBreaking()
changeBreaking(or)
} else {
or = i
deleteBreaking()
changeBreaking(or)
}
})

i 가 3보다 클 때 or은 i에 4를 나눈 나머지이고

deleteBreaking() 함수를 이용해 기존의 image와 span을 정리한 다음

changeBreaking(or)을 이용하여 i를 4로 나눈 나머지 값의 배열을 불러온다

 

만약에(i가 3과 같거나 그보다 작다면)

or은 그냥 i와 같고

deleteBreaking() 함수를 이용해 기존의 image와 span을 정리한 다음

changeBreaking(or)을 이용해 i 값과 같은 배열 순서를 불러온다.

 

왼쪽 버튼도 마찬가지로 해주지만 반대로 진행되는 것이기 때문에

배열의 length에서 i or( i%4)값을 빼준다

leftBtn.addEventListener('click', ()=>{
i++
if(i > 3){
or = 3-(i %4)
deleteBreaking()
changeBreaking(or)
} else{
or = 3 - i
deleteBreaking()
changeBreaking(or)
}
})

어쨌든 이렇게 완성!

 

 

 

3.

시간이 남아 gentleman's fation부분도 진행했다.

target과 dataset을 이용해 버튼(h3)을 클릭하면 버튼에 맞는 이미지가 떠오르게 했다.

//Main left 'gentleman's fashion' button click event

const mainImage = document.querySelector('.mainNews__items')
const mainItems = document.querySelector('.mainItems')
mainItems.addEventListener('click',(e)=>{
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)
})

동시에 전에 있던 image는 삭제.

 

function activeBtn(e){
const h3 = mainItems.querySelectorAll('h3')
h3.forEach(item=>{item.classList.remove('active')})
const target = e.target
target.classList.add('active')

마지막으로 클릭한 버튼(h3)에 'active'라는 class를 추가해 버튼이 클릭된 것이 보이도록 하였다

 

 

 

참으로 조악한 흰 선...

ㅇ.ㅇ.....

어쨌든 됐다!!!!

 

이건 정말 20분만에 끝내서 어안이 벙벙했다

나... 좀.. 하는듯,,,?

 

 

 

++

남은 문제

 

쭉쭉 늘어나심..

image를 background-image로 돌리면 원하는 타자기 사진이 안나오고 얼굴만 나오고 ㅜㅜ

css..열심히하자,,!