code review
23년 1월 4주차 코드리뷰 진행함
발표 내용
안전지대 문제
https://school.programmers.co.kr/learn/courses/30/lessons/120866
function solution(land) {
// 지뢰가 어디있는가?
let mineSpot = land.flat().indexOf(1)
// 지뢰가 있는곳을 모두 파악한다.
let mineList = []
let obj ={}
let col = 0
let row = 0
while(mineSpot != -1){
mineList.push(mineSpot)
mineSpot = land.flat().indexOf(1, mineSpot+1);
}
// board가 1 * 1 구조일 경우
if (land[0].length===1) {
return land[0][0] === 1? 0 : 1
}
// 위험지역 선정하기. 지뢰지역의 주변 1칸씩이 모두 위험 지역이 된다.
for (let e of mineList){
col = Math.floor(e / land.length )
row = e % land[0].length
// col이 첫번째인 경우
if (col === 0){
// row 가 2번째에서 4번째 사이에 있는 경우
(1 <=row && row < land.length-2 ) ? [
land[col].splice(row-1,3,1,1,1),
land[col+1].splice(row-1,3,1,1,1),
]
//row가 맨 끝에 있는 경우
: row === land.length-1 ?
[land[col].splice(row-1,2,1,1), land[col+1].splice(row-1,2,1,1)]
// row가 맨 처음에 있는 경우
:
[land[col].splice(row,2,1,1),land[col+1].splice(row,2,1,1)]
}
// col 이 2번째와 끝에서 2번째사이에 있는 경우
else if ( 1<= col && col <= land.length-2){
// row 가 2번째에서 4번째 사이에 있는 경우
(1 <= row && row < land[0].length -2 ) ?
[ land[col-1].splice(row-1,3,1,1,1),
land[col].splice(row-1,3,1,1,1),
land[col+1].splice(row-1,3,1,1,1)]
//row가 맨 끝에 있는 경우
: row === land[0].length-1 ?
[ land[col-1].splice(row-1,2,1,1),
land[col].splice(row-1,2,1,1),
land[col+1].splice(row-1,2,1,1)]
// row가 맨 처음에 있는 경우
: [land[col-1].splice(row,2,1,1),
land[col].splice(row,2,1,1),
land[col+1].splice(row,2,1,1)]
}
// col이 맨 끝일 경우
else{
(1 <= row && row < land[0].length - 2) ? [ land[col-1].splice(row-1,3,1,1,1),
land[col].splice(row-1,3,1,1,1)]
: row === land[0].length - 1 ? [ land[col-1].splice(row-1,2,1,1),
land[col].splice(row-1,2,1,1)]
:
[land[col-1].splice(row,2,1,1),
land[col].splice(row,2,1,1)]
}
}
return land.flat().filter((e) => e === 0).length
}문제 풀이
- 지뢰가 있는 곳을 파악하기위해서 while문을 사용하여 land에서 가지고 있는 1이 어느 인덱스에 위치했는지 파악
- 해당 인덱스를 단위 요소(배열)의 길이만큼 나눈 몫을 행, 나머지를 열로 지정해서 정확한 위지를 지정한다
- 해당 열과 행의 위치에 따라서 splice메소드를 호출하여 주변 값을 1로 변경한다.
- 변경된 land에서 filter를 사용해서 요소의 값이 0인 것만 반환하여 길이를 리턴하면 안전지대의 갯수가 된다.
느낀 점
항상 예외를 잘 생각해서 코드를 작성해야한다는 사실을 다시한번 느끼게 되었다.
if (land[0].length===1) {
return land[0][0] === 1? 0 : 1
}land가 1X1일 가능성을 생각하지 않아서 테스트의 오류가 발생했고 이를 해결하기 위해서 따로 1X1인 경우에
해당하는 코드를 작성했다.
과제
TODO 리스트의 기본 기능 구현 완료
렌더링 되는 할일의 이름을 h2대신에 input으로 구현해서 메인 화면에서 클릭하고 바로 내용을 수정해서 수정 버튼을 누르면 수정이 되게 작성했음
renderTodos 모듈화 작업
index.js에서 할일 목록을 렌더링해서 보여주는 렌더링 메소드를 render.js로 모듈화 해서 index.js의 내용을 줄였음.
기존에는 readTodos를 통해서 얻은 값을 파라미터로 받아서 호출했지만, 파라미터를 제거하고 메서드 내부에서 readTodos를 호출하여 데이터를 사용하게 변경했음
async function renderTodos() {
const todos = await readTodos()
const listEl = document.querySelector('.list')
console.log(listEl)
const liEls = todos.map((todo) => {
const liEl = document.createElement('li')
const titleEl = document.createElement('input')
const btnBoxEl = document.createElement('div')
const deleteEl = document.createElement('button')
const editEl = document.createElement('button')
titleEl.className = 'list__title'
btnBoxEl.className = 'list__btnbox'
editEl.className = 'list__editbtn'
deleteEl.className = 'list__deletebtn'
titleEl.value = todo.title
editEl.textContent = '수정'
deleteEl.textContent = '삭제!'
btnBoxEl.append(editEl, deleteEl)
liEl.append(titleEl, btnBoxEl)
deleteEl?.addEventListener('click', async () => {
await deleteTodo(todo)
const todos = await readTodos()
renderTodos(todos)
})
titleEl?.addEventListener('input', () => {
todo.title = titleEl.value
console.log(todo.title)
})
editEl.addEventListener('click', async () => {
await updateTodo(todo)
const todos = await readTodos()
renderTodos(todos)
})
return liEl
})
listEl.innerHTML = ''
listEl.append(...liEls)
}
export default renderTodos다음 작업
- 할일이 완료되었는지 안되었는지를 표시해주는 체크 박스 구현
- 할일을 드래그 하여 이동할수 있도록 dnd기능 구현
개발자 꿈나무