이번에 회사에서 작업을 한후에 느끼는점에대해 기록을 남기려고 합니다 .
1. 써있는 코드를 이해하는 능력을 기르자 .
써있는 코드가 아무리 복잡하고 이해가 되지않아도 써있는코드를 이해할수 있는 능력을 길러야한다 .
코딩을 하면서 느낀점은 . 항상 코딩 자체가 어렵다라기보다 이런 기능을 구현하고 싶은데 어떻게 하는지 "방법"을 모르기때문에 방법을 생각하느라 시간이 오래걸린다 ,
내가 하는 코딩은 경험이쌓이면 생산하는데에는 크게 어렵지않은 분야이다 . 웹개발은 머신러닝이나 다른 어려운 프로그래밍이 아니다 .
결국 경험을 쌓고 생산능력을 기르는것이 나에게는 가장 필요한것이고 , 그 생산능력을 빠르게 기를수 있는 방법은 남의 코드를 열심히 들여다보고 , 이해해서 내것으로 만드는것에 있다 .
2. 멘탈을 강하게 만들어야한다 .
멘탈이 강해야 버티는 힘이 생기고 , 버티는 힘이 곧 살아가는데 있어서 어떠한 시련이 올때에 크게 도움이 될 것이다 .
아직 신입이고 얼마되지않았지만 , 버티면 이루는것이고 버티는것은 멘탈에 관련된 문제다 .
개인적으로 멘탈이 부셔질때는 제가 못할때입니다 . 제 성격은 제가 못할때에 가장 멘탈이 무너집니다 .
잘하게 됐을때는 멘탈이 쉽게 무너지지않습니다 . 따라서 답은 개인시간에 공부를 계속해서 하는것입니다 .
아침에는 무엇을 하기 힘듭니다. 아침 잠이 많고 , 아침에 무리해서 공부를 해본결과 회사에서 일을 할때에 너무 피곤합니다 .
따라서 방법은 그저 퇴근후에 스터디 카페에 와서 공부를 하는 수 밖에 없습니다 .
이렇게라도 꾸역꾸역 공부를 해서 실력을 쌓는 수 밖에 없습니다 .
배운점
1 . GET , POST에 대해 더 깊이있게 알게 됌 .
혼자 개발공부를 하다보니 , 서버와 통신경험이 거의 없는데 이번에 작업을 하게 되면서 그런부분을 배웠습니다 .
또 저는 여태까지 OPEN API를 사용해왔기때문에 , OPEN API에 무엇인가 요청을 할수있는것은 상당히 제한이 있었죠 , 그 API 개발자와 소통이 가능해야 어떤 항목들을 더 요청할수 있으니까요 .
GET이라는것을 단순히 정보를 끌어오는데만 사용한 저는 , 이번에 새로 쿼리를 요청하는방법을 배웠습니다 .
상당히 기본적인것인데 몰라서 ( 기본이 안되어있는 .. ) 좀 부끄러웠지만 어쨌든 이번 기회에 배우게 되었습니다 .
상황은 어떠한 카테고리에 따라 결과값이 분류가 되어야하는 전형적인 filtering이었는데 , filter 함수의 특성상 한번 필터링을 하고나면 값을 되돌릴수가 없기때문에 , 어떻게 해야하는 고민을 했었는데 ,
사수분께 조언을 구해보니 그것은 필터링된 값을 백엔드에서 작업을 해주고 우리는 GET방식으로 쿼리만 날려서 가져오는것이라고 설명 해주셨습니다 .
그래서 GET으로 end point를 가져오는 곳에서 파라미터로 오브젝트를 받아서 쿼리를 뒤에 붙여 필터링작업을 성공적으로 마칠 수 있었습니다 .
ex) www.naver.com/msg?limit=1&page=2
이런식으로 계속 요청을 하면 되는것이었습니다 .
POST
사실 POST를 거의 사용해보지않았습니다 .
서버에 뭔가 요청을 해서 데이터를 집어넣는다기보다는 , array에 값을 받고 그 array의 데이터를 조작하면서 개인 프로젝트를 진행 해왔습니다 .
POST를 할때에는 , endpoint끝에 명세대로 데이터값을 실어 주기만하면 요청이 완료됩니다 .
ex ) www.naver.com/${data}
2. Vue Watch에 대해서 알게 됌 .
뷰를 사용하기전에 저는 리액트를 오래 사용해왔고 , 회사에서 뷰를 사용하기때문에 뷰를 배우며 코드를 작성하게 되었는데요 ,
뷰의 여러가지 기능중 watch가 잘 이해가 가지 않았었습니다 . computed 도 살짝 헷갈렸었구요 ,
watch는 react에서 useEffect와 비슷한 개념입니다 . 어떠한 state값이 변화하면 어떠한 행동을 하라 ! 하는 function일 뿐입니다 .
근데 뷰에서는 조금 특이한점이 , handler라는 function이 있는데 ,그 handler function을 사용하게 되면 ,
immediate와 deep이라는 속성을 사용할수 있습니다 . immediate : true를 주게되면 component가 created될때 handler안에 있는 function 을 실행하게 됩니다 . 즉 컴포넌트가 만들어질때마다 함수를 실행하게 되는것이죠 ,useEffect도 dependency array를 비워놓으면 컴포넌트가 재 렌더링 될 때마다 다시 useEffect가 실행됩니다 .
deep은 react에서는 없는 개념인데요 , vue에서는 데이터 구조가 조금 특이하게 되어있습니다 . react에 비해서요 .
vue는 data를 콘솔로그로 찍어보면 data밑에 어떠한 data가 있고 그 밑에 또 어떠한 data가 중첩되어있는 구조로 되어있습니다 .
만약 어떠한 data 밑에 data 밑에 data 밑 .... 까지 변화를 감지하고 싶다면 deep : true 를 주면 됩니다 .
computed는 어떠한 결과값을 여러번 사용하게 될때 , 캐싱을 해두어 메모리 관리면에서 효율적으로 코드를 작성하고 , 다음번에 한번 더 값이 로드되어야 할때 캐싱된 값을 돌려주어 퍼포먼스를 향상시켜줍니다 .
3. for loop의 중요성 , for of loop
저는 혼자 개발하는 개발자가 아닙니다 .
혼자 개발할때는 API를 어떻게 건네주건 알아서 하고싶은대로 하면 되었었는데 , 팀간 개발을 하려니까 서로 데이터를 주고받을때에 약속을 만들 필요가 생겼습니다 .
그리고 저는 클라이언트의 데이터를 서버로 전달할때에 그 명세 ( 약속 ) 을 지키며 개발을 해야합니다 .
그렇기때문에 주로 데이터를 받아와서 넘길때에 약간의 형식을 조작을 해야하는데 , 그럴때에 정말 용이한게 for loop이었습니다 .
가령 어떠한 데이터가 [{..}] 이런식으로 되어있는데 우리가 서버에 데이터를 넘겨줄때 명세는 data : [ __string__ ] 으로 되어있다고 가정을 한번 해봅시다 .
그렇다면 우리는 안에 key를 전부 빼버리고 value만 sort를 해서 넘겨주어야 합니다 . 이럴때는 어떻게 하면 좋을까요 ?
가장많이쓰는방식이 push나 spread operator를 이용해서 새 array를 생성한후 다시 이 새 array를 state값에 assign하여 value를 넘겨주는것입니다 . 코드를 보자면
let arr = [];
for( let i =0 ; i < data.length ; i ++) {
arr.push(data[i].key);
}
this.dataList = [..arr];
이렇게 for loop을 돌린다면 해당 key값을 가진 value를 arr에 i번 푸쉬하여 , value만을 가진 array, 명세대로의 array를 만들수 있겠죠.
그리고 어떤분이 말씀하시기를 , '백엔드에서 내려주는대로 사용할수도있지만 ,데이터를 조작해야 하는 방법은 알아둘 필요가 있다 "
라고 하셨는데 , 저는 그말에 동의합니다 .
백엔드에 너무 의존하기보다는 프론트에서도 데이터를 가공할수 있는만큼 가공해서 ( 너무 많이 가공한다면 데이터를 수정하기 매우 곤란해주고 가독성이 떨어질 수 있습니다 ) , 사용하는것도 괜찮을 것 같습니다 .
For loop도 많이 중요한데 , for of loop이 javascript 최신문법이고 , loop은 코드가 가독성이 좋아서 배워두면 잘 쓸수 있을거같습니다 .