10월부터 지금까지 리액트 공부를 하고 3가지 토이프로젝트를 하면서 느낀 점과 부족한 점에 대해 정리해보려고 한다.
1. MBTI 검사 사이트 만들기(10.8 - 10.14)
코딩애플 인강을 듣고 리액트를 사용해서 첫 번째로 MBTI 테스트 사이트를 만들어 봤다.
배우고 처음 만드는 거라 정말 많이 헤맸다. props를 사용하는 게 익숙하지 않아서 처음엔 별 이상한 방법으로 컴포넌트에 데이터를 넘기고 받고 했었다... Link to에 데이터를 실어서 보내는 방법이 있길래 이 방식으로 했다가 옳은 방식은 아닌 거 같아서 후에 props로 데이터를 넘겨주는 방식으로 다 변경했다.
평소에 api를 json fake data로만 연습해보다가 실제 api를 가지고 axios를 사용해서 불러오는 연습도 해봤다. json으로 연습할때 주로 fetch를 사용해서 해봤는데 axios도 사용법이 까다롭거나 하지 않아서 어렵지 않게 적용해봤다. (물론,,, 구글링을 많이 해봤다....ㅎㅎ)
완성한 후에 AWS amplify를 사용해서 배포까지 해봤다!! 과정이 험난했지만 한 가지를 완성해서 매듭을 지은 게 뿌듯했다.
첫 프로젝트를 하면서 느낀 한계는 컴포넌트 간 데이터를 넘겨주는 작업이 쉽게 되지 않는 것이었다. 프롭스에 대해 잘 이해하고 있다고 생각해서 이때만 해도 어느 부분에서 막혀서 그런 건지 몰랐다,,,😂 (후에 다른 토이프로젝트를 하면서 알게 됨,,,)
2. 별별planner(10.25 - 11.2)
두번째 토이프로젝트는 일주일 정도 패스트 캠퍼스 강의를 듣고 만들어봤다. TodoList 와 비슷한 프로젝트 이다. 다른 점이 있다면 로그인, 회원가입 기능이 있는것이다. 두 번째 프로젝트라 좀 더 잘 할 수 있지 않을까 했는데 여전히 뭔가 원활하게 진행되지는 않았다. 이때 큰 문제가 있음을 알게됐다... 내가 함수에 대한 이해도가 낮다는 것이었다,,,ㅋ
자바스크립트 공부를 하면서 함수 공부를 했을 때 분명 잘 이해하고 사용하고 있다고 생각했었는데 아니었다. 😂 좀 충격이었다. 그래서 함수형으로 리액트 사용하는 게 유독 더디고 많이 헤맸나보다. 그래도 막히는 것에 대해 원인을 알고 해결 할 수 있어서 정말 다행이었다.
함수를 공부하고 다시 만들기 시작했을 때 어떤 식으로 컴포넌트 간 데이터를 주고받는지 왜 이곳에서 props를 써야 하는지에 대해 이해하고 활용도 제대로 했다.
별별planner에서 처음으로 토큰을 헤더에 싣는 것, 쿠키값 저장, 로그인, 회원가입 기능을 구현해봤다. 백앤드 api를 지인분께 받아서 이런 것들을 해볼 수 있었다.👍!!
별별 플래너에서 제일 막혀서 진행이 안 됐던 부분은 axios get 데이터를 컴포넌트에서 활용할 때였다. axios를 사용하는 js파일을 따로 만들어서 리턴값에 받아온 데이터를 실어서 데이터가 필요한 컴포넌트에서 함수를 할당해주고 실행하는 방법을 사용했었는데 이렇게 하고 콘솔에 찍어보면 첫 번째에는 무조건 undefined로 출력이 됐다. 이걸 임시방편으로 '?' 물음표를 사용하거나 조건문을 걸어서 해결을 했는데 더 나은 방법이 있거나 앞으로 좀 더 공부해서 보다 나은 방법으로 수정해봐야 할거같고,, 코드 구조를 잘 짜야 하는데 일단 되는대로 하는 경향이 있어서 이 부분은 더 연습하고 생각하고 노력해야겠다.
3. 클론코딩(11.4 - 11.8)
지인분이 만드신 페이지 중 특정 부분을 클론코딩을 해봤다. XD 파일을 보고 디자인도 그대로 따라 그려보고, 최대한 비슷하게 따라 해보려고 노력했다... CSS는 쉬운 듯 어려운 애증의 스타일언어,,,😂😂😂
이전 프로젝트들에서는 화면 구조는 flex, 스타일은 css파일을 따로 만들어서 했는데 여기서는 grid와 스타일 컴포넌트를 사용해보려고 했다.
클론코딩을 하면서 이전과 같이 undefined 문제가 발생했는데 다른 방식으로 axios data를 활용할 방법이 필요함을 느꼈다,,ㅠ 상태관리를 할 수있는 리덕스나 다른 것들을 이해하기가 좀 어려워서 좀 더 공부하고 사용하려고 미루고 안 쓰고 있었는데 이제 진짜 사용해봐야 할 때가 온 거 같다..! 이번 주는 상태관리, 리액트 확실하게 모르는 부분을 좀 꼼꼼하게 채워서
다음 프로젝트, 이전에 만들었던 것들 코드 수정을 할 때 적용해보면서 연습하고 익혀야겠다.