1. 강의는 인강이다.
사교육에 절어있는 한국인으로서 무언가를 배울 때는 인강이 최고다. 그래서 필자는 인프런이라는 사이트에서 강의를 듣기로 했다.
이 강의를 선택한 이유는 사람들이 많이 수강해서이다. 사람들이 많이 수강한 이유는 무료여서 그렇지 않을까 싶다. 무료임에도 강의 퀄리티가 상당히 좋은 것 같으니 추천하는 편이다. (지금 8.93% 듣고 추천하는 것이다. 판단은 알아서..)
2. 강의 노트
원래 강의를 들으면서 블로그에 차근차근 정리하려고 했는데, 양이 방대해서 그건 어려울 것 같다. 그냥 필자가 공부한 내용을 정리한 것이니 노트처럼 보면 될 것 같다. 사실 내가 보려고 만든거다.
섹션 0. 준비하기
1강 : HTML과 CSS
HTML, Hyper Text Markup Language : 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어
Tag (태그) : 웹사이트의 구조를 만들고, 내용을 채워 넣음
- <html> </html>
- <> 안에 Tag 이름을 넣어서 쓰고, 열면 반드시 닫아야 됨
- <br /> : 한 번에 열고 닫음
태그는 열었으면 반드시 닫아야 함
- html : html을 열고 닫는 태그, 뼈대를 구성함
- head와 body가 들어감, 머리와 몸통을 구성
- SPA, Single Page Application 하나의 페이지만 존재하는 웹사이트
- CSS, Cascading Style Sheets 웹사이트의 디자인을 입히는 역할을 하는 언어
2강 : JavaScript 소개 및 자료형
JavaScript = ECMAScript
- 버전명 : ES5, ES6 등 앞글자만 따서 씀
- JAVAScript : 웹사이트가 움직이도록 생명을 불어넣는 역할
- Script Langauage : 프로그램이 실행되는 Run Time에 Code가 해석되고 실행됨
JavaScript의 문법
자료형(Data Type)
- 동적 타이핑(Dynamic Typing) : 동적으로 자료형이 결정되는 것
- Number Type : 숫자를 다루기 위해 사용
- String Type : 문자열을 다루기 위해 사용
- Boolean Type : 값이 True/False로 정해져 있는 것
- Null Type : 값이 정의되긴 했는데 값이 Null인 자료형
- Undefined Type : 정의가 되지 않은 것, 변수를 선언만 하고 값을 대입하지 않으면 이렇게 됨
- Array Type : 배열을 나타내는 자료, 배열을 나타내는 index를 가짐
- Object Type : 객체를 다루기 위한 자료형
좀 더 자세한 내용은 다음의 링크 참조
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
JavaScript data types and data structures - JavaScript | MDN
Programming languages all have built-in data structures, but these often differ from one language to another. This article attempts to list the built-in data structures available in JavaScript and what properties they have. These can be used to build other
developer.mozilla.org
3강 : JavaScript의 연산자
연산자(Operator)
- 대입 연산자(Assignment operator) : 변수에 값을 대입하기 위해 사용하는 연산자, "="를 사용
- 사칙 연산자 : 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지를 구하는 연산자(%), 지수 연산자(**)
- 산술 연산자(Arithmetic operators)라고도 부름
- 증감연산자 : 증가연산자(++), 감소연산자(--)
- 변수의 뒤에 붙이면 postfix 방식(a++) : 변수를 불러오고 증가
- 변수의 앞에 붙이면 prefix 방식(++a) : 증가한 뒤에 변수를 불러옴 - 관계 연산자(Relational operators) : 변수들 사이의 연산자를 비교
- 비교 연산자(Comparison operators)라고도 불린다.
- 수학에서 부등호라고 불리는 것들 : <, >, <=, >=
- 왼쪽의 변수를 기준으로 생각함(a<=b : a가 b보다 작거나 같다) - 동등 연산자(Equality operators)
- a==b (a가 b와 같다)
- a!=b (a가 b와 같지 않다) ※ !는 주로 부정의 의미 - 일치 연산자(Strict equality operators) : 값은 물론, 자료형의 일치까지 엄격하게 파악
- a===b (a가 b와 값과 자료형이 모두 같다)
- a!==b (a가 b와 값이나 자료형이 같지 않다) - 이진 논리 연산자(Binary logical operators) : True/False만 가지는 분리형 값을 비교
- And연산 : a&&b (a와 b가 모두 true일 경우에만 true)
- or 연산 : a||b (a또는 b가 true일 경우에는 true) - 조건부 연산자(Conditional operator) : 조건에 따라서 결과가 나눠짐
- 삼항 연산자(Ternary operator)라고도 부름
- 형식 : 조건식 ? true일 경우 : false일 경우
좀 더 자세한 내용은 다음의 링크 참조
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
Expressions and operators - JavaScript | MDN
This chapter documents all the JavaScript language operators, expressions and keywords.
developer.mozilla.org
4강 : JavaScript의 함수
함수란, 입력을 받아서 정해진 출력을 하는 것
- 입력 : 파라미터(parameters), 인자(arguments)
- 함수를 사용하는 방법 : 1) function statement를 사용, 2) arrow function expression을 사용
좀 더 자세한 내용은 다음의 링크 참조
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
Functions - JavaScript | MDN
Generally speaking, a function is a "subprogram" that can be called by code external (or internal, in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values can b
developer.mozilla.org
(실습) 개발환경 설정하기
강의 기반
- macOS → Terminal
- Windows → PowerShell
Node.js와 npm 설치하기
- Node.js(JavaScript runtime) : 자바스크립트로 애플리케이션을 개발해 줄 수 있는 환경
- npm(node package manager) : Node.js 외부패키지 버전, 의존성 관리, 설치, 삭제 도움
다운로드 페이지
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
Node.js가 정상적으로 설치되었는지 버전 확인
우측의 Windows PowerShell을 열어서
node --version
명령어로 Node.js버전 확인
npm --version
명령어로 npm 버전도 확인
VS Code 설치하기
- IDE(Integrated Development Environment)
통합 개발환경 : 코드 자동정렬, 코드 함수 찾기 등 부가기능을 주는 프로그램
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
3. 벌써 힘들다
이 강의의 제목이 '리액트'이고 지금 '섹션 0. 준비하기'를 수강한 상태다. 즉, 지금까지는 준비였다는 것. 개발의 길은 참 멀고도 험한 듯싶다. 하지만 이번에는 포기할 수 없으니 끝까지 해보려고 한다. 이제부터 당분간의 글은 '필자가 공부했음!'을 증명하는 글 정도가 될 것 같다. 이거 다 듣고 나서야 원하는 글을 쓸 수 있을 것 같다.
'React Native' 카테고리의 다른 글
| 0015. Front-end 공부하기6 - Hooks (Feat. 처음 만난 리액트) (1) | 2023.12.22 |
|---|---|
| 0014. Front-end 공부하기5 - State and Lifecycle(★중요★), React Developer Tools (0) | 2023.12.15 |
| 0013. Front-end 공부하기4 - Component와 props (☆★굉장히 중요★☆) (0) | 2023.12.13 |
| 0012. Front-end 공부하기3 - JSX, Element, 시계만들기(Feat. 인프런, 처음 만난 리액트) (0) | 2023.12.12 |
| 0011. Front-end 공부하기2 - 리액트 소개, 리액트 시작하기(Feat. 인프런, 처음 만난 리액트 with 챗GPT) (1) | 2023.12.06 |
