15 TIL(?)

김성연·2022년 1월 1일
0

@ I Learned

목록 보기
17/18

다른사람의 생각을 이해하는 것, 그것이 문제면서 답이다.

이번 인스타그램 클론코딩 팀프로젝트를 진행하면서, 가장 어려운 부분이 "다른사람의 생각을 이해하는 것" 인것 같다. 기능을 구현함에 있어서, 방법은 다양하게 존재하기에, 기능 구현이 내가 생각한 방법으로 이루어지지 않는다는 것을 느꼈다.(새롭게 알게되는 부분이 더 많은것이 함정)

회원가입 페이지의 마무리

내부 기능까지 모두 완료한상태의 모습

이메일, 비밀번호 정규표현식

지난 튜터님께 받은 피드백을 바탕으로, 비밀번호는 정규표현식을 통해, 영문, 숫자, 특수문자를 포함한 8~20자의 비밀번호로 구성할 수 있도록 만들었다.

패스워드 정규표현식

function is_password(asValue) {
            var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/;
            return regExp.test(asValue);
        }

원래는 패스워드 확인 버튼이 존재했었는데, 팀원분의 가입버튼을 눌렀을 때 확인하는 것으로 만들어달라는 요청에 의해 가입버튼을 누르면 비밀번호를 확인하는 기능을 가입버튼에 추가하였다.

비밀번호 외에도 다른 항목들의 확인이 필요할 것이라 생각하여, 이메일 정규표현식을 통한 이메일 확인, 그리고 다른 항목들의 빈공간으로 제출하지는 않았는지에 대한 확인기능 또한 가입버튼에 추가하였다.

이메일 정규표현식

function email_check(email) {
            var reg = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
            return reg.test(email);
        }


이를 활용한 check_id()

email 입력값을 가져와 서버와 통신을 통해 이메일 입력확인, 이메일 중복확인을 하였다.

나는 서버 담당팀원분의 코드를 보기 전까지는, 이메일을 중복여부를 확인할 때, 서버에 get요청을 하여 정보를 받아와 비교를 할것이라 생각했다. 굳이 이렇게 하는 것보다, 이메일 값을 받아, db로 부터 이 이메일이 있는지 여부를 확인하고 결과를 반환해주는 것이 훨씬 효율적이고 좋다는 것을 알게되었다. 그리고 email_num_check변수는 초기값은 0으로 설정하여, 이메일 중복확인을 한다면, 숫자가 증가하게 만들었다.(이 후, 가입버튼을 눌렀을 때, 이메일 중복확인 여부를 확인하는데 사용하였다.)

그리하여 완성된 가입 버튼

이 조건들을 모두 통과해야 가입을 할 수있다.

사실 내가 작성하였지만, 이게 최선의 방법이라는 생각이 들지않는다..

분명 여기서 좀 더 줄이고 간결하게 코드를 작성할 방법이 있는 것같은데 말이야...

하지만 아직까지는 내 혼자힘으로는 여기까지가 최선인 것 같다...

이 후, 나는 메인페이지의 피드를 담당했다.

우리의 메인페이지 모습

우리 조는, 이전 개인 실습으로 만들었던 모바일버전 인스타그램의 틀을 활용하였다.(하단 nav bar만 간단히 손을보고 만들었다.)

피드부분의 게시글에 필요한 정보들을 db에서 가져와 손보는 일은 어렵지 않았다.

정보를 가져오는 방법에 대하여 서버 담당팀원분을 통해 좀 더 많은 것을 알게 되었다.

당연히 나는 이번에도 get방법을 통하여 모든 정보를 가져오고, 피드를 업데이트 할 계획이었다. 하지만 팀원이 말한 방법은 get이 아닌 post방식이었다. 나는 이것이 잘못된것이라 생각했는데, 이야기를 들어보니 팀원의 아이디어가 정말 좋은 방법이라는 생각이 들었다.

"게시글은 5개씩만 가져올거에요."

나는 이게 무슨말인가 싶었다.

"아니 게시글을 왜 5개씩만 가져온다는거지? 그냥 한번에 다가져오면 되잖아"

그래서 물어봤다. 왜 5개씩만 가져오시려고 하는건지 궁금해서 물어봤다. 이야기를 듣고선, 정말 새로웠다.

"만약 100명의사용자가 동시에 접속을 하고, 100개의 게시글이 있다면, 서버는..."

여기까지 듣고, 아차 싶었다. 아니 이런생각을 어떻게 한 것인지에서부터 왜 저 생각을 못했지?하며 부끄러워지는 내 자신을 볼 수 있었다.

그렇게 나는 코드를 작성하였다.

완성된 show_post()

show_post()를 작성하면서, 나의 시간을 잡아먹은 녀석들은,

1.포스팅 타임(@@시간 전)

나는 처음에는 일, 시간, 분, 초 단위까지 하려고 했으나, 다른 할일도 많고.. 일단위로 넘어가니 고려해야할 부분이 너무 많아져서, 시간, 분까지만 고려하였다.(다 변명이지 뭐)
나는 js를 공부를 깊게 해보지 않았다. 지식의 부족으로 시간을 정말 어이없게 소모하였다.

문자열로 바꾸는 함수 String(), 정수형으로 바꾸는 Number()

나는 파이썬만 공부를 했었기에, 당연히 str()을 사용하는 줄 알았다. 그래서 str을 사용했는데 정의되지 않았다는 말만 나오더라고..? 그래서 찾아보니 String()이라 하더라 ^^.. 무식하면 몸이고생한다더니 정말이다. 뿐만아니라 정수로 바꿔주는 함수를 나는 int()라 생각했는데(어림도없지) 당연히 안되고 이번엔 바로 찾아봐서 Number()를 알게되었다.(앞으로는 생각을 하면, 한번 찾아보고 해야겠다..)

2. 좋아요 기능구현

사실 이 부분은 그리 어렵지 않았다.(내 생각대로라면) 하지만, 이전 서버 담당팀원이 요구한 내용이 있어서, 그 부분으로 구현하는 방법을 모르겠어서, 일단 임시로 만들었다. 그런데 임시로 만드는데에도, 시간을 뺏기는 일이 생겼다.

Number(7,485)

나는 이것이 왜 오류가 발생하는지 이해를 못했다. 하지만, 너무나 당연하잖아? 숫자만 있는 문자열에서만 숫자로 변형이 가능하지, 숫자 사이에 문자열이 존재하면 이것을 변형 할 수가 없다.(눈이 침침해서 ","가 안보였던 것이라고 생각한....ㄷ) 그래서 처음에는 이를 해결하기 위해 좋아요 숫자에 ","를 없애버렸다^^.(확실한 원인제거)

하지만 이렇게하니깐 숫자가 잘 안읽혀서 결국엔 방법을 생각해보다가,

" ','를 만들고, ','를 제거하는 법 "

을 생각하게 되었다. 검색해보니 역시 다른사람들도 나랑 똑같은 생각을 했나보다. 바로 정보를 찾아보고 해결책을 얻을 수 있었다.

","만들기

","를 세자리 마다 만드는 것은 반복문을 통해 만들 수 있다. 하지만 뭔가 느낌이 오지않는가,

정규표현식이 분명 있을 것같은데...

역시나 있다.

3자리 마다 ","만들기_정규표현식

 function numberWithCommas(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }

이제 만드는것은 해결했으니, 제거하는 방법을 생각해봤다.
"','를 기준으로 자르고, 다시 붙이면 되겠는데?"
바로 저 생각이 들어 배웠던 split(), join()을 활용하였다.

임시로 완성된 temp_like_up_down()

split과, join을 활용하여 먼저 ','를 제거하여 값을 수정하고, 이를 다시 정규표현식을 통해 ','를 생성해 주었다.

이제 마감일까지 2일남았는데, 마감일까지 모두 마치고, 프로젝트 발표까지 할 수 있을 것 같다.

(이게 설마 플래그가 되진않겠지?)

내일은 다른 수정부분들을 수정 & 보완해야겠다. 다른 팀원분의 내가 작성한 부분의 main.html수정을 보았는데, 처음 보는 것이여서 이해해보고 적용시켜볼 수 있도록 해야겠다. 아 그리고 git 진짜 제발 충돌, 날라감 등 문제좀 안생겼으면 좋겠다.. 원인도 모르게 자꾸 문제생기는데 무서워서 뭐 쓸 수 있겠나...(커밋날라갈 때, 내가 작성했던 모든 파일이 날라갈 때, 아주 짜릿하다)

0개의 댓글