Back to study

빠르게 공부하는 React

빠르게 공부하는 React와 곁가지들

ReactJavaScriptViteNode.js

나는 본래 게임을 만들고 싶었다.
발단은 스타크래프트 유즈맵 제작을 잠깐 공부했던 초딩 시절의 패기였는데,
나이가 들고 유니티를 공부하다가, 어느 순간부터 게임이라는 ‘종합 예술’을 손대기에는 덜컥 겁이 나서 상용 SW 개발로 진로를 틀었다.

그러나 하필이면 유니티에서 사용하던 C# → 자연스럽게 .NET 생태계 중 하나인 WinForm을 공부했었고, 이게 생각보다 국내에선 극히 마이너한 장르임을 깨닫고 남들과 비슷한 길을 걷기로 했다.

그렇게 소프트웨어 학과를 복수전공하면서 자연스럽게 Java와 DB쪽을 공부하게 되었고, 이 무렵에는 Spring도 함께 공부하면서 서버 개발자가 되고자 열심히 공부했었다.

그러다가 팀 프로젝트에서 웹 프론트 팀원의 거한 분탕질을 목격하며, 이런 상황을 대비하여 웹 개발도 공부해야겠다고 마음먹고 기초적인 HTML/CSS + JS를 잠시 공부했다. 어느정도 간단한 정적 페이지를 띄울 수 있는 수준까지는 생각보다도 금방 도착했다 (이때는 코드잇의 강의를 보며 공부했었다).

그런데 여기서 또 한번 세상일 참 알 수 없던것이, 학과 캡스톤 프로젝트때 우연히 안드로이드 프로젝트에 참여하게 되었고, 본래는 서버쪽을 맡고싶었으나 어쩌다가 프론트를 맡게 되었다.
그렇게 나는 속성으로 Kotlin과 Jetpack Compose를 공부했고, 캡스톤 이후에도 나름 정석적인 방법으로 안드로이드 스택을 공부해서 안드로이드 개발자의 길을 걷게 되었다.

그러나!!!
국내에서 안드로이드 개발자로 취업하기는 생각보다 쉽지 않았다 — 애초에 많이 뽑지도 않을 뿐더러, 그 좁은 시장에서도 Flutter를 쓰냐 Jetpack Compose를 쓰냐 React Native를 쓰냐로 나뉘었다(Java Native는 전멸한 것 같다).

그래서 결국 돌고돌아, 나는 다시 웹 쪽을 공부하기로 마음먹었다.
이유는 크게 다음과 같았다:

  • React와 Compose는 닮은 면이 의외로 많다.
  • Html/CSS, Javascript/Typescript에 대한 약간의 지식이 남아있었다.
  • 서버에 비해, 프론트 쪽이 더 싸고 빠르고 신속하고 직관적으로 공부할 수 있다는 개인적인 생각.

그래서 어떻게 공부할까 하던 중, 우연한 기회에 코딩애플이 얼마 전 론칭했다는 신규 강의를 보게 되었고,
이 트랙을 따라가면서 별도로 AI를 활용해서 공부하면 되겠다는 생각이 들었다.

목표

  • 강의 전체 수강
  • 동시에 등장하는 HTML/CSS + JS 위주로 복습

기대 효과

  • React 코드의 대략적인 동작 원리와 간단한 예제정도는 무리없이 이해할 수 있다.
  • 간단한 정적 페이지를 만들어보며 React와 친해지기

향후 계획

  • 고급 문법, 프로젝트 구성 등 공부
  • 안드로이드 프로젝트처럼, 나름의 Template을 구성
  • 전용 AI Skill 구현 (코드 감사 및 리뷰 용도)

Study Log

  1. #1#01. 왜 "React"인가? - React의 특징
  2. #2#02. React를 위한 빠른 JavaScript 문법 Recap
  3. #3#03. React의 Rerender 규칙 + 깊은 복사(Deep Copy) vs 얕은 복사(Shallow Copy) vs 참조 복사(Reference Copy)
  4. #4#04. Vite로 React 프로젝트 생성 + 프로젝트 구조 살펴보기
  5. #5#05. JSX 작성 규칙
  6. #6#06. State와 useState
  7. #7#07. React 컴포넌트
  8. #8#08. Bubbling & Capturing
  9. #9#09. React: Bootstrap & 이미지
  10. #10#10. React-Router: SPA에서 화면만 갈아끼우기
  11. #11#11. Component Lifecycle & useEffect