6월 MIL

 

드디어 마참내 react 공부 시작

---

지난 5월에는 html, css, js 로 프론트개발을 위한 기초 지식들을 쌓았다면, 이제부터는 본격적인 프론트개발을 위한 내용들을 학습이었다.

react 부터는 진짜 모르는 미지의 영역이었기 때문에 기대 반 걱정 반으로 시작하게 되었다.

https://www.codeit.kr/topics/getting-started-with-react

React 웹 개발 시작하기 - React 강의 | 코드잇

강의에서는 주사위 게임을, 과제로는 가위바위보 게임을 만드는 프로젝트를 진행했다.

 

좋았던 점은 하나의 완성된 프로젝트가 만들어지기 때문에 성취감을 느낄 수 있다는 점,

그 프로젝트가 만들어지는 과정을 느낄 수 있다는 점

이 있었다.

 

과정 속에서 한 번에 특정 기능을 만드는 게 아닌, 일단 만들어두고 후에 요구사항에 맞게 변경해나가는 과정이 실제 개발하는 느낌과 비슷해서 더 좋게 느껴진거 같다.

실제 프로젝트와 비슷하게 완성할 수 있으면서도, react 외의 디자인적인 요소는 모두 제공해준 점도 좋았던 것 같다.

오직 react 에 집중하면서도 완성도 높은 결과물을 만들어낼 수 있다.

 

이 강의에서는 컴포넌트와 상태가 무엇인지 어떻게 다루는지 감을 익히게 해주었다.

 

다음으로는 리액트로 서버로부터 받은 정보를 처리하는 방법에 대한 강의를 듣게 되었다.

https://www.codeit.kr/topics/handling-data-with-react

React로 데이터 다루기 - React 강의 | 코드잇

해당 강의는 아직 듣는 중이긴 하다...

 

이 강의에서는 실제 코드잇의 실습 서버를 통해 api 통신을 하면서, 직접 다루게 된다.

혼자하는 토이 프로젝트나 공부하는 차원에서는 아무래도 api 구현까지는 힘들텐데 이 점은 좋은 장점으로 느껴졌다.

api 의 정보를 어떻게 받고 다룰지, 에러를 어떻게 처리할지 등 다양하게 학습 중이다.

 

하지만, 과제를 하면서 아쉬운 점도 존재했다.

 

아무래도 해답과 비교를 하면서 정답을 확인해야하기 때문에,

코드의 형태가 하나로 한정된다는 점이었다.

function App() {
    const [hand, setHand] = useState(INITIAL_VALUE);
  	const [otherHand, setOtherHand] = useState(INITIAL_VALUE);
	const [gameHistory, setGameHistory] = useState([]);
	const [score, setScore] = useState(0);
  	const [otherScore, setOtherScore] = useState(0);
  	const [bet, setBet] = useState(1);
    
    ...
   }

위는 최종적인 과제 정답 코드의 일부이다. 벌써부터 이해하려면 한참 뚫어져라 봐야할거 같다.

당장어떻게든저코드를분리하고싶은마음이굴뚝같지만, 코드잇의 정답코드와의 비교하기 위해서, 어쩔 수 없이 유지해야했다.

후에 몇가지 찾아보니 상태관리 라이브러리를 사용함으로서 분리가 가능한 것으로 보인다.

이를 고려하면, 이 강의에서 코드를 분리하기까지 진행하기엔 어려울 수 있겠다 생각이 들었다.

상태가 분리가 안된다면, 그 상태를 활요하는 함수들도 결국 분리가 힘들 것이다.

아직까지는 잘 모르겠다. 하지만 저 코드는 분명 가독성이 별로 좋지 않은거 같다....

 

Figma 도 조금씩

---

그렇게 react 는 계속 공부중이고....

Figma 에 대한 공부도 같이 시작했다.

웹페이지에 대한 구성, 배치 등등을 고민해야하고, 이를 팀원과 함께 쉽게 공유하기 위해서,

또한 요즘 Figma 를 잘 구성하면, 바로 코드로 반환해주기 때문에 css 개발이 편해질 수도 있다.

https://www.codeit.kr/topics/ui-design-basics?mediumTypedId=U2tpbGxQYXRoOjYzNWI4OTMxYjI1NjVhOWViMDEyYzFkMw%3D%3D

UI 디자인 기초 - 강의 | 코드잇

해당 강의로 공부 중이다.

아무래도 운영진 일 중에는 학생들이 많이 관심을 끌게, 쉽게 볼 수 있게 등 디자인적인 요소가 필요한 경우가 많다.

그래서 평소에 UI/UX 등에 관심이 있었다. 이 분야를 공부하면 저런 일도 상대적으로 쉽게 혹은 기준점이 생기지 않을까하는 기대로.

왜 이전에는 안했냐고 한다면,

...내충격적인디자인실력에스스로절망에빠져헤어나오지못했기때문이다.

 

이번에 프론트로서 디자인적 요소를 분명 다뤄야할테고, 디자인을 잘해보고 싶다는 욕구도 생겨서 겸사겸사 다시 도전!하게 되었다.

아직까지는 순조롭게 이어나가는 중이다. 피그마로 간단한 작?품들을 만들어나가면서, 기능들을 익혀나가는 중이다.

 

나름 재미있는게 재능 있을지도?