TAB 2022 2학기 학회활동 [팀 스터디]
TIL 포스팅입니다.
작성자 : 38기_서다원
ref : 인프런 강의 [소플의 처음 만난 리액트(React)]
HTML
마크업 언어의 한 종류
웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어
흔히 태그(Tag) 를 이용해서 쓰임.
예시 )
<html></html>
<br />
body 태그에 실제 웹사이트에서 보이는 콘텐츠가 들어간다.
SPA
Single Page Application 의 줄임말.
하나의 페이지로 웹사이트를 관리하는 것
리액트가 이에 해당함.
html 파일은 하나만 있고, 동적으로 body 태그 내에 content를 바꿔넣음.
CSS
디자인을 적용할 수 있음
Javascript
프로그래밍 언어의 한 종류
정식 명칭은 ECMAScript
스크립트 언어의 한 종류 -> 런타임에 코드가 해석된다.(컴파일 언어가 아님)
최근에는 모바일 앱 개발, 데스크탑 앱 개발에도 쓰임.
JavaScript 의 문법
자료형
변수에 데이터가 대입될 때 자료형이 결정됨 -> 동적 타이핑(Dynamic Typing)
var 이나 let 씀
Number type
String type
Boolean type
Null type -> 정의 되긴 했으나 정의 된 값이 null
Undefined type -> 값이 정해져 있지 않은 상태
Array type
Object type ... 등등 있음.
연산자
대입 연산자 : =
사칙 연산자 : +, -, *, /
산술 연산자 : %, **
증가 연산자와 감소 연산자 : ++, --
postfix 방식 : a++, 반환한다음에, 증감시킴.
prefix 방식: ++a, 먼저 증감시키고, 반환함.
관계 연산자(비교연산자) : <, >, <=, >=
동등 연산자 : ==, !=
일치 연산자 : 자료형까지 같은지 확인 ===, !==
이진 논리 연산자 : && 는 and 연산, || 는 or 연산
조건부 연산(삼항 연산자) : 조건식 ? true 일 경우 : false 일 경우
함수
함수의 입력은 파라미터(인자)라고 함
function statement 사용하거나 arrow function expression 사용
개발 환경 설정하기
일단 두 개를 설치해야함.
Node.js : 자바스크립트로 애플리케이션을 개발할 수 있게 해주는 환경
npm : node package manager, 편하게 설치 및 삭제할 수 있게 도와줄 수 있음. node.js 설치하면 알아서 설치됨.
VS Code 도 설치
VS Code : IDE 의 한 종류임.
리액트란 무엇인가?
사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리
라이브러리란?
자주 사용되는 기능들을 정리해 모아 놓은 것
자바스크립트 라이브러리 종류
Angular.js -> 공식적인 지원 종료됨. 프레임워크
React.js -> Meta에서 만들었고, 가장 많이 사용되는 라이브러리임.
Vue.js -> 프레임워크, 오픈소스 프로젝트, 리액트와 함께 자주 언급됨. 입지가 어떻게 될지는 모름.
프레임워크과 라이브러리의 차이?
프레임워크 : 프로그램 흐름 제어 권한 개발자가 아닌 프레임워크에게
라이브러리 : 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할때 가져다 사용
웹 개발의 트렌드
워낙 변화가 빠른 곳이라 지금 학습하는 리액트를 넘어서는 다른 스택이 나올 수도 있음.
그러니 한가지 기술이 대세가 될 것이라고 생각하지 말고
일단은 웹사이트의 작동 원리와 흐름을 함께 이해하는게 중요.
리액트의 장점과 단점
장점
빠른 업데이트 & 렌더링 속도
리액트의 특징을 알아보자
Virtual DOM(Document Object Model)를 사용
업데이트 해야할 최소한의 부분만 업데이트하고 렌더링함 -> 빠른 업데이트 가능
Component-Based
블록을 조립하듯 컴포넌트들을 모아서 개발함.
재사용성(Reusability)이 높아지면 개발 기간이 단축되기에 중요함. 또한 유지 보수도 용이함.
리액트는 컴포넌트 기반의 구조이다. 따라서 재사용이 가능하도록 컴포넌트를 개발하는 것이 중요하다.
단점
방대한 학습량
업데이트 되는 부분에 대해서 학습해야함(버전 업데이트..).
높은 상태관리 복잡도(state 개념)
(이 강의에서는 외부 상태관리 라이브러리를 학습하지 않는다고 한다.
create-react-app
처음부터 리액트가 적용되어 있는 프로젝트를 생성하자.
(직접 연동하면 불편하니까)
npx 명령어로 생성 가능함
npx create-react-app 프로젝트이름
그 다음에 그 프로젝트 있는 경로로 이동해서 npm start 하기
'22 - 1학기 > 팀 스터디' 카테고리의 다른 글
| [웹 FE 스터디] 리액트 시작하기(2) - JSX, elements, props (0) | 2022.09.22 |
|---|---|
| [웹 FE 스터디] JSX, Rendering Elements, Components, Props (0) | 2022.09.22 |
| [웹 FE 스터디] React : 이벤트 ~ 생성 기능 (0) | 2022.09.22 |
| [웹 FE 스터디] React (1) | 2022.09.22 |
| [웹 FE 스터디] 웹 기초부터 React 시작하기 (0) | 2022.09.13 |
