10일차_코트카타_자바스크립트 자료형_방명록 삭제기능 구현_24.12.24(화)

코트카타

1) 두수의 차

public class Ex1 {
        class Solution {
            public int solution(int num1, int num2) {
                int answer = 0;
                if(num1>=-50000 && num1<=50000 && num2>=-50000 && num2<=50000) {
                    answer = num1 - num2;
                }
                return answer;
            }
        }
}

 

2) 두수의 곱

public class Ex2 {
    class Solution {
        public int solution(int num1, int num2) {
            int answer = 0;
            if (num1 >= 0 && num1 <= 100 && num2 >= 0 && num2 <= 100) {
                answer = num1 * num2;
            }
            return answer;
        }
    }
}

 

 

3) 몫 구하기

public class Ex3 {
    class Solution {
        public int solution(int num1, int num2) {
            int answer = 0;
            if(num1>0 && num1<=100 && num2>0 && num2<=100) {
                answer = num1 / num2;
            }
            return answer;
        }
    }
}

제한 범위가 0 이상이 아닌 초과였는데 해당 범위를 잘 보지 않고 코드를 작성했다.

앞으로는 잘 확인해야 되겠다.

4) 나이 출력

public class Ex4 {
    class Solution {
        public int solution(int age) {
            int answer = 0;
            int year = 2022;
            if(age>0 && age <=120){
                answer = year-age+1;
            }
            return answer;
        }
    }
}

제한 범위가 0 이상이 아닌 초과였는데 해당 범위를 잘 보지 않고 코드를 작성했다.

앞으로는 잘 확인해야 되겠다.

 

사실 2022년을 변수로 주지 않고 바로 숫자로 작성했었으나,
다른 분의 풀이를 보았을 때 year라는 변수를 주는 것이 장기적으로 더 좋아보여서 수정하게 되었다.

 

5) 숫자 비교하기

public class Ex5 {
    class Solution {
        public int solution(int num1, int num2) {
            int answer = 0;
            if(num1 >= 0 && num1 <= 10000 && num2 >= 0 && num2 <= 10000) {
                if(num1==num2){
                    answer = 1;
                } else {
                    answer = -1;
                }
            }
            return answer;
        }
    }
}

 

6) 두 수의 합

public class Ex6 {
    class Solution {
        public int solution(int num1, int num2) {
            int answer = -1;
            boolean check = num1>=-50000 && num1<=50000 && num2>=-50000 && num2<=50000;
            if(check){
                answer = num1 + num2;
            }
            return answer;
        }
    }
}

다른 분의 풀이를 보니 boolean 타입의 변수를 사용하시는 것을 보았다.

이 풀이가 더 좋아보였던 이유는 if문에서 깔끔하게 보이기 때문이다.

그래서 위와 같이 수정해보았다.

7) 두 수의 나눗셈

public class Ex7 {
    class Solution {
        public int solution(int num1, int num2) {
            int answer = 0;
            if(num1>0 && num1<=100 && num2>0 && num2<=100){
                double val = (double)num1/num2*1000;
                answer = (int)val;
            }
            return answer;
        }
    }
}

int, double 등 데이터 타입, 형변환에 대해 생각하지 않고

왜 3 / 2 = 1.5인데 안되지? 하고 당황하고 있었다.

타입에 대해 좀 더 주의해야 되겠다.

 

8) 각도기

public class Ex8 {
    class Solution {
        public int solution(int angle) {
            int answer = 0;
            String gak = "";

            if(angle>0 && angle<=180){
                if(angle>0 & angle<90){
                    gak = "예각";
                } else if(angle==90){
                    gak = "직각";
                } else if(angle>90 && angle <180){
                    gak = "둔각";
                } else {
                    gak = "평각";
                }
            }

            switch(gak){
                case "예각" :
                    answer = 1;
                    break;
                case "직각" :
                    answer = 2;
                    break;
                case "둔각" :
                    answer = 3;
                    break;
                case "평각" :
                    answer = 4;
                    break;
            }
            return answer;
        }
    }
}

사실 나는 if문 사용에 익숙해서 if문으로 각도가 90도일때 answer=2 이렇게 바로 값을 주었다.

다른 분의 풀이를 보고 switch문을 나도 사용해보기로 했다.

풀이를 봤지만 그렇다고 코드를 복사 붙여넣기 하지는 않고

아이디어만 따서 switch문을 직접 작성해보았다.

 

9번 짝수의 합 문제는 이런 저런 방법으로 시도했으나

내가 알고리즘 문제 풀기 진행하는 시간을 초과하여

다음 일정 진행을 위해 목요일에 좀 더 천천히 고민해보기로 했다.

 

내가 정답으로 문제를 풀었어도, 다른 사람의 풀이를 통해 더 배울 수 있는 점이 좋았다.

그래도 코드카타의 묘미를 알 수 있게 되어 즐거운 시간이었다.

 

https://github.com/codingTrip-IT/code-kata

GitHub - codingTrip-IT/code-kata

 

---

[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z - 2주차

1주차 복습

가운데로 가져오려면,

전체 div를 만들고, width를 주고, margin: auto를 사용하자!

-> 😎 박스 씌우고 → 양쪽 여백 조정하기

.wrap {
            width: 300px;
            margin: 20px auto 0px auto;
        }

위 > 오른쪽 > 아래 > 왼쪽 시계방향으로 마진을 준다.

처음 들을 때는 margin auto가 무엇인지 잘 이해가 가지 않았는데

이제는 이해가 가는 것 같다.

auto는 최대한 쭉 밀어주는 것을 말한다.

왼쪽, 오른쪽을 각각 최대한 밀어주기에 가운데 정렬이 가능하다.

 

크롬 - 검사에서 직접 css 설정값을 바꿔보면서

의도한대로 잘 되는지 확인하자.

Javascript

리스트와 딕셔너리의 조합

let a = [ {'name':'영수','age':27}, {'name':'철수','age':15}, {'name':'영희','age':20} ] 
console.log(a[0]['name']) //영수 
console.log(a[1]['age']) //15

전보다는 리스트와 딕셔너리가 익숙해진 것 같다.

[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z - 3주차

let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
	let gu_name = a['MSRSTE_NM']
	let gu_mise = a['IDEX_MVL']
	console.log(gu_name, gu_mise)
})

forEach문을 사용하는 것이 아직은 어색하다.

이걸 잘 이해해야 팀 프로젝트도 잘 작성할 수 있을 것 같다.

 

---

팀프로젝트 - 자기소개 페이지 만들기

방명록

삭제 기능 구현 중

$('#deleteBtn').on('click', async () => {
              let guestId = $('.gstbook_list').children()[0]['id'];
              console.log(guestId)
              if (!guestId) {
                  alert('삭제할 문서를 찾을 수 없습니다.');
                  return;
              }
              try {
              // Firestore에서 문서 참조 생성 및 삭제
              let gstBookDocId = doc(db, "gst_book", guestId);
              console.log("삭제할 문서 ID:", gstBookDocId);

              await deleteDoc(gstBookDocId);
              alert("문서가 성공적으로 삭제되었습니다.");
              window.location.reload();
              } catch (error) {
              console.error("문서 삭제 중 오류 발생:", error);
              alert("문서 삭제에 실패했습니다.");
              }
          });
        });

 

클릭한 버튼의 아이디를 제대로 찾지 못해서 이 부분에 대해 좀 더 생각해봐야 되겠다.

 

라고 하는 순간 다른 팀원 분께서 방법을 알려주셔서 구현이 가능하게 되었다.

          res.forEach((data) => {
            html =
              `<div id="${data.id}" class='pd-3' style='margin-bottom: 15px; border-bottom: 1px solid #ddd; padding-bottom: 10px;'>
          <div style='font-weight: bold; color: #333; margin-bottom: 5px;'>${data.username || "익명"}</div>
          <div style='color: #555; font-size: 14px; line-height: 1.5;'>${data.text}</div>
          <div style='font-size: 12px; color: #999; margin-top: 5px;'>${new Date(data.create_dt).toLocaleString()}</div>
          <button id="deleteBtn_${data.id}" type="button" class="btn btn-outline-danger">삭제</button>
        </div>`;
            $(".gstbook_list").append(html);
            $('#deleteBtn_'+data.id).on('click', async () => {
                let guestId = data.id;
                console.log(guestId)
                if (!guestId) {
                    alert('삭제할 문서를 찾을 수 없습니다.');
                    return;
                }

                try {
                // Firestore에서 문서 참조 생성 및 삭제
                let gstBookDocId = doc(db, "gst_book", guestId);
                console.log("삭제할 문서 ID:", gstBookDocId);
                
                message('비밀번호를 입력하세요');
                if(password==){
                  await deleteDoc(gstBookDocId);
                  alert("문서가 성공적으로 삭제되었습니다.");
                  window.location.reload();
                }
                } catch (error) {
                console.error("문서 삭제 중 오류 발생:", error);
                alert("문서 삭제에 실패했습니다.");
                }
            });
          });

forEach문 안에 삭제 기능을 넣어서 진행하고

버튼 id에 document id도 같이 넣어준다.

 

튜터님께서 비밀번호를 입력해서 일치하면 글 삭제할 수 있게 하라고 하셔서 그 방법도 더 고안해야 한다.

이 부분은 목요일에 하겠다.