일기장

배운 것

• ZWJ (zero-width joiner)
  • 말 그대로 폭이 0인 접합자이다!
  • 두개 이상의 문자를 결합해 새 문자나 이모지를 만들 수 있는 유니코드 문자
  • 이모지 입력시 간혹 여러개로 나뉘어 입력되는 경우 ZWJ
  • 👨 ‍ 👩 ‍ 👦 = 👨‍👩‍👦 와 같이 사용 가능
  • 이모지 버전이 서로 다른 환경에서 한쪽에서는 ZWJ로 합쳐져서 1칸으로 표시되는데 다른 쪽에서는 쪼개져서 여러칸을 차지하며 표시될 수도 있음 ㄷㄷ
    • 환경마다 지원하는 이모지 버전이 달라 어디서는 표시가 되는데 또 어디서는 표시 안될 수 있음
    • 폴리필 하듯 해당 버전에서 지원하지 않는 이모지는 라이브러리등을 사용해 따로 표시해주어야 함

느낀 것

• 이모지 표시하는 것도 신경쓸게 많구나...!

https://en.wikipedia.org/wiki/Zero-width_joiner

https://en.wikipedia.org/wiki/Emoji

배운 것

• JS에서는 정의되지 않은 변수에대한 VSCode quick fix suggestion에서는 import 옵션이 나오지 않음
  • TS에서 지원하는 것...🤣

SVG viewBox를 알아보자

prop-types

[React] missing in props validation 뭔데?

한 일

• 출그으은!
• 타입스크립트 핸드북 읽기

배운 것

• unknown
  • arguments를 다른 function의 arguments로 넘겨주기만 하는 경우 타입을 알 필요 없기 때문에 사용
• TypeScript function overload
  • TypeScript에서는 function arguments와 return 의 type에 대한 overload를 지원한다.
  • overload가 존재하는 type들만 포함한 union type에 대해서는 type checking시 type error가 발생함

    function foo(a: string) {}
    function foo(a: number) {}
    function foo(a: any) {...}
    
    foo(isNumber === true ? 1 : '1');
    // number | string type으로 type inference 되기 때문에 number, string type에 대한 overload가 모두 존재함에도 type error 발생

느낀 것

• 좀 더 집중해서 부지런하게 시간을 보내야겠다. 월급 루팡이 되지 않을 것이다.
• 질문을 많이 해야겠다! 개발시 유용한 도구(VSCode, Chrome 등의 익스텐션) 뭐 있을까?
• 밀린 책들을 올해는 모두 읽을 것(진지함)
• 드디어 운동을 다니기 시작했다. 저녁에 사람이 너무 많아서 아침형 인간이 되면 좋을 것 같다!
• 출근한지 이틀 됐는데 너어어무 정신 없다. 하지만 내가 꿈꾸던 곳에 왔기 때문에 잘 해내고 말테다!
• 팀원분들 만날 때 마다 연예인 보는 것 같은 느낌 ㅋㅋㅋ

한 일

• 알고리즘 1문제
• 사이드 프로젝트

배운 것

• hash 방식 라우팅
  • 장점
    • fragment identifier(hash mark, hash)와 anchor를 사용
    • history 관리를 하면서 서버로 새로운 요청을 보내지 않는 방법
    • URL이 동일한 상태에서 hash만 변경되면 브라우저는 서버에 어떠한 요청도 하지 않음
      • 따라서 페이지가 갱신되지 않으나 고유의 URL이 존재하게 되므로 history 관리 가능
  • 단점
    • URL에 불필요한 #이 들어감
      • #!를 사용하기도 하는데 이를 해시뱅(hash bang)이라고 함
    • 과도기적 기술임
      • HTML5의 history API 메서드인 pushState가 모든 브라우저에 지원 된다면 쓸 필요 없음
    • SEO 이슈
      • Javascript를 실행하지 않는 웹 크롤러는 hash 방식을 사용하는 사이트의 콘텐츠를 수집할 수 없음
      • 구글의 경우는 해시뱅을 일반 URL로 변경해 이 문제를 해결
        • svelte-spa-router가 hash 방식 사용함

https://github.com/ItalyPaleAle/svelte-spa-router

https://poiemaweb.com/js-spa

느낀 것

• 역시 일을 너무 많이 벌여놨다... 으악
• 건강관리 해야할듯

한 일

• 사이드 프로젝트
• 면접 준비 도와주기!

배운 것

• vite + svelte 환경에서 scss 사용하는 방법
  • node-sass 혹은 sass 설치
  • svelte-preprocess 설치
  • vite.config의 vite-plugin-svelte의 옵션을 다음과 같이 설정

    import sveltePreprocess from 'svelte-preprocess';
    
    export default defineConfig({
    	plugins: [ svelte({ preprocess: [sveltePreprocess()]
        // preprocess: [sveltePreprocess({ typescript: true })] ts 사용시 }) ]
    });

  
  
  • .svelte 파일의 style 태그 lang 속성에 scss 명시
  • <style lang="scss">
• AbortController 를 이용해 fetch를 이용한 http 요청을 취소할 수 있다
  • AbortController 객체의 signal 프로퍼티가 반환하는 AbortSignal 객체를 fetch의 두번째 파라미터로 넘겨주는 옵션 객체의 signal 프로퍼티로 넘겨줌
  • 이후 AbortController 객체의 abort 메서드를 호출하면 요청이 취소됨

https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md

https://developer.mozilla.org/ko/docs/Web/API/AbortController

느낀 것

• RxJs 스터디 + Rust 스터디 입사하고 나서도 지속할 수 있을까?
  • 사내 스터디도 있다면 참여하고 싶은데 욕심이 너무 많은듯ㅎ

한 일

• 알고리즘 1문제
• RxJS 반응형 프로그래밍 챕터 1 읽기

배운 것

• 신장 트리(spanning tree)
  • 그래프 내 모든 정점을 포함하는 트리
  • 모든 정점들이 연결되어 있어야 하고 사이클을 포함해서는 안됨
    • 따라서 n개의 정점을 n-1개의 간선으로 연결
    • 이 경우 반드시 트리 형태가 됨
  • 깊이 우선 탐색 혹은 너비 우선 탐색을 통해 찾을 수 있음
  • 신장 트리는 최소 연결 부분 그래프임
  • 네트워크, 전화망 등을 최소 링크로 구축하기 위해 사용
    • 하지만 일반적으로 각 링크를 구축하는데 드는 비용은 동일하지 않음
• 최소 비용 신장 트리(MST, Minimum Spanning Tree)
  • 신장 트리에 사용된 간선들의 가중치 합이 최소인 신장 트리
  • 도로, 전기 회로, 통신, 배관 등을 최소 비용으로 연결하는 방법을 찾는 문제에서 사용
  • Kruskal, Prim 알고리즘으로 구함
• Kruskal 알고리즘
  • greedy 한 방법으로 구함
    • 각 단계에서 사이클에 포함되지 않는 최소 비용의 간선을 선택
  • 간선을 가중치 오름차순으로 정렬
  • 정렬된 간선 리스트에서 순서대로(비용이 적은 순서) 사이클을 형성하지 않는 간선을 선택해 신장 트리 집합에 추가
    • 사이클을 형성하면 제외
    • 사이클 형성 여부는 union-find 알고리즘을 통해 확인
  • 집합에 포함된 간선 수가 n-1이 되면 종료
  • 간선 수가 적을 때 효율적
    • 희소 그래프(Sparse Graph)인 경우
  • 시간 복잡도 O(elog₂e)
• Prim 알고리즘
  • 시작 정점을 정하고 인접 정점으로 가는 간선들 중 가장 비용이 적은 간선을 선택해 트리를 확장함
    • 사이클을 만드는 경우는 제외
  • 우선순위 큐를 이용해 구현할 수 있음
  • 간선수가 많은 경우 효율적임
    • 밀집 그래프(Dense Graph)인 경우
  • 시간 복잡도 O(n^2)

느낀 것

• 배울게 너무 많아서 우선순위를 정하기가 힘들다ㅠㅠ

한 일

• 사이드 프로젝트
  • GraphQL API
• 알고리즘 1문제

배운 것

• GraphQL
  • API를 위한 쿼리 언어임
    • SQL은 DB에 저장된 데이터를 효율적으로 가져오기 위함이 목적
    • GraphQL은 웹 클라이언트가 서버로부터 데이터를 효율적으로 가져오기 위함이 목적
  • 특정 데이터베이스나 스토리지 엔진에 종속되지 않음
  • 기본 scalar 타입 5개
    • Int, Float, String, Boolean, ID
  • 쿼리/뮤테이션(query/mutation)을 통해 데이터를 조회하고 변조함
  • 데이터베이스 스키마를 작성하듯 스키마를 작성해야함
    • User: 오브젝트 타입명
    • !: non-nullable
    • []: 배열
    • id, name 등: field

      type User {
        id: ID!
        name: String!
        age: Int!
        photos: [Photo]
      }

  • 데이터를 가져오는 방법을 리졸버를 통해 직접 구현해야함
    • 리졸버 함수는 총 4개의 인자를 받음
    • parent, args, context, info
      • parent: 연쇄적으로 리졸버가 호출되었을 때 부모 리졸버가 리턴한 객체. 이를 통해 리졸버가 반환할 값을 조절 할 수 있음.
      • args: 쿼리에서 입력한 인자
      • context: 모든 리졸버에 전달되는 값. 주로 미들웨어를 통해 입력된 값들이 들어감. 로그인 정보, 권한과 같은 컨텍스트 관련 정보.
      • info: 스키마 정보, 쿼리의 특정 필드 정보 등을 담고 있음. 잘 사용하지 않음.
• MySQL 원격 접속하기(Ubuntu)
  • AWS 인스턴스에 적용된 보안 그룹의 인바운드 규칙에 TCP 3306 포트 추가해줌
  • cd /etc/mysql/mysql.conf.d 에서 bind-address 부분을 #로 주석처리 하거나 0.0.0.0 으로 수정해줌
  • mysql 서비스 재시작 service mysql restart
  • mysql에서 원격으로 접속할 user 권한 부여
    • grant all privileges on . to user@'%' identified by 'password';
  • 접속
    • 안되면 방화벽 설정 확인 후 3306 허용
    • sudo sfw allow 3306/tcp
  • 열어놓으면 위험하니까 왠만하면 하지 말자 ㅎㅎ

https://graphql.org/learn/

https://tech.kakao.com/2019/08/01/graphql-basic/

느낀 것

• GraphQL 왜 쓰는지 알 것 같다!

한 일

• 인프런 유인동님 함수형 프로그래밍 강의 보기
• 알고리즘 1문제

배운 것

• 위상 정렬(Topological Sort)
  • 특징
    • 방향 그래프에서 각 정점의 선행 순서를 위배하지 않으며 모든 정점을 나열하는 것
    • 작업 순서대로 나열한다고 생각하면 된다
    • 하나의 방향 그래프에서 여러 위상 정렬이 가능
    • 위상 정렬 과정에서 선택되는 정점의 순서를 위상 순서(Topological Order)라고 함
    • 과정에서 그래프에 진입 차수가 0인 정점이 없다면 중단
      • 이 경우 해결 불가능한 문제가 됨
  • 방법
    1. 큐에 진입 차수(들어오는 간선의 수가 0)가 0인 정점을 모두 삽입
    2. 진입 차수가 0인 정점을 선택(큐에서 꺼냄)
    3. 선택된 정점과 정점에 부속된 간선들을 삭제 => 간선의 도착점에 해당하는 정점의 차수를 감소
    4. 위의 과정을 반복해 모든 정점이 선택/삭제되면 알고리즘 종료

https://gmlwjd9405.github.io/2018/08/27/algorithm-topological-sort.html

느낀 것

• 긴장이 확 풀려서 게을러졌다ㅎ
• 오늘 시동 걸었으니 다시 달려봅시다!
• polling 이하 생략은 임시 저장에서 빠져나오지 못하고 있다!