[WIL | 항해99] 1주차 회고

😊첫 오티에서 배운 내용 

 

포트폴리오
실전 메인1개 서브 1개(옵션) -> 프로젝트 흥행보다는 기술이 중요

프로젝트를 만들 때는 핵심기능 우선 구현 기본이 되는 것을 먼저 구현하는 것이 중요하다. 

 

자소서 -> 내가 개발을 좋아하는 사람이라는 것을 어필해야 한다.

 

프로젝트를 다 만들고 나서 수정사항 확인// 한 번 프로젝트를 완성하고 나면 사용자가 직접 사용하면서 수정할 것이 많이 나옴 

 

어떤 프로그램을 썼다면 해당 프로그램을 왜 썼는 지에 대해 설명할 수 있어야 한다. 

Q. 몽고DB를 사용한 이유가 뭔가요?

A. 그냥 이걸 배워서요..?(X) 

몽고DB는 NoSQL(Non Relational Operation Database SQL)로 관계형 데이터베이스가 아닌 SQL으로 JSON타입(정확히는 JSON과 유사한)의 Document방식을 쓰고 있습니다. Document 기반 데이터 베이스는 자유로운 데이터 구조를 잡을 수 있으며 시간에 따라 데이터 구조를 변경할 수도 있다는 점이 장점입니다. 제가 만든 프로젝트는 토이 프로젝트로 처리해야할 데이터의 양이 적고 DB에 저장할 내용이 변경되는 경우가 빈번했기 때문에 몽고디비를 채택하게 됐습니다. 무엇보다 오픈 소스라는 점과 데이터를 JSON형태로 저장이 가능해서 직관적이고 개발이 편리하다는 점에서 몽고디비를 선택하게 됐습니다. (O)//앞에 몽고DB 설명 빼도 됨 +a(대안책(e.g. mySQL)으론 어떤 게 있었지만 이걸 채택한 타당성에 대한 설명)

 

공부할 때는 강의에 집착하지 말기(모든 강의를 하나부터 끝까지 보고 이걸 다 습득하겠어 X), 내가 필요한 정보를 위주로 '참고'하며 공부하는 것이다. 프로그래밍을 공부하다보면 코드를 보고 배경지식이나 해당 코드에 나온 전문용어 등 내가 모르는 개념이 나왔을 때, 그것을 이해하겠다고 샛길로 빠지는 경우가 많습니다. 이걸 해외에서는 '앨리스의 토끼굴에 빠지는 것'이라고 하는데 저는 이전에 이런 경우가 아주 많았고 지금도 종종 삽질을 하곤 합니다. 이미 시간을 2-3시간 버리고 난 뒤에 "아 지금 이 개념은 굳이 필요없을 거 같은데..?" 라는 생각이 들곤 하더라구요. 결국 모든 것은 조바심과 불안함 때문에 그런 거 같습니다. 또한, 경험이 부족한 것일수도 있지요. 특히 전공지식이 없고 해당 분야에 뛰어든지 얼마 안된 비전공자라면 이 개념이 지금 필요한 지 아닌지에 대한 객관적인 판단이 안됩니다. 제가 그랬고 앞으로도 그럴 것입니다. 그렇지만 최소한 같이 공부하고 의논할 사람이 있다면 시간 낭비를 막아줄 수 있겠죠. 혼자서 공부한다는 것은 참 외롭고 어려운 일인 것을 새삼스럽게 또 느낍니다. 

---

🐱‍👤미니프로젝트를 하면서 ~ 

저희는 미니프로젝트에서 웹서버구현을 파이썬 flask를 사용해서 만들었습니다.  또한 데이터 베이스는 mongoDB Atlas를 사용해서 클라우드 환경에 DB를 구축했습니다. 클라우드 환경에서 DB를 구축하면 내 컴퓨터의 자원을 소모하지 않고 빌려온 원격 DB를 통해서 데이터를 관리할 수 있습니다. 

이전에 mySQL을 잠깐 해본 적이 있었는데 그 때는 SQL문법을 사용해야 했고 데이터 테이블을 미리 엄격하게 작성해야했기 때문에 머리가 참 아팠습니다. 몽고디비는 그런 점에 있어서 상대적으로 쉽게 다가왔습니다. 빠른 시간안에 데이터베이스를 만들어서 내 프로젝트에 적용해야 했기 때문에 mySQL을 사용했더라면 익히는 것에만 시간이 엄청 들었을 거 같네요.. 선수지식없이 맨 몸으로 던져졌다면 벌써 탈주닌자가 됐겠죠?

파이썬의 경우는 프로그래밍 언어로는 유명하기도 하고 상대적으로 쉬운 문법을 가지고 있기 때문에 사용하는데 큰 무리는 없었습니다. (물론 깊게 파보면 엄청나게 어렵다고 하더라구요..?) 무엇보다 직관적이라는 언어라는 게 무슨 소리인지 사용하면서 이해하게 됐습니다. 파이썬 보단 jinja2 템플릿을 사용할 때 난관에 봉착했습니다. 

jinja2 is a templating engine for Python. 

진자2는 파이썬의 템플릿 엔진이고... 그러면 템플릿 엔진은 뭐야..? 찾아보니 template(문서원형)과 data model을 혼합하여, 새로운 document를 만드는 것이라고 하네요. 결국 jinja2는 어떤 파일, 실재하는 파일에 어떤 변수들을 서버에서 받아와 약간 변경시켜 html로 만들어주는 엔진 같은 것이라고 저는 이해했습니다. 또한 파이썬을 html에서 쓸 수 있게 만들어주는..? 템플릿 이라고 이해하기도 했는데요. 렌더링할 때 jinja 문법을 사용하면 서버사이드 렌더링이 가능하다고 하더라구요? 무슨 소리인지 아직까지 긴가민가합니다. 서버사이드 렌더링에 대해서 공부해볼 필요가 있겠습니다. 결국은 jinja2 템플릿을 사용하지 못하고 그냥 해당 페이지에서 다른 데이터를 받아오는 함수를 5개인가 만들었습니다. 같은 작업을 반복하지 말라고 서버사이드 렌더링을 적용해보라 한 거 같은데 x같이 멸망한 결과.... 그렇지만 저는 좋았습니다. 서버쪽도 만들어 보고 공부해보고 사용해본 것이 좋았거든요(결론적으론 제대로 구현하지 못했지만..).   

-> 하지만 난 클라이언트 사이드 렌더링을 하는 쪽이니 우선 이 부분을 따로 깊게 파서 공부하진 않을 것 매니저님도 js나 리액트를 더 공부하라고 하셨음

---

아래는 진자2를 사용하면서 간단하게 메모했던 내용들인데요. ajax와 비교하는 내용도 있으니 참고만 하시면 될 거같습니다. (제 정신일 때 메모해뒀던 게 아니라.. )

 진자2 = 서버 사이드 렌더링 , ajax = 클라이언트 사이드 렌더링 이라고 생각하는데 혹시 틀린 점이 있다면 댓글 부탁드립니다.  

 

참고로 사용한 IDE는 파이참 입니다. (VScode 쓰고싶어서 죽을 뻔함) 

 

🤦‍♂️진자2관련 메모들

jinja2의 경우, html에 서버에서 렌더받은 데이터를 삽입해줄 때 키값을 ['key'] 매번 이럴 필요없이 
객체 처럼 2번째 줄처럼 쓸 수 있다 
 1) <h1 id="word" style="display: inline;">{{ result['word'] }}</h1>
 2) <h1 id="word" style="display: inline;">{{ result.word }}</h1> 
 jinja2의 경우는 바로 바뀌는 내용만 변하고 기본 있던css틀은 리로드 되지않기 때문에 내용만 바뀌는 컨텐츠에 
사용하면 좋다 ajax와 차이점이기도함 ajax는 값을 가져와서 새로운 temp_html을 만들어서 붙여줬기 때문에 
jinja2는 그냥 값을 html코드에 직접 박아버리면 됨(temp_html 만들어서 .append()필요없음 ${}이거를 직접 안에 넣어버리는 것처럼)

 

if나  for문을 진자2문법으로 쓰게되면 파이썬의 경우 탭으로 해당 블록을 구분했으나 얘는 모르기 때문에 end포인트도 적어줘야 한다.
또한, != None 즉 true일때는 해당코드를 실행하라는 명령으로 유효성검사를 할 수 있는데 
1) {% if resutl.pronunciation != None %} 얘는 무슨 의미인지 확실하지만 코드가 길고 
2) {% if resutl.pronunciation %} 얘는 코드가 짧고 들어오는 값이 유효하면 true라서 똑같은 기능을 한다. 
 <h5 id="pronunciation" style="display: inline;">/{{ result.pronunciation }}/</h5>
 {%  endif %}

 

ajax랑 jinja2 또 차이점 
진자2는 html태그가 데이터에 담아져서 들어오면 무시해버림 그래서 걍 데이터가 <b>good</b> 이런 식으로 풀로 출력됨
이것도 예외처리를 해줘야함
예외처리 개간단  <span class="example">{{ definition.example|safe }}</span> 넣어주는 곳에 |safe를 같이 쓰면 됨 
뜻은 html태그가 데이터에 같이 담겨있어도 걔는 그 코드대로 진행시켜도돼 안전한 css 기능을 하는 코드야 하고 알려주는 것 

 

jinja2 데이터넣을 때
예외처리 2 
특수문자처럼 단어가 깨진 경우 이걸 어떻게 처리하는 법(이거 좀 길다..) 
<span class="example">{{ definition.example.encode('ascii', 'ignore').decode('utf-8')|safe }}</span>

코드 설명: .encode('ascii', 'ignore').decode('utf-8') // 앞의 데이터(문자열)를 ascii코드로 인코딩할 수 있나확인하는 것 만약에 안되는 애들은 ignore무시해줭(안 바뀌는 애들 버림) 그리고 다시 utf-8(문자열)로 바꿔주삼 이라는 뜻

 

파이참 jinja2쓸 때 진자2문법은 다른 색으로 표시하는 기능-> setting-> 언어 및 프레임워크 -> 템플릿 언어 -> None에서 jinja2

{{ rows[0]["IDEX_MVL"]|int }}
jinja2에서 | (백슬래쉬 + shift = 파이프라고 부르는 특문)랑 int를 쓰면 해당 정보를 정수(원래 실수였음)로 바꿔줌 

 

jinja2 템플릿은 html에서만 작동하기 때문에 .css파일로 html으로부터 따로 빠지면 쓸 수 없다. 
html파일의 헤더에 <style>태그 내부에 css를 진자 템플릿문법으로 쓸 때는 적용가능, or html 전체에서 진자템플릿을 다른 파일로 분리만 안하면 사용가능함 

---

🤦‍♂️네이버 영화 검색 api 

예.. 해당 내용을 뽑아와서 사용해보고 싶었습니다만 결국 이것도 x같이 멸망했습니다. 왜냐구요? 검색기능을 통해서 데이터를 뽑아오는 형식이었기 때문에 하나의 검색어로 여러개의 데이터를 가져오는 것은 가능하지만 최신 영화 20개 이렇게는 어떻게 뽑아와야 할 지 쿼리문(query parameter)을 쓸 수 없었기 때문입니다. 되는 지도 모르겠지만.. 아래를 보면 검색을 원하는 질의가 필수라서..(엇 혹시 '최신'으로하면 뽑히려나?;)  거의 4시간 이상을 삽질했지만 안된다 라는 결론만 나고 사용하지 못한 api입니다. 어떻게 하는 지 아시는 분은 댓글 달아주세요..^ ^..

---

😊프론트단 만들면서 메모해뒀던 것들( tips )

 

공통 CSS 적용시 유의 사항
참고사항: static 폴더 내에 있는 css파일이 적용 안될 때(static폴더 내부 파일들 변경사항이 생겼을 때임)-> 
이유 - 브라우저에서 static폴더 내부의 파일을 캐시로 저장해놓음 (옛날 정보를 읽어오기 때문에 적용이 잘 안될때가 있음
크롬(브라우저)에서 ctrl + shift + r 단축키로 캐시 무시하고 싹 다 새로 긁어오라는 명령 주면 됨

제이쿼리 js는 부트스트랩보다 먼저 불려와야 함 --> 아니라면 오류발생 브라우저에서 에러 알려줌 ㄱㅊ
순서: 1 제이쿼리 -> 2 Popper.js(이게뭐임)?-> 3부트스트랩(js + css) 


폰트 어썸 
폰트어썸의 사용방식이 변경됨 CDN처럼 쓰는게 아니라 토큰을 이메일로 발급받아서 그걸 넣어서 써야함
<script src="내토큰" crossorigin="anonymous"></script> 

서버하다가 프론트구현하니까 이제보니 선녀같다.

---

😊github desktop에서 sourcetree로 넘어왔다 

이전에 sourcetree를 git이나 github에 대한 이해없이 무작정 사용했다가 패망했던 적이 있다. 그때도 그룹프로젝트용으로 올리는 거였는데.. 전반적으로 무슨 소리인 지 제대로 이해하지 못하고 유투브에서 보이는 대로 따라하다 보니 당연히 망할만 했다. 프로젝트를 진행하면서 sourcetree 극혐병이 나았다. 우선 항해99에서는 관련 강의를 제공해준다. 어떤 사람은 그냥 유투브 대충보고 따라하면되지 굳이 강의를 봐야하나? 싶을 수도 있는데 나는 매우 도움됐다고 생각함 아직 팀프로젝트를 하면서 병합 충돌(merge conflict)을 겪어보진 못했지만 강의에는 해당 문제를 해결하는 방법에 대해서도 알려준다. 전에 팀플을 하면 병합 충돌이 가장 무서웠는데 사실상 의미를 보면 그렇게 무서운 것도 아니다. 하지만 큰 프로젝트라면 말이 달라지겠지.^^^  

---

😊느낀점

 

마지막으로 아직까진 너무 좋다. 아무래도 돈을 내고 와서 그런지 다들 열심히하려는 게 느껴진다. 누가 더 잘하고 못하고는 중요하지 않다고 생각한다.(물론 잘하는 분이 있으면 ㄳ) 태도가 중요하다고 생각하고.. 결국 그런 태도가 꾸준해지면 그 사람은 잘하게 될거다. 무엇보다 팀으로 뭔가 같이한다는 게 좋다(전제: 다들 착해야 됨, 대답은 신속하게 ). 물론 커뮤니케이션을 할 때 마찰도 있을 것이고 불편한 점도 생기겠지만 그런 것도 다 훈련의 일종이라고 생각한다. 왜냐면 내가 이번 팀플을 하면서 내 문제를 파악했기 때문이다. 내가 어떻게 했을 때 더 좋은 분위기를 만들고 다같이 좋은 방향으로 나아갈 수 있을까에 대해서 생각해보게 된다. 그리고 무엇보다 같이 의논하게 되면 내가 어떤 개념이 부족한지 빠르게 파악할 수 있는 기회가 생긴다. 플젝하면서 난 정말 전체적인 흐름마저도 이해하지 못하고 있었구나 라는 걸 많이 느꼈다. 그래도 희미하던 것들이 조금씩 선명해지는 거 같아서 기분이 좋다. 운동을 꾸준히 해야지^^