부트캠프

TIL 1 - OT

웹 개발에는 정말 중요하고, 공부를 피할 수 없는 것. 바로 HTML, CSS.이 둘은 또한 제일 중요한 언어와도 관련이 있다. JavaScript!

뼈대를 잡았다면 이제는 살을 붙일 차례! CSS라는 살을 붙여주자.

이제는 화면에 최적화를 해보자.모든 웹페이지는 레이아웃을 가진다. 그림으로 치면 드로잉을 하는 것.

Flex를 배웠으면 Grid도 배워야겠지!

HTML/CSS로 뼈대를 잡고 살을 붙였으면 이제는 JavaScript라는 근육을 통해서 움직여보자!

Javascript에서 가장 많이 쓰일 것 같은 조건문. 확실히 배워두고 가자.

컴퓨터가 일을 처리할 때마다 같은 명령어를 적어야 하나?내가 일일이 적어주는 것보다 컴퓨터가 알아서 반복하게 만들어야 할때!

이름만 간단한 계산기 만들어보자.script.js파일을 따로 만들어 거기서 Javascript가 굴러가게 만들어야지.

리눅스의 터미널은 GUI가 개발되기 이전부터 컴퓨터를 조작하기 위해 사용 되었다. 터미널은 CLI.

변수 하나만으로는 데이터 전송이 비효율적이다. 배열과 객체를 이용하여 효율적인 데이터 전송이 가능하다.

배열은 같은 종류를 한가지만 나열했다면, 객체는 각기 다른 값을 다지지만 데이터의 종류가 동일한 경우 객체를 사용하면 데이터를 손쉽게 관리할 수 있다.왜 손쉽게 관리 할 수 있을까?

자료형은 크게 두 가지로 구분할 수 있는데, 바로 원시 자료형과 참조 자료형이다.원시 자료형이 아닌 모든 자료형은 참조 자료형이다.

JavaScript에도 버전이 있다. ES는 ECMAScript의 준말이다. 최신 버전은 ES2019지만 ES6에서 가독성과 유지보수성을 획기적으로 향상시킨 문법이 추가되어서 배워보자.

🗂️ Scope 📑 default parameter 매개변수도 변수다. price는 4라는 기본값을 가지고 있고, 저 함수 scope에서 쓰이는 값이다. 📑 lexical scope scope는 함수를 선언할 때 생긴다. 선언하는 순간, 함수 내부의 변수는 자기 스코프부터 가장 가까운 곳(상위 범위)에 있는 변수를 계속 참조하게 된다. 스코프를...

JavaScript를 이용하여 HTML을 조작해보자.DOM(Document Object Model)HTML 요소를 Object처럼 조작할 수 있는 Model이다.

Git 협업 - 상황별 코드

.DOM 트리 구조를 잘 파악하고, DOM을 활용하여 Data를 넣어서 HTML을 조작한다.

첫문장은 모든 걸 쏟아 부어서 간결하고 명료하게. 추가로 물어볼 수 없게 만들자. 만약 추가 질문이 들어온다면 예상하여 맞받아치자.

고차함수, 내장 고차함수, 고차함수의 중요성

고차 함수 로직

기본적으로 코드들은 한 작업을 끝내고 다른 작업을 시작한다. 이 상황을 동기적(synchronous) 이라고 한다.

비동기 요청 중 대표적인 사례는 네트워크 요청이다.특정 URL로부터 정보를 받아오는 역할을 한다.

React SPA (Single Page Application) 페이지 이동없이 한 페이지 내에서 요소가 부드럽게 동적으로 변한다.

기존에는 MPA(Multi Page Application) 방식으로 페이지마다 새로운 HTML 전체를 받아와 화면에 보여줬었다.

State & Props

JSX는 이벤트를 처리할 때 DOM 방식과 다르게 함수로 이벤트 처리함수(이벤트 핸들러; Event handler)를 전달한다.

네트워크

API는 메뉴판이다. 메뉴판도 어느정도 규칙을 가지고 소통이 원활하게 깔끔하게 작성해야 한다.

리액트는 컴포넌트 단위로 시작하기 때문에 컴포넌트부터 만드는 상향식(bottom-up)으로 앱을 만든다.

useEffect

CORS

Express

app.js 파일 안에 모든 것을 적기에는 너무 복잡해질거 같다.

재귀

JSON(JavaScript Object Notation)

UI, UX 얼핏들어서는 그냥 사용자에게 깔끔하게 보여지고 페이지가 간단한 구조를 가지고 있는 것을 말하는 것같다.

UI/UX 업계에서 가장 인기있는 툴

가상 DOM & useRef

indexOf, findIndex, find, some, every

상태(state)와 속성(props)을 이용한 컴포넌트 단위 개발 아키텍처를 React에서 사용했다.하지만 문제점이 있었다. 가독성 측면에서도 안 좋고 유지보수 측면에서도 좋지 못하다

웹 표준

왜 웹 접근성을 챙길까? 모든 사람들이 동일한 수준의 정보를 받을 권리가 있다.

asdf

Cookie & Session

Token

OAuth

React 심화

Custom Hook & Code Spliting

Prettier & ESLint

JavaScript는 기본이고 이제는 TypeScript가 중요해지고 있다.

열거형, 인터페이스, 타입 별칭, 타입 추론, 클래스

제네릭

웹 서비스는 배포를 해야 고객들이 사용할 수 있다. 서버 컴퓨터에 설치하거나 호스팅 서비스를 이용하여 인터넷에 공개하는 과정이 배포다.

CI/CD

프록시 (Proxy)