1월 첫주차 기록

배워가기

webpack BannerPlugin

• 생성된 각 청크의 상단에 배너를 추가한다.

  Copy

  const webpack = require('webpack');
  
  new webpack.BannerPlugin(banner);
  // 또는
  new webpack.BannerPlugin(options);

• TerserPlugin에서 output: preamble 설정을 통해 운영에서도 소스코드 상단에 banner를 추가할 수 있다

  Copy

  new TerserPlugin({
    terserOptions: {
      compress: {
        drop_console: ['prod'].includes(PROFILE),
      },
      output: {
        comments: false,
        preamble: `/* ${banner()} */`,
      },
    },
    extractComments: false,
    parallel: true,
  }),

https://webpack.kr/plugins/banner-plugin/

html <meta http-equiv>

• 태그의 http-equiv 속성은 content 속성에 명시된 값에 대한 HTTP 헤더를 제공한다.
• http-equiv 속성은 HTTP 응답 헤더를 시뮬레이션할 때 사용할 수 있다.
• 만약 http-equiv 속성이 명시되어 있다면, 반드시 content 속성도 함께 명시되어야만 한다. ex) <meta *http-equiv*="cache-control" *content*="max-age=0" />

pragma 속성

• 웹 브라우저에 특정 HTTP 헤더를 관리하는 방법에 대한 “지침(directives, instructions)” 을 제공하는데 사용된다.
• “Pragma” 지시어는 HTTP/1.0 용으로 특별히 설계되었으므로 HTTP/1.1 이상에서는 제대로 작동하지 않을 수 있다. HTTP 최신 버전에서는 Cache-Control 지시문 을 사용하는 것이 좋다.

🚨 index.html의 meta 태그는 HTML5의 스펙이 아니다. 거의 제대로 동작하지 않는다

• https://tcpschool.com/html-tag-attrs/meta-http-equiv
• https://jake-seo-dev.tistory.com/572

TypeScript Parameters<() => ...> 타입

함수 파라미터의 타입을 추출해준다

role=“presentation”

semantic의미를 요소와 그 자식요소로부터 제거하기 위해서 사용한다. 시각적으로 게시하는 용도의 요소에 적용한다. none은 최근에 나온 속성값으로 presentation과 같은역할을 한다. 호환성문제가 있을 수 있으니 두 개 다 기입해 주는 것이 좋다.

https://inswave.com/confluence/pages/viewpage.action?pageId=19076563

SSO

Single Sign-On(SSO)은 1회 사용자 인증으로 다수의 애플리케이션 및 웹사이트에 대한 사용자 로그인을 허용하는 인증 솔루션이다. 요즘 사용자들은 브라우저에서 직접 애플리케이션에 자주 액세스하기 때문에 조직은 보안 및 사용자 경험 모두를 개선하는 액세스 관리 전략에 우선 순위를 둔다. SSO는 한 번 자격 증명이 검증된 사용자에게는 반복되는 로그인 없이 모든 암호 보호 리소스에 액세스하도록 하여 보안과 사용자 경험을 모두 충족할 수 있다.

즉, 하나의 아이디 및 패스워드를 통해 여러 시스템에 접근할 수 있는 통합 로그인(인증) 솔루션

SSO의 구성 요소

• 사용자 통합 로그인

• 인증 서버

• 통합 에이전트 : 각 정보 시스템에 대한 정보 관리

• LDAP(Lightweight Directory Access Protocol) : 네트워크 상의 자원을 식별하고 인가된 사용자만 접근하도록 하는 네트워크 디렉토리 서비스

• https://toma0912.tistory.com/75

• https://aws.amazon.com/ko/what-is/sso/

ReferenceError: __dirname is not defined

CommonJS와 달리 ES6 환경에서는 __dirname이 정의되어있지 않아 발생하는 에러

🧐그래도 쓰고 싶다면? 아래와 같이 만들어 쓸 수 있다.

import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

스토리북의 css 초기화

스토리북에서 body에 기본적으로 포함되어있는 padding을 초기화하려면 parameter로 설정해줄 수 있다

• global 단위 - preview.ts의 preview 객체
• component 단위 - stories.ts의 meta
• story 단위 - story

에 layout: 'fullscreen'을 추가해주면 된다.

const meta = {
  component: Button
  parameters: {
    layout: 'fullscreen'
  }
}

https://storybook.js.org/docs/7.0/configure/story-layout

이것저것 모음집

• TypeScript Parameters<() => ...> 타입 - 함수 파라미터의 타입을 추출해준다(Ref)
• app.setGlobalPrefix - nest app에서 API endpoint prefix 설정하기
• mobx의 action.bound가 걸린 함수들은 jest.mocking이 안 된다. 실행 시 다음 에러를 만나게 된다. - [mobx] @action fields are not reassignable

기타공유

Mac에서 IE를 실행할 수 있는 도구

👇요기

https://www.lambdatest.com/

소프트웨어 엔지니어의 월급은 3개의 예산에서 나옵니다

소프트웨어 엔지니어링의 급여는 **“판매/마케팅, 연구 및 개발, 유지보수”**의 3가지 예산 중 하나에서 나온다.

판매/마케팅 예산

• 성장 조직에 속할 때 결과는 쉽게 정량화하고 측정 가능하다.
• Growth 엔지니어, 세일즈 엔지니어, DevRel 등이 해당되며, 기존 제품의 판매, 기능을 알리고, 워크플로우에 도구가 채택되도록 하는 것을 담당한다.
• 업무는 단기적으로 집중되는 경향이 있으며, 다음 실험/고객/마케팅 유행을 쫓게 된다.

연구 및 개발

• 연구 및 개발(R&D)은 가장 많은 엔지니어를 고용하며, 일반적으로 제품 조직 하부에 있다.
• 제품 엔지니어, 연구원, 아키텍트 등이 여기에 속하며, 장기적인 결과에 초점을 맞추고, 때로는 활성화 개선 기능을 구축하거나 새로운 제품 라인을 탐색한다.
• 더 짧은 실험들은 다음 단계로 가기위한 Stepping Stone의 역할을 한다.
• 판매할 수 있는 제품을 구축하고, 제품의 품질이 좋을수록 판매와 리텐션을 좋게 만든다.

유지보수

• 유지보수는 대부분 개발에 흡수되었으며, 이는 이 예산이 비용 최적화를 요구하기 때문이다.
• 시스템 관리자, 오래된 시스템을 유지하는 사람들, 때로는 플랫폼 엔지니어가 여기에 속한다.
• 회사는 이 작업을 순수한 비용으로 보고 최소화하려 한다.
• 내부를 위한 도구 구축도 이 범주에 속할 수 있음. (회사를 굴러가게 하지만, 결코 우선 순위에는 포함되지 않는 사랑받지 못하는 관리자 대시보드 같은 것)

왜 이것이 중요한가 당신이 어떤 예산 유형에 속하는지에 따라 일상 업무가 형성된다.

• ‘성장(Growth)‘과 관련된 업무 - ‘측정 가능(measurable)’ ‘변동성이 큼(churny)’
• ‘연구(Research)’ - ‘편안하고 (chill)’ 및 ‘모호함 (fuzzy)’
• ‘개발(Development)’ - ‘가치가 있고 (valued)’ 점차적으로 구축됨 (builds over time)
• ‘유지보수(Maintenance)’ - ‘항상 위험에 처해 있음 (always on the chopping block = 축소대상)’

https://news.hada.io/topic?id=12648&fbclid=IwAR3EKd9Ym-xZWmoNXDMnHwwl8Rz_o092fL-t_9Ed7K5vfw1tv2ipvmW4irw

마무리

새로운 블로그에서 첫 위클리

적응은 안 된다

첫 주부터 다른 사람들 계획들도 들으면서 내 한 해 꾸려나가고 있는 중 😝