gigibean / TIL

Today I Learn

TIL

Today I Learn

Index

FrontEnd

FrontEnd Index

• 프론트엔드 성능 최적화

• 프론트엔드 성능 측정 기준

JavaScript

JavaScript Index

• 문서

  • HowJavaScriptWorks
    • boolean
    • naming
    • number
  • 표준 내장 객체
    • Array
    • Map
    • Object
    • Set
    • String
  • 동기, 비동기
  • 바인딩
  • type 바꾸기
  • 표현식
  • 정규식
  • Promise
  • JS 프로토타입
  • JS 프로토타입 메서드와 프로퍼티
  • import와 export
  • Expression vs. Statement

• example

  • 배열, 객체 map 과 filter 사용

VanillaJS

VanillaJS Index

• DOM 요소

  • Vanilla JS 개발의 장단점
  • JQuery의 장단점
  • DOM 요소 1
    • li[i].textContent == li[i].innerText
    • node object와 element object 의 차이점

• 노드의 속성 접근 및 변경

  • tagName
  • get set 방식
  • 노드클래스 이름 속성
  • 노드의 속성 읽기
  • 노드의 속성 변경
  • 노드의 속성 제거
  • 노드의 속성이 있는지 점검
  • liList[2] == liLst.item(2)

• DOM 이벤트 1

  • 인라인 방식
  • 속성 방식
  • 자향하는 코드 방식

• DOM 요소 - 2

  • 상위 노드에 접근
  • 상위 html 노드에 접근
  • 노드의 텍스트 내용 읽고 쓰기
  • 노드의 html 내용 읽고 쓰기
  • 하위 노드 여부
  • 처음 하위 노드에 접근
  • 하위 노드에 접근
  • 노드의 속성 제거
  • 새로운 노드를 생성
  • 노드에 생선된 새로운 노드 추가

• DOM 요소 - 3

  • 노드에 생선된 새로운 노드를 기준 노드 위치 이전 위치에 추가
  • 노드 삭제
  • 노드 복제

• DOM 요소 - 4

  • 하위 노드가 있는지 점검
  • 노드 클래스
  • 노드 클래스 추가
  • 노드 클래스 제거
  • 노드 클래스 여부 반환
  • 노드 클래스 추가, 제거 토글

• 이벤트

  • dblclick
  • mouseenter vs. mouseover & mouseleave vs. mouseout
  • focus vs. focusin & blur vs. focusout
  • e.target.value
  • Event Bubbling
    • 상위의 화면 요소란
  • Event Capture

• offset

  • offsetTop
  • window.pageYOffset
  • offsetLeft
  • offsetWidth (height)
  • element.clientWidth (height)
  • element.scrollWidth (height)
  • element.getBoundingClientRect();

EAMAScript6

EAMAScript6 Index

• 식별자, 원시타입, 이스케이프

  • let, const
  • 식별자
    • 리터럴
  • 원시타입과 객체
    • 원시타입(숫자형)
    • 원시타입(문자열)

• 템플릿 문자열, null, undefined

  • 문자열 합치기
    • 멀티라인으로 표시하는 방법
    • 숫자와 문자열을 함께 사용하는 경우
  • null & undefined
    • 둘의 차이점

• 심볼, 객체

  • 객체
    • 객체를 사용할 때 사용하는 문법
      • 생성
        • 리터럴
    • 또 다른 객체
  • 함수 넣기
  • 객체 제거
  • 함수 삭제
  • 구성
    • 프로퍼티
      • 접근 연산자
  • 심볼
    • 심볼를 사용할 때 사용하는 문법
      • 생성
    • 접근

• 임시객체, 배열객체

  • Number, String, Boolean 객체 타입
  • 왜 원시타입에 대응되는 이러한 객체가 필요할까요?
  • 임시 객체
  • 배열 객체

• 데이터 타입 변환

  • Date 객체
  • Boolean 변환
    • Boolean 에서 Number로 변환
    • Boolean으로 변환
  • 문자열 변환

• 연산자

  • 산술 연산자
    • 단항 연산자
    • 전위 연산자, 후위 연산자
    • 후위 연산자
    • 전위 연산자
  • 비교 연산자
    • false

• typeof, 해체할당

  • typeof
  • 해체할당
    • 객체
    • 배열
    • 확산 연산자(spread operator)
    • 배열에 있는 값 바꾸기

• if문 단축표현식, 함수 호출와 참조

  • if문 단축표현식
    • 삼항 연산자
    • or 문 (파이프라인)
  • 함수
    • 호출
    • 참조
    • 함수를 객체안에 포함
      • 객체 접근 연산자
    • 함수를 배열안에 포함

• 함수 매개변수

• 객체에 메소드 추가하기

  • 객체를 변수로 해체하는 방법
  • 배열을 변수로 해체하는 방법
  • 확장연산자 사용
  • 매개변수의 초기값 지정
  • 객체의 메소드 추가

• this 키워드

• annoymous function and arrow notation

  • 익명함수
  • arrow notation (=>)
    • 함수 내의 함수의 this 사용

• call, apply, bind

  • call
  • apply
  • bind

• 스코프

• 클로저

• IIFE

• 호이스팅

• 객체에서 프로퍼티 나열하기

• OOP

  • 클래스와 인스턴스

• Map 1

• Map 2

• WeakMap

  • weakMap 과 Map의 차이

• 상속

• 프로토타입

• hasOwnProperty. set

  • hasOwnProperty
  • set

React

React Index

• 문서
  • 리액트 개요
  • 리액트 란?
  • 이벤트 다루기
  • React를 위한 JS
  • JSX 란?
  • props 와 state
  • useContext useState useReducer 함께 사용하기
  • setState updater 함수 사용과 차이
• 예제 1
  • 1씩 증감하는 버튼 만들기
  • CSS 로 체크박스 꾸미기
  • SASS 로 버튼 꾸미기
  • Styled Components 로 버튼 꾸미기
• 예제 2
  • class 형 컴포넌트에서 prop&state 사용
  • Post
    • Post 설명
    • Post API Backend Django
    • Post Frontend React
• TODO List
  • 사용한 hooks 개념 및 정리
  • README
• api 연동하기
  • README
• react-router 사용하기
  • SPA 란?
  • 라우터 사용
  • params와 query(location과 match)
  • Route와 Link 사용하기

SASS

SASS Index

• SASS

  • CSS preprocessor 란?
  • Sass와 SCSS 의 차이점
  • 컴파일 방법
    • SassMeister
    • parcel
  • 문법
    • 주석
  • 데이터 종류

• 문법

  • 중접(Nestgin)
  • 상위 선택자 참조(Ampersand)
  • 중접 벗어나기 (at-root)
  • 중첩된 속성
  • 변수(Variables)
    • 변수 유효범위 (Variable Scope)
    • 변수 재할당(Variable Reassignment)
    • 전역 설정 (!global)
    • 초기값 설정, 문자 보간
    • 초깃값 설정(!default)
    • 문자 보간 (#{})
  • 가져오기(Import)
    • 여러 파일 가져오기
    • 파일 분할(Partials)
  • 연산(Operations)
  • 숫자(Numbers)
    • 상대적 단위 연선
  • 문자(Strings)
  • 색상(Colors)
  • 논리(Boolean)
  • 재활용(Mixins)
    • Mixin 선언
    • 인수(Arguments)
      • 기본값 설정
      • 키워드 인수
      • 가변 인수
      • Content
  • 확장
    • Extend
  • 함수
    • if 함수
    • @if (지시어)
  • 반복문
    • @for
    • @each
    • @while
    • 내장함수(Built-in Functions)
      • 색상 (RGB, HSL, Opacity) 함수
      • 문자(String) 함수
      • 숫자(Number) 함수
      • 리스트(List) 함수
      • Map 함수
      • 관리(Introspection) 함수

---

API

API Index

• Post 용 API APP
• Web Server Library
  • http server snippet
  • cgi server
  • wsgi server
  • Request
    • http.client
      • html.parser 이용한 이미지 다운로드
      • request head
      • request get
      • request post
      • request put
    • urllib.request
      • request 모듈
      • html parser request
      • 프록시 서버 요청, 인증
      • 쿠키 오픈, 데이터 저장
      • 헤더 요청
      • request header 추가 후 보내고 받기(http 에러 모듈)
      • reqest header 추가 후 보내고 받기(Url 에러 모듈)
      • request 헤더 추가 보내고 받기(url, http 에러 모듈)
    • 문서
      • http.server
        • 웹 서버용 파이썬 라이브러리 주요 클래스
        • class http.server.HTTPServer(server_address, RequestHandlerClass)
          • serve_forever(poll_interval=0.5)
        • class http.server.BaseHTTPRequestHandler(request, client_address, server)
          • client_address
          • server
          • close_connection
          • requestline
          • command
          • path
          • request_version
          • headers
          • rfile
          • wfile
        • server_version
        • sys_version
          • error_message_format
          • error_content_type
          • protocol_version
          • MessageClass
          • responses
            • handle()
          • handle_one_request()
          • handle_expect_100()
          • send_error(code, message=None, explain=None)
          • send_response(code, message=None)
          • send_header(keyword, value)
          • send_response_only(code, message=None)
          • end_headers()
          • flush_headers()
          • log_request(code='-', size='-')
          • log_error(...)
          • log_message(format, ...)
          • version_string()
          • date_time_string(timestamp=None)
          • log_date_time_string()
          • address_string()
        • class http.server.SimpleHTTPRequestHandler(request, client_address, server, directory=None)
          • server_version
          • extensions_map
          • directory
          • do_HEAD()
          • do_GET()
        • class http.server.CGIHTTPRequestHandler(request, client_address, server)
          • cgi_directories
          • do_POST()

django

Django Index

• Django Field

  • Field Options options
  • null
  • blank
  • choices
  • db_column
  • db_index
  • db_tablespace
    • Table Space
  • default
  • editable
  • error_messages
  • help_text
  • primary_key
  • unique
  • unique_for_date
  • unique_for_month
  • unique_for_year
  • verbose_name
  • validators

• Django Field relations

  • Relationship Fields
    • ForeignKey
      • ForeignKey Arguments
        • ForeignKey.on_delete
          • SET_NULL
          • SET_DEFAULT
          • SET
          • DO_NOTHING
        • ForeignKey.limit_choices_to
        • ForeignKey.related_name
        • ForeignKey.related_query_name
        • ForeignKey.to_field
        • ForeignKey.db_constraint
        • ForeignKye.swappable
  • ManyToManyField
    • Arguments
      • ManyToManyField.related_name
      • ManyToManyField.related_query_name
      • ManyToManyField.limit_choices_to
      • ManyToManyField.symmetrical
      • ManyToManyField.through
      • ManyToManyField.through_field
      • ManyToManyField.db_table
      • ManyToManyField.db_constraint
  • OneToOneField
    • OneToOneField.parent_link
  • Field API Reference

• Django Field types

  • Field Types
    • AutoField
    • BigAutoField
    • BigIntegerField
    • BinaryField
    • BooleanField
    • CharField
    • DateField
      • DateField.auto_now
      • DateField.auto_now_add
    • DateTimeField
    • DurationField
    • EmailField
    • FileField
      • FileField.upload_to
      • FileField.storage
    • FieldFile
    • FilePathField
      • FilePathField.path
      • FilePathField.match
      • FilePathField.recursive
      • FilePathField.allow_files and allow_folders
    • FloatField
    • ImageField
      • ImageField.height_field and width_field
    • IntegerField
    • GenericIPAddressField
      • GenericIPAddressField.protocol
      • GenericIPAddressField.unpack_ipv4
    • NullBooleanField
    • PositiveIntegerField
    • PositiveSmallIntegerField
    • SmallIntegerField
    • SlugField
      • SlugField.allow_unicode
    • TextField
    • TimeField
    • URLField
    • JSONField
      • JSONField.encoder
      • JSONField.decoder

• Django ORM

  • Foreign Key
    • Related Name
  • migrate: doesn't create tables
    • ORM -> Mysql

• Use Sqlite3

MySQL

MySQL Index

• Basic Command

  • mysql 명령어
    • mysql 실행
    • 데이터 베이스 리스트 보기
    • 데이터 베이스 선택
    • 테이블 보기
    • 테이블 생성 명령어 보기
    • 테이블 모든 컬럼 보기

• Basic Query

  • Sql Data Type
  • Create Table
    • Foreign Key
  • Alter Table
    • Add Column 컬럼 추가
    • Modify Column 컬럼 변경
    • Change Column 컬럼 이름까지 변경
    • Drop Column 컬럼 삭제
    • Add Foreign Key 외래키 추가
    • Drop Foreign key 외래키 삭제
      • Foreign_key_name 조회
    • Rename Table 테이블 이름 변경
  • Django 연동
    • orm 자동 생성

• Basic Menual

  • 작성된 DB를 EER DIAGRAM으로 변환

---

DataStucture & Algorithms

C DateType Index

• C DataType
  • Pointer
    • pointer 관련 연산자
    • 다중 포인터
    • 함수 포인터
  • 문자, 문자열
    • 문자
    • 문자열
      • 문자열과 포인터
    • scanf() 와 gets()
  • 컴퓨터 변수 처리
    • 일반적 컴퓨터 OS 메모리 공간
      • 레지스터 변수
      • 함수 매개 변수 처리
      • 포인터와 배열
      • 2차원 배열
  • 동적 메모리 할당
    • 동적으로 2차원 배열 생성
      • 동적 2차원 배열 할당과 메모리 구조

Algorithm

• 입출력

  • 입출력 기초
  • 2558
  • 2741
  • 10950
  • 10951
  • 10952
  • 10953
  • 11021
  • 11022
  • 11718
  • 11719
  • 11720
  • 11721

• stack

  • 9093
  • 10828
  • 9012
  • 1874
  • 1406
  • 17413
  • 10799
  • 17298
  • 17299

• queue

  • 10845
  • 1158
  • 10828

• math

  • 10430
  • 2609
  • 1978
  • 1929
  • 6588
  • 10872
  • 1676
  • 2004
  • 9613
  • 17087
  • 1373
  • 1212
  • 2089
  • 17103
  • 11653

• DP

  • 1463
  • 11726
  • 11727
  • 9095
  • 10844
  • 11057
  • 2193
  • 9465

• 스택

  • 9093

---

Linux

Index

• HTTPS SSL 인증서 Lets Encrypt 받기 CentOS7 Nginx