WIL 22-44

프로젝트의 끝

약 4일의 짧은 기간동안 토이 프로젝트가 끝이나고 아쉬웠던점을 정리 해 보고자 한다.

1. alert

alert는 안이쁘다. 그리고 불편하다. 그래서 바꾸고자 하였다.

기존 코드

     function editCommentSubmit() {
       let name = $('.modal-name').val();
       let text = $('.modal-text').val();
       let _id = $('.edit-comment-button').attr('id');
       $.ajax({
         type: 'PATCH',
         url: '/jeongik/patch',
         data: { name: name, text: text, _id: _id },
         success: function (response) {
           alert(response['msg']);
           window.location.reload();
         },
       });
     }

적당히 얼럿 날려주고 페이지를 리로드 해주었습니다.
ajax를 사용하는 의미가 사실 없어집니다. 이쁘게 바꿨습니다.

     function editCommentSubmit() {
       let name = $('.modal-name').val();
       let text = $('.modal-text').val();
       let _id = $('.edit-comment-button').attr('id');
       $.ajax({
         type: 'PATCH',
         url: '/jeongik/patch',
         data: { name: name, text: text, _id: _id },
         success: function (response) {
           commentLoading();
           alert(response.msg, 'success');
         },
       });
     }

기존에 만들어둔 메세지를 읽어오는 get요청 함수인 commentLoading를 사용해 페이지를 로딩하는게 아니라 DOM으로 HTML내 요소만 갈아끼워주게 바꾸었습니다.
얼럿은 부트스트랩에서 고대로 가져와 약간의 수정만 거쳐 작성했습니다.

2. 아직 못다한 변경들

1) 반응형 구현

부트스트랩으로 반응형을 구현할거면 아예 새로 짜는게 더 빠를것 같다.
아니면 하나하나 CSS에 미디어쿼리를 적용하는 방법도 있겠다.
시간이 오래 걸릴 것 같아 일단 미뤄둔다.

2) db구조 개선

사실 이게 더 효율적인가? 에 대한 고민을 해봐야 할 것 같다.
각 라우터에 상세페이지에 대한 이름이 연결되어 있으니, url에서 따와 post요청을 날릴 때 벨류값을 엮어주면 되지 않을까 싶다.
콜렉션을 늘리는게 비효율적인지, 키-벨류 페어를 하나 늘려 로직 한줄 늘어나는게 더 비효율적인지는 비교를 해 봐야 하지 않을까 싶다.
아무래도 구조를 개선하면,

const jeongikComment = db.comments.find({target: jeongik})
//이후 json으로 파싱 후 클라이언트 전달

이 되게 될텐데, db를 한바퀴 더 돌아야되니,,, db의 양이 많아지면 오히러 비효율 적일수도 있겠다는 생각이 든다.

3) 반복되는 코드 개선

각 html 파트들을 컴포넌트화 시키면 되는데, 사실 리엑트가 아닌 상황에서 ejs등으로 처리하는게 더 효율적일까? 라는 고민이 든다. 공부를 더 해봐야 할 것 같다.

3. 사이드 프로젝트

진행사항

약 3주전부터 친구와 함께 진행하던 사이드프로젝트를 이런 저런 이유덕에 미뤄두다, 주말에 잠깐 다시 진행을 했다.
4시간정도 하며
본인 -> (리엑트) 클라이언트측 로그인 구현
친구 -> (노드) 서버측 로그인 구현
을 진행했고, 페어프로그래밍 형태로 진행하였다.
진행 중 가장 시간을 많이 잡아 먹었던 구문은

  const navigate = useNavigate();

왜 많이 잡아먹었는가? 훅에대한 기본이 없기 때문이였다.
네비게이트 훅을 사용하기위해 컴포넌트를 리턴하는 함수속 네비게이트를 사용할 함수속에 훅을 정의하였는데 에러가 났다.
리엑트 사용법이 아직 익숙하지 않아 아주 기초적인 실수를 한 것이다.
어찌어찌 해결은 하였지만.... 찝찝하다.
지금 진행하고 있는 커리큘럼에서 훅에 관한 강의도 듣게 될텐데, 그때 좀 더 신경써서 들을 수 있도록 노력해야겠다.
이후 진행할 것

• 로그인 클라이언트측 유효성 검사
• 로그인 서버측 유효성 검사
• 회원가입
• 메인 페이지 구축