(WIL)weekly I learned 03 회고록

먼저 요번주를 배우고 끝날때쯤 주특기와 별개로 코딩하는것이 재미있고 만드는 성취감 남을위해 어떤 편리함이 있을까 생각하는 프론트엔드 적인 마인드 이외에도 어느 분야의 회사를 가고싶은가에 대해서 생각해보았다.

 

막연히 코딩이 좋고 프론트엔드의 적성이 좋은것이 시작의 이유이면서도 어느 분야에서건 상관없는지, 어느 분야에 따라 내가 성장하고 즐길수 있을지를 생각해보았다. 회사분위기, 근무환경도 당연히 중요하고 사수가 있고 없고 내가 가서 얼만큼 성장하고 한 일원이 될수있는지가 중요하다고 당연히 생각하면서도 내가 과연 어떤 분야에서건 저것만 있으면 만족할까? 라고 생각했다.

분야를 생각하면 몇가지 있었다.

 

하나는 게임분야 하나는 교육분야 였다. 게임은 그전부터 일해보고싶었다. 웹개발자를 생각하기전에 유니티를 잠깐 한달정도 만져보기도하고, 학교 프로젝트로 간단한 비행기 게임을 만들어보면서 게임을 만드는것에 대한 재미도 알고있었고, 어렸을때부터 게임을 잡고 살아서 내인생의 한부분을 차지한다고 해도 과언이 아니기에 게임분야쪽에서 일하면 일을 흡수하고 녹아내리기에 좋다고 생각했다.

 

두번째 교육분야, 이건 아마 언어 공부때문에 생각했다. 캐나다에 있으면서 어떻게하면 쉽게 언어 공부를 할수있는지를 생각도 해보고 공부도해보고 내가 느낀점이나 교육이라는 분야로 누군가를 알려주고 돕는다는것이 나의 활력중에 하나라고 생각한다.

 

세번째는 애니메이션, 일러스트 등 아트 관련분야

어렸을때 중학교때 플레시를 통해 졸라맨처럼 만들어보기도하고 한대 일러스트레이터가 되고싶다고 독학으로 그림을 그리고 인체를 배우고 했던적이 기억이 난다. 인터넷에 떠돌던 블로그에서 잘그리는 사람들껄 보면서 코스프레에 전시한다고 해서 가보기도하고 그땐 몰랐지만 참 많이도 돌아다녔다. 지금도 그래서 이쪽 분야로 같이 일하면 시너지가 좋지 않을까 생각했다.

 

네번째는 스포츠분야 

이건 실질적으로 개발과는 별개겠지만 어쨌든 내가 만들내용이 스포츠쪽이라면 남자라면 흥미가 있으니 좋지 않을까 생각했다. 축구도 어렸을때부터 많이했고, 아웃도어 스포츠에 대한 거부감없이 항상 도전해보고싶었던 부분이라, 이런 관련 회사라면 알아가면서 할수있지 않을까 생각했다.

 

막상 적다보니 이것외에도 생각이 많이 나는것같은데 이만 적기로했다. 

만약 내가 큰 회사를 가고싶은데 다른 분야라면 어떻게 할것인가? 지금은 아는 분야에대한 깊은지식이나 경험이 없으니 막연한거겠지 생각도 해보았다. 테크,금융, 디자인, 유통, 배달 등등 수많은 분야를 선택하더라도 나의 진로에 영향이 있을까 없을까에 대해서 알아봐야겠다고 생각했고, 어느 분야건 어느 장점과 단점 이있는지 알아봐야겠다고 생각했다.

배운것

• 클래스형 컴포넌트

class 형식으로 직관적으로 어떤 구조로 동작하는지 알수있었다.  structor, render, componentDidMount, componentDidUpdate, componentWillUnmount, this 를 사용하여 데이터사용가능

• 함수형 컴포넌트

함수형식으로 만들고 라이프사이클 형식을 react hook 으로 이용가능 useEffect

• 라이프사이클 didmount, didupdate,willunmount (위와중복)

TIL 에 기록했듯이, 그림을 통해 어떤 구조로 라이프사이클을 도는지 알게되었다. 

• 부모,자식 상속관계
• SPA, 단방향 데이터 바인딩

SPA 특성의 장단점도 알게되었다. 초반로딩시간 vs 페이지마다로딩시간 인거같다.  

SPA 형식이 좋은건 컴포넌트 형식이므로 조각낼수있는만큼 조각내어서 필요한 부분만 화면에 출력해줄수있다는것을 알게되었다.

• DOM의 구조

Document Object Model. 언제나 이 DOM 이라는 녀석을 보면 아는거 같은데 잘모르는거 같은 애매함을 느낀다.  말그대로 문서 객체 모델..  ree구조로 계층을 가지고 있고 노드들이 구성되고 묶여있다

 

• 리액트의 Virtual DOM 

가상DOM 을 통해 실질적으로 클라이언트 웹브라우저 상에선 바뀌지않고 가상으로 바뀐후 웹브라우저로 바뀐부분만 교체해준다.               TIL  에서 다뤘기때문에 생략

 

등등을 배웠다.

느낀점

과제프로젝트를 하면서 아 내가 활용하고싶지만 지식이없으니 계속 막히는구나 생각했다. 그리고 리액트의 특성을 이해하게되었는데 단방향 데이터 바인딩이다 보니 내가 자식컴포넌트에서 다른 자식컴포넌트로 데이터를 보내주고 싶을때 어떤식으로해야되는지 너무 막막했다.

 

결국 부모컴포넌트인 App.js 에 쓰고 props 와 state으로만 주게되었는데 이렇게할려고 보니 리액트 컴포넌트의 특성을 스스로 망가트리고 있다고 느꼈다. SPA 로써 한번페이지 로딩후 필요한 부분만 바꿔 끼듯이 페이지를 이동하고 수정하는것이 장점인데, 내가 메인 app.js에 써버리니 강제로 새로고침을 해야하는 설정을 해야할때가있어서 이렇게 만들면 MPA 형식과 다를게 없다고 느꼈다.

 

그래서 그 뒤에 배우는 redux 로 이걸 활용하겠구나해서 과제를 미리 했기때문에 보았는데 처음이라 그런가 그냥 간단하고 storage 만들고 그걸 가져다가 쓰는건데 이렇게 복잡하게 연결구조가 있을까 생소했다. 그래도 이걸배우면 나중에 부모 자식 컴포넌트 사이에서 데이터를 자유롭게 가져다가 쓰고 할수있을거 같아서 마스터해야겠구나 생각했다. 

 

한가지더 답답하고 아쉬웠던건 return 부분에 jsx 문법상 요소 부분만 가능하고 js 문법형식을 쓰는데 제약이 있는데 이것또한 활용을 못했다. 보통 for문, if 문 등 기본적인걸 쓰는게 버릇,습관이 되어서 내장함수인 map, filter, from, 등등을 쓸생각도 안했다. 

 

return 안에서 쓸수있는게 내장함수들인데 저걸썼다면 더 쉽게 풀지않았을까 싶고, 쓰더래도 {}중괄호를 써야한다는 특성도 알게 되었다. 그리고 삼항연산자, &&,|| 연산자를 나중에 꼭 활용해서 써봐야겠다고 생각했고, 임민영 튜터님의 샘플 답안지를 보면서 객체에 대해서 더 이해하고 활용할지도 생각하게되었다. 

 

정말 이해하고 알아야할건 많은데 익숙하지가 않고 반복을 안해서 그런지 삐걱삐걱한다. 다음주도 리액트 주특기주차이니 좀더 내것을 소화해야겠다고 생각했다.