오늘 뭐했지

지인들과 함께 사이드 프로젝트를 하게 됐는데, 한 번도 해본적 없는 프론트를 맡게 됐습니다.

사실 전부터 토이프로젝트나 혼자서 프로젝트를 진행해보고 싶었는데, 백엔드는 할 수 있었지만 프론트를 아예 할 줄 몰라서 포기한 프로젝트들이 많았습니다.

그래서 이번 기회에! 혼자서 프론트까지 뚝딱뚝딱 할 수 있는 수준은 되어보고자 리액트 공부를 시작했습니다

강의나 책을 사볼까 고민도 했지만 주변 프론트엔드 개발자가 되고자 하는것은 아니기때문에, 그리고 리액트는 인기가 많은 만큼 레퍼런스도 많기 때문에 강의나 책은 안보기로 했습니다.

주변 프론트개발자들에게 깊게는 아니더라도 혼자 뚝딱뚝딱 할 수 있는 수준으로 하려면 어떻게 해야하나 물어보니,

"일단 프로젝트 하면서 머리 박으면서 해보는게 최고다"

라는 말을 많이 하길래, 일단 머리 박아보기전에? 기초라도 알기 위해 지피티를 이용해 간단하게 배워보려 합니다.

GPT에게 "리액트 배워보고싶고, 로드맵 알려줘" 라고 하니까

다음과 같이 답변했습니다.

React를 처음 배우고 사이드 프로젝트에 적용하는 것을 목표로 하는 로드맵을 아래에 제안해 드릴게요. 기초부터 실습을 통해 자연스럽게 익히는 과정을 제안하며, 실전에서 쓸 수 있는 스킬에 중점을 두겠습니다.

1. 기본 개념과 환경 설정

목표: React가 무엇인지 이해하고, 개발 환경을 설정하기.

• React의 개념 이해하기: React의 철학, 컴포넌트 기반 구조, 선언형 UI가 무엇인지 알아보기.
• 개발 환경 설정: Node.js와 npm 설치, Vite나 Create React App으로 기본 React 프로젝트 생성.
• JSX: JSX 문법을 이해하고 HTML과의 차이점 학습.
• React 컴포넌트 기본: 함수형 컴포넌트와 Props 개념 익히기.

2. React 기초 다지기

목표: React 컴포넌트를 구성하고 상태(state)와 효과(effect)를 이해하기.

• State와 Props: State와 Props의 차이를 이해하고, Props를 통한 데이터 전달 학습.
• useState: 상태 관리를 위한 useState 훅 학습.
• 이벤트 처리: 버튼 클릭 등 기본 이벤트 처리 방식 익히기.
• useEffect: 컴포넌트 라이프사이클 이해와 useEffect 훅 학습. 데이터를 비동기로 불러올 때 사용 방법 익히기.

3. React로 간단한 프로젝트 만들어보기

목표: React로 간단한 기능을 구현하며 개념을 익히기.

• To-do List 만들기: 상태와 이벤트를 활용해 기본적인 CRUD 기능을 구현.
• 간단한 API 호출: 공공 API를 활용해 데이터를 받아와서 렌더링하는 연습.

4. 스타일링과 UI 라이브러리

목표: 기본 스타일링 방법과 UI 라이브러리를 사용하여 프로젝트를 좀 더 보기 좋게 만들기.

• CSS 기본 스타일링: CSS 파일을 활용해 컴포넌트 스타일링하기.
• Styled-Components 또는 Tailwind CSS: JavaScript 기반 스타일링 라이브러리 사용해보기.
• UI 라이브러리 사용: Material-UI, Ant Design, 또는 Bootstrap 등을 활용해 기본 UI 구성 익히기.

5. 라우팅과 상태 관리 심화 학습

목표: React에서 라우팅을 설정하고, 프로젝트 규모가 커질 때 필요한 상태 관리 기법을 익히기.

• React Router: 여러 페이지 간의 이동을 위한 라우팅 설정.
• Context API와 Redux: 글로벌 상태 관리 방법으로 Context API와 Redux 이해.

6. 프로젝트 실습과 고도화

목표: 사이드 프로젝트에서 필요한 기능을 구현하며 실전 경험 쌓기.

• 프로젝트 설정: 전체 프로젝트의 구조를 설정하고, 필요한 페이지와 기능 나열.
• Form 관리: 사용자 입력을 받는 폼 구성하기.
• 실전 API 연동: 로그인, 회원가입, 데이터 조회 등 실제 API 연동 기능 추가.
• 성능 최적화: React.memo, useMemo, useCallback과 같은 성능 최적화 방법 익히기.

이 로드맵을 통해 기초부터 실전 적용까지 차근차근 학습할 수 있도록 도움 드릴게요. 각 단계별로 궁금한 부분이나 어려운 점이 있다면 언제든지 질문해 주세요.

리액트에 대한 지식이 전무하기 때문에, 일단 지피티를 따라가보겠습니다.

실습내용과 코드는 다음 글부터 쓰겠습니다!

이번 글은 여기까지!