Mong dev blog

분류 전체보기210

[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.
이미지 로딩 시간을 줄이는 3가지 방법
🙂 이번 시간에는 이미지 로딩 시간을 줄이는 3가지 방법에 대해 알아보았다! 1. 이미지 압축하기 첫번째는 이미지를 압축하는 방법으로, 이미지를 압축하여 이미지 로딩 시간을 줄일 수 있다. 이미지를 압축하는 방법으로 Imagemin를 사용할 수 있다. (1) imagemin으로 이미지 압축하기 압축할 파일 위치, 압축된 파일 저장 위치 등을 지정하여 이미지를 압축할 수 있다. import imagemin from 'imagemin'; import imageminJpegtran from 'imagemin-jpegtran'; import imageminPngquant from 'imagemin-pngquant'; const files = await imagemin( ['images/*.{jpg,png}'],..
2022. 9. 24.
[CSS] 스타일 우선순위를 정하는, Cascade Layer(@layer)
🙂 이번 시간에는 CSS의 스타일 우선순위를 정할 수 있는 @layer에 대해 알아보았다! 만약 CSS의 명시도를 알고 있다면 “1. CSS 스타일을 선언할 때, 우선순위가 있다고?”은 넘어가자! 1. CSS 스타일을 선언할 때, 우선순위가 있다고? 1) CSS 스타일 선언 방식 CSS에서 스타일을 선언하는 방식은 6가지가 존재한다. 그럼 이 6가지에는 어떤 것이 있을까? 간단히 알아보자 🙂 (1) 속성값에 !important를 사용한 경우 스타일 속성값에 !important를 사용해 스타일을 우선 적용할 수 있다. h1 { color: red !important; } (2) HTML에 style로 선언한 경우 HTML에서 인라인 스타일 방식으로 지정할 수 있다. hello world (3) id로 선언..
2022. 9. 11.
[JS/Eslint] 레이스컨디션을 유발하는 await는 쓰지말자(require-atomic-updates)
이번 시간에는 eslint 룰 중 하나인, require-atomic-updates에 대해 알아보았다! 1. eslint룰, require-atomic-updates 1) 이 규칙은? await가 레이스 컨디션을 유발할 경우, await 사용을 금지하는 규칙이다. 2) await가 레이스 컨디션을 유발하는 경우 아래 예시는 person의 age 데이터를 가져와, age의 총합을 구하는 로직이다. const PEOPLE = [{ id: 1, age: 12 }, { id: 2, age: 22 }]; let totalAge = 0; // await를 사용해 age의 총합을 구하는 함수 async function addAge(id) { totalAge += await getAge(id); // 주요하게 볼 부분..
2022. 9. 3.
[JS/Eslint] 반복문에서 await를 쓰지말자(no-await-in-loop)
이번 시간에는 eslint 룰 중 하나인, no-await-in-loop에 대해 알아보았다! 1. eslint룰, no-await-in-loop 1) 이 규칙은? 반복문에서 await 사용을 막는 규칙이다. 만약, 프로미스 간에 정해진 순서가 있는 경우 반복문에서 await를 쓸 수 있으나 프로미스 간에 정해진 순서가 없는 경우 반복문에서 await를 쓰는 건 성능상 좋지 않다. for (const person of people) { const response = await getPersonId(person); // ❌ } 🤔 그럼 성능을 향상시키면서, (정해진 순서가 없는)여러 프로미스을 처리하고 싶다면 어떻게 해야할까? Promise.all을 쓰자! 2) Promise.all로 처리하자! (1) Pr..
2022. 8. 27.

티스토리툴바