국비지원 학원 삼개월, 첫번째 프로젝트를 마친지 일주일이 지났다.
내 자신에게 답답하기도 했고, Java보다는 JavaScript에 좋은 기억이 있는 김에, 더 깨끗한 툴을 사용하고 싶어서(이클립스가 너무나도 쓰기 싫었기에) 리액트를 공부하기로 마음먹었다.
물론 학원에서 리액트를 배우기는 했지만, 프로젝트와 병행하며 너무나도 빠르게 지나갔기 때문에 app 어쩌구로 불러온다는 것 외에는 전혀 기억이 나지 않아(버려야 할 것도 많은 것 같고) 처음부터 시작하게 되었다. 하지만 온라인 강의로만은 내가 원하는 정보를 콕 찝어서 보기가 어렵고, 곱씹기가 힘들어서 책을 구매했다.

스무디 한 잔 마시며 끝내는 리액트+TDD

방문한 알라딘 중고 서점에 검색되는 단 하나의 리액트 책이었고, 어디선가 주워 들었던 것 같은 TDD에 약간의 관심이 생긴 것도 있고 해서 그냥 집어왔다..
state에서 굉장히 막혀있었는데 이 책에서는 어떻게 설명하는지 빠르게 보고 하루에 조금씩이라도 매일 공부하려고 한다.

React란?

리액트를 알기 위해서는 JS의 역사를 간단하게 알 필요가 있다.

JS와 넷스케이프 커뮤니케이션즈

• 1990년 팀 버너스리에 의해 웹 브라우저 시대가 열리게 된다.
• 1993년 일리노이 대학교에서 NICA 모자이크를 출시한다.
  • 이 프로젝트를 주도한 마크 앤드리센은 아르바이트 학생이라는 이유로 제대로 된 평가를 받지 못하고 모자이크의 주력 개발팀에 뽑히지 못한다.
  • 마크 안드리센은 일리노이대를 떠나 실리콘 밸리에서 투자를 받아 모자이크 커뮤니케이션을 설립한다.
  • 모자이크를 만들었던 동려들을 불러모으고 이름마저 모자잌가 들어가 일리노이대로부터 고소를 당하게 되어서 회사 이름을 넷스케이프 커뮤니케이션즈로 변경한다.
• 1994년 10월 넷스케이프 커뮤니케이션즈는 그들의 첫 웹 브라우저 넷스케이브 네비게이터를 선보인다. 회사 내부에서는 Mozilla라는 코드명으로 시작되었다. 이 서비스가 출시 된 수 대박을 치게 되며 웹브라우저 시대의 시작을 알리게 된다.
• 1995년 넷스케이프는 시장 점유율이 약 90%에 달하게 되었고 정적인 HTML을 “동적”으로 표현하기 위한 프로그래밍 언어 개발을 착수하고 이때 탄생된 것이 자바스크립트이다.
• js의 기반이 된 언어인 모카는 1993년 10일만에 만들어진 언어이고, 그해 9월 라이브 스크립트로, 12월 자바스크립트로 명명된다.

자바 스크립트와, 다른 언어의 연관성

• 리스프 에서 변수 스코프와 클로저를 가져왔닫
• 셀프 에서 프로토 타입 상속을 가져왔다.
• 썬마이크로시스템즈 와 협업중 그들의 언어가 썬의 자바 문법과 유사하길 바랬다.
  

이름의 유래

• 마케팅을 위해 잡스크립트라는 이름을 지었다는 설이 가장 유력하다
• 많은 개발자가 js를 사용하기를 바랬고 자바에서 파생되었다는 인상을 주실 바랬다.

전개

• 마이크로 소프트의 J스크립트와의 경쟁이 심화되었고 ms는 os에 기본적으로 깔아주는 ie로 인해서 시장 점유율을 잠식해 나간다.
  • IE와 넷스케이프 네비게이션이 브라우저 시장을 공유하게 되면서 크로스 브라우징 이슈가 발생하게 되고 두군데 동시에 동작하는 웹 페이지를 개발하는데 어려움을 격기 시작한다.
  • 2006년 불편함을 해결하기 위해 JQuery가 등장한다
    • 배우기 쉽고 직관적인 api를 제공, 웹브라우저 필드에서 오랜기간 사랑받았다.
  • 2007년 아이폰과 2008년 안드로이드가 등장하면서 애플리케이션이라는 개념이 확장되었고 사용자의 단말기 성능이 크게 올라가 웹 서비에서도 웹 어플리케이션이라는 개념과 서비스달이 쏟아져 나오게 된다.
  • 2010년 구글이 트렌드에 대응하고자 angularJS라는 프레임워크를 출시한다.
    • 싱글 페이지 애플리케이션이라는 새로운 시대를 열게 된다.
    • MV(Model-View), 양방향 데이터 바인딩 등 새로운 개념을 도입힌다.
    • 하지만 JQuery를 기반으로 하고 있었고 너무 많은 변화와 새로운 개념으로 러닝커브가 너무 높았다.
  • 2011년 페이스북 개발자였던 Jordan Walke가 PHP용 HTML 컴포넌트 프레임워크였던 XHP에 영감받아 “리액트”를 개발하게 된다.
    • 2011년 페이스북의 뉴스 피드에 첫 등장한다.
    • 2012년 인스타그램 닷컴에 적용
    • 2013년 리액트를 오픈소스로 발표
  • 앵귤러와 다르게 UI에 집중된 자바스크립트 라이브러리로 출시되었다.
    • 자바스크립트에 HTML을 포함하는 JSX(javascript XML)라는 간단한 문법을 채택
    • 단방향 데이터 바인딩을 채택
    • 가상돔 이라는 새로운 개념

리액트는 싱글 페이지 에플리케이션의 UI를 만드는 자바스크립트 라이브러리이다. 앵귤러보다 러닝커브가 낮지만 프레임워크가 아닌 라이브러리이므로 부족한 부분들이 존재해서 이 점을 채우기 위해 다른 라이브러리와 함께 사용해야 한다..

React는 왜 쓰는지?

single page application

• 싱글 페이지 웹사이트는 기능상, 외관상 app 같은 느낌이 나는 웹 애플리케이션으로 볼 수 있다. G-mail 페이지의 경우 웹사이트보다는 application 같은 느낌이 든다.
  웹으로 하는 word, ppt, exel등을 웹 애플리케이션이라 한다.
• 일반적으로 전통적인 웹페이지(네이버,다음)등은 각각의 페이지들이 나뉘어져 있는 것.
• 웹 애플리케이션에 대한 수요가 늘어가면서 기존 전통적인 JSP나 Jquery등을 사용해서 만들기엔 너무 많은 데이터를 핸들링해야 하기 때문에 single page application을 많이 사용하게 되었다.
• 또한 웹페이지들을 만들기 위해서 JavaScript만 사용하기도 너무 어려워 졌기 때문에 React Angular(RIP), Vue등이 개발되고 사용되었다.
• 그중 React는 Facebook이 데이터와 화면을 일치시키기 위해서 개발하게 되었다고 한다.

아주 복잡한 코드 속에서 고통받고 있다면 무엇을 하고 싶을까?
연관된 코드를 붙여서 정리하고 내가 만든 태그를 사용해 간단하게 볼 수 있게 만드는일, 사용자 정의 태그를 만드는 일을 할 수 있는게 React.

모든 웹사이트를 싱글 페이지 앱으로 만들 필요는 없지만 아무래도 트랜드가 트랜드이다 보니 더욱 더 많은 곳에 사용되어 지고 있다

단점도 분명한데, 미국에서 js로 이루어진 웹사이트는 너무나도 많기 때문에 알아서 분석하고 파악을 하는데 한국 웹에서는 그렇지 못한다고 한다.(검색앤진이 아니라 포탈인 이유도 한몫하고)

💡 리액트가 아주 큰 도움을 주는 것은 맞지만.프론트엔드의 개발자의 기본 소양은 HTML CSS JS 임을 잊지 말아야 한다.특히 JS를 못하면 React를 못한다는 것을 기억해야 한다.