Mong dev blog

개발 기술/개발 이야기70

Storybook, UI 컴포넌트를 테스트하게 해줘!(feat. vite)
💡 이번 시간에는 UI 컴포넌트를 테스트할 수 있는 Storybook이라는 툴에 대해 알아보았다! 1. storybook이란 1) 스토리북은 무엇일까? 스토리북은 UI 컴포넌트의 동작을 독립적인 환경에서 테스트할 수 있는 툴이다. 스토리북에 추가된 컴포넌트는 서비스와 독립된 환경에서 렌더링되기에, 재사용 가능한 컴포넌트여야 한다. 스토리북은 개발자가 컴포넌트의 동작을 파악하는데 도움을 준다. 또한 figma 연동도 가능하기에 디자이너와의 커뮤니케이션에도 효과가 있다. 아래 gif는 스토리북의 예시이다. 🤔 컴포넌트를 테스트하기 위해 스토리북을 쓰는 거라면, 이 툴을 쓰지 않고 서버를 구동해서 컴포넌트 동작을 확인하면 안될까? 그렇게 해도 된다. 하지만 재사용가능한 컴포넌트가 UI 컨셉에 맞게 구현되어 있..
2023. 1. 15.
리플로우, 리페인트와 브라우저 렌더링 알아보기
🙂 이번 시간에는 브라우저 렌더링 과정 그리고 리플로우, 리페인트에 대해 알아보았다! 1. 브라우저 렌더링 과정 1) 브라우저는 어떻게 화면을 그릴까? 우리는 주소를 이용해 사이트에 접속한다. 사이트 주소는 대게 'http://www.xxxx.com' 형식이며, 이를 도메인 주소라고 부른다. ❓ 그런데 브라우저는 IP 주소를 사용한다고 들었는데, 도메인 주소를 어떻게 IP 주소로 바꾸는 걸까? 방법은 아래와 같다. 사용자가 www.google.com(도메인 주소)에 접속한다. 이때 브라우저는 도메인 주소로 네트워크 요청을 보낸다. 네트워크에서는 DNS서버를 사용해, 도메인 주소에 해당하는 IP주소를 찾는다. 찾은 IP주소로 요청을 전송하여 도메인 주소에 해당하는 리소스(html)를 응답으로 받는다. ❓ ..
2023. 1. 2.
[CSS/JS] 웹 폰트를 최적화하는 5가지 방법
😃 이번시간에는 웹폰트 로딩을 최적화하는 5가지 방법을 알아보았다! (참고1, 참고2, 참고3) 1. 들어가기에 앞서 1) FOIT, FOUT ? 우리가 처음 사이트에 진입했을 때, 글자가 늦게 뜨거나 폰트가 나중에 적용되는 현상이 일어난다. 이 두 현상은 각각 지칭하여 FOIT, FOUT라고 부르는데, Flash of Invisible Text (FOIT)란, 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 현상이며, Flash of Unstyled Text (FOUT)란, 브라우저가 폰트를 다운로드하기 전까지 폰트가 적용되지 않는 현상을 말한다. 그런데 이 두 현상은 왜 일어나는걸까? 브라우저 동작과 함께 살펴보자! 2) 브라우저 동작과 웹 폰트 폰트에서 FOIT, FOUT가 일어나는 이유를..
2022. 12. 4.
husky로 Conventional Commit 체크하기
😉 이번시간에는 Conventional Commit을 알아보고, 어떻게 husky로 Conventional Commit을 자동으로 체크할 수 있는지 그 방법을 알아보았다! 1. Conventional Commit이란 1) Conventional Commit은 무엇일까? Conventional Commits은 커밋 메시지에 대한 규칙이다. 이 규칙을 사용하면, 커밋 히스토리 추적은 물론 커밋의 성격도 쉽게 나타낼 수 있다. 아래는 커밋 메시지의 작성 형태이다. // 기본 형태 ()!: // 예시 fix(api): send an email to the customer when a product is shipped 2) 컨벤션 타입의 종류는? 커밋이 기능 추가인지 버그 수정인지 여부는 커밋 메시지의 타입 부분..
2022. 11. 19.
[CSS] Media Query 비교연산자(<, >, =)
1. 미디어 쿼리란? (media query) 미디어 쿼리(media query)는 뷰포트 크기에 따라 스타일을 지정할 수 있는 CSS 기능이다. 만약 모바일, 태블릿, 데스크탑별로 다른 스타일을 적용해야한다면, 미디어 쿼리를 쓰면 된다. /* 미디어 쿼리 기본 문법 */ @media (조건) { 스타일 } 미디어 쿼리 조건에는 min-width, max-width, min-height, max-height 등이 있다. 아래 예시는 뷰포트의 너비가 300px이상일 때, .box의 배경색을 red로 지정하는 코드이다. @media screen and (min-width: 300px) { .box { background-color: red; } } 📌 그런데! Media Queries Level 4에서는 비..
2022. 11. 9.
[JS/Module] CommonJS와 ES Modules는 무엇일까?
1. CommonJS, ES Modules는 무엇일까? 우리는 JS 모듈을 내보내거나 가져올 때 2가지 방식을 사용한다. 첫번째 방법은 module.exports로 모듈을 내보내고 require()로 접근하는 CJS(CommonJS), 두번째 방법은 export로 모듈을 내보내고 import로 접근하는 ESM(ES Modules)이 있다. // CJS 방법 module.exports = { ... } // 모듈 내보낼 때 const utils = require(&#39;utils&#39;); // 모듈 가져올 때 // ESM 방법 export.default =()=> { ... }; // 모듈 내보낼 때 import utils from &#39;utils&#39;; // 모듈 가져올 때 그런데 ESM, ..
2022. 11. 7.
[JS] Strict mode는 무엇일까?
이번 시간에는 엄격모드를 지정할 수 있는 Strict mode에 대해 알아보았다! 1. “use strict”란? (1) “use strict는 무엇일까? “use strict”는 코드를 엄격모드로 설정하는 문자열이다. 엄격모드에선 기존에 무시되던 에러가 throw되고, 추후 추가될 ECMAScript문법이 금지된다. JS에서 암묵적 변형이 없는 환경에서 코드를 동작시키고 싶은 때 사용한다. (2) 사용방법 파일 전체를 엄격모드로 지정하고 싶다면, 파일 최상단에 “use strict”를 추가한다. "use strict"; // 이 파일의 코드들은 엄격모드에서 동작한다. ... 함수 레벨에서 엄격모드를 지정하고 싶다면, 함수 구문 최상단에 “use strict”를 추가한다. 아래 코드는 strictFunc..
2022. 10. 29.
[github Actions] 파일 경로에 따라 라벨링하고 릴리즈하기(feat. 모놀리식 레포)
1. 모듈별로 릴리즈 노트를 생성할 수 있을까? 만약, 하나의 레포에 여러 개의 모듈이 있다고 가정하자. - packages/mobile # 모바일 서비스 모듈 - packages/desktop # 데스크탑 서비스 모듈 - packages/common # 모바일&데스크탑에서 사용하는 재사용성 모듈 🤔 이때 모듈별로 릴리즈 노트를 생성하고 싶다면 어떻게 해야할까? PR의 파일 수정 위치에 따라 라벨링을 하고, 라벨에 따라 릴리즈 노트를 만들면 가능하다! 컨셉은 아래 표처럼 PR 수정 위치에 따라 릴리즈 노트가 업데이트되는 흐름이다. 파일 수정 위치 업데이트가 되는 릴리즈 노트 (1) mobile폴더 mobile의 릴리즈 노트 업데이트 (2) desktop폴더 desktop의 릴리즈 노트 업데이트 (3) c..
2022. 10. 19.
[Git] 저장소를 다른 저장소로 통합하는 2가지 방법(git history 유지)
💡 이번 시간에는 저장소(레포)의 히스토리를 유지하면서 다른 레포로 통합하는 2가지 방법을 알아보았다! 1. 사전 준비하기 각각 3개의 커밋을 가진 레파지토리(move-test-one, move-test-two)가 있다. 이 두 레파지토리의 히스토리를 살리면서 live-history(통합 레포)로 옮길 예정이다. mono-test-one를 옮길 때는 “git mirror 방식”을, mono-test-two를 옮길 때는 “git remote 방식”으로 진행한다. 2. 레파지토리를 이동하는 2가지 방법(git history 유지) 1) mirror로 이동시키기 (1) mirror란? --mirror를 사용하면 저장소(repo, 레포)의 소스와 커밋 히스토리까지 복사할 수 있다. 커밋 히스토리도 복사하기에, ..
2022. 10. 3.

티스토리툴바