항해99 - 3일차 - certifi 정리 / Postiion vs Flexbox / React 폰트어썸, React Icon /

 

오늘의 목표
스파르타 강의	4주차 - 데이터 가져오기 공부
팀공부	certifi 패키지 정리 @app.route() 에 대한 정리 어떤 API를 사용했어요?
팀작업	게시물 받아오기 - check post 페이지
개인공부	position: absolute, relative, fixed 정리
전산학공부	1일 1로그 100일 완성 004 ~ 006
알고리즘공부	백준 2단계 조건문
개인작업	Log in 페이지 완성

 

certifi 패키지

*certifi 패키지는 모질라의 CA 번들을 제공한다.*

 

- 모질라: 비영리 조직

- CA: SSL 인증서 발행을 담당하는 기관

- SSL : SSL인증서는 높은 수준의 개인정보 보호 제공하기 위해

웹에서 전송되는 데이터를 암호화하는 방법 

 

즉, certifi 패키지는 모질라 라는 단체가 개인정보를 보호할수 있는 서비스를 제공해주는것이다.

 

이 패키지가 필요한 경우가 경험상 아직 한번 있었는데,MongoDB와 연결하던 도중 아래의 에러가 뜰 경우 였다.에러를 읽을때 꼭 읽어야 할 정보들을 하이라이트 해 두었다.

 

pymongo.errors.ServerSelectionTimeoutError: cluster0-shard-00-02.mny7y.mongodb.net:27017: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: certificate has expired

 

보면 SSL이 인증실패했다, 만기되었다, 타임아웃이다 이런 말이다.이 경우 certifi 패키지로 다시 SSL인증서를 받아와서 데이터를 암호화 해주면 해결되었다.

 

Positon: absolute, relative, fixed vs display: flex

css Layout을 할때 항상 궁금했던 부분이다.

많은 검색결과 도달한 답안은,

Layout은 어찌됬던 다 사용해도 되지만,

 

주로 간단한 레이아웃은 flex,

복잡한 레이아웃은 grid를 사용하고,

position은 필요할때 부분적으로 사용한다.

 

예를들어 사진 두개가 있고 사진을 div태그에 넣어서 가로줄로 세운다음

사진위에 글자를 쓰고싶다고 가정하면

사진에 display:flex로 사진들을 가로줄로 세우고,

글자에 absolute 포지션을 줘서

사진위에 어디든지 글자를 넣을수 있게 해주면 된다.

 

유용한 사이트 CSS

개인작업을 진행하다가 유용한 사이트를 찾았다.

1. bos shadow를 생성해줌

https://html-css-js.com/css/generator/box-shadow/

2. 그라데이션을 생성해줌

https://cssgradient.io/

 

 

React 폰트어썸

// 순서대로 설치
npm i @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
npm i @fortawesome/react-fontawesome


// 임포트
import { faCamera } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";


// 사용예시
<FontAwesomeIcon icon={faCamera} size="2x" />

 

React icon

설치
npm install react-icons

임포트
import {FaTwitter} from 'react-icons/fa'

사용
<h1><FaTwitter /></h1>

 

@app.route() 정리

 

 

 

웹에 스크롤 기능은 있지만,

스크롤 바는 안나오게 하기

.box {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.box::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

 

 

d

d