개념의 중요성

ryuyh2000·2022년 1월 22일

#잡담

목록 보기
1/2

나에게 맞는 코딩 스타일

대학교에 들어와 나름대로 코딩에 대한 흥미를 갖으며 대학 생활을 보냈다. 대학수업을 들으면서 많은 교수님들의 수업을 듣고 공부를 해왔다. 사람마다 스타일이 다르듯 교수님 마다 수업 스타일 역시 모두 달랐다. 한 교수님은 실습 위주의 수업, 또 다른 교수님은 이론 위주의 수업이 있었다. 내 특성상 눈으로 볼 수 있고 금방 이해할 수 있는 실습 위주의 수업이 나와 맞았던 것 같다. 그렇게 이론과 거리를 두며 실습 위주의 코딩을 하며 3년 동안 공모전을 나갔다. 3학년 공모전이 끝나고 문득 내가 하는 방식의 코딩이 맞는 코딩인지 의문이 들었다.

사건의 발단은 이렇다. 3학년 공모전을 하던 도중 내가 짠 코드들이 전부 내 자기복제, 구글링해서 약간의 변형을 준 코드들로 보이는 것이다. 같이 공모전을 준비하던 동기의 코드를 보면 감탄이 나온다. 나는 그저 만들기위한 프로그램인 것 같고 동기가 짠 코드들은 이론에 근거한 코드들인 것 같은것이다. 가장 그렇게 느낀 곳은 React 를 사용할때 state 사용하는 부분이였다.

React에는 Class로 코드를 짤 경우 아래와 같은 생명주기가 존재한다.

1.componentWillReceiveProps
2.shouldComponentUpdate
3.componentWillUpdate
4.render
5.componentDidUpdate

여기서 4번 render 쪽은 State가 변화할때마다 Re-render 가 일어나는 특징이 있다. 이 기능에 대해 공모전 당시에 별 생각없이 무분별하게 사용하였다. 그 결과 기능을 실행을 시켰을때 새로고침을 눌러야 변화가 나타나는 문제가 나왔다. 이러한 문제는 React 를 사용할때 절대 나와서는 안되는 상황이라 알고있다. 그럼에도 불구하고 계속해서 이를 고치기위한 코드들을 계속해서 짜며 완성을 시켰다. 이때 코드를 수정하며 나의 문제점을 많이 느꼈다. 앞써 말했듯 완성시키기위한 코드를 짠 것이다.

반면 동기는 나와는 다르게 React에 대한 이론에 대해 접근후 코드를 작성하여 그런지 나와는 다른 퀄리티의 결과물이 나왔다.

밑은 내가 무분별하게 사용한 State 이다.

  state = {
   userNickname: "",
   birthday: "",
   gender: "",
   userImgUrl: "",
   introduce: "",
   loading: false,
   error: null,
   btnClick: true,
   value: "",
   duplicateCheck: false,
   change: false,
   teamName: "",
   roomName: "",
   teamBoolean: false,
   QRBoolean:false
 }

내가 봐도 정말 더럽다. 지금 봐도 빠져도 될 것이 보인다.
ex) userNickname,birthday,gender,userImgUrl,introduce,teamName,roomName 등등...

이번 공모전을 진행하며 개념부족에 대한 문제점을 뼈저리게 느끼게된 계기가 되었다. 앞으로 코드를 짤때 완성을 위한 코드 보단 개념에 근거한 코드 작성을 지향하며, 이를 지향하기 위한 개인 프로젝트도 진행 해 볼것이다. 이상 글을 끝맞춘다.

profile
응애 프론트앤드 개발자

0개의 댓글