22 - 1학기/팀 스터디

[웹 FE 스터디] 웹 기초부터 React 시작하기

38기_김민서 2022. 9. 13. 02:11

TAB 2022 2학기 학회활동 [팀 스터디]

 TIL 포스팅입니다.

작성자 : 38기_김민서

해당 포스팅은 인프런 [처음 만난 리액트] 강의를 기반으로 작성하였습니다.

 

웹기초; html부터 Javascript까지

html이란?

웹페이지는 html이라는 언어로 그려지게된다

hyper text markup languange의 줄임말로 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어가 정의이다.

html의 구성

죄다 태그단위로 구성되어있다.

크게 <html></html>태그로 구성되어있고 그안에서는 head와 body태그로 구성된다!

head에서는 제목이나 meta태그(주로 utf-8이나 웹사이트 설정?이 들어가는것같다)가 들어가고

body는 화면에 그려줄 내용및 script태그로 js기능을 포함하기도한다.

 

화면에 어떻게 그려지지 + 효율적으로 html 파일을 관리하려면?

그러면 html으로 화면이 그려지면 화면이 여러개인 웹사이트의 경우 html파일이 완전 많을것이다

이때 나오는 개념이 SPA이다

Single Page Application의 약자로 아래의 그림으로 이해해볼수있다

CSS란?

위의 html은 말그래도 뼈대만을 설정할수있다

물론 태그안에 속성으로 style을 설정할수는 있지만 보통은 id나 class단위로 불러와서 css 파일안에서

한꺼번에 설정해준다

Cascading style sheets의 약자로 크기,색상, 애니메이션등등을 설정할수있다.

 

여기까지 나온 개념으로는 정적인 페이지만 만들수있다

만약 동적인 페이지를 만들고싶다면 javascript를 배워야한다

Javascript란?

*java랑 비슷하다고 생각될수있는데 아래의 유명한 그림이있다,.

javascript는 script언어인데,  c언어와 같은 컴파일 언어랑 다르다!

컴파일언어는 컴파일이라는 과정을 통해 소스코드가 생성되고 실행가능한 형태로 변환되는데

ex. vscode에서 c언어를 실행하면 exe파일이 생기는것

스크립트언어는 runtime 과정에서 언어가 해석되고 실행된다.

Javascript의 문법

자료형

동적타이핑 방식을 사용해서 c언어처럼 빡시게 자료형을 선언안해주고 var이나 let으로만 통틀어 선언해준다.

참고삼아 작성하면 자료형 종류는 아래와 같다

  • number , string , boolean, null, undefined, array, object

연산자

  • 대입(선언할때 쓰는 =) , 산술(사칙연산) , 증감 (++,--), 관계(비교), 동등, 일치, 논리, 조건부

+ 별로 중요하거나 빈번하게 쓰이는 개념은 아니지만 postfix,prefix 개념이 약간 생소해서 기재해본다

postfix가 변수뒤에 증감연산자를 쓴거고 prefix가 변수앞에 연산자를 쓴것이다!

 

동등, 일치 연산자도 잠깐 짚고 넘어가면

등호(=)를 3개나 쓰면 자료형까지 모두 일치하는지 체크하고 2개만 쓰면 값만 같은지 검사한다

 

조건부 연산자는 삼항 연산자라고 하는데

? : <-이거다

true이면 : 앞쪽의 라인이 실행되고 false먄 뒤의 라인이 실행된다

 

함수

함수를 쓰는데에는 2가지 방법이 있다

//function statement 사용
fucntion hi(a,b){
	return a+b;
}
//화살표 함수 이용
const hi2 = (a,b) =>{
	return a+b;
}

개발환경 갖추기

정리가 명확하게 되어있는거 같아서 캡처해서 가져와보았다

정확하게는 몰랐는데 npm은 패키지를 쉽게 관리할수있게 도와주는 애라고한다.

React란?

공식정의는 A javascript library for building user interfaces 라고 공식홈페이지에 나와있다

자주 사용되는 기능들을 모아둔 라이브러리라고 보면 된다.

정확하게는  "ui 라이브러리"라고 한다.

++ 몰랐는데 앵귤러는 공식적인 지원이 중단되었다고 한다.. ..

+++ 앵귤러와 뷰는 프레임워크이고, react는 라이브러리이다

 

장점

  • 빠른 업데이트,렌더링 속도
    • Virtual DOM을 사용하여 위와 같은 효과가 난다
  • Component로 모두 구성되어있다
    • 컴포넌트를 재사용(Reusability)하거나 수정하는식으로 쉽게 개발할수있다.
    • +재사용성이 높다
      • 의존성을 낮추고 호환성을 높였다는 뜻
      • 개발기간과 유지보수에 아주 용이하다
  • 많은 자료,커뮤니티및 든든한 지원군(❤️)
    • reactjs 오픈소스와 stackoverflow 수치가 굉장히 높다
    • 메타가 망하지않는한 리액트는 망하지않는ㄷ...

단점

  • 새롭고 낯선 용어들이 많다 + 버전업데이트가 잦아서 계속하여 학습해야한다
  • 상태관리가 복잡하다

React 적용해보기

그러면 react를 적용하려면 어떻게 해야될까!

html 파일에서 head태그에 아래와 같은 script태그를 추가하면된다

<script src = "https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

근데 매번 이렇게 추가하지않아도 되고 일명 cra를 실행하면된다

create-react-app 

앞에 npx라고 붙여주고 뒤에는 프로젝트의 이름을 붙여주면된다.

npx create-react-app first-react-app