패스트캠퍼스 환급챌린지 48일차 미션 (3월 19일) : 인터랙티브 웹 강의 후기
서론
현대 웹 개발에서 React는 가장 인기 있는 라이브러리 중 하나로, 그 사용법을 배우는 것은 모든 프론트엔드 개발자의 필수 과정이다. 최근 들은 'TicTacToe 앱 만들기 시작(App.js)'과 'Board, Square 컴포넌트 생성하기' 라는 두 강의는 React를 활용한 애플리케이션 개발의 기초부터 시작하여, 실제로 작동하는 게임을 만드는 과정을 단계별로 안내한다. 이 과정에서 React 애플리케이션의 초기 설정부터 컴포넌트의 구조화, 그리고 클래스형 컴포넌트와 함수형 컴포넌트의 비교까지, React 개발의 핵심적인 요소들을 다룬다.
본론
환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.
- 첫 번째 강의: TicTacToe 앱 만들기 시작(App.js)
- 두 번째 강의: Board, Square 컴포넌트 생성하기
첫 번째 강의: TicTacToe 앱 만들기 시작(App.js)
이 강의에서는 npx create-react-app 명령어를 사용하여 React 애플리케이션의 보일러플레이트를 생성하는 과정부터 시작한다. 초기 세팅 후, TicTacToe 게임 앱의 개발 계획과 컴포넌트 설계에 대해 배웠다. 기본 제공되는 코드와 CSS 스타일을 삭제하고, 게임 보드(Board), 게임 칸(Square), 그리고 게임 정보(Info) 부분으로 애플리케이션을 나누는 방법을 설명했다. 이는 React 앱 개발에서 컴포넌트를 기반으로 한 모듈화 및 구조화의 중요성을 강조한다.
두 번째 강의: Board, Square 컴포넌트 생성하기
두 번째 강의에서는 실제로 Board와 Square 컴포넌트를 생성하는 과정을 다뤘다. src 폴더 내에 components 폴더를 만들어 컴포넌트들을 관리하는 프로젝트 구조에 대해 배웠다. 또한, 클래스형 컴포넌트를 먼저 생성한 뒤 이를 함수형 컴포넌트로 변환하는 과정을 통해 두 컴포넌트 유형의 차이점을 실습하며 이해했다. 이는 React 개발에 있어 중요한 두 가지 패러다임을 비교하는 좋은 기회였다.
클래스형 컴포넌트 예시:
함수형 컴포넌트 예시:
결론
'TicTacToe 앱 만들기 시작(App.js)'과 'Board, Square 컴포넌트 생성하기' 강의를 통해, React 애플리케이션 개발의 기본적인 흐름과 컴포넌트 기반의 개발 방식을 배울 수 있었다. 특히, 클래스형 컴포넌트와 함수형 컴포넌트 사이의 전환 과정을 통해 React의 다양한 개발 패러다임에 대해 실질적인 이해를 얻었다. 이러한 지식은 React를 사용한 앞으로의 프로젝트 개발에 큰 도움이 될 것이다.
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.