| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
- OperatingSystem
- Todo
- HTML
- 3주차
- 버킷리스트
- OS
- 화살표함수
- 알고리즘
- 완강
- computerscience
- 생각정리
- 4주차
- DOM
- CSS
- 항해99
- Til
- 쿠키
- 스터디
- 1주차
- 숙제
- 실전프로젝트
- javascript
- 5주차
- javaScript기초
- chapter2
- CS
- JS
- react
- WIL
- 자바스크립트는왜그모양일까
- Today
- Total
개발캡슐
Chap2_/start_day+4/<1부>chap.1풀스택 미니 프로젝트부터 chap2 알고리즘문제 풀이까지 핳 본문
Chap2_/start_day+4/<1부>chap.1풀스택 미니 프로젝트부터 chap2 알고리즘문제 풀이까지 핳
DevGreeny 2022. 9. 25. 18:42현재진행중인 회고
<HEAD>
< meta SUMMARY = "SO trouble and joy " HTTP-EQUIV = "X-UA-Compatible" CONTENT = "IE=edge">
<TITLE>
임시방편이 있어 다행이고 덕분에 협업을 연명할 수 있어 다행.
포맷만이 답이네.(Feat. 파이참 flask서버)
</TITLE>
</HEAD>
<BODY>
<DIV ID = "WRAP" >
<HEADER ID="HEADBOX">
<NAV ID="NAVBOX">
<UL CLASS="NAV_MENU">
- 다사다난
- jinja2 jinja2로 구현하는 동적인 페이지 jinja2와 API
- 로그인과 회원가입 JWT토큰(JSON wep Token)
- 사전스터디 때 넣으려던 삭제기능 과 삭제버튼
- 유튜브영상 크롤링 대놓고 하기 실패 후 코드로 가져오기. 크롤링이라 했찌만 사실상 크롤링이 아닌가..
- 알고리즘
<UL>
</NAV>
</DIV>
<SECTION ID="VIEWBOX">
<DIV CLASS="다사다난 했지만 화이팅 " >
사전스터디 프로젝트를 끝내고 신나게 시작하려던 풀스택 미니 프로젝트도 기능 구현에 있어서
재밌는 기능들을 더 알 수 있어서 좋았지. 로그인과 회원가입, jinja2 언어로 동적인 페이지 구현,
사전스터디 프로젝트에서 못 넣었던 좋아요와 삭제, 수정인 UD(Update, Delete)도 배우고, 마이페이지도 만들어 볼 수 있는 정말 뿌듯한 기회였는데...
git홈에서 다운 받았던 로그인 테스트하려고 받는 다른 유저의 git repo를 다운 받고 타브랜치git pull나서가 그 트러블 슈팅의 전말이었어. 그 git repo에서 받은 폴더 안에 run이란 파일이 하나 있었는데, 그 파일이 뭐지하고. 호기심이 죄지; 암튼 클릭했다가 파이참이 서버에서 프로토콜을 이상하게 받아내기 시작하더니 404오류를 뿜뿜 하던 것이야. 그리곤 어떤 프로젝트던 심지어 강의랑 똑같이 적어서 정상 구현이 되던 것도 전부 404오류가 나서 환장했었어. 그리고 나서 2차 문제가 터졌지. 이게 이번 트러블 슈팅의 핵심이였어.
보통 프로토콜 5000에서 각 프로젝트를 실행시키면 브라우져에 해당되는 프로젝트가 떠야 정상이야. 근데 어떤 프로젝트를 열어서 브라우져로 연결해도 브라우져엔 계속 맨처음에 열었던 프로젝트밖에 브라우져에 나타나질 않았어. 이래서 내가 아무리 코딩을 짜고 별 짓을 다해도 브라우져에 어떻게 구현이 되는 지 아무것도 볼 수가 없었어. 내가 뭘 할 수 있었을까. 이시기에...사전스터지 이전엔 내가 돌아다녀서 코로나에 걸린 것도 아닌데 코로나에 걸려서 사전스터디 프로젝트 기간동안 열이 39~40도 왔다갔다하면서 근육도 굳어가고 그 상태로 프로젝트를 겨우 끝낸 적있어서 또 그렇게 걸렸다간 그만 둘 것 같았어. 한 번 더 그러면 따라가질 못 할 거 같으니까. 이 오류에 대해서는 빠른 시일내로 여유있을 때마다 적는 걸로 하자..(해당 이슈에 대한 건 트러블 슈팅(trouble shooting) 카테고리에 올릴 생각이야)
그 후로 db연결과도 문제가 생기더니 쓰는 프로그램까지 영향을 미쳤고, 거의 메인 페이지 코딩이 끝나가는 시점에서 협업에 참여를 많이 정말 많이 못 하게 됐어. 로그인, 회원가입만 완성하고 좋아요, 삭제, 마이페이지를 만들어 넣을 생각이었는데 말이야..이게 맞나?ㅋㅋㅋㅋㅋ 울고싶었어. 진짜로; 진짜 근데 그런 울 정신 없었던 게 협업에 쓸 코딩을 해도 구현이 됐는지 디자인이 어떻게 나왔는지도 확인도 못하는 상황에서 내가 할 수 있었던 건 머리로 코딩하고 예측 구현하는 방법이었어.
미쳤지
이 심정을 누가 알까. ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ어떻게든 살려보겠다고 구글링으로 찾고 팀원분의 지인분들한테 도움구하고 발버둥 친 시간만 10시간인데 그 10시간이라는게 지금 주말까지 후폭풍이 엄청나다. 아깝기도 하지만 많은 걸 얻었지.
내가 할 수 있는 모든 걸 정말 총동원 했어. 너무나 하고 싶던 협업에서 이렇게 반이나 되는 분량에서 제외되는 상황이 강제적으로 발생하니까 너모 서러웠어..하다 못해 팀원이 모르는 부분들 해결 못하는 부분들에 있어서 여태 겪었던 오류 상황들에 대해 첨언을 해 줄 수 거나 오류를 발견해준다거나 필요한 코드를 알려줄 수 있었다는 게 정말 다행이었지. 해결방안은 줄 수 없었지만 힌트가 됐던 모양이야ㅋㅋ 물론 해결한 것도 있었지. 아는 css문법, js함수, html, 내가 볼 수 있는 강의 초고속으로 빨리 보고 도울 수 있는 코딩 부분은 최선을 다해 도왔다.
손으로 코딩하고 vscode로 옮겨 쓰곤 했는데 그게 도움이 됐을지도 모르겠어. 근데 정작 이런데 js에 대해선 알고리즘과 로직짜는 게 아직도 서투르다는게 함정...
나에게 있어서 거금을 들여서 시작한(내 건강이 얼마나 오래갈 지 모르는 상황에) 마지막 기회인데,
초반부터 외부에 의한 것도 아닌 내부 환경에서 일어난 게 심란하다..포맷만이 답일 거라 생각해.ㅋ..ㅋㅋㅋ...ㅋㅋㅋㅋㅠㅠㅠㅠ
아쉽게도 팀원과 기능을 나눠 공부했고 또 내가 하나하나 다 이렇게 하라고도 할 수 없었기에 더욱 답답했던 기능들에 쓰고자 해. 해당 기능에 대해 팀원들과 해결한 트러블슈팅도 있고. 개념이 아직 덜 잡혀서 설명하기도 그시기허지만 말이지..
</DIV>
</SECTION>
<SECTION ID="Jinja2">
<DIV CLASS=" jinja2로 구현하는 동적인 페이지 jinja2와 API ">
Jinja2는 웹개발을 위한 파이썬 프레임워크인 Flask에서 사용하는 템플릿 언어인데 그 템플릿이 되는 HTML문서에 데이터가 들어갈 곳을 '표시'해놓는 역할을 해. 서버에서 가져온 데이터를 여기에 끼워서 넣을거야라는 표시를 해주는 거지.
그리고 그렇게 구현된 HTML은 동적인 웹페이지라고 해. 그 외에 js에 api로 데이터를 넣어서 서버로 요청을 보내고 클라이언트 쪽 HTML을 완성해서 나타내주는 것도 동적인 웹페이지라고 하지. 동적인 웹페이지는 '한 페이지'에서 상황이나 요청에 따라 다른 모습을 보여줄 수 있지만 반대로 정적인 웹페이지는 뭔가 템플릿이 되는 HTML자체를 수정, 삭제 등을 해야해서 번거롭다는 게 있어. 동적인 웹페이지는 서버에서 바로 수정해줘도 되는데 말이야.
그렇게 하도록 돕는 jinja언어는 자바스크립트에 데이터를 넣어 서버를 보낼 때도 편해. 내가 느낀 바로는 그 외에도 따로 js문서갈 필요없이도 html body 안에서 조건문, 반복문을 통해 동작하게 만들 수 있다는게 정말 편했어. 점점 재미들려서 js에서 api 쓰기보다 body내에서 전부 해결하고 싶단 생각이 들더라. 근데 단점은 html에서 그렇게 막 쓰다 보면 html구성이 너무 지저분해질 것 같더라. ㅋㅋㅋ...근데 쓰는데 js에서 복잡하게 쓰는 걸 정말 간단하게 표현할 수도 있어서 이거 장단점도 모 아니면 도구나 싶었어.
새로운 기능을 공부해서 구현하기에 짧은 기간이어서 다른 사람은 몇은 로그인, 회원가입 몇은 jinja2로 렌더링한 동적웹페이지를 구현하도록해야하니 jinja2를 공부하는 등 기능별로 맡아서 공부하고 구현해내는 걸로 했지. 결국 내 db연결 부분도 문제가 생겨서 코드를 넘기기엔 시간이 별로 없어서 jinja로 나타내는 건 아주 조금밖에 안 들어갔어..그게 너무 아쉬웠고 도울 수가 없다는게 너무 슬펐지. 흑흑..그래도 jinja2라는 언어를 배워 구현하게 됐다는게 좋았어. 물론 로그인, 회원가입도 구현해볼 수 있었으면 좋았겠지만 말이야.
</DIV>
</SECTION>
<SECTION ID="로그인과 회원가입 ">
<DIV CLASS="JWT토큰(JSON wep Token) ">
제일 구현하고 싶었던 로그인과 회원가입이야. 구현은 잘 됐지만 나는 지식만 몇가지 전달해줄 수 있는 상태였고 코딩을 못 하는 상태였어. 그래서 이 부분은 정규표현식 부분과 jinja2를 익힌 부분들만 어떻게 원리가 돌아가는 지만 알려줄 수 있었어.
로그인에는 세션(session) 기반 인증이 있고 토큰 기반 인증이 있는데 가장 많이 쓰인 방법은 HTTP였어.
근데 누가 요청을 했는지 인증된 크라이언트인지 확인 할 수 없던 게 문제라 그래서 나온 방법이 서버로 클라이언트의
접속 상태를 저장하는 세션 기반의 인증이야.
토큰 기반의 인증은 토큰에 사용자 인증을 위한 정보를 담을 수 있어서 전달받은 토큰의 서명과 데이터로도 인증이 가능해. 사용자의 인증인 id와 password가 입력이 완료되면 서버가 해시함수로 사용자정보를 암호화한 비밀키, 공개/개인 키를 서명한 토큰을 클라이언트(HTML)쪽으로 전달해. 여기서 쓰는 토큰이 JWT라는 JSON wep Token이란 건데, 현재 토큰 인증에서 가장 많이 쓰이는 인터넷 표준이야. JWT는 앞서 말한 해시함수 말고도 헤더와 페이로드를 포함한 구조를 가지고 있어.
해시함수가 사용자정보를 암호화해준다면 페이로드는 그런 암호화된 정보를 담은 애고 헤더는 토큰의 타입을 작성하는 애고.
그리고 따로 사용자 정보를 입력할 때 규정해줘야하는데 그런 정규표현식도 서버와 클라이언트에서 이어줘. 이상하다 볼 수 있지만 정말 재밌는 부분이야. JWT를 익히는 것도 흥미로웠는데 정규표현식 설정해줄 때도 신기하고 재밌어. 그리고 구현된 걸 봤을 때 정말로 지구를 박살낼 정도지. 코드에 참여는 못 했지만 ㅠ케... 회원가입 정규표현식 설정해줄 때도 재밌는데 이 부분도 내가 참여할 수 없어서ㅠㅠ..한이 맺힌다 바들바들..개인 홈페이지를 짜고 있는데 그때 로그인, 회원가입도 구현해보려고. 그전까지 내 노트북이 멀쩡히 살아주면 좋겠다. 뿌에엥
</DIV>
</SECTION>
나머지 얘기는 2부에서 다룰거야. 1부보다 더 스펙타클해. 2부에선 Trouble shooting이랑 이어지게 될거야.
</DIV>
</BODY>