React텍스트

React라는것을 처음 배웠다.

배운것을 통해 JS DOM을 응용하여 작성하였던 코드를 React로 옮겨 component화 시키는 것이다.

당최 뭔소린지 모르겠었으나 .. 하다보니 또 할만한 것 같기도하다.
state와 props를 어느정도 활용하게 된 것 같은 시간이다.

DOM은 직관적이나 여러 줄로 엉켜 있는 flow를 가졌다면 state는 일관적인flow를 유지하게 해주는 역할을 하는 것 같다.

아직은 한번 씩 왜 이래야 하나, 답답하지만 다루는 범위가 커진다면 state, props가 훨씬 유리할것이라는 생각이 확신이 되었다.

무엇이든 꾸역꾸역 만들어내는 느낌이 없지 않아 있으나 그래도 일단 되니까 .. 라는 마음으로 안위를 찾아보는데 불안하기는 매한가지다.

그래서 더욱이 시간을 쪼개서 모던자바스크립트를 보고 있나 싶기도하다.

사고가 조금은 확장 된 것같다. 예를 들어 코드카타의 문제를 실 서비스에서 적용하면 어떤 문제에서 쓰게 될까라는 생각을 자주하게 된다.

아래는 마침내 마무리하게 된 클로닝 동영상이다 궁금하면 한번쯤은 클릭을 해보길 ..ㅋ

위스타 그램 클론 동영상

팀 프로젝트

팀으로 무언가를 하는 것을 정말 많이 겪었는데(대외활동부터 아주 그냥 질리도록 그냥) 큰틀에서 개발도 비슷한 흐름인 것 같다.

일단 이번에 해본 팀프로젝트는 초기세팅(CRA)과 최후 merger후의 상황이 중요하고(css깨지면 울거다) 나머지 작성은 각자 사이트 클로닝이기 때문에 진행중에 이야기를 할 부분이 많이 없었다.

초기세팅에 있어 npm 을 다운 받고 package.json에 버전이 저장되는 것 gitignore를 통해 npm전체 모듈은 push하지 않는 것 등 새로운 개념을 알게되는 것이 많았고 이런 것들의 관리 필요성을 알게되어 좋은 경험이었던 것 같다.

또한 Router를 이용한 하나의 페이지에서 여러가지 접근이 가능한 것이 나에게는 신선한 접근으로 다가왔다.

한가지 든 생각은 프로젝트로 진입하게 되면 하나의 사이트에서 각자 담당을 나눠 진행을 하게 될텐데, 그렇게 된다면 common.scss의 역할이 굉장히 중요해질 것 같다.

가령 어떤사람이 이건 14px인것 같아서 글자를 그렇게 했는다 어떤사람은 1.4rem을 쓰고 있다면 일이 복잡해진다. 그러니까 미리 정해야한다.

또한 백엔드와 협의할 사항이 굉장히 많아보인다. 페이지 기능구현의 범위를 정하는 것. 그 범위내의 받아올 데이터의 양과 세세한 데이터들의 명칭을 정하는 것. 마감기한을 정하는 것 등등..

이번 팀프로젝트에서는 초기세팅에 중요하고도 중요했는데 다행이도 가이드라인이 잘 잡혀있어 큰 문제가 발생하지는 않았다.

어쩌다보니 팀장을 해서 팀원들의 큰 도움을 받아 진행을 했다.

각자 파일을 분할하고 원하는 의견들을 총합하는 것은 언제나 재미있지만 언제나 힘든일인 것 같기도하다.

한가지 아쉬운것은 너무 common.scss의 활용을 하지 않은 점인데 앞으로 할일이 많을테니 크게 신경쓰지 않기로 했다.

내 코드!

한달여 동안 작성했던 코드중 마음에 들거나 인상깊었던 코드 세가지를 뽑아봤다.
조촐 하나 다시 보니 재미는 있다 :)

• fetch , mockdata, map
  

  componentDidMount 단계에서 렌더링할 mockdata들을 fetch메서드를 이용해 가져오고 state에 setState를 이용하여 저장하고 저장된 state(Object)를 이용하여 map함수를 통해 <Feed />라는 컴포넌트에 destructuring을 통한 객체 내부의 자료들을 뿌려주는 코드이다.

정말 기억에 평생 남을 것 같은 코드인게 나는 React를 처음하면서 너무 힘들었는데 그 이유가 state와 props의 존재이유를 받아들이지 못하고 있었기 때문이다

그러다 보니 map함수를 이용하는 것이 더욱 어색했는데 여럿의 도움을 받으며 객체내부의 키에 접근하고 그것들을 가져오는 방법 및 메서드를 이용할 때 자료형이 왜 중요하게 여겨지는지 그것이 어떤것을 반환시키는지 와 같은 핵심적인 '상식'들을 이해하게 된 코드이다.

그리고 더 이상 반복적인 것을 복붙하는 우매한짓을 하지 않아도 된다 :)

• 그놈의 props
  

앞서 말했듯 나는 받아들이지 못하는 것을 받아들이기 위해 어떻게든 props라는 녀석을 써보고 싶었고 초기 단계에서 댓글기능을 하나의 컴포넌트에 꾸겨넣어 만든것을 props로 분리해보고 싶었다.

그렇게 처음으로 props와 state의 연결하는 방법을 알게 되어 작동시켜본 코드이다
props를 사용하려면 부모컴포넌트에서 해당컴포넌트의 속성값을 지정해주고
자식 컴포넌트에서는 그 속성값을 this.props.속성값으로 데리고 오면 된다.

역시 뭐든해봐야 깨우친다는것을 다시 한번 느끼게 해준 코드이다.

• 객체 활용
  

  코드카타를 하면서 매번 억지로 풀어내는 느낌을 받아왔었는데 동기들 끼리 코드카타 리뷰를 하면서 알고리즘문제에도 정해진 몇가지 접근방식이 있다는 것을 깨닫고 처음으로 적용해본 코드이다.

다양한 숫자들이 들어있는 배열중(Nums) 가장 많이 나온 숫자를 순서대로 k개의 갯수만큼 해당숫자를 뽑아내는 배열을 만드는 문제였다.

객체를 이용하면 카운트를 하는 행위를 다루기 쉬워진다는 것을 알게되어 너무 행복(?)했다.

앞으로도 자주 써먹어야겠다.

다가올 프로젝트

프로젝트가 다가온다.. 몇일 뒤면 또 정신없이 무엇인가를 구현하려 이것저것 찾아보고 있을 생각을 하니 설레면서도 신기하기도 하다.

정말 관심있는 사람수준의 지식에서 이제는 무엇인가를 기획 또는 구현할 때 어떻게 해야한다는 나름대로의 순서가 생긴 것에 신기하고 어떤 재료를 사용해야 할지 조금이나마 감을 잡았기에 앞으로 무엇을 더 획득하고 배워나갈지 설레기도 한다.

하루하루 갈수록 성장하는 기분이 너무 좋다.

어떤 개발자가 되어야 할까?

한달여간 배워보며 몸소 느낀점이 있다.

이전에 일을하거나 공부를 할때 모르는 것이 나오거나 익숙하지 않은 것이 등장하면 그것을 학습하거나 탐구하기 이전에 항상 스트레스를 받았다.

"아 .. 또 해야해 ??" 라는 생각이 가장 먼저 들었고 투덜대며 공부를 진행했던 것 같다.

그런데 개발을 배우면서 든 생각은 이 프로그래밍이란 것은 다 공부하고 익힌다는 개념이 아니라 핵심원리를 이해하고 때에따라 검색을 해서 사용법을 정확하게 구사하는 것이 더 중요하다는 것을 깨달았다.

가령 유체역학을 대학교에서 배운다면 핵심 공식을 몇가지 외우고 시험이 끝나면 어느정도 휘발된 지식을 가지고 있다가 기사시험을 볼때 다시 그 지식을 꺼내서 찾아 쓰는 느낌으로다가 말이다.

조금 더 확장해서 말하자면 개발자에게는 한 순간 순간이 기사시험과 같은 맥락으로 흘러가는것 같다.

구현을 해야한다는 시험에 매일 붙잡혀 있는 것이다.

그것을 구현하는 방법에 정답이 없고, 정답이 없다는 것은 무수히 많은 방식으로 똑같은 결과물을 낼 수 있다는 것이니 말이다.

그래서 매일 새로운 것들을 마주하게 될 것이고(다양한 방법들을 알면 좋으니까) 매일 새로운 것을 마주하는 일들에 예전과 같이 스트레스를 받거나 짜증을 낸다면 나에게 독이 될 것이다.

그래서 내가 생각하는 개발자의 가장 중요한 미덕은 낙천적으로 흘려보내는 것이라 생각한다. 필요한 지식이 생기면 담담하게 공부를 진행하고 필요한 기능을 구현시키면 된다. 사소한 일들에 일희일비하는 예민한 모습은 도움이 되지 않을 것 같다.

그래서 나도 앞으로 무던한 개발자가 되고 싶다.
하나하나에 휘둘리지 않고 무던하게 필요한 지식들을 수집하며 원하는 결과를 덤덤히 만들어내는 그런 개발자 말이다.

다음달은 어떤 글을 쓰게 될지 궁금해지는 하루이다

끝

PS

---

- 부트캠프에서 한달 일기
- 생각정리
- 클론 프로젝트 리뷰

---