항해99

[항해99] TIL 사전과제 스터디 D-33

crab. 2022. 6. 9. 00:03

고독

오늘 아침에 너무 고독하고 힘들었다.

같이 하는 팀원이 있다는게 정말 너무너무 다행이다.

요 며칠간 꼴에 팀장이라고 뭔가 자만심에 빠졌던거 같다.

내가 뭐라고…

나는 나 혼자서는 뚜껑열린 물티슈마냥 말라 비틀어져 갈 뿐이다.

겸손하게 팀활동을 하자.

mongoDB certificate issue

팀원분들중 한 분이 종합반 3주차에 mongoDB와 pymongo를 이용해 데이터를 DB에 넣는 과정을 진행중에 문제가 생겼다고 말해 주셨다.

그래서 처음으로 팀원들이 다같이 모여 머리를 맞대고 의견을 모으며 문제를 해결했다.

단언컨대 그 어떤 의견도 불필요한 의견이 없었으며 브레인스토밍이 무엇인지 직접 약간(?)이라도 경험한 것 같아 기분이 좋다.

무의식중에 오류코드가 길고 복잡하니 구글링을 꺼렸었다.. 반성하고 항상 구글링을 하는 습관을 들이자

물론 이렇게 되면 당장은 진도가 느려져 보일 수도 있다.

하지만 여러 프로젝트를 경험한 봐 급하게 서두르다 나중에 팀이 폭파되고 터져서 그냥 아무 소통도없이 멈출바에는 다같이 문제를 해결하며 나아가는게 분명 더 멀리 나아갈 수 있다고 확신한다!

기분이 좋다~

개념정리 자료함 신설

누군가에게 알려줄때 가장 확실하게 이해한다.

블로그 포스팅처럼 이용할 수 있는 부분이 있으면 어떨까?

물론 육성으로 화면으로 실시간으로 설명하는게 베스트이긴하지만 모두가 5주차를 끝내고 하는것이 좋다고 생각한다.

열정이 없는것보다 있는게 수천만배 더 좋다. 우리팀은 지금 뜨 겁 다.

코드비교기능

코딩을 배우다 보면 공부를 하며 하나의 기능을 완성하는 흐름을 배울 수 있어 클론코딩을 많이 하게 된다.

이때 익숙해지기 위해 복붙이아닌 직접 치는경우가 꽤 생기는데 이런 경우 본인은 설마 싶지만 정말 단순 오타인 경우가 매우 비일비재하다…

그러니 클론코딩시 오류가 생기면 항상 제일먼저 vscode나 pycharm같은 IDE의 코드비교기능을 사용해보자!

Slack의 새로운 질문

이번에는 fontawesome을 이용해 아이콘을 사용할때

이 아이콘을 버튼에 넣어주고 버튼을 누를 시 두 가지의 아이콘이 토글형식으로 번갈아 나오는 기능을 구현하고 싶다는 질문이 올라왔다.

코드도 같이 올려주셨는데 질문자는 onclick과 fontawesome의 class이름을 조건문으로 바꿔주어

기능을 완성하려 하셨다.

내가 추측한 원인은 fontawesome의 기능에서 class의 고유네임을 어떤 방식으로든 변경할 시 해당 아이콘이 출력되지 않게 설정해 놓지 않았나 싶다..

그래서 다른 방법을 추천해드렸는데 자세한 사항은 아래 올려놓겠다.

(추가) 함수명의 문제였다. onclick의 값으로 click()이 아닌 다른 함수명을 넣으면 해결된다.

으아… 쪽팔린다 ㅋㅋㅋㅋㅋㅋㅋ

certificate issue 해결과정

문제 사항

  • mongoDB를 pymongo를 통해 데이터를 넣으려고 하는데 오류가 발생함

코드

from pymongo import MongoClient
client = MongoClient('여기에 URL 입력')
db = client.dbsparta

doc = {
    'name':'bob',
    'age':27
}

db.users.insert_one(doc)

해결 과정

select your driver 에서 node.js가 아닌 python으로 바꾼다.

 

-> 바꾸기는 했지만 기입하는 URL은 변경이 없고 오류도 그대로임

 

회원가입할때 잘못된 정보를 기입했을 수 있다. Database Access를 들어가 정보를 수정하자.

 

-> password도 강의에서 말한대로 바꾸고 MongoDB Roles도 다른게 되어있어 아래 사진과 같이 바꾸었지만 오류코드는 변함이 없었다.

오류코드를 면밀히 살펴보고 구글링을 통해 문제를 해결하자.

-> mongodb db certificate_verify_failed 라고 검색을 하면 블로그가 두 개 뜬다.

-> 오류코드가 같은 것을 확인

-> certifi 패키지는 설치가 되어있었다. 따라서 아래와 같이 변경한다.

//상단에 
import certifi

//URL 코드 뒤에 
,tlsCAFile=certifi.where()

//예시
client = MongoClient('mongodb+srv://userID:password@cluster0.0vjef.mongodb.net/Cluster0?retryWrites=true&w=majority'
, tlsCAFile=certifi.where())
db = client.dbsparta

 

오류해결에 도움된 사이트 주소

https://pycoding.tistory.com/entry/%EB%AA%BD%EA%B3%A0dbmongoDB-atlas-CERTIFICATEVERIFYFAILED-%EC%9D%B8%EC%A6%9D%EC%84%9C-%ED%99%95%EC%9D%B8-%EC%8B%A4%ED%8C%A8-%EC%98%A4%EB%A5%98

 

몽고db(mongoDB) atlas CERTIFICATE_VERIFY_FAILED 인증서 확인 실패 오류

pymongo.errors.ServerSelectionTimeoutError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: certificate has expired 이런 종류의 오류 메시지가 뜨는 경우도 있다. 분명 해당 컴퓨터에..

pycoding.tistory.com

https://velog.io/@isabel_noh/MongoDB-Connecting-Error-SSL-CERTIFICATEVERIFYFAILED

 

MongoDB Connecting Error - [SSL: CERTIFICATE_VERIFY_FAILED]

MongoDB를 연결하는 도중 에러가 발생했다.하라는 대로 했는데 왱???,, SSL: CERTIFICATE_VERIFY_FAILED라는 에러가 나와 해결방법을 찾아보았다. certifi라는 패키지 설치하기MongoDB Client url 스크립트에 ,tlsCAFi

velog.io

원인이 무엇이었을까

  • 찾아봐도 원인을 구체적으로 알기는 쉽지 않은 문제로 여겨짐
  • 추측컨데 과거 보안관련으로 레지스트리를 등록하거나 인증서 관련하여 설정을 했을거라 생각됨

느낀점

  • 처음으로 다같이 머리를 모아 문제를 해결하기 위해 노력했다.
  • 집단 지성은 대단하다.
  • 다같이 얘기하며 나온 의견들중 그 무엇하나 불필요한 의견이 없었고 모든 의견들이 조금씩 모여지며 해결방법을 향해 나아갔다.
  • 다들 고생 많으셨습니다!

js 토글 기능 만들기 

  • (추가) 함수명의 문제 였습니다… onclick의 값으로 click()이라는 함수명을 바꾸면 정상작동 돼요
  • 전체 코드를 보지 못하여 정확한 요구 사항과 추구방향이 뭔지는 모르지만 유추해본대로 해보겠습니다.
  • 제가 한 방법은 기능은 구현이 되지만 원하시는 방법이랑은 다릅니다…

원래 예상되는 목표

  • fontawesome에서 별 이미지를 가져오되 두 개를 가져온다.
    • 빈 별(fa-regular fa-star)
    • 색깔 별(fa-solid fa-star)
  • 가져온 폰트어썸 아이콘을 button에 텍스트로 넣어준다.
  • button의 onclick속성에 값을 함수로 해주어 버튼을 클릭했을때 빈 별과 색깔 별을 번갈아 볼 수 있게 한다.

오류 원인

  • 솔직하게 저도 이 코드가 안되는 정확한 이유는 잘 모르겠습니다…
    • (다른 분들이나 매니저님이 해결해주시면 저도 잘 봐야겠어요 ^^;;;)
  • 그냥 제 개인적인 추측컨데 저는 fontawesome을 cdn으로 받아왔는데 그런 경우 fontawesome측에서 기능을 만들때 class의 원본 값(fa-solid)을 변경하여 아이콘을 출력하는 경우를 막은 것은 아닌가? 추측해봅니다.

방안

  • 대은님이 원하시는 방향은 아니지만 만약 꼭 fa-solid라는 값을 변경시켜야 하는 것이 아닌 토글기능만을 원하신다면
    • css의 display: none
    • addEventListener
  • 이용한 방법을 추천드려봅니다.

코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    />
    <style>
      /* 초기에는 기본적으로 display를 이용해 색깔별은 안보이게
      빈별은 보이게 설정합니다. */
      #solid {
        display: none;
      }
      #regular {
        display: inline;
      }
      /* 클릭될경우 script에 설정된 이벤트를 통해 
      클래스에 show가 추가되어 아래 스타일을 적용하게 됩니다.
      따라서 색깔 별은 보이게 됩니다. */
      #solid.show {
        display: inline;
      }
      /* 클릭될경우 script에 설정된 이벤트를 통해 
      클래스에 hide가 추가되어 아래 스타일을 적용하게 됩니다.
      따라서 속이 빈 별은 안보이게 됩니다. */
      #regular.hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <button class="dib">
      <i id="solid" class="fa-solid fa-star"></i>
      <i id="regular" class="fa-regular fa-star"></i>
    </button>
  </body>
  <script>
    btnEl = document.querySelector(".dib");
    solidEl = document.getElementById("solid");
    regularEl = document.getElementById("regular");
    //토글을 위해 먼저 변수를 하나 지정해 줍니다.
    let isEmpty = false;
    //button에 자바스크립트를 통해 클릭 이벤트를 추가해줍니다.
    btnEl.addEventListener("click", function () {
      //토글 기능을 위해 위에서 만든 변수가 클릭할때마다
      //변할 수 있게 설정해줍니다.
      isEmpty = !isEmpty;
      //초기에는 isEmpty가 true이므로 클릭시 색깔 별은 보이게 바꾸고
      //빈 별은 안보이게 클래스를 추가 & 삭제해줍니다.
      if (isEmpty) {
        solidEl.classList.add("show");
        regularEl.classList.add("hide");
        //다시 클릭시에는 isEmpty값이 false이므로 위와 반대되는 코드를
        //조건문 else를 이용해 설정해줍니다.
      } else {
        solidEl.classList.remove("show");
        regularEl.classList.remove("hide");
      }
    });
  </script>
</html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    />
  </head>
  <script>
    function clickasd() {
      if (document.getElementById("star").classList.contains("fa-regular")) {
        document.getElementById("star").classList.add("fa-solid");
        document.getElementById("star").classList.remove("fa-regular");
      } else {
        document.getElementById("star").classList.remove("fa-solid");
        document.getElementById("star").classList.add("fa-regular");
      }
    }
  </script>
  <body>
    <button class="dib" onclick="clickasd()">
      <i id="star" class="fa-regular fa-star"></i>
    </button>
  </body>
</html>
저작자표시

'항해99' 카테고리의 다른 글

[항해99] TIL 사전과제 스터디 D-31  (0) 2022.06.12
[항해99] TIL 사전과제 스터디 D-32  (0) 2022.06.10
[항해99] TIL 사전과제 스터디 D-34  (0) 2022.06.08
[항해99] TIL 사전과제 스터디 D-35  (0) 2022.06.06
[항해99] TIL 사전과제 스터디 D-36  (0) 2022.06.05

'항해99'의 다른글

  • 현재글[항해99] TIL 사전과제 스터디 D-33

관련글

댓글

티스토리툴바