항해 99 5기 TIL_4

▶ Today I Learned

<css>

프로젝트 시 메인 페이지 하단에 카드들을 배치하려 했다. 이를 깔끔히 정렬하기 위해

아래와 같이 코드를 작성하였다.

 

.posting-card {
    width: 350px;
    height: 600px;
    border-radius: 1rem;
}

.post-box {
    /* 쇼핑몰 상세페이지 처럼 글의 일부만 보이는 css, 그라데이션 효과 삽입*/
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
    margin: auto;
    align-items: start;
}

grid라는 말 답게 격자 형태로 담겨졌다. 문제는 보기에 깔끔하긴 하지만 카드들이 사이트를 기준으로 중앙 정렬이 되진 않았다는 것이다. 이를 구현하기 위해 수많은 css블로그들, MDN 사이트, grid 사이트를 뒤져보았지만 원하는 대로 구현되지 않았다. 나중엔 grid를 지우고 display: block;

margin: auto;

float: left

와 같은 코드들을 사용해 적용해보았지만 이들 모두 왼쪽으로 정렬되었다. 간혹 중앙 정렬이 되는 코드를 찾아도 이번엔 카드의 길이가 뒤죽박죽이었다. 계속해서 찾아본다면 해결할 수 있겠지만 당장 다른 기능과 사용자 표시등의 뼈대를 만들어야 하는 입장이었기에 그럴 순 없었다. 지금 당장은 우선순위를 뒤로 미루어 두었다.

 

<AWS 서버 배포>

 

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

MongoDB야..왜 이러니..

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

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

 

추후에 분명 서버를 돌릴 일이 있을 것이다.

 

<로그인 기능>

 

강의를 대략적으로 수강하면서 어렴풋이 알고는 있었지만 오늘 한번 더 돌아보게 된 코드이다.

간략히 보자면 로그인을 하며 클라이언트 사이드에서는 사용자가 입력한 값을 ajax콜을 이용해 넘겨준다. 서버 측에서 성공적으로 처리되면 값이 response로 반환된다. 그 중 필요한 값을 필요한 양식에 맞게 가공한다. 여기선 mytoken이라는 쿠키 값에 reponse라는 dictionary값 중 token이라는 키의 값을 대입해준다. 그렇게 mytoken이라는 쿠키가 생기게 된다. 쿠키는 브라우저에 적용되는 것으로 사이트를 이동해도 브라우저가 같다면 해당 값이 적용되는 것이다. 그래서 다른 브라우저에서 같은 페이지에 들어가게 되면 로그인이 적용되지 않는 것이다.

 

동일한 매핑(url, post) 으로 클라이언트 측 값을 받아온다. 로그인을 할 때는 보통 암호화 과정을 거치는 데 여기엔 정해진 양식이 있다. 코드는 복잡해 보이지만 utf-8형식의 해쉬코드로 비밀번호를 암호화 한다. 해당 해쉬값을 가지고 DB내 동일한 해쉬값이 있다면 서버는 클라이언트에게 JWT를 발급해준다. JWT는 Json Web Token으로써 인증에 필요한 값을 저장하고 있는 토큰이다. 쉽게 말하면 놀이동산에서 구매하면 주는 자유이용권 팔찌 같은 것이다. 값이 있다면 JWT라는 암호화 된 토큰을 클라이언트에 발급해준다. 추후 복호화를 할 때 payload에 담긴 Secret Key로 복호화를 한다. 

 

+ 해당 코드는 잘 짜여져 있다고 생각했고 로컬 환경에서는 분명 잘 작동되었다. 하지만 서버를 다른 분께서 ec2로 배포하니 이상하게 로그인이 잘 작동하지 않았다. 어떨 때는 로그인이 바로 되고 어쩔 때는 두번을 눌러야 작동되기도 했다. 결국 프로젝트 마감시간 까지 해당 기능을 구현해내지 못했다. 사실 여기엔 무수히 많은 원인이 있어서 아직까지 원인을 파악하진 못했다. 하지만 CS에 대해서 좀 더 공부하고 사이트를 배포하며 부딪히다보면 가능성 있는 원인들을 보게 되지 않을까 생각한다..!

 

 

<이미지를 사이트에 배포하는 방식>

 

서버에 배포 전, 메인화면 내 이미지를 삽입하고 싶었고 우리는 스태틱 폴더에 사진을 넣고 난 뒤 서버를 배포했다. 문제는 서버가 굉장히 느려졌다는 것이다. 이는 알고 보니 해당 이미지 파일을 서버에 직접 올린 것이 원인이었다. 파일을 직접 올리게 되면 서버가 요청을 받을 때마다 파일자체를 클라이언트에 보내주어야 하는데 당연히 느릴 수 밖에 없다. 그래서 보통은 클라우드나 다른 저장소에 이미지 파일을 올려놓고 이미지 주소만을 가져와 클라이언트에 붙여놓는다. 그러면 훨씬 빠르게 로딩되는 것이었다.

 

어쩐지 과거에 쇼핑몰 회사에서 일할 때 이미지를 디스크엔 같은 곳에 올리고 코드를 받아오더라..

 

 

▶ 느낀 점

4일간의 미니 프로젝트를 진행하는 것이 정말 큰 도움이 되었다. 신경써야할 게 너무 많았고 강의자료든 구글링한 자료든 소화하기에 벅차기도 했다. 나중엔 패닉이 와서 난 왜 이해를 못할까하며 자괴감에 빠지기도 했다. 하지만 열심히 함께 해주시던 팀원 분들을 보며 나도 힘을 얻었고 조금이나마 보탬이 될 수 있도록 노력했다. 이렇게 부딪혀보고 문제들을 해결해나가면 분명 도움이 될 것이다.

 

개발적으로도 부족했지만 사실 더 크게 느낀 건 소통과 협업 능력의 부족이었다. 기능과 뼈대 중 무엇을 먼저 위주로 할지 논의하여 뼈대를 선정했지만 사실 어느 수준까지 뼈대를 먼저해야하는 지 모호했던 것 같다. 아직 아는 것이 많지 않아 우선순위를 팀원 분들과 다르게 매겼고 덕분에 팀원분들 께선 우선순위가 무엇인지 몇 번 짚어주셨다. 팀원 분들과 소통 시 충분히 소통을 하고 하시는 말씀을 귀담아 들었다면 없었을 문제라고 생각한다. (물론 개발지식이 부족해 우선순위를 제대로 세우지 못한 탓도 있다고 본다.)

또한 적극적으로 다른 분들을 돕지 못했다. 삽질을 많이 하다보니 시간을 많이 빼앗겼다. 그렇다고 내가 맡은 바 책임을 다하지 않을 수 없어서 매달렸고 그러다보니 틈틈이 다른 팀원 분들이 서로 도울 때 자주 도와드리지 못했다. 하지만 다른 팀원 분들 께서는 본인의 업무도 하시면서 적절히 도움을 제공해주셨다. 나 또한 좀 더 적극적으로 도움을 제공할 수 있도록 신경써야겠다.

 

지식면으로나 소통면으로 아직 부족한 점이 많은 것 같다. 하지만 이렇게 무엇을 개선하면 좋을 지 되짚어보며 나아가다 보면 분명 좋아질 것이다. 공부도 많이 해서 실력도 늘린다면 효율이 늘어나 주위를 돌아볼 여유도 생길 것이라 믿는다. 그러니 앞으로도, 더더욱이 열심히 살아보자. 화이팅이다 :)

 

cf) 변수 및 주석 정리는 매우 중요하다..! 협업하며 코드를 수합하다보면 상황에 맞지 않은 변수명을 맞닥뜨릴 때가 있다. 아무래도 직관적이지 않다보니 이해할 때 시간이 더 걸린다. 또 코드를 여러줄 볼 때 옆에 설명이 있다면 이해가 훨씬 빨랐다.

코드는 모두가 보는 것이니 이제는 누가봐도 이해할 수 있게 구성하는 것이 더욱 중요하다는 것을 느꼈다.

개발자들이 변수를 꽤나 고민하기도 한다는 말이 이제야 더욱 이해가 간다. 앞으로는 더 직관적이고 쉽게 잘 짜보아야지.

 

함께하며 여러모로 배울 수 있었다. 팀원 분들에게 감사의 인사를 전한다.

 

▶ 공부 시 참고 링크들

SSR vs CSR

https://oneroomtable.tistory.com/entry/%EC%84%9C%EB%B2%84-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EA%B3%BC-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C-%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

서버 사이드 렌더링과 클라이언트 사이드 렌더링이란 무엇인가요?