🙋🏻‍♂️ 목표: 리액트 기초를 공부하고 실전에 대비하자.

1. JS가 어떻게 태어나게된 계기

---

🙌 JS언어가 태어나게 된 계기는 여러가지가 있기만 그 중에서도 클라이언트에서 사용하기 위해 태어났다. 여기서 웹 개발이면서 클라이언트라는 것은 브라우저를 말한다. 브라우저에서 돌아가는 언어는 단 하나, JS밖에 없다. 근데 JS를 백엔드 환경에서도 사용할 수 있게끔 하게된 계기가 node.js가 나오면서 부터이다.

node.js를 설치하면 npm이 자동적으로 설치되는데 npm은 노드 패키지 매니져이다. 결국 npm은 JS를 위한 것.

npm 에서 p는 패키지라고 해서 라이브러리라고 생각하면 되는데 남이 만들어놓은 소스코드라고 보면 된다. 예를 들면 우리가 다양한 문제를 풀 때 최소값•최대값도 구해보고, 랜덤함수도 써 봤는데 이런식으로 수학과 관련된 함수가 굉장히 많이 필요하다. 그래서 그 때마다 매 번 우리가 정의하고 사용할 수가 없음. 있지만 많다면 얘기가 달라질 것이다. 그래서 이미 이런 것들을 누군가가 만들어 놓았다.

링크: npm | math검색

우리는 npm 사이트에서 검색하면 수학, 과학, 이벤트 뿐만 아니라 UI관련 된 것도 많이 나온다. 예를 들면 UI에서 검색 메뉴라던지 검색바 같은 것이 굉장히 많다. 앞으로 소스코드를 많이 사용하여 활용하자. 결과적으로 node 와 npm 은 앞으로 쓸 일이 굉장히 많기 때문이다.

2. 노드 설치 페이지 설명

---

🙌노드 홈페이지에서 LTS는 오랫동안 안정적으로 유지되고 있는 버전 // 최신이긴 하지만 조금 불안정한 버전

링크: node.js 다운로드 링크

3. 프로젝트 구조 설명

---

• gitignore: 깃에 더 이상 트래킹 하고 싶지 않을 때, 버전관리에 포함이 되면 안되는 것들
• package.json: 내 프로젝트에서 외부적으로 쓰이는 라이브러리와 버전이 나와있는데 명령어를 통해서 외부 라이브러리를 추가하고 버전 업데이트 가능
• readme.md: 프로젝트 설명
• node_modules: 외부 라이브러리들을 추가했을 때 자동 추가. 외부 라이브러리들이 들어 있음
• public: 사용자에게 배포할 때 외부적으로 보여지는 것들
• manifest.json: 웹 어플리케이션에서 필요한 것x, 나중에 PWA(프로그래시브 웹 어플리케이션)을 만들 때 즉 모바일에서 저장하는 웹 앱을 만들때 필요한 것
• robot.txt: 웹 크롤링을 위해서 사용됨.
• src파일: 핵심, 소스코드가 들어있는 곳

4. 용어 설명

---

• yarn create react-app test: react-app이라는 페이스북에서 만든 패키지였는데 yarn이라는 라이브러리를 이용해서 test라는 이름의 프로젝트를 만든다.
• 터미널→ ls -al →.git파일이 생겨남: 앞으로 버전을 관리할 때 깃을 이용하면 작성되는 로그파일
• BABEL: 개발은 최신 문법을 쓰고 배포할때는 예전 버전의 JS코드로 변환해주는 것(ECMA Script 2015 이후→예전 버전 변환해줌)
• 웹팩: 우리가 작성한 소스 코드나 리소스 이미지들을 한꺼번에 묶어서 번들단위로 사용자에게 제공하는 기능(코드 번들러)
• eslint: 코드 검사
• Jest: 유닛 테스팅 프레임워크
• PostCSS: CSS전처리기

5. 라이브러리?

---

핵심 요약: 프로그램 제작 시 필요한 기능

예) 자동차 바퀴, 헤드라이트, 에어백

🙌 라이브러리란 JS에서 항상 반복되던 코드의 양을 줄이기 위해 재사용 가능성 여부를 판단하고 언제든지 호출할 수 있도록 Class 나 Function 으로 만들어진 것.

이에 따른 사용 여부는 취향 차이이며 의도에 맞게 작성하면 됨.

• 라이브러리에 대한 설명

자바스크립트의 가장 유명한 라이브러리는 제이쿼리이다. 간혹 프레임워크라고 소개를 하는 곳이 있는데 공식 사이트에서 라이브러리라고 명시가 되어있다.

UI에서 재사용하기 쉽게 만들어진 버튼이나, 테이블 같은 것들을 분리해 두었다면 라이브러리라고 할 수 있다.

객체지향 프로그래밍(object oriented programming, 이하 OOP)은 기본적으로 각 기능마다 함수화하는 것으로 class 라이브러리라고 할 수도 있다.

6. 프레임워크?

---

핵심 요약: 프로그램 제작 시 기본 뼈대를 구성

예) 자동차의 프레임

🙌 원하는 기능 구현에만 집중하여 빠르게 개발 할 수 있도록 기본적으로 필요한 기능들을 이미 두루 갖추고 있는 것으로서 라이브러리가 포함되어 있다.

프레임워크만으로는 실행되지 않는다. 기능을 추가해야 하고 프레임워크에 의존하여 개발해야 하며 프레임워크내에서 정한 규칙에 따라 개발해야 한다.

• 둘 다 비슷해 보이는데 프레임워크가 존재하는 이유

프레임워크와 라이브러리는 겉으로 보기엔 비슷하지만 서로 아키텍쳐가 다르며 일정한 규칙을 따라야 한다.

프레임워크의 예)

자바개발자 → 스프링,

파이썬개발자 → 장고,

자바스크립트개발자 → 앵귤러,

PHP개발자 → 라라벨

7. 아키텍쳐?

---

핵심 요약: 프로그램 구조 설계

예) 제품의 도면

🙌 기획한 내용을 프로그램화하고 주요 특징을 기술적으로 설계하고 명시한 것.

결과물과 관련된 모든 구성 요소들을 명시하지만, 더 자세한 구현 방법은 포함되지 않음.

아키텍쳐의 예) 자동차 설계에서 헤드라이트가 어떤 모양인지는 명시하지만 그 안에 제품이 몇 개의 볼트로 연결되어 있는지, 어떠한 접착제를 썼는지 등은 명시하지 않음.

8. 플랫폼?

---

핵심 요약: 프로그램 실행 환경

플랫폼의 예) 자동차의 주행 환경

🙌 프로그램의 사용 목적에 맞도록 플랫폼 결정하는 것이 중요함.

9. 프레임워크와 라이브러리의 차이점?

---

• 라이브러리: 톱, 망치, 삽같은 연장
• 프레임워크: 차, 비행기 , 배

라이브러리와 달리 프레임워크는 탈것 등으로 정해진 곳만 다닐 수 있다. 배로 육지를 다닐수는 없으니까.

따라서 라이브러리와 달리 프레임워크는 이미 프로그래밍할 규칙이 정해져 있다.

1. 만약, 프레임워크가 담당하는 부분이 내가 하고자 하는 목적과 다를 경우?

   : 그냥 프레임워크를 잘 못 쓴 것. 더 목적에 가까운 프레임워크를 찾아서 쓰는 것이 중요함.

2. 프레임워크 없이 그냥 라이브러리로만 만들면 안될까?

   : 시간이 많으면 그렇게 해도 됨. 스스로 만든 프레임워크는 버그도 스스로 잡아야하지만 남들이 만들어 놓은 것은 그만큼 수정이나 업데이트가 빠름.

   : 기능이 마음에 안든다면? 프레임워크를 고치면 됨. 처음부터 다 만드는 것보다 기회비용이 발생하는 것을 염두해야 함.