To Do List⚡

• 맥 환경 세팅
• 퀴즈 과제 제출
• 프로젝트 셋팅: React.js, TypeScript, Redux, styled-components
• 코딩 스타일 정리: 변수명, 함수명, 클래스명 등 작성하는 나만의 컨벤션 (https://kr.vuejs.org/v2/style-guide/index.html)
• 폴더 구조 검토: 참고
  

Note📕

• TIL

  • Blob

    • Binary large object, BLOB: 바이너리 형태로 큰 객체를 저장

    • 큰 객체: 일반적으로 그림, 오디오, 또는 기타 멀티미디어 오브젝트, 가끔 바이너리 실행 코드이기도

    • Blob 생성자로 새로운 Blob 객체 생성: 생성 시 파라미터로 array와 options 삽입

      const newBlob = new Blob(array, options);
      
      // html
      const html = ['<p>HEEEEELLO WORLD!</p>']
      const htmlBlob = new Blob(html, { type: 'text/html', endings: 'native' })
      
      // 이미지
      const image = [new Uint64Array(someImgData)]
      const imageBlob = new Blob(image, { type: 'image/jpeg' })

    • array: ArrayBuffer, ArrayBufferView, Blob, DOMStrring 중 하나로 데이터의 배열을 전달

    • options: {types: , endings: } 형태

    • Blob을 DOM에서 표시하기 위해서는 URL.createObjectURL()을 활용

      const blobURL = URL.createObjectURL(imageBlob)
      console.log(blobURL) // blob:http://localhost/{hash 값}

    • 참고

• enum

  • 열거형 변수

  • 추상화의 수단으로 사용됨

  • 언어 코드 저장 변수를 만들어야 하는 상황

    const code: string = 'en' 
    // string? 지원 가능 언어는 한정되어 있는데 
    // string으로 변수의 타입을 지정하는 것은 너무 광범위
    
    type LanguageCode = 'ko' | 'en' | 'ja' | 'zh' | 'es'
    const code: LanguageCode = 'ko'
    // 타입의 범위를 좁힘
    // 그러나 특정 국가 코드가 정확히 어떤 언어 가리키는지 외우기 어려움
    
    const korean = 'ko'
    const english = 'en'
    const japanese = 'ja'
    const chinese = 'zh'
    const spanish = 'es'
    // 이렇게 상수를 여러 개 선언해두는 것은 비효율적
    // (코드 중복 발생 또는 코드 길이 길어짐)
    
    export enum LanguageCode {
      korean = 'ko',
      english = 'en',
      japanese = 'ja',
      chinese = 'zh',
      spanish = 'es',
    }
    // enum을 사용하여 리터럴의 타입과 값에 이름 붙일 수 있음
    // 코드 가독성 높아짐
    
    const code: LanguageCode = LanguageCode.korean
    // 'ko'

  • 객체와의 차이점

    • 객체는 속성 자유롭게 변경 가능 / enum은 속성 변경 불가
    • 객체의 속성은 리터럴보다 넓은 타입으로 추론 이뤄짐 / enum은 항상 리터럴 타입이 사용됨
    • 객체의 속성 값으로는 모든 값이 올 수 있음 / enum의 속성 값으로는 문자열 or 숫자만 가능

  • 같은 종류를 나타내는 여러 개의 숫자 또는 문자열에 각각 이름을 붙여 가독성을 높일 때 enum을 사용

  • 참고

• computed

  • 템플릿 내에는 너무 많은 연산을 하지 않는 것이 좋음 → 복잡한 로직이라면 반드시 computed 속성 사용해야 함

    <div id="example">
      <p>원본 메시지: "{{ message }}"</p>
      <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
    </div>
    
    var vm = new Vue({
      el: '#example',
      data: {
        message: '안녕하세요'
      },
      computed: {
        // 계산된 getter
        reversedMessage: function () {
          // `this` 는 vm 인스턴스를 가리킵니다.
          return this.message.split('').reverse().join('')
        }
      }
    })
    
    // computed 속성인 reversedMessafe 함수는 
    // vm.reversedMessage 속성에 대한 getter 함수로 사용됨

    <p>뒤집힌 메시지: "{{ reversedMessage() }}"</p>
    
    // 컴포넌트 내부
    methods: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('')
      }
    }
    
    // computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수 실행 
    // 즉, message가 변경되지 않는 한, reverseMessage 여러 번 호출해도
    // 계산되어 있던 결과 즉시 반환 (캐싱)

  • 참고

• styled-components TypeScript setting: https://kyounghwan01.github.io/blog/TS/React/styled-components-preset/#package-json-설치

Today was...🎯

• 드디어 온보딩 과제와 퀴즈를 제출하고 새로운 프로젝트에 발을 살짝 내딛었다. 새로 개발 환경을 세팅하고 이것저것 패키지를 직접 깔며 합리적인 폴더구조에 대해 고민해보기도 했다. 지금까지는 components 폴더와 pages 폴더를 아예 분리해서 사용했었는데, 이번에는 components 폴더 내에 pages 폴더를 넣었다. pages 또한 결국 하나의 컴포넌트이고, 아무래도 같이 변경될 가능성이 높은 파일들끼리 하나의 폴더 안에 넣어서 가까이 두는 게 좋을 거 같았기 때문이다. 처음 이런 구조로 폴더를 구성해서 조금 낯설기도 하지만 결국 잘 적응할 수 있으리라는 것을 안다😎

• 처음으로 스프린트 회의에 참석해봤는데, 다들 너무 프로페셔널하시고, 내가 잘 모르는...바로 알아듣기 어려운 용어를 사용해서 대화하시는 게 너무 멋져보였다. 드라마를 눈 앞에서 보는 것 같았다. 나도 그 대화에 끼어보고 싶었다😂 하지만 아직 모르는 얘기들이 많아 그저 경청하기에 바빴다. 언젠간 나도 대화에 참여해서 내 의견을 자신있게 제시할 수 있겠지.

• 아직 디자인 시안이 완전하게 나오진 않은 것 같아 본격적인 개발은 다음 주로 계획되어 있는 것 같다. 그 전까지 해야할 일들이 (개인적으로) 아주 많아 보인다.

• 우선 TypeScript에 빠르게 익숙해져야 한다. 집에서 강의 영상을 보며 전체적인 개발 흐름을 파악하고 문법, 표현 방식 등을 익혀야 한다.

• 그리고 애증의 Redux도 여전히 발목을 잡는 느낌이다. 관련 강의 영상을 꼭 봐야겠다.

• 아직도 너무 모르는 게 많아 민망하기도 하고...갈길이 멀게 느껴진다. 하지만 그만큼 해낼 수 있는 일이 많다는 뜻이기도 하니까 너무 주눅들지는 말아야지. 무엇보다 난 여기서 일하는 게 즐거우니까.