FES7 10주차, 11주차

멋쟁이 사자처럼 프론트엔드 스쿨 7기 10, 11주차 후기

 

 

새로 알게 된 것

• 리액트에서 CSS 적용하는 방법
• styled-componetns 기본 사용법
• Redux 기본 개념
• 합성 컴포넌트
• React Router
• 개발자 도구창 기능

 

---

특이사항

• 책집필 스터디 참여
• 온보딩 챌린지 참여
• 리액트 과제 제출

 

---

참고

웹 개발자가 알아두면 좋은 SPA, MPA

 

[React] 리액트 JSX에서 이미지가 엑박으로 나올 때

 

 

React - Router, useLocation 를 통해 상세페이지 구현

 

---

회고

리액트 진도를 나가기 시작했는데 나는 완전 기본개념만 알고 있었어서 useState관련 예제 코드가 처음엔 어렵게 느껴졌다. 복습하면서 여러 번 적용해 보니 이제는 조금 활용할 수 있게 되었다. 아직 컴포넌트화 하는 게 익숙하지 않은 수강생들을 위해  수업시간에는 그냥 한파일에서 기능을 구현했다. 컴포넌트화 하는 걸 수업시간에 많이 해보면 좋겠는데 그렇지 않은 점이 조금 아쉬웠다. 그래서 수업시간에 한 파일에 작성한 코드들을 혼자 복습하며 컴포넌트화 했다! 

리액트로 기능을 구현하는 과제가 있었다. 어려웠다.. 처음에 문제가 있었던 부분은 input박스에 입력된 값을 onChange이벤트와 onSubmit이벤트를 사용해 출력하도록 할때였다. e.target.value로 가져온 값을 그대로 출력하도록 만들었는데 그러다 보니 버튼을 클릭하지 않았는데도 입력에 따라 실시간으로 값이 변하는 문제점이 발행했다. 하나의 state를 사용하는 게 문제라고 조언을 들었고, 추가로 state를 만들어 출력값을 설정해 해결할 수 있었다. 그리고 styled-componentes를 사용해서 스타일 적용을 했는데 수업시간에 jsx파일에서 그대로 작업을 했어서 별도의 css파일로 분리하지 않았는데 분리를 했어야 하는 게 맞는 건지..? 아직도 잘 모르겠다. 그리고 나는 거의 글로벌 스타일로 적용했는데 그렇게 사용한느게 맞는 건지... 더 공부해 봐야겠다! 그래도 과제하면서 재밌었다! ㅎㅎ

원티드에서 진행하는 온보딩 FE챌린지 강의를 들었는데 반응형웹에대해서 많이 배울 수 있었다. 디바이스 디버깅 하는 방법, 웹 최적화 방법까지 알려주는 알찬 강의였다. 다음 달에는 로그인창 구현 챌린지가 있어서 그것도 참여해야겠다! 좋은 강의를 무료로 진행해 주는 원티드에게 너무 감사하다!

최근 2주 동안은 책 집필 관련 공부를 하는데 시간을 많이 보냈다. 공부하며 정리할 내용이 많다보니 잠을 줄이게 되었고, 컨디션 관리를 하지 못했다. 그 결과... 감기에 걸렸었다. 처음엔 환절기라 알레르기가 심해진 줄 알았는데 목감기였다. 머리 아프고 설사까지 해서 코로나인줄 알았다..ㅎㅎ 몸이 안 좋아지니까 수업에도 집중하기가 힘들었고, 저녁 시간에 추가 공부를 하는 것도 쉽지 않았다. 결국 며칠은 공부를 많이 하지 못했다. 푹 자고 약 먹으니까 괜찮아졌다. 적정 수면시간을 유지해야겠다고 생각했다.

배우고 있는건 너무 많은데 복습만으로도 벅차서 공부한 내용을 블로그에 기록하는 게 너무 어렵다. 다음 달에 프로젝트를 시작하게 되면 더 바빠질 것 같다. 프로젝트에 집중하고 블로그 포스팅은 수료 후에 중점을 둬야겠다! 다음 주에는 반편성 모의고사가 있다...ㅎㅎ 어떨지 궁금하다 핳ㅎ 앞으로도 파이팅!

 

---

다음 주 목표

• 복습 밀리지 않기
• 기상 시간 변경하기
• 코어 자바스크립트 읽기