Today I Learn (0322)

1. 오늘의 자바스크립트

배열(Array)

1. 배열[배열.length -1] = 배열의 마지막 요소
2. 배열에는 method를 호출한다고 한다.
3. unshift()와 push()는 원소를 앞과 뒤에 요소를 추가한다.
4. shifht()와 pop()은 원소의 앞뒤 요소를 제거한다. 이때 변수로 저장하여 값을 사용할 수 있다.

Arr = ["a", "b", "c", "d"];
let first = Arr.shift();
let last = Arr.pop();
console.log(shift); //a
console.log(last); //d

5. 두 배열은 첫번째배열.concat(두번째배열, 세번째배열)으로 합칠 수 있다.

6. indexOf(원소이름) 메소드를 사용하면 순서를 찾을 수 있음.

indexOf("b");
2;

7. join(seperator)을 사용하면 배열을 문자열로 만들 수 있음.
8. stack은 배열의 다른 이름이라고 할 수 있고, 펜케이크라고 생각해서 위에있는 거 부터 먹는 것처럼, 늦게 들어간게 일찍 나오는 것.

2. 알고리즘 (2609번 최대공약수와 최소공배수)

두 개의 자연수를 입력받아 최대 공약수와 최소 공배수를 출력하는 프로그램을 작성하시오.

예제 입력 1
24 18

const fs = require("fs");
const input = fs.readFileSync("./dev/stdin").toString().split(" ");

let a = input[0];
let b = input[1];
let common = 1;
if (a > b) [a, b] = [b, a]; // a가 더 크면 자리를 바꾸어서 작은수 구하기
for (let i = 1; i <= a; i++) {
  if (a % i === 0 && b % i === 0) {
    common = i; // 둘다 나누어 지는 숫자중에 가장 큰 숫자 구하기
  }
}
answer = common + "\n";
if (common === a) {
  //작은수가 최대공약수 일 경우
  answer += common * (b / common); //최소공배수는 두개의 곱
} else {
  answer += (a / common) * (b / common) * common;
} // 최대공약수가 있을 경우 그걸로 나눈 값들의 곱이 최소공배수
console.log(answer);

3. 프로젝트를 위한 구현 내용

링크로 방 공유 했을 시, 로그인 여부 체크하여 로그인 안했을 때는 로그인 창 띄우기.

• useEffect를 사용하여 처음 랜더링 됐을 때, 로그인 여부 체크

React.useEffect(() => {
  if (!isLocal) {
    var result = window.confirm("로그인이 필요합니다.");
    if (result) {
      popLoginModal();
    } else {
      history.replace("/");
    }
  }
  if (!roomInfo) {
    dispatch(roomActions.getRoomDB());
  }
}, []);

• window.confirm("message") 띄우고 "확인" 누르면, 모달창 띄우는 함수실행.

const [modalOn, setModalOn] = React.useState(false);
//modal을 열고 닫는 uesState로 정의
const popLoginModal = () => {
  setModalOn(true);
};
//함수실행시 모달on 실행

• HTML부분에서 modal실행 시, roomClickModalLogin 실행

    modalOn && <RoomClickModal />
  )}
</>

• RoomClickModalLogin 모달 실행 시, X버튼 클릭시 홈으로 보내기

  const closeModal = () => {
    history.replace("/");
  };

  return (
    <React.Fragment>
      <BackGround onClick={closeModal}>
        <ModalContainer>
          <DIV onClick={(e) => e.stopPropagation()}>
            <CloseBtn onClick={closeModal}>
              <img src={Close} />
            </CloseBtn>
            <LeftSide>
              <ImgWrap>
                <div style={{ width: "274px", height: "208px" }}>
                  <img src={loginImg} />
                </div>
                <div
                  style={{
                    fontSize: "24px",
                    fontWeight: "bold",
                    marginTop: "22px",
                  }}
                >
                  홈트게더와 함께하는 홈 트레이닝
                </div>
                <div
                  style={{
                    fontSize: "16px",
                    marginTop: "28px",
                    color: "#aaa",
                  }}
                >
                  혼자하는 홈트가 아닌 함께하는 홈트를 경험해보세요.
                  <br />
                  홈트게더와 함께 사람들과 소통하며 재미있는 홈트를
                  시작해보세요.
                </div>
              </ImgWrap>
            </LeftSide>