부트캠프를 시작하며 맨땅에 헤딩으로 시작한 첫번째 미니프로젝트 WIL(Weelky I Learnd)
백엔드-프론트엔드를 연결하는 팀 자기소개하기 미니프로젝트
몇가지 시행착오들을 정리해본다!
The Problem
html 파일은 templates 폴더로 저장. 이후 필요한 이미지 소스들은 static 폴더를 만들어 저장했다.
그 후 작업을 이어가며 javaScript 와 css, python 파일을 생성하여 작업하였는데 연결이 되지 않는다.
Solution
문제는 static 폴더 였다.
flask 를 사용할 때에는 이미지 파일을 포함하여, javaScrip와 css 파일 또한 templates 폴더가 아닌 static 폴더에 저장하여 연결해주어야 정상적으로 작동된다! *아래 글에서 정확히 같은 문제와 해결법을 제공하고 있었다!
App1/
│ app1.py
│
└───static/
│ └───css/
│ | │ style.css
| |
│ └───img/
│ │ myimage.png
|
└───templates/
| │ index.html
|
| views.py
https://sentry.io/answers/serve-static-files-flask/
How Do You Serve Static Files in Flask?
The Problem If you are trying to serve static files in a Flask application, you may have come across an issue when trying to access a static file in your…
sentry.io
https://flask.palletsprojects.com/en/2.3.x/tutorial/static/
Static Files — Flask Documentation (2.3.x)
Static Files The authentication views and templates work, but they look very plain right now. Some CSS can be added to add style to the HTML layout you constructed. The style won’t change, so it’s a static file rather than a template. Flask automatical
flask.palletsprojects.com
The Problem
auto swipe 기능 구현하기
Solution
siwiper API를 사용해서 기능을 구현했다.
https://swiperjs.com/get-started
Getting Started With Swiper
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
https://swiperjs.com/swiper-api#autoplay
Swiper API
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
swiper API 적용 코드
<!-- main.html -->
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
</head>
<main>
<div class="swiper container">
<div class="swiper-wrapper">
<div class="swiper-slide memberCards" id="memberCards">
<a class="circle">
<img class="circle" src="../static/img1.png">
</a>
<p class="infoTitle">이름</p>
<p class="infoText">피카추</p>
<p class="infoTitle">자신의 장점</p>
<p class="infoText">몸통 박치기</p>
<p class="infoTitle">협업 스타일</p>
<p class="infoText">꼬부기가 물을 쏘면 나는 전기를 쏘지</p>
<p class="infoTitle">블로그 바로가기</p>
<!-- 새창으로 이동 onclick="window.open('<링크주소>');" -->
<p class="infoText" onclick="window.open('//pokemonkorea.co.kr/')">
https://pokemonkorea.co.kr/
</p>
</div>
</main>
//main.js
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
slidesPerView: 'auto',
loop: true,
autoplay: {
delay: 2000,
},
speed: 900,
})
스와이프 해줄 카드 영역의 class name 들을 알맞게 변경이 필요했다.
container > wrapper > slide 의 계층구조를 지켜서 수정, autoplay 기능을 아래와 같이 구현할 수 있었다.
그리고 기존에 작성해둔 css class 들도 함께 적용해주어 디자인도 그대로 유지 성공.
The Problem
github 협업 중 첫번째 커밋과 다르게 작업하고 있는 파일들을 담고 있는 상위폴더가 함께 커밋된다!
Solution
문제는 git 파일의 위치였다.
git이 익숙치않았던 나는 작업을 하던 중 폴더를 새로 생성해서 작업을 이어갔고 나중에 다시 커밋을 하니 git은 새로 생성한 폴더 전체를 커밋했던 것.
터미널을 열고, 현재 위치의 파일 목록들을 확인했고, .git/ 파일이 없다는 걸 확인. 역시 상위폴더 안에 있었다.
ls -al //현재위치 파일목록 확인해당 브랜치는 버리고 새로 브랜치를 생성해서 커밋하기로 했다.
git을 쓰면서 현재 위치와 그 위치에 있는 파일들을 조회하고 진행상황을 파악하는 명령어들은 반드시 숙지하고 반복적으로 사용하면서 익혀야겠다.
The Problem
DB 연결이 안되는걸까 왜?
Solution
certifi 였다.
작업 중 (아마도 request 하기 전) 미리 넣어둔 certifi로 인해 오류가 있었다. 그래서 이부분을 삭제하고 작업했었는데 막상 연결이 필요할 때에 이 아이의 존재를 망각했다. 지우지 말자. 주석하자.
궁금해서 좀 더 알아봤다. 이게 (도대체) 왜 필요한가.
Certifi는 파이썬 프로그램에서 SSL/TLS 인증서를 관리하는 데 사용되는 패키지로 외부 API와의 통신이 필요할 때 설치가 필요하다. 즉, 웹 요청이나 네트워크 통신에서 SSL/TLS 인증서의 유효성을 검증하는 과정에서 사용된다.
만약 자체로 서명된 인증서나 임시 인증서를 사용하는 테스트 환경이라면 Certifi 가 필요하지 않을 수 있다고 한다.
Certifi 설치하고 import 하기
터미널을 통해 먼저 certifi를 설치해준다.
pip install certifi
잘 됐으면 python 파일로 간다. 아래와 같이 임포트 해주자. 각 라인이 무슨뜻인지 주석으로 달아봄.
from pymongo import MongoClient
import certifi // certifi 모듈 임포트
ca = certifi.where() // 신뢰할 수 있는 CA 인증서 저장경로로 저장
client = MongoClient('mongodb+srv://blabla:<password>@cluster0.hjivimn.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)
// tlsCAFile 매개변수에는 앞에서 얻은 신뢰할 수 있는 CA 인증서 저장 경로인 ca 변수를 전달
db = client.dbsparta
'What I Learnd > WIL' 카테고리의 다른 글
| WIL - Styled Components와 ThemeProvider 사용해서 리액트에서 Darkmode 구현하기 (0) | 2023.07.31 |
|---|---|
| WIL - map undefined/null cases (0) | 2023.07.24 |
| WIL - firebase를 사용한 뉴스피드 프로젝트 (0) | 2023.07.03 |
| WIL - 투두 리스트 리덕스 이해하기/고유값 패키지 라이브러리 UUID, shortID/Redux DevTools (0) | 2023.06.28 |
| WIL - useState 사용해서 To do list 만들기 (0) | 2023.06.20 |
