[엘리스] 1차 프로젝트 회고록 - 08 해도 해도 끝나지 않는 개발

방향성

사실 처음엔 불가능이라고 생각했지만 지금은 어떻게서든 내가 맡은 로그인, 회원가입, 카테고리 부분은 완성했다. 코드만 봤을때는 부족해 보일 수 있지만 처음 배우는 리액트니까,  가독이나, 재사용성에 중점을 두지 않았다. 나처럼 코드를 직접 짜는 프로젝트는 처음이라면 우선 생각을 해본다. 어떻게 로직을 해야 이런 결과가 나올까? 머릿속으로 그리기 어렵다면 그림을 그리는것도 도움이 된다. 나같은 경우에는 아이패드로 그려서 이렇게 짜봐야겠다는 설계를 했다.

 

모든 작업을 할때 무작정 하는건 없다. 모든 결과물에는 설계가 이루어진다. 개발도 마찬가지이다. 처음엔 시간이 없으니 일단 뭐라도 써보자는 생각으로 코드를 짜내려갔던 과거의 나를 반성하게 된다. 그렇게 하다보면 빠르다고 느낄 수 있지만 원하는 값이 잘 나오지 않아 다시 생각해야되고 다시 코드를 작성해야하는 불상사가 발생하게 된다. 오히려 시간을 더 잡아먹는다고 느꼈다.

 

먼 훗날 취업을 하게되면 내가 처음으로 했던 이 프로젝트의 코드를 꼭 다시한번 봐야겠다. 미래의 내가 보는 지금의 나의 모습이 궁금하다는 생각이 들었다. 

 

프로젝트를 하면서 시간이 너무 부족했다. 우리팀의 경우는 특히 부족한게 당연하다고 생각한다. 중간에 리액트로 바뀌면서 서버를 프론트와 백엔드 따로 띄워야하고, 리액트 사용법을 전혀 몰랐던 나는 어떻게 쓰이는지 구조부터 배워야했다. 공부하는 시간을 2주를 줘도 모자른데 프로젝트를 하려니 잠을 안자면서 해도 부족한 시간이었다.

 

그래도 후회는 없고 뿌듯하다. 처음배우는 리액트를 내가 프로젝트까지 하다니, 어쩌면 이 프로젝트 덕분에 사용법을 더 빠르게 익히고 빠르게 이해하려고 두뇌회전이 잘 되었던것도 한몫하는것 같다. 마감기한이 정해져 있는것은 나를 규칙적이고 열정적이게 만든다. 프로젝트는 곧 끝이 나지만, 앞으로 나만의 미니 프로젝트를 해서 누구나 다 한다는 투두리스트나 메모, 블로그 등등 개발해서 깃허브에 자료를 쌓아두고 어떻게 쓰이는지 공부해야겠다고 느꼈다. 역시 기한을 정해놓고 직접 만들어보는게 최고의 공부방법인듯 하다.

 

로그인

const emailRegEx =
    /^(([^<>()\[\].,;:\s@"]+(\.[^<>()\[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;

우선 이메일 형식이 맞는지 체크하는 정규식을 변수값으로 넣어준다.

 

const emailCheck = (userId) => {
    if (userId === 'admin') {
      return true;
    }
    if (emailRegEx.test(userId)) {
      return true;
    } else {
      alert('이메일 형식이 아닙니다. 다시 입력해주세요.');
      return false;
    }
  };

그리고 형식이 아니라면 admin 관리자 아이디를 제외하고 이메일 형식이 아니라는 알림창을 띄운다.

 

const signIn = async () => {
    if (emailCheck(userId)) {
      getUser({ email: userId, password: userPassword }).then((data) => {
        if (data === 'no user') {
          alert('존재하지 않는 아이디입니다. 회원가입을 해주세요.');
          return;
        }
        alert('로그인에 성공하였습니다.');
        navigate('/');
      });
    }
  };

백엔드분들이 API에서 자동으로 아이디가 있는지 걸러주도록 구현해주셨다. 혼자만 생각한 것이 아닌 모두를 생각하는 개발에 배울점이 많다고 느꼈다. 나는 그 값만 response로 받아서 데이터 값만 참인지, 거짓인지 체크만 하면된다.

이렇게 하면 로그인에 성공이다.

 

깔끔한 코드

나는 깔끔하고 심플하고 정리가 잘된것을 매우 좋아한다. 그래서 무채색을 좋아하고 정리정돈을 좋아하는 내가 코드를 지저분하게 짜고 그 코드를 수정하고 다듬을 시간이 없다는게 매우 불편했다. 코드도 중요하지만 기능 구현이 우선인 지금.. 이 상황이 너무 아쉽다. 누구에게나 처음은 있고 처음부터 잘 할 수는 없으니 그냥 이렇게 생각하려고 한다.

 

MAP

자바스크립트를 배울 때 MAP 함수도 금방 이해하지 못하고 넘어갔다. 어떻게 써야하고, 어떤 상황에 써야하는지 몰랐는데 프로젝트에서 한번 써보고 바로 알게됐다. 코드를 모르면? 일단 써보자. 어떻게 되는지 보자. 어느순간 MAP 써야겠다 라고 바로바로 생각이 나고 있는 내 자신을 발견할 수 있다.

 

무한 콘솔

무슨 값이 나올까? 궁금하면 무조건 콘솔이다. 나는 단순히 콘솔 안에 변수만 넣었지만 생각보다 개발하면서 소소하게 재밌는 부분이 있다. 이 콘솔에 다양한 말을 넣어서 한다는 새로운 정보를 얻었다. 개발자가 돼서도 저 콘손을 입력하는 구나.. 나는 나같은 초보만 많이 사용한다고 생각했지만 생각보다 더 많이 사용하는듯 하다.

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript