개인 프로젝트 중 질문

[황승현]

흰색후보만들기(state) {
      for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
          if (state[i][j] == "0") {
            if (state[i][j - 1] == "black") {
              if (state[i][j - 2] == "black") {
                if (state[i][j - 3] == "black") {
                  if (state[i][j - 4] == "black") {
                    if (state[i][j - 5] == "black") {
                      if (state[i][j - 6] == "black") {
                        if (state[i][j - 7] == "black") {
                        } else if (state[i][j - 7] == "white") {
                          state[i][j] = "white-border";
                        }
                      } else if (state[i][j - 6] == "white") {
                        state[i][j] = "white-border";
                      }
                    } else if (state[i][j - 5] == "white") {
                      state[i][j] = "white-border";
                    }
                  } else if (state[i][j - 4] == "white") {
                    state[i][j] = "white-border";
                  }
                } else if (state[i][j - 3] == "white") {
                  state[i][j] = "white-border";
                }
              } else if (state[i][j - 2] == "white") {
                state[i][j] = "white-border";
              }
            }
          }
          if (state[i][j] == "0") {
            if (state[i - 1][j] == "black") { *****
              if (state[i - 2][j] == "black") {
                if (state[i - 3][j] == "black") {
                  if (state[i - 4][j] == "black") {
                    if (state[i - 5][j] == "black") {
                      if (state[i - 6][j] == "black") {
                        if (state[i - 7][j] == "black") {
                        } else if (state[i - 7][j] == "white") {
                          state[i][j] = "white-border";
                        }
                      } else if (state[i - 6][j] == "white") {
                        state[i][j] = "white-border";
                      }
                    } else if (state[i - 5][j] == "white") {
                      state[i][j] = "white-border";
                    }
                  } else if (state[i - 4][j] == "white") {
                    state[i][j] = "white-border";
                  }
                } else if (state[i - 3][j] == "white") {
                  state[i][j] = "white-border";
                }
              } else if (state[i - 2][j] == "white") {
                state[i][j] = "white-border";
              }
            }
          }
          if (state[i][j] == "0") {
            if (state[i + 1][j] == "black") {
              if (state[i + 2][j] == "black") {
                if (state[i + 3][j] == "black") {
                  if (state[i + 4][j] == "black") {
                    if (state[i + 5][j] == "black") {
                      if (state[i + 6][j] == "black") {
                        if (state[i + 7][j] == "black") {
                        } else if (state[i + 7][j] == "white") {
                          state[i][j] = "white-border";
                        }
                      } else if (state[i + 6][j] == "white") {
                        state[i][j] = "white-border";
                      }
                    } else if (state[i + 5][j] == "white") {
                      state[i][j] = "white-border";
                    }
                  } else if (state[i + 4][j] == "white") {
                    state[i][j] = "white-border";
                  }
                } else if (state[i + 3][j] == "white") {
                  state[i][j] = "white-border";
                }
              } else if (state[i + 2][j] == "white") {
                state[i][j] = "white-border";
              }
            }
          }
          if (state[i][j] == "0") {
            if (state[i][j + 1] == "black") {
              if (state[i][j + 2] == "black") {
                if (state[i][j + 3] == "black") {
                  if (state[i][j + 4] == "black") {
                    if (state[i][j + 5] == "black") {
                      if (state[i][j + 6] == "black") {
                        if (state[i][j + 7] == "black") {
                        } else if (state[i][j + 7] == "white") {
                          state[i][j] = "white-border";
                        }
                      } else if (state[i][j + 6] == "white") {
                        state[i][j] = "white-border";
                      }
                    } else if (state[i][j + 5] == "white") {
                      state[i][j] = "white-border";
                    }
                  } else if (state[i][j + 4] == "white") {
                    state[i][j] = "white-border";
                  }
                } else if (state[i][j + 3] == "white") {
                  state[i][j] = "white-border";
                }
              } else if (state[i][j + 2] == "white") {
                state[i][j] = "white-border";
              }
            }
          }
          if (state[i][j] == "0") {
            if (state[i - 1][j - 1] == "black") {
              if (state[i - 2][j - 2] == "black") {
                if (state[i - 3][j - 3] == "black") {
                  if (state[i - 4][j - 4] == "black") {
                    if (state[i - 5][j - 5] == "black") {
                      if (state[i - 6][j - 6] == "black") {
                        if (state[i - 7][j - 7] == "black") {
                        } else if (state[i - 7][j - 7] == "white") {
                          state[i][j] = "white-border";
                        }
                      } else if (state[i - 6][j - 6] == "white") {
                        state[i][j] = "white-border";
                      }
                    } else if (state[i - 5][j - 5] == "white") {
                      state[i][j] = "white-border";
                    }
                  } else if (state[i - 4][j - 4] == "white") {
                    state[i][j] = "white-border";
                  }
                } else if (state[i - 3][j - 3] == "white") {
                  state[i][j] = "white-border";
                }
              } else if (state[i - 2][j - 2] == "white") {
                state[i][j] = "white-border";
              }
            }
          }
          if (state[i][j] == "0") {
            if (state[i - 1][j + 1] == "black") {
              if (state[i - 2][j + 2] == "black") {
                if (state[i - 3][j + 3] == "black") {
                  if (state[i - 4][j + 4] == "black") {
                    if (state[i - 5][j + 5] == "black") {
                      if (state[i - 6][j + 6] == "black") {
                        if (state[i - 7][j + 7] == "black") {
                        } else if (state[i - 7][j + 7] == "white") {
                          state[i][j] = "white-border";
                        }
                      } else if (state[i - 6][j + 6] == "white") {
                        state[i][j] = "white-border";
                      }
                    } else if (state[i - 5][j + 5] == "white") {
                      state[i][j] = "white-border";
                    }
                  } else if (state[i - 4][j + 4] == "white") {
                    state[i][j] = "white-border";
                  }
                } else if (state[i - 3][j + 3] == "white") {
                  state[i][j] = "white-border";
                }
              } else if (state[i - 2][j + 2] == "white") {
                state[i][j] = "white-border";
              }
            }
          }
          if (state[i][j] == "0") {
            if (state[i + 1][j - 1] == "black") {
              if (state[i + 2][j - 2] == "black") {
                if (state[i + 3][j - 3] == "black") {
                  if (state[i + 4][j - 4] == "black") {
                    if (state[i + 5][j - 5] == "black") {
                      if (state[i + 6][j - 6] == "black") {
                        if (state[i + 7][j - 7] == "black") {
                        } else if (state[i + 7][j - 7] == "white") {
                          state[i][j] = "white-border";
                        }
                      } else if (state[i + 6][j - 6] == "white") {
                        state[i][j] = "white-border";
                      }
                    } else if (state[i + 5][j - 5] == "white") {
                      state[i][j] = "white-border";
                    }
                  } else if (state[i + 4][j - 4] == "white") {
                    state[i][j] = "white-border";
                  }
                } else if (state[i + 3][j - 3] == "white") {
                  state[i][j] = "white-border";
                }
              } else if (state[i + 2][j - 2] == "white") {
                state[i][j] = "white-border";
              }
            }
          }
          if (state[i][j] == "0") {
            if (state[i + 1][j + 1] == "black") {
              if (state[i + 2][j + 2] == "black") {
                if (state[i + 3][j + 3] == "black") {
                  if (state[i + 4][j + 4] == "black") {
                    if (state[i + 5][j + 5] == "black") {
                      if (state[i + 6][j + 6] == "black") {
                        if (state[i + 7][j + 7] == "black") {
                        } else if (state[i + 7][j + 7] == "white") {
                          state[i][j] = "white-border";
                        }
                      } else if (state[i + 6][j + 6] == "white") {
                        state[i][j] = "white-border";
                      }
                    } else if (state[i + 5][j + 5] == "white") {
                      state[i][j] = "white-border";
                    }
                  } else if (state[i + 4][j + 4] == "white") {
                    state[i][j] = "white-border";
                  }
                } else if (state[i + 3][j + 3] == "white") {
                  state[i][j] = "white-border";
                }
              } else if (state[i + 2][j + 2] == "white") {
                state[i][j] = "white-border";
              }
            }
          }
        }
      }
    },


코드에 ***** 되있는 부분에서 Cannot read properties of undefined (reading '0') 에러나 나옵니다. 형태가 비슷한 반복문인데 맨윗줄이 아니라 중간에서 에러가 나와서 의아하네요. 함수 실행될 때 배열 인덱스가 음수가 나오는 경우인가 했는데 그럼 그 전에서 오류가 나왔어야 했는데... 혹시 어디가 문제인지 알수 있을까요? 그리고 이거 반복문으로 축약 가능할까요?

[codingapple]

바로 위의 if문에서 state를 변경해버려서 그런게아닐까요
의도대로 변경되나 거기서 state 출력해봅시다

[황승현]

***** 바로 윗줄부터 맨아래까지 전체를 주석처리하니까 state 변경이 원하는대로 되는데, 변경함수에선 state 한번밖에 못 바꾸나요?

[황승현]

 
    오른쪽흰색후보만들기(state) {
      for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
          if (state[i][j] == "0") {
            if (state[i][j + 1] == "black") {
              if (state[i][j + 2] == "black") {
                if (state[i][j + 3] == "black") {
                  if (state[i][j + 4] == "black") {
                    if (state[i][j + 5] == "black") {
                      if (state[i][j + 6] == "black") {
                        if (state[i][j + 7] == "black") {
                        } else if (state[i][j + 7] == "white") {
                          state[i][j] = "white-border";
                        }
                      } else if (state[i][j + 6] == "white") {
                        state[i][j] = "white-border";
                      }
                    } else if (state[i][j + 5] == "white") {
                      state[i][j] = "white-border";
                    }
                  } else if (state[i][j + 4] == "white") {
                    state[i][j] = "white-border";
                  }
                } else if (state[i][j + 3] == "white") {
                  state[i][j] = "white-border";
                }
              } else if (state[i][j + 2] == "white") {
                state[i][j] = "white-border";
              }
            }
          }
        }
      }
    },
    왼쪽흰색후보만들기(state) {
      for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
          if (state[i][j] == "0") {
            if (state[i][j - 1] == "black") {
              if (state[i][j - 2] == "black") {
                if (state[i][j - 3] == "black") {
                  if (state[i][j - 4] == "black") {
                    if (state[i][j - 5] == "black") {
                      if (state[i][j - 6] == "black") {
                        if (state[i][j - 7] == "black") {
                        } else if (state[i][j - 7] == "white") {
                          state[i][j] = "white-border";
                        }
                      } else if (state[i][j - 6] == "white") {
                        state[i][j] = "white-border";
                      }
                    } else if (state[i][j - 5] == "white") {
                      state[i][j] = "white-border";
                    }
                  } else if (state[i][j - 4] == "white") {
                    state[i][j] = "white-border";
                  }
                } else if (state[i][j - 3] == "white") {
                  state[i][j] = "white-border";
                }
              } else if (state[i][j - 2] == "white") {
                state[i][j] = "white-border";
              }
            }
          }
        }
      }
    },
    위쪽흰색후보만들기(state) {
      for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
          if (state[i][j] == "0") {
            if (state[i - 1][j] == "black") {
              if (state[i - 2][j] == "black") {
                if (state[i - 3][j] == "black") {
                  if (state[i - 4][j] == "black") {
                    if (state[i - 5][j] == "black") {
                      if (state[i - 6][j] == "black") {
                        if (state[i - 7][j] == "black") {
                        } else if (state[i - 7][j] == "white") {
                          state[i][j] = "white-border";
                        }
                      } else if (state[i - 6][j] == "white") {
                        state[i][j] = "white-border";
                      }
                    } else if (state[i - 5][j] == "white") {
                      state[i][j] = "white-border";
                    }
                  } else if (state[i - 4][j] == "white") {
                    state[i][j] = "white-border";
                  }
                } else if (state[i - 3][j] == "white") {
                  state[i][j] = "white-border";
                }
              } else if (state[i - 2][j] == "white") {
                state[i][j] = "white-border";
              }
            }
          }
        }
      }
    },
    아래쪽흰색후보만들기(state) {
      for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
          if (state[i][j] == "0") {
            if (state[i + 1][j] == "black") {
              if (state[i + 2][j] == "black") {
                if (state[i + 3][j] == "black") {
                  if (state[i + 4][j] == "black") {
                    if (state[i + 5][j] == "black") {
                      if (state[i + 6][j] == "black") {
                        if (state[i + 7][j] == "black") {
                        } else if (state[i + 7][j] == "white") {
                          state[i][j] = "white-border";
                        }
                      } else if (state[i + 6][j] == "white") {
                        state[i][j] = "white-border";
                      }
                    } else if (state[i + 5][j] == "white") {
                      state[i][j] = "white-border";
                    }
                  } else if (state[i + 4][j] == "white") {
                    state[i][j] = "white-border";
                  }
                } else if (state[i + 3][j] == "white") {
                  state[i][j] = "white-border";
                }
              } else if (state[i + 2][j] == "white") {
                state[i][j] = "white-border";
              }
            }
          }
        }
      }
    },

if문을 나눠서 변경함수를 만들어봤는데 첫번째랑 두번쨰는 오류가 안나고, 세번째, 네번째는 오류가 생깁니다. 변경함수 4개 모두 복붙수준으로 비슷한데 첫번째, 두번째는 이차원 배열의 첫번째 인덱스에 증감하는 숫자를 넣었고, 세번째, 네번째에는 배열의 두번째 인덱스에 증감하는 숫자를 넣었습니다. 제가 자바스크립트 문법 중 안 지킨 사항이 있어서 에러가 나는걸까요?

[codingapple]

state[-1][0] 이런 코드도 실행될거같은데 인덱싱할 때 음수넣으면 안됩니다
if문 여러개 쓸 필요없이 "white"인거 찾으면 "white-border"로 바꾸라고만 해도 되지않을까요

[황승현]

  
Cannot read properties of undefined (reading '0') 
요 에러만 해결되면 완성인거 같은데 이건 어떨때 나타나는 에러인가요? 구글링해봐도 잘 모르겠네요.

[codingapple]

[0] 왼쪽이 비어있다는 소리인데 state[-1][0] 이런거 때문인듯요

[황승현]

변경함수 '위쪽흰색후보만들기'에서 for문 안에서 사용한 i,j에 어떤 숫자가 할당됬을 때 오류가 생기는지 볼 수 있는 툴 있나요? react, redux devtool 봐도 잘 모르겠네요.

[codingapple]

반복문 처음 돌 때는 state[i][j - 1]가 state[0][-1] 되어서 이상해집니다
반복문의 i를 8부터 0까지 돌리거나 그럽시다

[글쓴이]

글