기말고사 해설 / Choiyk-dev

Choiyk-dev

Workspace

Published

Edited

Jul 2, 2020

md`

# 기말고사 해설

한 학기, 정말 끝났구나 싶네요. 아니, 한 학기 뿐만 아니라 반 년까지도요<br>

괜찮아! 고생했습니다. 최선을 다했으니까 만족해요 :)

doc01 = html`

<div>

<div class="a1"

</div>

</div>

</div>

{

doc01.querySelectorAll("*").forEach( e => e.removeAttribute("style") )

doc01.querySelectorAll(" .c1 .c1 .b1 ").forEach( e => e.style.background="cyan")

} // 태그를 잡을 필요 없이 클래스로만 지정할 수 있었네요! 뭔가 더 어렵게 생각한 기분..

doc02 = html`

<div>

</div>

</div>

</div>

{

doc02.querySelectorAll("*").forEach(e => e.removeAttribute("style"))

doc02.querySelectorAll(" .c2 > .b2 ").forEach( e => e.style.background = "cyan")

}

// 제가 풀었던 답 보니까 처음에 div 태그가 있어서 이거를 반드시 포함시켰었네요..! :/

TRUE = a => b => c => a

FALSE = a => b => c => c

IF_THEN_ELSE = x => a => b => c => x(a)(b)(c)

/* 이 문제 모범답안이 TRUE, FALSE의 값으로 이루어져야 한다는 것에 1차 당황.. 헙 */

NOT = x => x(FALSE)(TRUE)(TRUE)

btn03 = html`<button style="*:inherit">누르면 2초 후에 노란색으로 변하는 버튼</button>`

btn03.onclick = btn03Handler // (=btn03을 누르면 btn03Handler 함수가 실행됩니다)

//근데 함수가 없으니까 만들어주어야져

btn03Handler = e => {

setTimeout( () => e.target.style.background = "yellow", 2000)

} // 어 왜 실행이 안 되는거지..? -> onclick의 C를 대문자로 써서 그런거였다 !!

doc04 = html`

</select>

</div>

`// em은 처음보는 단위인건가? cm로 입력했다가 출력된 모습에 잠시 2차 당황..

// 왜 난 처음 시작이 3초마다로 설정되어있는 것이야요???

{ // 영상 따라 작성하면서 사고 과정에 따라 코드가 비순차적으로 작성되는 것을 보았다는 것.

const span = doc04.querySelector("span")

let interval = setInterval( () => span.hidden = !span.hidden, 1000)

/* 기본 동작을 설정했습니다 */

doc04.querySelector("select").onchange = e => {

// 시험볼 때 1초마다가 선택될 때와 3초마다가 선택될 때를 어떻게 지정하나 고민했는데 말입니다T.T

console.log( e.target.value) // e.target.value가 select의 값으로 잘 들어가있는지 확인했던 코드(실행과는 관계없지롱)

clearInterval(interval) // Interval 초기화

interval = setInterval( () => span.hidden = !span.hidden, 1000 * e.target.value ) // 3000으로 지정하는 것이 아닌 e.target.value를 활용하여 코드 관리를 효율적으로 진행할 수 있겠구나 싶었습니댜

}

} // 정말 새로고침 하지 않고 실행하면 뭔가 이벤트가 중복되어 실행되더랍니다!

/* 생각보다 답이 간단할 것이라고 예상했는데, 생각보다 복잡하네요 :O */

cprod = (xs, ys) => // xs.map( x => ys.map( y => [x,y] ) ).flat() //플랫!

/* map이나 forEach를 생각했었으나, 역시.. 시험 당시 코드 작성은 어려웠을 것 같네요. 이중 map 활용이라니! */

xs.map( x => ys.map( y => [x,y]) ).reduce( (li,l2) => li.concat(l2), [] )

/* 맨 위에 주석 단 코드가 교수님의 모범답안이고, 바로 위 코드가 배운 내용으로 작성한 코드라고 합니댜.

둘 모두 제가 스스로 생각해서 구현하기엔 어려웠을 것 같은걸요! */

cprod([1,2],[4,5,6]) // 어.. 사실 있잖아요. 배열에 어떻게 들어간건지 잘 모르겠어요..흐규 -> 이해했음!!

/* 요 문제는 도전하려다가 무리라는 것을 느끼고 놓아주었어요. 바이바이 2점! */

sameNumberSet= (xs, ys) => xs.every(x => ys.includes(x) ) && ys.every (y => xs.includes(y) ) // every, 배열 시험공부 하면서 열심히 봤습죠 : D

/* includes(y)를 fileter(x => x==y).length > 0 로 바꿔도 결과값은 동일하다고 하네요!

확실히 다양한 기능의 메소드(?)를 알면 코드 작성에 용이한 것 같아요 */

sameNumberSet([1,2,3],[1,2,3]) // 배열의 값이 같은지 확인하는 함수자나요, 이 함수가 말이에요

sameNumberSet([1,5,6,2], [6,2,5,1]) // 순서 상관없이 값을 포함하는지만 검사해주네요

sameNumberSet([6,2,7], [8,3,1]) // 잘 동작하네요!

/* 이럴 때 다른 조건까지 고려한 함수를 작성할 능력이 된다면 좋았을텐데 싶네요

예상치 못한 함수를 작성하여 점수를 받는 것 만큼 보람찬 일도 없을텐데 말이에요..! */

md `

---

## 4번째 문제는 복잡해서 <br>지금 작성할 시간이 <br>부족해 보이네요..!

---

문제만 작성해두고 해설은 나중에 차차 입력해야get슴니댜

doc05 = menuArr2ul( [ { name : "탕수육", price : 8000 },

{ name : "계란찜", price : 2000 },

{ name : "케이크", price : 16000 },

{ name : "타르트", price : 4000 },

{ name : "모듬회", price : 10000 } ] )

// 새로운 메뉴판을 가져와봤어요. 케이크가 있는건 오늘이 내 생일이니까 :d

menu2li = o => `<li><span>${o.name}</span> : <span>${o.price}</span>원</li>`

// 아무리봐도 $ 기호 들어간 형식은 조금 어려워보여,,

btn06 = html`<button>메뉴 이름 가나다순 정렬</button>`

btn06.onclick = handlerBtn06

btn07 = html`<button>메뉴 가격 오름차순 정렬</button>` // 오름차순은 작은거->큰거! 헷갈리지 말기 :q

btn07.onclick = handlerBtn07

menuArr2ul = arr => html`<ul>${arr.flatMap(menu2li)}</ul>`

// flatmap은 배열로 바꾸어주는 함수입니담. 여기까지는 이상 없습니다 :]

doc05.children // 아직은 배열이 아님니댜. 출력은 잘 된거에요

ul2menuArr = (ul) => Array.from( doc05.children ).map( li2menu )

// 괄호가 조-금 애매한 것 같아요! 여러개 사용될 때에는 잘 확인해야겠네유,,

Array.from(doc05.children) /* 문제를 찾았네요. 여기에 값이 안 들어가있쟈나 */

// ...? 어째서지. -> 해결!!!! 와..

Array.from(doc05.children).map(e => e.querySelectorAll("span") )

// span도 두 개로 잘 출력됩니다!! 와 해결하니까 모든 체증이 가라앉는 느낌 :D

// 거의 받아쓰기 정도로 작성할 수 밖에 없었다는 것! T.T 고난도입니다.. -> 이해완료 '^')9

li2menu = e => {

const spans = e.querySelectorAll("span")

return { name: spans[0].innerHTML,

price : Number(spans[1].innerHTML) }

} // 확실히 코딩도 능력과 재능입니다요..

ul2menuArr(doc05) // 얘는 또 왜 undefined니 열심히 defined 했는데 -> 잘 출력되게 고쳤습니다 ><

handlerBtn06 = e => {

doc05.innerHTML = menuArr2ul( ul2menuArr(doc05).sort( (a,b) => (a.name < b.name)? -1: (a.name < b.name)? 1:0 ) ).innerHTML

}// 지금 위에서 뭔가 잘못된 것 같아 실행이 안 되는 듯 합디다. 아래 함수도 마찬가지고..

// 위에 코드를 고쳐서 실행은 되지만, 이상하게 작동합니다. 뭐가 문제지..? 정렬이 안 돼

// 마지막 innerHTML의 L을 소문자로 입력했다는것..! 허허 -> 드뎌 정렬이 잘 실행됩니다!!!!!

handlerBtn07 = e => {

doc05.innerHTML = menuArr2ul( ul2menuArr(doc05).sort( (a,b) => a.price - b.price) ).innerHTML

} // 아니 어떻게 보고 따라 작성하는 것도 틀리냐구.. T.T 혼란 -> 모두 해결했습니다!!♡

md `

---

# 따라 작성해보는 것도 시간이 부족한걸요.. <br>

# 분발해야겠습니다!<br>

그래도 다 실행되게 고쳐서 만족스러워요 :) <br>다음 학기는 솔직히 어떻게 될 지 모르겠지만, <br><br><b>휴학하지 않는다면</b>

소켓 프로그래밍(뭘까요 이건. 처음 들어요)과 하스켈 알아두면 좋을 것 같네요<br><br>

---

md `---

종강했지만 아직도 지난 전공 공부를 보충하고 있는 것도<br>

조금 미련해보이고... 한편으로는 바보같지만<br><br>

<mark>'<' 앱 개발 공부하러 총총..</mark> <hr> -> 이제 수면보충이 필요한 것 같아요, 편안한 밤 되세요

<hr>

/* 학교에서 배우고 싶다.. 2학기도 가망없어 보여서 절망적이네요.

나쁜 질병 조심하기! 나중에 꼭 건강한 모습으로 재회하기!! */

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more