Overview
React 기초 학습
5주 간 느낀 것들
1. React
1.1 Why React?
리액트를 처음 공부하면서, 리액트를 왜 배워야 하는지에 대해 생각해보았습니다.
리액트를 배워야 하는 이유가 되는 리액트의 특징 세가지
1. 선언형 프로그래밍 지향
2. 컴포넌트 기반 개발
3. 범용성
하나의 페이지를 구현하기 위해 HTML / CSS / JS로 나눠 작성하기 보다 하나의 파일에 명시적으로 작성하기 위해 JSX를 활용한 선언형 프로그래밍을 지향합니다.
하나의 기능 구현을 위해 각 기능을 담당하는 컴포넌트 기반 개발을 수행합니다.
컴포넌트로 분리하면 재사용, 유지보수, 단위 테스트 등에 효율적입니다.
또한 리액트는 JS 프로젝트 어디에도 유연히 적용이 가능합니다.
1.2 SPA
구시대의 웹 사이트는 웹 사이트의 다른 페이지로 이동하는 이벤트가 발생 시, 페이지를 구현하기 위해 HTML 문서 전체를 불러와야 했습니다.
웹이 점점 복잡해지고, 하나의 어플리케이션 형태를 갖게 되었습니다. 사용자와 서비스 간 더 많은 상호작용이 발생됐고, 중복된 요소를 불러오는 것이 굉장히 생산성이 떨어지게 됐습니다. 생산성은 페이지 로딩 속도, 사용자 경험 저하 등이 있겠습니다.
이제 HTML 문서 전체가 아니라, 업데이트에 필요한 데이터만 서버에서 전달받는 것이 필요했고, SPA(Single-Page Application) 개념이 필요해졌습니다.
SPA는 서버로부터 새로운 HTML 문서를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동되는 웹 사이트 또는 웹 앱을 말합니다.
서버는 SPA로부터 요청받은 데이터만 보내면 되기 때문에, 트래픽 과다 문제를 줄일 수 있고, 화면 전체를 불러오지 않기 떄문에 보다 나은 사용자 경험을 제공할 수 있습니다.
그러나, 대부분의 코드가 JS 파일에 존재하여 파일의 크기가 커졌고, 이 JS 파일을 읽는 시간으로 인해 페이지 첫 화면의 로딩 시간이 다소 증가했습니다.
또한, 검색 엔진이 SPA로 구성된 페이지를 잘 읽지 못하는 문제가 있었습니다. 하지만, 이러한 단점들은 점점 개선되고 있습니다.
1.3 State Hooks & Props
리액트에서 데이터를 관리하는 방법은 두 가지가 있습니다.
1. 변수에 할당하는 것
2. State로 관리
웹이 App처럼 동작하게 만들기 위해, 변수를 쓰는 것보다 State를 쓰는 것이 더 효율적입니다. State로 만들어진 데이터가 변경되면, HTML이 재 렌더링되어 화면에 표현하기 때문입니다.
변수를 쓴다면, 데이터가 변경될 때 재 렌더링이 되지 않고, 새로고침이 필요합니다.
그렇기 때문에, 자주 바뀌거나, 중요한 데이터는 변수보다 State로 관리하는 것이 효율적입니다.
State로 할당한 데이터들은 Immutable data로서 취급되어야 하는 것이 리액트의 원칙입니다. 그렇기 때문에, 데이터를 변경하거나 추가, 삭제할 땐 참조한 데이터가 아닌 새로운 데이터로 복사해야 합니다.
그리고 부모 컴포넌트에서 State를 할당하고, 자식 컴포넌트에서 그 데이터를 사용하는 경우, Props를 사용해 자식 컴포넌트로 데이터를 전달하여 불필요한 State 재 선언 없이 효율적으로 데이터를 사용할 수 있습니다.
State 와 Props 는 아직 배움이 부족하여, 더 공부하여 실습과 함께 포스팅을 하겠습니다!
2. 5주 간 회고
웹 개발 업계에 뛰어들기 위해 공부를 시작한지 한 달이 지났습니다. 주차로는 5주가 지났습니다. 그 동안 굉장히 많은 내용들이 머릿속에 들어왔고, 하나 들어오면 하나 나가는 그런 나날의 반복이었습니다.
정해진 수업 시간 (9시 ~ 18시)보다 더 많은 시간을 매일, 주말을 가리지 않고 쏟아야 배운 내용이 휘발되지 않았고, 덕분에 5주 간 배운 내용을 확인하는 시험을 통과할 수 있었습니다.
내가 공부를 열심히 했기 때문에 시험을 통과했나? 라고 생각해보면 아닌 것 같습니다.
혼자 공부했던 내용들 보다 5주 간 함께 페어프로그래밍을 수행했던 10명의 페어들과 함께 과제를 수행하며 배운 것들이 더 기억에 남기 때문입니다.
JS 기초 문법 / 함수 / 반복, 조건문 / 알고리즘 / HTML / CSS / CLI / Node.JS / DOM / React 등 정말 많은 주제의 과제들을 10명의 동기분들과 함께 수행하며, 서로 모르는 것들을 검색하며 알려주고, 배우며 더 많은 지식을 짧은 시간에 습득할 수 있었습니다.
처음 개발 공부를 시작하고 5주 간 배운 것의 정수는
1. 웹 개발에 있어 기본적인 개념과 문법
2. 내가 모르는 문제를 해결하는 방법 📌
3. 알게된 내용, 알고있는 내용을 공유하는 방법 📌
이 세 가지로 요약할 수 있을 것 같습니다.
첫 번째 정수는 구글링, 유튜브 영상으로도 충분히 알 수 있지만,
두 번째, 세 번째 정수는 직접 경험하지 않고선 알 수 없는 것들이었습니다.
첫 5주간 배운 이 정수를 간직하고, 앞으로 다가올 더 어려운 본격적인 세션에서 성공적인 결과를 도출하고 싶습니다!
카드가 모자라면 몸이 고생이군요. (Rogues are not good joggers.)
카드를 4장 뽑습니다.
하스스톤에 마음가짐과 전력질주라는 카드가 있습니다. 마음가짐 - 전력질주 콤보로 낮은 코스트로 4장의 카드를 뽑아 효율적인 후반 플레이를 수행할 수 있었습니다.
제 블로그의 첫 글로 마음가짐 이라는 제목의 글을 포스팅했습니다. 첫 글 이후 5주가 지났는데요!
마음가짐을 사용해 줄어든 코스트로 힘차게 전력 질주하여 성공적으로 코스를 수료해보도록 하겠습니다! 나아가, 원하는 회사에 프론트 엔드 주니어로 새 출발하는 그 날 까지 열심히 달려보겠습니다!
앞으로 더 노력하는 모습들을 지켜봐주세요!
5주차 주간 학습 리뷰는 다소 짧은데, 좀 더 공부해서 블로깅해보도록 하겠습니다. 글 읽어주셔서 감사합니다! 💗
