IT & Tech

git 사용법 알아내기 - git help [알고싶은 명령어]

mergeCommit을 revert했더니 에러가 나면서 안됨 (error: commit 247ce0130b0aab7c244e7dcecc7be0fc57083bbe is a merge but no -m option was given.)

-m 옵션을 붙이라는 것 같아서 붙여서 했는데 그래도 안됨.. (error: option `mainline' expects a number greater than zero)

왜 에러가 나냐면 어느 부모로 돌아갈지 옵션을 붙여주지 않았기 때문, merge하는 것 자체가 부모가 2개인건데 둘중 어느 부모로 돌아갈지를 지정해줘야함

git revert HEAD -m 1 첫번째 부모로 돌아감

git revert HEAD -m 2 두번째 부모로 돌아감

첫번째 부모/두번째 부모가 뭔지 알아내는 방법: git cat-file -p [commitHash]

• commit message로 검색
  • git log --grep='searchKeyword'
  • 만약 검색결과가 많아서 한 화면에 너무 많이 나온다면 --oneline을 붙여서 한줄씩만 보자
    • git log --grep='searchKeyword' --oneline
• commit번호 (commitHash, commitID)를 알고 있다면
  • git show commitHash

prettier적용하려면 webStorm plugin에서 설치하거나, node로 설치하거나 둘 중 하나만 하면 되는듯

적용방법: Settings(ctrl+alt+s) -> prettier검색 -> check Box로 설정

모든 소스 한번에 적용하려면 디렉토리로 가서 ctrl + alt + l

https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_install

material UI에서는 disabled 속성을 주면 됨

• <Button disabled>
• <Checkbox disabled>
• <Switch disabled>
• <Slider diabled>
• ...

div를 포함한 하위 component를 모두 막고 싶은 경우

• </div style={this.props.disable?{color:'#777777', pointerevents: 'none'}:{}}>

한글의 인코딩

• 조합형
  • 초성, 중성, 종성의 조합으로 표현
  • 다른 문자체계들과 호환안되는 단점
• 완성형
  • 한글자를 독립적으로 보고 각 글자에 코드를 부여
  • 조합형의 단점때문에 완성형이 표준으로 채택
  • EUC-KR
    
    • KS C 5601(완성형, 이후 KS X 1001로 개칭됨)이라는 코드에 기반함
    • 사용빈도가 높은 2350자만 지원해서 한계가 있음
  • CP(Code Page) 949
    • 한국어판 Microsoft Windows의 기본 코드 페이지로 EUC-KR의 2350 + 8822자를 더 추가함
    • 통합완성형, 확장완성형, MS에서 개발했기 때문에 ms949, windows-949등으로도 불림
  • unicode
    • unicode1.0
      • KS C 5601에 포함된 완성형 2,350자 한글을 지원
    • unicode 1.1
      • KS C 5657(이후 KS X 1002)에 포함된 1,930자 및 중국에서 요청한 6글자를 포함한 2,376자를 추가해 총 6,656자가 수록
      • 한 번에 일괄적으로 추가되지 않았고 빠진 글자들이 단계별로 추가되었기 때문에 배열 순서가 엉망이고 지원하는 플랫폼도 별로 없어 잘 사용되지 못함
    • unicode2.0
      
      • 완성형 11,172자(가, 각, 갂, 갃, …, 힠, 힡, 힢, 힣)와 조합형 한글 낱자가 모두 수록되어 있어 현대 한글과 옛한글 모두 완벽하게 표현가능
      • 기존1.1에 있던 한글을 삭제후,가나다순으로 새 영역에 배당, but 한글 재배당 때문에 unicode 1과 2는 호환이 안됨

unicode

• 전 세계의 모든 문자를 다루도록 설계된 표준 문자 전산 처리 방식
• 유니코드 문자의 경우 해당 글자의 코드를 표기할 때 U+(16진수 숫자, 주로 4자리)라고 쓴다. 예를 들면 한글 '가' 자는 유니코드에서 16진수로 AC00(10진수의 44032)라는 코드 넘버를 가지는데, 이것을 U+AC00이라고 적음

unicode의 encoding

• 유니코드는 각 글자에 숫자를 배당하는 방식, 규격이고 인코딩은 유니코드 숫자를 저장하는 방식, 표현
• UTF-8
  • 가장 많이 사용되는 가변 길이 유니코드 인코딩
  • https://namu.wiki/w/UTF-8
  • UTF-8로 표현 가능한 길이는 최대 6바이트지만 다른 인코딩과의 호환을 위해 4바이트까지만 사용한다. 그래서 한 글자가 1~4바이트 중 하나로 인코딩될 수 있으며, 1바이트 영역은 아스키 코드와 하위 호환성을 가진다. 아스키 코드의 0~127까지는 UTF-8로 완전히 동일하게 기록된다. 어차피 유니코드는 U+10FFFF까지만(10진법으로는 1,114,111) 이용하는데, UTF-8은 아래에 나와 있듯이 가변 바이트 길이를 선언하기 위해 꽤 많은 비트를 잡아먹고도 2,097,151까지 인코딩할 수 있기 때문에 4바이트만으로도 충분하고도 남는다.

• array===[] (X)
• array && array.length===0 (O)
• array && !array.length (O)

Autocomplete 개념정리

• options: input화면 클릭하여 나오는, 선택가능한 dropdown list들에 보여주기 위한 array
• value: options중에서 선택된 값, multiple일 경우에는 array가 됨
• tag: 선택된 value가 input란에 이미 선택되었음을 보여주는 것...? multiple일 때 의미가 있을 듯

import Autocomplete from '@material-ui/lab/Autocomplete';//mui 4.x버젼에는 lab에포함됨
import Autocomplete from '@mui/material/Autocomplete';//mui 5.x버젼이후에는 정식포함됨

<Autocomplete
    multiple
    open={open}//항상 false로 하면  생략된 tags는 펼쳐지고 dropdownOptionMenu나오는것만 방지할 수 있음,
    disabled={disabled}
    limitTags={1}//limit the number of displayed options when not focused
    id="searchAndMultiSelect"
    options={this.props.options||[]}//display될 option array
    value={this.props.value}//option중에 선택된 value
    disableCloseOnSelect//option에 focus가는동안은 선택했더라도 close하지않고 계속option노출하기
    onChange={(e,v)=>{this.props.onChange(e,v,this.props.selectType);}}//select할때마다 호출됨, dropdownOption에서 클릭안하고 선택된 tab의 X(delete)버튼이나 전체 X(delete)버튼 클릭시에도 호출됨
    getOptionLabel={(option) => this.props.getOptionLabel(option, this.props.selectType)}//option array에서 노출할 속성지정, renderOption주더라도 없으면에러남
    getOptionDisabled={(option) => this.props.getOptionDisabled(option)}//어떤 option을 선택못하게 할 것인지
    noOptionsText={intl.formatMessage({id: noOptionsText})}//장치가 존재하지 않습니다
    getOptionSelected={(option, value) => option.id ? option.id === value.id : option===value}//option에서 value를 뽑아내어 selected:true/false를 결정할 때 어떤 기준으로 결정할지
    renderInput={(params) =>
        <TextField
            className={classes.textField}
            { ...params }
            //placeholder={isEmpty(value) ? intl.formatMessage({id: placeholder}) : undefined}
            onFocus={() => this.handleFocus()}
            onBlur={() => this.handleBlur()}
            label={this.props.selectType&&intl.formatMessage({id: this.props.selectType})}
        />
    }
    renderOption={(option, {selected}) => {
        //2nd argument is {selected:true/false, inputValue:''}
        return this.props.renderOption(option, {selected}, this.props.selectType);
    }}
    //renderTags={(tagValue, getTagProps) =>tagValue.map((option, index) => (//Input에 선택된 tag를 보여주는 형태결정
    //         <Chip key={index} label={option.name||option.deviceGroupName}
	//             {...getTagProps({ index })} disabled={disabled} />// Set disable explicitly after getTagProps
    //filterOptions={fieldTypeList => fieldTypeList.filter(opt => opt.fieldType)}//option에서 filter된것만 노출함, 모두filtering해도 noOptions항목노출됨
    //onOpen = {()=>{}}//selector click해서 열렸을때 동작정의
    //readOnly //작동안함, 4.x버전에서는 안되는듯
    
/>

axios
fetch


써드파티 라이브러리로 설치가 필요
현대 브라우저에 빌트인이라 설치 필요 없음


XSRF 보호를 해준다.
별도 보호 없음


data 속성을 사용
body 속성을 사용


data는 object를 포함한다
body는 문자열화 되어있다


status가 200이고 statusText가 ‘OK’이면 성공이다
응답객체가 ok 속성을 포함하면 성공이다


자동으로 JSON데이터 형식으로 변환된다
.json()메서드를 사용해야 한다.


요청을 취소할 수 있고 타임아웃을 걸 수 있다.
해당 기능 존재 하지않음


HTTP 요청을 가로챌수 있음
기본적으로 제공하지 않음


download진행에 대해 기본적인 지원을 함
지원하지 않음


좀더 많은 브라우저에 지원됨
Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

출처: https://inpa.tistory.com/entry/AXIOS-📚-설치-사용#axios란 [👨‍💻 Dev Scroll:티스토리]

범용적인 목적으로 js를 사용하기 위한 선결조건: 모듈화

• CommonJS
  • 브라우저 이외의 곳에서 JS를 사용하기 위한 모듈 시스템
  • 노드에서 많이 사용됨
  • CommonJS의 Common은 js를 브라우저만이 아닌 일반적인 범용언어로 사용살 수 있게 하겠다는 것
  • 필요한 파일이 모두 로컬디스크게 있어 바로 불러쓸 수 있는 상황 즉 서버사이드에서는 CommonJS가 AMD방식보다 간결함
• AMD(Asynchronous Module Definition)
  • ES6가 나오기 전에 많이 사용됨
  • 주요특징
    • 모듈(자바스크립트)의 비동기 로딩 (html에서 script태그를 통해서 관리하는게 아닌 js로 script태그를 append하여서 로딩함
    • 클로저를 통한 전역관리
    • CommonJS에 비해 사용법 간단
  • AMD방식을 사용하는 대표적인 오픈소스가 RequireJS
  • 필요한 파일을 네트워크를 통해 내려받아야 하는 브라우저와 같은 환경에서는 AMD가 CommonJS보다 더 유연한 방법을 제공
• ES6(2015)
  • 브라우저(frontend)에서는 요즘 거의 이것 사용
  • 그대로 쓰기보다 webpack/rollup 같은 번들러를 통해서 많이 사용됨

참고자료

https://isa-dev.tistory.com/217?category=994397

https://d2.naver.com/helloworld/12864