ziglog

Search by

Home
3월 2주차 기록

3월 2주차 기록

March 12, 2023 • ☕️ 5 min read

weekly

우당탕탕 호주 첫주차

배워가기

`TRUNCATE TABLE`

table의 전체 데이터만 삭제하고, table 그 자체는 남겨두는 쿼리

명령어를 실행하면 롤백을 할 수 없고, auto increment counter가 리셋된다는 점을 주의!

Ref https://stackoverflow.com/questions/13223820/postgresql-delete-all-content

cloudfront 함수

Amazon CloudFront의 CloudFront 함수를 사용하여 요청 및 응답을 조작할 수 있다.

CloudFront 함수는 JavaScript로 작성하며 다음과 같은 사용 사례의 단기 실행 경량 함수에 적합하다.

캐시 키 정규화, 헤더 조작, URL 리디렉션 또는 다시 쓰기, 요청 권한 부여

Ref https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/cloudfront-functions.html

tar

Tape Archive 의 약자로, 여러 파일 및 디렉토리를 단일 아카이브 파일로 묶은 것이다. 무손실 무압축 방식을 사용한다. (압축이 아니다!)

tar를 사용하면 메타데이터를 보존할 수 있다. 파일 및 디렉토리의 권한, 소유자, 그룹 등의 메타데이터를 보존한다.

무압축이지만, 압축도 사용할 수 있다. gzip 으로 압축할 수 있으며, tar 파일을 gzip 으로 압축한 파일 형식은 tgz라고 부른다.

거의 모든 운영체제에서 사용 가능하며, 다른 운영 체제 간에 백업, 파일 전송 수행할 때 좋다.

타르볼이라고도 불린다.

`isFocused` 주의

isFocused && <button type=""reset">초기화</button>

버튼을 클릭해도 reset 동작이 되지 않았다.

이유는, 버튼을 클릭한 순간 isFocused는 false이며, DOM에서 button 언마운트시킨다. 따라서 reset이 동작하지 않는다.

다음과 같이 해결한다.

<button type="reset" style={{ opacity: isFocused ? 1 : 0 }}>초기화</button>

cloudfront의 CNAME

CloudFront는 비활성화 중에도 CNAME을 점유하고 있어서 같은 CNAME(alias name)으로 CloudFront를 생성할 수 없다.

비활성화 후 바로 삭제가 안 되기 때문에 비활성화를 누르고 차를 한 잔 마신 다음 차분한 마음으로 삭제를 눌러 CloudFront 배포 스택을 지우고 다시 만들어야 한다.

font-family 와 font-stack의 차이

font-family
- 굴림
font stack
- 굴림, System UI, San Serif

contenteditable

내용 편집이 불가능한 HTML 요소도 편집할 수 있도록 변경시켜준다.

role="textbox"까지 써주면 input과 유사하게 사용할 수 있다.
내용 편집 시 change 이벤트는 발생하지 않지만 input, keydown 이벤트 등은 발생한다.
활용하면 일반 input과는 다르게 span 등을 사용해서 내용 입력에 따라서 너비가 늘어나는 요소를 만들 수 있다.
react에서 controlled component로 만드려고 하면 react에서 오류로 반환한다 (contentEditable한 요소의 children으로 상태가 들어가는 것이 아니므로)

Ref https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

이것저것

redux-mock-store - 테스트 환경에서 redux store를 mocking해주는 라이브러리 (Ref)
ul tag는 li tag가 아닌 자식을 가질 수 없다.
:focus-within - 하위 자식 요소에 포커스가 갔을 때를 인식하는 css pseudo class
<select> 태그는 기본적으로 disabled 상태일때 opacity: 0.7을 준다.
RC - Release Candidate; 릴리즈 후보

vite.config.ts 파일에 test 관련 설정을 추가하기 위해서는 vite.config.ts 파일 상단에 /// <reference types="vitest" />를 추가해줘야 한다.

Copy

/// <reference types="vitest" />
/// <reference types="vite/client" />

import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import checker from "vite-plugin-checker";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [react(), checker({ typescript: true }), tsconfigPaths()],
  server: {
    port: 3000,
  },
  build: {
    manifest: true,
  },
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/common/test/setup.ts",
  },
});

CSS로 구현한 Loader를 모아놓은 사이트

기타공유

지옥에서 온 CoffeeScript

civet이라는 난해한 문법을 사용한다 🫠

Ref https://news.hada.io/topic?id=8653

turborepo의 go -> rust 이전 배경

생태계, 개발 경험 등등의 이유로 go에서 rust로 마이그레이션한다고 한다…

Ref https://vercel.com/blog/turborepo-migration-go-rust

마무리

호주 오자마자 실컷 놀고 먹고 2kg는 찐 것 같다~

본다이비치 가서 선크림 대충 바르고 놀다가 수영복 안 닿고 노출된 부분, 이마와 코까지 전부 새빨개져버렸다. 아 따거~ 😎 정말 바보가 따로없다. 알로에젤 사서 바르는 중…

일요일에 브리즈번 이동하자마자 한국에서도 낸 적 없는 대규모 사고쳤다. 진짜 울고 싶었지만 서니가 같이 잘 처리해줬다 ㅠ 오자마자 집에 가고싶어져버렸다.

그치만 아직 가고 싶은 곳, 놀고 싶은 게 많은가보면 진짜 철탱이 바본가보다. 😇

Relative Posts:

3월 3주차 기록

March 17, 2023

3월 1주차 기록

March 4, 2023

지그의 개발 블로그