[멋쟁이 사자처럼] 멋사 프론트엔드 스쿨 5기 10주차 4LS 회고 (React Component, JSX, Props, Node.js, npm)

 ❤️‍🔥 Liked

• 밴딩머신을 JS Class로 만들어서 모듈패턴을 이해해 보는 수업을 했는데 수업 자료를 기반으로 getter와 setter를 활용하면서 직접 만들어보고 회고조원 분과 같이 코드리뷰를 하는 시간을 가졌다. 회고조원 분은 함수형으로 처음부터 끝까지 다 짜셨는데 보면서 문제해결 방식에 대한 영감도 얻을 수 있었고 큰 도움이 됐다. 💙🩵
• 스터디에서 게임 만들기 실습을 하고 있어서 간단한 가위바위보 게임을 만들었다. 게임을 만드는 게 실무에 꼭 도움이 된다고 할 수는 없겠지만 이론으로만 배운 개념을 어떻게 적용해 볼까, 플로우차트는 어떻게 만들까 로직을 그려보는 훈련이 되는 거 같다. 최종적으로 레트로 미니게임 모음집을 하나 토이프로젝트로 완성해보려고 한다! :)
• 본격 리액트 시작! JS 서버 api 통신이 너무 어려워서 오히려 리액트 시작이 숨통이 트이는 상황...ㅠㅠ
• 리액트.. 자스보다 재밌다...!

GitHub - JAYCODE-git/minigame: 레트로 미니게임 모음집

 
 
 

 💣 Lacked

• 정기 편성에 node.js 온라인 강의가 있었는데 오전에 듣고 너무 어려워서 포기하고 그 시간에 기존 수업에서 놓쳤던 것들을 복습했다. 한번에 모든 걸 다 소화하는 건 어렵기 때문에 선택과 집중이 중요하다고 생각하면서도 node.js와 npm의 개념과 사용 방법 정도만 알고 넘어간 게 아쉽기도 하다. (내가 좀 더 똑똑했더라면... 내가 지금보다 습득력이 더 좋았다면....😢)
• 재현님이 리액트 강의 방식을 반복학습으로 정하신 거 같다. 처음부터 hook, router사용하셔서 멘붕...
  서버 통신에 대한 이해가 부족해서 계속 어려움을 겪게되는 거 같다. 지금은 반복학습 덕분에 리액트가 점점 재밌어지고 있지만
  리액트 배우던 첫 날의 충격을 아직도 잊지 못해...

 
 
 

 ✏️ Learned

• React는 VirtualDOM 메모리에만 존재하는 가상돔을 만들어 사용자의 반응으로 인한 변화를 인식해서 화면을 랜더링 한다.
• 리액트 라이브러리의 목적은 유지보수와 재사용성을 위해 컴포넌트를 사용자 정의 요소로 표현하는 것.
• React에서 함수형 컴포넌트를 사용할 때 함수명은 대문자로!
• React에서는 props라는 인자를 객체의 형태로 전달받는다.
• ReactDOM.createRoot Node.js를 기반으로 리액트 앱을 렌더링 하는 데 사용하는 함수.
• JSX란 JavaScript XML의 약자로, React의 JavaScript코드 내부에 HTML의 모습과 동일하게 사용하는 특수한 문법. JSX 문법은 JS의 template literal과 매우 유사하다.
• NPM은 자바스크립트 패키지 매니저의 약자로, Node.js 런타임에서 사용. 개발자들이 자바스크립트 패키지를 쉽게 설치, 업데이트, 삭제할 수 있도록 도와주는 관리 프로그램.
• Babel은 최신 버전의 자바스크립트를 구형 버전의 자바스크립트로 변환해 호환성을 높이는 trans compiler. React에 bebel이 내장되어 있기 때문에 React JSX 문법이 순수 JS로 변환되어 브라우저가 읽을 수 있다.
• 자바스크립트 모듈패턴의 등장으로 분리된 여러 개의 파일에서 원하는 변수나 함수들을 export 하면 하나의 js파일에서 import 해서 불러올 수 있다.
• 이 모듈패턴을 모든 브라우저가 지원하지 않기 때문에 React에서는 내장되어 있는 webpack을 통해 서로 의존하는 파일들을 전부 모아서 하나의 파일로 compile한다.

 

 

 

 👩🏻‍💻 Longed For

• 10km 러닝.
• 모던 JavaScript 튜토리얼, 자료구조와 자료형 5 단락 내용 숙지.
• 회고조 React 공식문서 스터디 참여.
• 프로그래머스 0단계 문제 매일 1개씩 풀기. (난이도가...갑자기 너무 높ㅇㅏ졌다..ㅎ)
• 카드 뒤집기 게임 구현 
• 서버통신 async/await, promise, fetch 보완학습