2023 June TIL

in TIL / 2023

15~30 minutes per day

Motive
  ## June

|    Sun     |    Mon     |    Tue     |    Wed     |    Thu     |    Fri     | Sat |
| :--------: | :--------: | :--------: | :--------: | :--------: | :--------: | :-: |
| [25][0625] | [26][0626] | [27][0627] | [28][0628] | [29][0629] | [30][0630] |  1  |

[0625]: ./_posts/2023-06-01-June.md/#june-25th
[0626]: ./_posts/2023-06-01-June.md/#june-26th
[0627]: ./_posts/2023-06-01-June.md/#june-27th

...

TIL 캘린더를 이런식으로 만들어 두었는데 변수 관리가 애매하다.. 뭔가 아래처럼 되면 좋을 것 같은데 Markdown에서 이런 기능은 없는 듯 하다


[JuneLink]: /til/June#june-

[0625]: ${JuneLink}25th
[0626]: ${JuneLink}26th
[0627]: ${JuneLink}27th

StackOverflow에서 링크 사용법 정리해둔 걸 찾았다.

[Inline-Style Link](https://hypnotes.github.io/)

// hover 시 Title 보임
[Inline-Style Link + Title](https://hypnotes.github.io/ "My Github Page")

[Relative Reference](/til/2023) // 파일내(Repository) 위치로 이동

[My Github Page]: https://hypnotes.github.io/ // 변수처럼 사용

[Reference-Style Link][My Github Page]
Connect to [My Github Page]
  • Reference-Style Link

  • Connect to My Github Page

  • 참고로 VisualStudio에서 Markdown에 Prettier 적용이 된다. 마크다운으로 필기하다 보면 코드(?)가 더러워지는 경우가 있는데 한번에 싹 정리를 해줘서 편리하다 (특히 table)

6/26: Npm vs Yarn

Motive
  • 여러 프로젝트가 프론트 서버는 yarn으로, 백엔드는 npm으로 하는데 이유가 궁금하다. 서로 호환이 되는건 알겠는데 구체적으로 무엇이 다른지 자세히 알고 싶었다.

  • Npm and Yarn: Node.js (Runtime Env)’s package manager

    • Various JS packages made by various ppl are stored in the NPM Online Database \(\Rightarrow\) Can be managed by npm or yarn
    • makes installation, deletion, version controls, refernce managing so much easier

  • NPM (Node Package Manager) Functions as:

    1. Online Platform : 레지스트리 (Registry), we can share, upload, and create
    2. CLI (Command Line Interface): 온라인 플랫폼과 상호작용 가능케 함
    • 설치: Node 설치 시 자동으로 설치
  • Yarn (2016, Facebook)

    …but as the size of our codebase and the number of engineers grew, we ran into problems with consistency, security, and performance…we set out to build a new solution to help us manage our dependencies more reliably. The product of that work is called Yarn — a fast, reliable, and secure alternative npm client.

    • Scaling NPM
    • React와 같은 프로젝트를 진행하며 겪었던 어려움을 해결하기 위해 개발됨
    • npm 과 호환 \(\rightarrow\) 속도, 안정성은 npm보다 향상
    • 설치 : npm으로 설치
      npm install yarn --global
# Mac:
brew update
brew install yarn
      1. Resolution: makes request to registry and recursively look up for dependency
      2. Fetching: looks in global cache. If not, fetches and put it in global cache. (Offline Downloading Possible)
      3. Linking: copy file from global cache \(\rightarrow\) node_modules
        • \(\Rightarrow\) Maximize resource 사용성, installation faster
        • uses mutex to ensure that 동시 CLI들이 collide/pollute 못하게 함
    • Automatic Lock File Generation:
      • 최신버전 존재하면 자동 설치됨. 이를 막으려면:
        1. 잠금 파일 생성 (한번에 특정 버전만 설치) \(\Rightarrow\) 의존성, 종속성 관리에 좋음 (프로젝트 내 모든 패키지가 어느 환경에서든 동일한 버전으로 설치)
        2. 패키지 파일에 ^ 제거

  • Npm vs Yarn

     npmyarn
    속도패키지 순차적으로 설치 (React 설치: 3.572 초)패키지 병렬 설치 (1.44 초)
    보안자동으로 패키지에 포함된 다른 패키티 코드 실행yarn.lock 또는 package.json 파일만 설치
    Lock File기본 X (package-loc.json)항상 yarn.lock 생성+업뎃
    npm install                           yarn
npm install my-package                yarn add my-package
npm install --save-dev my-package     yarn add --dev my-package
npm install global my-package         yarn global add my-package
npm uninstall my-package              yarn remove my-package
npm uninstall global my-package       yarn global remove my-package
npm update                            yarn upgrade
npm update my-package                 yarn upgrade my-package

  • \(\Longrightarrow\) 거의 차이 안남, 둘 다 지속적으로 관리된다

  • 참고링크: Joshua1988, developer0809

6/27: Prefix Sum, 2 Pointer

답 
def solution(sequence, k):
    n = len(sequence)
    answer = [0, n]
    if sequence[0] == k:
        return [0, 0]
    prefix = [0] # prefix = [0, x, x, x...] 
    startptr = 0
    for i in range(n):
        prefix.append(sequence[i]+prefix[i]) # 누적합 (a[i] = b[i] + a[i-1])
        # print("PREFIX ARRAY: ", prefix)
        if sequence[i] == k: # 본 sequence에서 같으면 바로 답임 (길이 = 1이기 때문)
            return [i, i]
        elif prefix[i+1] >= k: # prefix 앞에 0이 붙어 있어 index값에 1 더해줌
          # startptr에서 시작하거나 현재 지점에서-(현재 찾은 답안 중 제일 짧은 길이) 에서 시작
            for j in range(max(startptr, i-(answer[1]-answer[0])), i): 
                if prefix[i+1]-prefix[j]==k:
                    answer = [j, i] if i-j < answer[1]-answer[0] else answer
                    break
                elif prefix[i+1]-prefix[j] < k:
                    startptr = j
                    break

    return answer

6/29: AJAX

하루 못했다고 자책하지 말기...

AJAX: Asynchronous Javascript And Xml (비동기식 자바스크립트와 XML)

  • 브라우저 \(\longleftarrow\) 데이터 교환 (using 비동기, JS) \(\longrightarrow\) 서버
  • 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지 새로고침 없이 일부의 데이터만 로드하는 기법
  • EXAMPLE: FORM Submit 시 페이지 새로고침 막기
    event.preventDefault(); // DOM 요소의 기본 동작 중단
  • 원래 AJAX 이전 시대의 통신과 문제점:
    • 매 요청마다 서버로부터 <html>...</html> 전체 파일을 받아서 전체 새로고침 불가피
    1. 불필요한 데이터 통신 : 변경 필요X 한 데이터까지 전송받음
    2. 화면 순간적으로 깜박이는 현상 (리렌더링)
    3. 클라이언트 블로킹 : 클-서 통신 = 동기방식 \(\Rightarrow\) 클라이언트가 서버의 응답을 기다릴 뿐 다른 작업 불가

  • WITH \(AJAX\) \(\Longrightarrow\) 필요한 정보만 전달받아 그 부분만 렌더링한다

  • XMLHttpRequest : 브라우저에서 제공하는 Web API 객체
    • HTTP 요청 전송과 응답 수신을 위한 Method와 Property제공
    • JS (28, 멀티못함 (single threaded)) 에게 날개를 달아준 계기
    • XML 뿐만 아니라 JSON, HTML, txt 파일 등 다양한 포맷의 파일 주고받기 가능
    • HTTP 이외의 프로토콜도 지원함 (file, ftp 등)
    • 대안으로는 fetch API (ES6 표준, Promise return) 가 있음
  • AJAX의 진행과정:
    • JS가 single thread이지만 비동기가 가능한 이유:
      1. XMLHttpRequest 객체 생성
      2. Callback 함수 생성 (서버에서 response 왔을 떄 실행시키는 함수, HTML 페이지 업데이트 함)
      3. Open a request
      4. Send the Request
        const get = ( url ) => {
  // create XMLHttpRequest object
  const xhr = new XMLHttpRequest();
  // initialize HTTP Request
  xhr.open( 'GET', url );
  // Send HTTP Request
  xhr.send()
  // CALLBACK Function: if request successful
  xhr.onload = () => {
 if ( xhr.status === 200 ) {
   console.log( JSON.parse(xhr.response) );
 }
  }
}

  • 동작방식: JS 동작원리 (Call Stack, WebAPI, Task Queue, Event Loop)등 배우고 다시 정리하기

  • AJAX는 기술도, 프레임워크도, 라이브러리도 아니다
  • AJAX = 자바스크립트와 XMLHttpRequest 객체를 사용해서 클라와 서버가 비동기 방식으로 통신하는 것
  • AJAX 단점:
    1. 히스토리 관리가 되지 않음
    2. 페이지 이동없는 통신으로 인한 보안상의 문제
    3. 연속으로 데이터 요청 시 서버 부하 증가 가능성
    4. XMLHttpRequest통해 통신 시 사용자에게 진행정보 전달X (요청 완료안되었는데도 사용자가 페이지를 떠나거나 오작동할 우려 발생)
    5. AJAX를 쓸 수 없는 브라우저에 대한 이슈
    6. HTTP클라이언트의 기능 제한적
    7. 지원하는 Charset 한정되어 있다
    8. Script로 작성 (디버그 용이X)
    9. 동일-출처 정책으로 인하여 다른 도메인과는 통신 불가 (cross-domain 문제)
  • Fetch API: HTTP요청 전송기능을 제공하는 클라이언트 사이드 Web API
    • AJAX를 구현할 수 있는 방법 중 최신 방법 (XHR 보완, ES6의 표준)
    • XHR과 달리 Promise 도 지원하기 때문에 로직 추가/처리가 쉽다
    • return type: Promise 객체
    • async/await 사용해 비동기 코드 간결하게 작성 가능
    • XHR은 쿠키를 전송하지만 FETCH는 전송X
      • 자격증명 (credentials) 옵션 통해 전달 가능
    • 개발자도구 (F12) > 네트워크에서도 확인 가능
    • Promise.rejct로 Catch 불가 에러: 404: Page Not Found, 500: Internal Server Error 등 HTTP 에러
    • Catch 가능 에러: 네트워크 장애, 요청 완료 X, CORS잘못 설정된 경우
    • IE, 구형 브라우저에서 사용 불가
  • Axios: Node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트
    • JS Third Party Library (제작사에서 만든 것이 아닌, 개인 개발자, 플젝 팀이 만든 플러그인이나 라이브러리)
    • Axios의 클라이언트에서 XHR 사용
    • 서버에서는 네이티브 Node.js의 http모듈 사용
    • 구형 브라우저에서 사용 가능, 사용하기 쉬움
    • fetch API에서는 Response.json()을 활용해야 했지만 Axios에서는 자동으로 변환됨
    • 요청에도 content-type: application/json 도 자동적으로 추가됨
    • 40x, 50x 에러가 catch문에서 자동으로 잘 잡힘

  • 참고링크: MDN Web Docs, 티커의 Ajax, Surim’s Devlog, Woldan Blog

  • 더 공부할 것: CORS, EventLoop+WEbAPI+CallStack, Callback Function, Async, node js,