[개요]
자바 스크립트 기초 강의를 다 뗐다.
리액트를 배우기 전까지 필요한 자바 스크립트 기초 문법을 익혔다는 얘기다.
어쩌다보니 이어서 리액트를 배우게 되었다.
이걸 배우면 잘하면 내 힘으로도 웹사이트 껍데기를 만들 수 있을 것이고
못해도 프론트에 대한 이해도가 높아지겠지.
배워서 손해 볼 건 없어. 어차피 저녁마다 하는 거기 때문에~
간단한 사이트 정도는 내 힘으로 만들 수 있다고 생각하면 신이 난다!!!
좀 작업 필요해지면 백엔드 친구들한테 샤바샤바 하면 되고
혹은 내 망상인데 깃허브에서 개발한 코드 자동 완성 기술 써볼 수도 있지 않을까? 그것도 개발 지식을 잘 알아야 되겠지만 아무튼 그렇다. 해보기 전에는 할 수 있는지 아닌지 모르는 거다.
[강의와 오늘 학습량]
[무료] 처음 만난 리액트(React) - 인프런 | 강의
자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런...
www.inflearn.com
이 강의를 선택했다.
기초부터 하니까 쉽지 않을까 싶어서.
노마드코더님 강의랑 고민하면서 같이 들어봤다. 둘이 가르치는 내용이 조금씩 다르다. 노마드코더님은 리액트가 쓸모있는 이유를 바닐라 방식과 직접 비교하면서 확실히 알려주는 편이다. 또한 오늘의 학습목표, 요점 정리, 이해 확인 등의 표현이 좀더 자연스럽다. 인프런 강의가 안그런다는 게 아니고 그런 말을 좀더 많이 하시는 거 같애. 결론은 취향문제인데...
난... 더 짧고, 기초부터 가르쳐준다는 점에서 이 강의를 선택했다.
아직 엘리멘트, 오브젝트, 엔티티가 헷갈리기 때문에 그런 용어를 많이 쓰는 다른 강의는 조끔 곤란했다. ㅎㅎ!!
나는 몬가 내가 엄청 못할줄 알고 자바 스크립트를 복습하는 겸 해서 준비하기 챕터도 다 봤는데, 꼭 안봐도 되었다는 생각이 든다. 왜냐면 여기 강의에서 가르쳐주는 기초 문법은 나도 다 기억하고 있더라고~ 나 기특해!!! 칭찬해!!!
준비하기 단계에 나오는 내용은 SPA 외에는 거의 알고 있었다는 점에서 나 좀 대견한듯.
SPA를 가능케 하는 대표적인 라이브러리가 리액트라는 걸 알았으니 유익한 시간이었다.
오늘치 학습 내용 정리
- 이 색은 더 찾아봐야 할 내용
#1. HTML과 CSS
HTML (Hyper Text Markup Language): 레이아웃, 구조, 웹사이트의 뻐대를 구성하기 위해 쓰는 마크업 언어
마크업
태그: <ㅇㅇ> </ㅇㅇ> 열고 닫아야 함.
헤드: 웹사이트 타이틀 테이블과 설명. 메타 데이터
바디: 컨텐츠
예전 방식에서는 웹사이트 페이지마다 HTML 파일이 따로 있었다. 내용이 중복되는 헤드도 포함해서...
사이트가 커지면 수많은 페이지를 관리하는 게 힘들어진다.
이런 단점을 극복하기 위해 나온 방식!
SPA (Single Page Application): 1개 페이지 하나만 두고 요청하는 바에 따라 안의 내용만 바꿔서 쓰는 방식.
SPA & Routing | PoiemaWeb
단일 페이지 애플리케이션(Single Page Application, SPA)는 모던 웹의 패러다임이다. SPA는 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과
poiemaweb.com
link tag를 사용하는 전통적인 화면 전환 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않다. 그리고 변경이 필요없는 부분까지 포함하여 전체 페이지를 갱신하므로 비효율적이다.
SPA는 기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근 시 단 한번만 다운로드한다. 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소시킬 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.
REACT는 SPA 방식을 사용하여 동적으로 바디 내부를 채워넣는 도구임.
HTML의 레이아웃과 REACT의 component
CSS (Cascading Style Sheet): 레이아웃, 글꼴, 색상 등 디자인.
#2. 자바 스크립트 자료형
자료형(데이터 타입): 모든 변수에 데이터가 들어갈 때 생김. 동적 타이핑 방식.
그래서 다른 프로그램과 달리 변수를 선언할 때 자료형을 먼저 쓰지 않고 VAR(변수를 의미하는 variable)를 씀.
또는 LET 씀. 대부분 LET이나 CONST.
변수를 선언하지 않았을 땐 undefined(지정되지 않음) 타입이 되고 값을 넣는 순간 바뀌는 거임.
null은 정의되긴 했는데 null로 정의된 것.
number, string, boolean, null, undefined, object
- 자바스크립트에는 배열에 여러 자료형이 함께 드갈 수 있는데 파이썬도 그럼.
- 다른 객체 지향 프로그램과 다르게 객체는 걍 키와 벨류 데이터 쌍임. 키는 오로지 문자열, 값은 아무거나~
+ 타입 스크립트: 자바 스크립트 개선판. 동적 타이핑 방식 때문에
c언어나 자바처럼 강제로 타입화해놓은 것. 객체 지향 개념도 쓸 수 있게 해줌.
#3. JavaScript의 연산자
- 대입 연산자: =
오른쪽에서 왼쪽 방향으로 흐름이 흘러감. - 산술 연산자: + - * / %(나머지) **
산술+대입으로 압축 표기 방법: += /= - 증가 연산자, 감소 연산자: ++ --
++a 하면 처음 준 a도 값 오르는듯, 순서 중요함, 기존값 남기려면 a++ 하자. - 비교 연산자: < > >= <=
왼쪽을 기준으로 생각하셈, 헷갈리면. - 동등 연산자 == != 값
- 일치 연산자 === !== 값이랑 자료형까지
- 이진 논리 연산자 &&(and, 모두 true) ||(or, 하나라도 true)
- 조건부 연산자(삼항 연산자)
조건? true일 경우 내용: false일 경우 내용
#4. 리액트는 무엇인가?
리액트는 자바스크립트의 라이브러리임. 라이브러리란 자주 사용되는 기능 모음집.
리액트 = 버튼, 텍스트 입력창 등 사용자와 상호작용하는 ui(user interface)를 만들기 위한 기능 모음집 = ui 라이브러리
대표적인 자바스크립트 (SPA 개발이 가능한) ui 도구
리액트js - 라이브러리
앵귤러js / vue.js - 프레임워크
프레임워크: 흐름에 대한 제어권한이 자신에 있음
라이브러리: 제어권한이 개발자가 필요하면 가져다 씀
리액트가 지금 트렌드라서 그렇지 웹개발도 유행 탐.
[정리]
리액트는 사용자와 웹사이트 상호작용 돕는 기능 모음집.
수많은 페이지를 빨리 쉽게 잘 관리하기 위한 도구.
하나의 페이지만 존재하게 하고 사용자 요청에 따라 내용을 달리 채우게 하는 spa 방식
#5. 리액트의 장점과 단점
장점
1. 업데이트, 렌더링이 빠름(변경되는 부분만 리렌더링 하기 때문에 성능적으로 좋다).
2. component 기반의 구조의 장점: 재사용성. 의존성, 호환성을 신경 쓸 필요 없음.
- 개발 기간 단축 / 유지보수도 하기 쉬움. 문제 생긴 모듈만 수정하면 되거든. / 각 부분 간의 의존성이 낮으니까 버그 원인 찾기 쉬움.
- 리액트와 재사용성의 연관성: 컴포넌트를 재사용할 수 있음. 다른 웹사이트 만들 때도 활용 가능.
3. 메타라는 it 대기업 지원군이 오픈소스 프로젝트 발전 계속 시키고 있음.
- 커뮤니티도 활발해서 정보 찾기 쉬움
4. 리액트 네이티브로 모바일로 가능함. 모바일은 별도의 프로그래밍 언어를 배울 필요가 있어서 진입장벽 높았었는데 간단한 수준이면 가능해짐.
단점
1. 새로운 개념, 기존과 다른 방식이라 배울 거 많음
2. 계속 뭔가 바뀜...
3. 컴포넌트 상태인 스테이트를 잘 관리해야 성능 최적화 되는데 그게 힘듬. 상태관리가 복잡함.
배울 뻔 했던 것들
http://www.yes24.com/Product/Goods/62597469
리액트를 다루는 기술 - YES24
리액트, 어떻게 활용하느냐가 중요하다!기본기를 꼼꼼하게! 효과적으로 활용하는 방법까지 다양하게 배우자!리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하
www.yes24.com
https://nomadcoders.co/react-for-beginners/lobby
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
왕초보를 위한 React
nomadcoders.co
이 두개 도구는 안하기로 함. 해도 다음에....
https://youtube.com/playlist?list=PLniy99c_7ZfpURYCmquts3lQYWzFAIxod
정보처리 필기 특강
www.youtube.com
https://youtube.com/playlist?list=PLimVTOIIZt2aR9jib0ws7hoDVZXdtiWsK
정보처리 필기_전자계산기 구조
www.youtube.com
정처기 만약에 언젠가 따게 된다면...
'공부, 연구 > 개발' 카테고리의 다른 글
| 1031 리액트 강의 수집 (0) | 2022.11.01 |
|---|---|
| 1030 강의 캡쳐 (0) | 2022.10.31 |
| 1028 알게 된 개발 용어 (0) | 2022.10.29 |
| 1024 부트스트랩 사용 공부 (0) | 2022.10.25 |
| 자바 스크립트 기초 3일차 221021 (0) | 2022.10.22 |