개발 기초 어휘 완전 정복 - 핀다 김하연 강사님

• 크로스브라우징
  브라우저마다 동일한 화면을 보여주는 것.
  ⇨ 브라우저마다 랜더링 엔진이 다르기 떄문.
  • Cross Browsing Test :: Lambda Test, Selenium

• HTTP / HTTPS
  HyperText Transfer Protocol
  ⇨ HTML문서를 주고받기 위한 규칙/규약
  ⇨ 프로토콜(Protocol) 네트워크 통신을 위한 규칙
  ⇨ HTTP METHOD :: GET POST PUT PATCH DELETE...
  HTTP는 보안에 취약하여 SSL(Secure Socket Layer,보안소켓레이어)을 붙인 HTTPS를 사용

• 웹브라우저의 동작과정
  1) 브라우저 주소창에 naver.com을 입력
  2) 브라우저는 네이버 웹서버에서 HTTP요청을 보냄
  3) 서버는 요청을 받고 그에 맞는 응답(HTTP/HTTPS)을 보냄
  4) 브라우저는 응답 받은 내용을 화면에 보여줌

• 프로그래밍 언어
  저급언어:: 기계어, 어쎔블리어 (011101010001010)
  고급언어:: 컴파일어, 인터프리어터 (if true{ print ("Hello, World");} )
  고급언어는 인간의 "자연어" 와 유사
  **마크업언어:: 데이터 구조를 나타내는 언어 (html, css, xml)

• 웹개발언어 (html - css - javascript)
  html:: HyperText Markup Language ⇨ 하이퍼링크를 통해 문서간 이동이 가능하게 만든 언어
  css:: Cascading Style Sheet ⇨ 계단식 스타일 정의 문서
  ⇨ 선택자(selector)와 선언부(declaratives)로 구분됨
  ⇨⇨ 선택자(selector) 스타일을 적용하려는 html요소
  ⇨⇨ 선언부(declaratives) 적용하려는 스타일 {내용;}

• Bug
  프로그램 상의 결함으로 하드웨어/소프트웨어가 오작동하는 현상.

• Debug / Debuging
  버그를 찾아 고치는 것

• 예외처리
  프로그램 실행 시 발생할 수 있는 예상하지 목한 상황에 대해 미리 코드를 작성하는 것 (try-catch문)

• Build
  소스코드 및 프로그램 구성요소를 모아 실행할 수 있는 파일로 만드는 과정

• 배포
  실행파일을 사용자가 접근할 수 있는 환경에 배치하는 것

• 깃Git
  버전관리 시스템(VCS, Version Control System)
  SW의 시간 및 버전을 관리-통제하는 시스템

  • 레포지토리 (레포)
    SW파일이나 폴더들을 저장해두는 공간
  • 브랜치
    작업을 독립적으로 진행하기 위한 차원
  • 커밋(Commit)
    깃에 코드 수정사항을 기록하는 명령
  • PR(Pull Request)
    수정코드가 있는 브랜치를 검토 후 병합해달라 요청하는 것
  • 코드리뷰
    여러 개발자가 다른 개발자가 만든 코드를 보고 피드백을 주는 과정. 코드의 책임이 개인이 아닌 팀에게 분산된다.
    버그를 조기 발견하거나, 컨벤션 준수를 확인할 수 있고,
    중복코드를 방지하고 모듈의 재사용성을 올릴 수 있다.
  • 오픈소스
    공개접근 설정되어 여러사람이 볼 수 있는 코드

• 레거시 코드
  오래된, 읽기 어려운, 수정이 어려운 코드

• 리팩토링
  이미 완성된 코드를 개선하는 것

JS

• 동기 & 비동기
  순차 & 비순차
  직렬 & 병렬

• DOM (Document Object Model)
  "객체"로 문서구조를 표현하는 것(xml,html로 작성)

• 브라우저 이벤트
  DOM이 만들어낸 신호를 기반으로 행동을 유도할 수 있다.

  • 마우스 : click, mouseover, mouseout...
  • 폼요소 : submit, focus
  • 키보드 : keydown, keyup

• Ajex
  Asynchronous Javascript And XML
  웹페이지 전체 로딩이 아니고, 일부만 로딩 가능

• TypeScript
  JS에 type을 부여한 언어 ⇨ 에러방지, 코드가이드 및 자동완성

• 라이브러리
  특정기능을 위한 도구, 함수의 집합 ex) React, chart.js jQuery

• 프레임워크
  프로그래밍 시 프레임워크 위에 코드를 작성함 ex)Vue.js, Angular, Spring

• React
  MVC 중 V(View)만 담당. 라우팅, 데이터모델링, Ajax 등은 외부 라이브러리를 사용해 구현해야 한다.

  • JSX
    JS 확장문법
  • Component
    뷰단에서 그려지는 리액트 내부 최소단위.
    데이터(Props)를 입력받아 뷰에 출력하는 함수
    파일명은 대문자로 시작. ex) Main.jsx , Register.jsx
    UI에 재사용 가능한 조각(컴포넌트)으로 만들고 이를 여러군데 사용함으로써 코드 재사용성을 높였다.
  • State(상태)
    리액트 컴포넌트의 속성값을 저장, 변경할 수 있는 객체.
    state가 변경되면 컴포넌트가 랜더링됨
    리액트의 setState를 이용해 컴포넌트 내 state를 변경할 수 있다.
    리액트의 핵심은 상태값을 효율적으로 관리하는 것(불필요한 랜더링을 줄인다.)
  • 모듈(module)
    애플리케이션에서 분리된 각각의 파일을 모듈이라 부름.
    주로 클래스 하나, 혹은 특정 목적의 복수의 함수로 구성된 라이브러리
  • import(가져오기)
    원하는 모듈을 가져오고 싶을 때 사용.
  • export(내보내기)
    모듈을 다른 파일 혹은 다른 모듈에서 사용할 수 있게 하는 것
    • 해당 모듈에서 하나만 내보내는 export default
    • 해당 모듈 내 여러 함수를 내보내는 export

• 리액트의 라이프사이클
  컴포넌트가 화면에 생성 Mount - 갱신 Update - 파기 Unmount 될 때마다 이벤트가 발생한다.
  이 특정 주기마다 사용할 수 있는 API를 LifeCycle API라고 한다.
  

• 리액트 가상돔(Virtual DOM)
  리액트가 실제 DOM에 직접 접근하여 조작하는 대신 실제돔의 사본인 가상돔에 먼저 랜더링한 후, 마지막에 기존 실제돔과 비교하여 변화된 부분만 재랜더링 하는 방식.

• SPA(Single Page Application)
  리액트는 하나의 html에 컴포넌트를 갈아끼우면서 화면을 보여줌
  이를 통해 매번 html을 받아와서 보여줄 때 전체 페이지 랜더링이 발생해 성능저하를 일으키던 부분이 해소됨.

-스타일링
html요소를 디자인하기 위한 개념. css는 점차 복잡해져서 여러 스타일링 방식이 발생.
CSS-in-CSS(모듈화), CSS프레임워크(클래스), CSS-in-JS...

• 부트스트랩 Bootstrap
  반응형 웹 프로젝트 개발을 위한 html, css, js 프레임워크
  미리 만들어두고 가져다 쓸 수 있다.
• Tailwind CSS
  Utility-First 컨셉을 가진 CSS 프레임워크
  m-1, flex, text-sm 같이 미리 셋팅된 유틸리티 클래스를 활용하는 방식으로 css없이 html코드 내에서 스타일링 할 수 있다.
  커스텀도 쉽고 확장에 용이