03.17-TIL

최창수·2023년 3월 17일

문제 1 - transition 순서

transition-timing-function을 통해 마우스를 hover하면 반투명한 Overlay의 width가 0%에서 증가하여 부모요소 위로 뒤덮는 효과를 만들었다.

.overlay {
    width: 0;
    height: 100%;
    .../*기타 속성들 생략*/
    overflow: hidden; /*넘치는 텍스트 안보이게 숨김*/
    transition:
        width .2s .05s cubic-bezier(.23, .65, .19, 1);


}
/*commonBoxStyle은 부모 속성이다*/
.commonBoxStyle:hover .overlay {
    width: 75%;
}

Overlay는 text를 포함하고있는데, width가 변화하면서 텍스트들의 줄바꿈이 바뀌는 것이 보였으며 이를 없애고 싶다.

시도

시도 0. white-space: nowrap;

.overlay {
	white-space:no-wrap;
    width: 0;
    .../*기타 속성들 생략*/
    overflow: hidden;
    transition:
        width .2s .05s cubic-bezier(.23, .65, .19, 1);
}

/*commonBoxStyle은 부모 속성이다*/
.commonBoxStyle:hover .overlay {
    width: 75%;
}

참고한 사이트에서는 자동 텍스트 줄바꿈을 하지 않도록하는 속성을 이용하였다. 그러나 긴 텍스트를 여러줄에 걸쳐 출력하고 싶었으므로 이를 사용하는 것은 적절치 않았다.

시도 1. color 속성도 함께 변화시키기

.overlay {
    width: 0;
    height: 100%;
   	.../*기타 속성들 생략*/
    overflow: hidden;
    color: transparent;
    transition:
        width .2s  cubic-bezier(.23, .65, .19, 1),
        color .1s .17s cubic-bezier(0.00, 0.78, 0.28, 0.97);
}

/*commonBoxStyle은 부모 속성이다*/
.commonBoxStyle:hover .overlay {
    width: 75%;
    color: white;
}

color속성을 함께 바꾸는 동시에 color속성을 투명하게, 호버시 검게 한뒤 transition-timing-function과 delay를 다르게 하여 먼저 width가 커지고 다음에 색을 변화시켜 글자를 보여주려고하였다. 그러나 이는 width가 다시 줄어들때도 같은 순서로 전환이 진행되어, 줄어들때 줄바꿈이 변화하는 것이 보이는 것은 해결할 수 없었다.

시도 2. JS: hidden() 이용하기

html:


<div class="commonBoxStyle" onmouseenter="showNhide(0, 1)" onmouseleave="showNhide(1, 1)">
  <div class="Overlay" id="o1">
  	...
  </div>
 </div>

JS:

function showNhide(state,o_Index){
	if (state){
    	$('#o'+o_Index).hide()
    }else{
      	setTimeout(() => {$('#o'+o_Index).show()}, "120");
    }
}

시도 1과 함께 hidden, show 함수를 사용하여 onmouseenter시 text가 포함된 요소를 show하고 onmouseleave시 text가 포함된 요소를 hidden하도록 바꾸었다. 목표로 하던 기능은 수행되었지만, JS, jQuery를 사용해야한다는 점 자체가 마음에 들지 않았으며 마우스를 빠르게 un hover 했다가 다시 hover하면 텍스트의 줄바꿈이 지저분하게 변화하는 모습이 보였고 unhover시 텍스트가 서서히 사라지는 효과를 볼 수 없었기 때문에 setTimeout()을 사용해 타이밍을 적절히 수동조절해야 하는 등 불편하였다.

해결

.Overlay:hover 에도 transition 속성 넣기


.overlay {
    width: 0;
    height: 100%;
    .../*기타 속성들 생략*/
    overflow: hidden;
    color: transparent;
    /*transition from hover to unhover*/
    transition:
        width .2s .05s cubic-bezier(.23, .65, .19, 1),
        color .1s cubic-bezier(0.00, 0.78, 0.28, 0.97);


}

/*commonBoxStyle은 부모 속성이다*/
.commonBoxStyle:hover .overlay {
    width: 75%;
    color: white;
    /*transition from unhover to hover*/
    transition:
        width .2s cubic-bezier(.23, .65, .19, 1),
        color .1s .15s cubic-bezier(.72, .03, 1, .22);
}

영문 문서에서 찾을 수 있었다.
기본 class와 가상 calss 모두에 transiton을 지정하면, 요소가 해당 calss로 전환될 때 그 class안의 transiton속성이 적용된다. 이를 이용하여 간단하게 마우스가 요소에서 나갈때에는 delay를 반대로 주고 cubic-besier를 reverse하여 두 전환이 서로 다른 속도와 순서로 이줘지도록 구현했다.

배운점

전환의 방향에 따라 서로 다른 transition-delay, transition-duration, transition-timing-function을 사용할 수 있다는 것을 알게되었다.
속성을 설명하는 공식 문서, 혹은 최소한 영문문서를 먼저 확인하는 습관을 들이는 것이 좋다는 것을 알게 되었다.
white-space 속성의 사용: 텍스트 요소의 2개이상의 공백 처리 및 줄바꿈 등을 지정

normal(default): 개행문자 포함 공백들을 collapse(한개로 합침). 박스를 최대한 채우며 자동 개행(wrap)
nowrap: 공백문자들을 collapse. 개행하지 않음
pre: 개행문자 포함 공백들을 보존. 개행문자와 <br>요소에서만 줄바꿈
pre-wrap: 개행문자 포함 공백들을 보존. 개행문자와 <br>요소에서 줄바꿈. 이외엔 wrap적용
pre-line: 개행문자 제외 공백공백들을 collapse. 개행문자와 <br>요소에서 줄바꿈. wrap적용
break-spaces: pre-wrap과 동일하게 작동하나 다음의 차이 존재:
1. line끝의 공백을 포함한 모든 보존된 공백문자들은 실제로 원래만큼의 공간을 차지한다.
2. 공백문자의 연속을 깨고 줄바꿈 가능
3. 공백들은 들여쓰기되지 않는다.

문제 2 - pymongo를 이용한 DB Atlas 접속

from pymongo import MongoClient
client = MongoClient("URL")
db = client['cai']

웹개발 프로젝트중 최종 완성된 app.py를 실행하자 MacOS환경에서 mongoDB에 접속할 수 없었다.

pymongo.errors.ServerSelectionTimeoutError:
[SSL: CERTIFICATE_VERIFY_FAILED] 
certificate verify failed: certificate has expired

시도 & 해결

이전에 사전프로젝트를 함께 진행했던 인원이 작성한 코드와의 차이에 대해 물어보았고 해결방법을 찾을 수 있었다.
이는 pymongo가 TLS/SSL 을 이용하여 DB서버와 연결하는데 일부 환경에서 이것이 제대로 지원되지 않아 certifi 라는 패키지를 설치하여 적용하면 해결할 수 있다.

from pymongo import MongoClient
import certifi
ca=certifi.where()
client =MongoClient("URL",tlsCAFile=ca)
db = client['cai']

배운점

SSl/TLS

http를 사용하는 웹 환경에서 데이터는 모두 암호화되지 않은 텍스트로 전송된다. 이런 상황에서 기밀성(인가된 대상만이 접근가능하다)과 무결성(인가되지 않은 대상이 위변조 불가능) 을 위해 개발된 것이 SSl이며 이것의 보안 취약성을 개선한 것이 TLS이다. 이를 이용한 암호화 기반 프로토콜이 HTTPS이다.
SSL 및 TLS가 ID, 인증, 기밀성, 무결성을 제공하는 방법

SSl/TLS를 사용하기 위해 서버는 '인증서'가 필요하며 인증서에 저장된 공개키를 통해 사용자의 데이터를 암호화 하고 서버의 개인키로 이를 복호화한다.

Certifi는 일부 환경에서 flask서버가 인증서가 없어 SSl/TLS를 이용한 프로토콜로 DB Atlas 등에 접근하지 못할 때, 브라우저나 PC에 이미 내장된 인증기관의 인증서를 이용해 통신이 가능하도록 하는 패키지이다.