항해 99 5기 WIL_1

▶ Weekly I Learned (회고)

 

미니 프로젝트 (메인페이지 위주 담당)

 

: 4일간의 짧고 굵은 프로젝트였다. 처음 기획한 와이어 프레임에는 미치지 못하는 사이트를 구현해냈다. 비록 힘들기도 했고 자괴감도 들었지만 즐거웠다. 내가 고민하고 생각해서 기능과 틀을 짜고 그것을 실제로 사용할 수 있다니.. 이전에는 겪어보지 못한 새로운 경험이었다.

좋았던 것은 스스로의 개발실력 부족과 협업 능력 부족을 인지했다. 이후 프로젝트에는 내 업무를 어느정도 하면서도 팀원들의 업무에도 좀 더 관심을 갖고 도움을 줄 수 있도록 노력할 것이다. 또 상대가 말할 때는 좀 더 귀 기울여 듣고 전체적인 흐름이 어떻게 되는지를 고려해야겠다.

또한 소통을 명확히 하여야겠다. 구현할 때 무언가를 이렇게 하자고 말은 했지만 서로 다르게 받아들이는 경우도 있었다. 프론트를 예로 들자면 메인페이지 내 구성을 이렇게 하자고 했었지만 서로의 생각엔 버튼의 유무나 글의 위치, 페이지 효과가 달랐다. 처음에 의견을 제시할 때 확실하게 말하고 될 수 있다면 그림과 같은 시각적 자료를 동반해보아야겠다.

 

+ 미니 프로젝트를 할 땐 새롭게 알게 된 큰 개념들이 있다.

 

<Jinja2>

 

- 파이썬 템플릿 언어 (템플릿 엔진이라고도 하는 듯 하다.), 기존의 HTML에 서버쪽의 데이터를 집어넣어 새로운 HTML을 구성하게 해준다. SSR을 하는 것이다.

 

-사용형태-

{{파이썬 파일 내에서의 변수}}

{%파이썬 소스코드, 파이썬 코드를 html에서 사용할 수 있게 해준다%}

 

cf) 파이썬에서 코드를 작성할 때와 다른 부분이 있긴 하다. 예컨대 반복문을 쓸 때는 반복문이 끝나는 구간에 {% endfor %} 라는 구문을, if문에선 끝나는 구간에 {% endif %} 추가해준다.

파이썬 내에선 indented(tab키를 눌러 띄우는 것)로 구분이 가능했지만

html내에선 indented가 다른 의미를 가지기 때문에 저런 구문을 추가해주어야 한다.

 

ex)

{% set a = rows[0]['PeopleName'] %}

<p>Name: {{a}}</p>

 

html코드 상에서 a에 저렇게 {{}}를 씌우는 이유는 변수 선언을 파이썬에서 했기 때문!

({%%} 안에서 작성한 코드는 파이썬에서 작성한 것이나 다름없다!)

 

<JWT>

 

Json Web Token: JSON으로 된 객체를 이용하여 정보를 안정성있게 전달해주는 웹 표준 토큰,

인증에 필요한 값을 저장하고 있는 토큰이다. 쉽게 말하면 놀이동산에서 구매하면 주는 자유이용권 팔찌 같은 것이다

로그인 시 주로 사용하는 듯 하다.

 

여기서 페이로드라는 개념이 나오는 데 이는 전달해주는 데이터를 의미한다. 페이로드에 관한 자세한 설명은 아래 링크를 참조하면 좋다.

 

http://melonicedlatte.com/web/2020/01/14/205200.html

 

이번 로그인에 녹아들었던 JWT을 보자면 다음과 같다.

1) 서버 측에서 지정된 url, post방식으로 클라이언트 측 값을 받아온다.

2) utf-8형식의 해쉬코드로 비밀번호를 암호화 한다.

3) 해당 해쉬값을 가지고 DB내 동일한 해쉬값이 있다면 서버는 클라이언트에게 암호화된 JWT를 발급해준다.

 

 

<API> 

 

API(Application Programming Interface)는 쉽게 말해 은행창구의 직원과 같은 역할이다. 예를 들어 고객이 창구에 찾아와 출금 요청을 하면 직원은 금고에서 돈을 꺼내 고객에게 건네어 준다. 즉, 고객은 특정 데이터를 API를 통해 요청하고 API가 특정 DB에 요청하면 DB에서 는 데이터를 내어준다. 이는 API를 거쳐 고객에게 전달되는 것이다.

또 다른 예를 들어 서울 시의 공공데이터를 가져오고 싶다고 치자. 우리는 해당 데이터가 담긴 DB에 접근할 수는 없다. 그러나 그들이 API 제공해주면 그것을 통해 그 데이터를 불러올 수는 있는 것이다.

 

우리 프로젝트의 경우 post방식에 지정된 url이 일종의 api라 할 수 있겠다. 특정 url로 클라이언트의 요청을 받으면 그들에게 받은 데이터를 활용해 서버 측에서 DB와 소통을 한다. 이후 필요한 데이터(여기서는 JWT가 되겠다.)를 클라이언트에 넘겨준다. 

 

 

<알고리즘 기초>

 

: 프로그래머스 내 기초 수준의 알고리즘들을 주특기 언어인 자바스크립트로 구현했다. 현재 10문제를 소화했으며 문제를 풀 때 마다 사고력이 확장되는 기분이라 즐거웠다. 그렇게 느낄 수 있었던 것은 문제를 풀고 나서도 리팩토링 시도 및 문제 관련 개념 공부를 했기 때문이다. 단순한 문제라도 다각도에서 고민해보면 여러가지의 풀이가 나올 수 있었고 나의 풀이와 남의 풀이를 비교해보며 또 다른 시각을 얻을 수 있었다. 덧붙여 접한 적 없는 기능이 나오면 구글링해서 찾아보아고 해당 기능의 문법 및 활용법을 알게되거나 자바스크립트 자체의 속성에 대해 알 수 있었다.

실생활에서 접하게 되는 문제의 종류와 수는 무궁무진할 것이다. 정답엔 정해진 게 없고 해결책 역시 무수히 많을 텐데 이렇게 문제를 다각도로 접근해보는 연습은 분명 추후 효율적인 문제 해결에 도움이 될 것이다.

 

알고리즘에 대한 풀이과정과 모범답안, 그에 대한 나의 생각은 TIL에서 볼 수 있다.

 

▶ 해결해볼 문제

 

- 검색버튼 클릭 시 함수로 이동하여 검색:

function findingResult () {
    if (로그인 했을 시) {

        location.href = "게시글 페이지"
        $('#searching_word').text

        // match()같은 함수를 이용해 위 텍스트와 게시글 제목이 겹치는 부분이 있을 경우
        // 해당되는 게시글 모두 출력

    } else {
        alert('로그인 후 이용해주시기 바랍니다.')
        // 로그인 페이지로 리디렉션
        location.href = "로그인 페이지"
    }
}

 

해당 부분 구현할 시간이 없어 하지는 못했었다. 추후엔 검색에 대하여 공부해보며 구현해보고 싶다.

 

 

<AWS 서버 배포>

 

프로젝트를 실제 서버에 배포해야했고 팀원들 모두 서버를 배포해보기로 했다. 하지만 내가 서버에 배포해보고자 했을 때는 문제가 생겼다..

MongoDB야..왜 이러니..

IP도 알맞게 설정했고 app.py에서도 db의 주소를 알맞게 입력해주었다. AWS에서도 보안 내 설정을 편집해 사용할 5000번 포트도 열어두었다.. 인증방식에는 미리 다운받은 키체인을 사용하는 것으로 기억하는데 키체인도 작동되지 않고 연결도 되지 않아 참 난감했다. 서버도 분명 터미널 상에서 flask로 돌아가고 있었고...

다른 팀원 분들께 여쭤보니 다른 분들도 해결을 못해 AWS내 해당 인스턴스를 중지시키고 새로 발급받았다고 한다. 똑같은 절차를 다시 해보니 또 되었더라고... 이 부분도 꼭 해결해 볼 문제이다.

 

<미니프로젝트 서버배포 시 로그인 오작동>

 

로컬에서는 로그인이 잘 작동하지만 실제 배포 시 로그인이 잘 안되기도 하였다. 코드를 분석해 해결해 볼 필요가 있겠다.

 

 

<Reduce와 화살표 함수>

 

function solution(numbers) {
    let val = 1
    return 45 - numbers.reduce((acc,cur,i) => acc + val*numbers[i],0) 
}

하지만 아직 reduce의 구조상, 어떻게 저 i가 initial value가 되었는지 모르겠다..

reduce와 화살표 함수에 대해서 좀 더 공부하고 사용해보면 알 수 있을 것 같다!

 

 

▶ 공부 시 참고 링크들

 

https://brunch.co.kr/@operator/65

API란 무엇일까? API 쉽게 이해하기

 

https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/#:~:text=%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%80%20%EC%BD%94%EB%93%9C%EA%B0%80,%EA%B2%83%20%EA%B0%99%EC%9D%80%20%ED%98%84%EC%83%81%EC%9D%84%20%EB%A7%90%ED%95%9C%EB%8B%A4.&text=%EC%BD%94%EB%93%9C%20%EC%8B%A4%ED%96%89%20%EC%A0%84%20%EC%9D%B4%EB%AF%B8%20%EB%B3%80%EC%88%98,%EB%82%98%EC%99%80%EB%8F%84%20%EC%98%A4%EB%A5%98%20%EC%97%86%EC%9D%B4%20%EB%8F%99%EC%9E%91%ED%95%9C%EB%8B%A4.

[JavaScript] 호이스팅(Hoisting)이란? - 하나몬