본문 바로가기
반응형
미디어 쿼리에 rem을 꼭 써야 할까? "빈츠! 반응형에 font-size 말고 미디어 쿼리(media queries)에도 rem을 사용하나요?" 분명 장점이 있는데..막상 대답하려니 말이 나오지 않았다. 그러는 사이 또 날아오는 질문 "보통 반응형에 rem, em을 사용하는 게 좋긴 하지만 미디어 쿼리는 디바이스 종류에 따라 일관된 화면을 보여주기 위한 목적이 크다고 생각되는데 뷰포트에 따른 px단위로 설정해주시는게 더 좋지 않을까요?" 맞는 말이다. 그렇다면 px로 쓰는 게 맞긴 한데..나는 왜 미디어 쿼리(media queries)에도 rem을 사용하게 됐을까? rem을 쓰면 무조건 좋은거 아니야? 🤔 이 문제에 대해서 깊게 의문을 품은 적도, 생각 해본적도 없었다. 이번 기회에 확실하게 개념을 잡아야겠단 생각을 했다. 그렇게 서로에 대.. 2022. 2. 1.
Tailwind CSS 사용법, 장점과 단점 개인적으로 tailwindcss에 대해 말하는 사람들이 늘기 시작했고 호기심이 생겼다. 그동안 미루고 미뤘던 개인 프로젝트에 적용 해보았는데 대만족을 했다. CSS를 사용하면서 느꼈던 문제들, 불편한 점들..아래와 같이 고민을 하고 있고 공감이 된다면, 많은 사람들이 tailwindcss를 통해 해결하길 바란다. 기존 CSS의 문제점 명시도(Specificity) MDN에서 설명하는 명시도란 다음과 같다. 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다. CSS 선택자(selector)를 통해 명시도를 증가 시키고 우선순위를 결정한다. 여러 스타일들이 쌓이고, 새로운 스타일을 덮어쓰.. 2022. 1. 18.
개발자가 잡담을 많이 나누는 것이 경쟁력일까? 요즘 개발자로 일하면서 회사 내외로 느끼는 것이 참 많다. 여러 생각들이 교차하고, 메모도 자주 하며 생각 정리를 위한 문서화도 하고 있다. 이제 막 프론트엔드 개발자로 일한지 한달이 좀 넘었다. 독학할 때와는 다르게 여러 시야가 생기고 있고 개발하는 만큼 생각도 많아지는 시기인 것 같다. 그 중 잡담에 대한 얘기를 하고싶다. 회사차원의 잡담 우아한 형제들의 송파구에서 일 잘하는 방법에서 3번을 보면 '잡담을 많이 나누는 것이 경쟁력이다.'라고 설명하고 있다. 왜 그렇게 생각하는지도 설명이 되어 있는데 그 이유를 보면 잡담은 신뢰를 만들어가는 원료라고 한다. 잡담을 하는 시간들이 쌓이고 쌓여 유대감이 형성 되고 커뮤니케이션이 더욱 활성화가 된다는 이야기이다. 따라서 회사차원에서의 잡담이란 아이디어를 자유.. 2022. 1. 12.
알프레드(Alfred) 무료 버전 활용하기 이제는 맥 OS에서 없어서는 안될 알프레드(Alfred). 사내에서 쓰일 맥북을 받고 가장 먼저 설치한 앱이 바로 알프레드이다. 이 앱을 알고나서는 마우스 사용량이 엄청나게 줄어들고 개발 효율성이 굉장히 좋아졌다. 빠르고, 쉽다. 나는 여태 무료 버전을 잘 사용하고 있다고 생각했다. 알프레드 마스터(입사동기)를 만나기 전까진.. 무료 버전에서도 굉장히 많은 것들을 설정할 수 있다는 것을 알게 되었다. 그 중 가장 많이 쓰고, 편리한 설정들을 소개하려고 한다. 1. 웹 검색 커스텀 제일 자주 사용하는 기능이다. 단축키로 알프레드를 실행해서 검색할 단어들을 입력하면 바로 검색이 가능하다. 개발 중에 구글링, 네이버 사전, 파파고 번역 등을 자주 사용한다. 기본적으로 검색 시, 구글로 검색이 되기 때문에 대부.. 2022. 1. 7.
나는 협업하기에 좋은 개발자일까? 문득 이런 생각이 들었다. '나는 협업하기에 좋은 개발자일까?'라는 생각. 개발자의 역량 또는 채용정보들을 보면 '협업'이란 키워드가 많이 나온다. 나는 사내에서 첫 프론트엔드 개발자이다. 사수가 없는건 아쉽지만 기술 스택이 자유롭고, 개발환경을 직접 설정할 수 있다는 것에 많이 감사하고 있다. 그러다 몇 주뒤 신입 한분이 들어오셨고 협업에 대해 좀 더 깊게 생각하기 시작했다. 사내에 사수가 없다 사내에 사수가 없고 경험과 지식이 적다보니 내가 선택한 기술 스택과 개발환경이 회사의 상황, 추구하는 방향, 프로젝트 규모에 맞는건지 계속 고민을 했다. 회사의 상황과 추구하는 방향은 사내에서 쉽게 알 수 있었지만 프론트적인 부분은 전적으로 나의 책임으로 생각했기에 오버스펙이 아닌지, 효율적인건지 많은 생각을 .. 2022. 1. 2.
VS Code extension인 Bracket Pair가 네이티브 기능이 되다 어느 날 VS Code를 사용하는데 Bracket Pair 관련 알림이 자꾸 뜨는 것이다. 어느 정도 무시하다가 계속 뜨길래 결국 확인해봤다. However since native functionality is available, it's time to deprecate this extension - bracket pair github 오랫동안 인기를 얻음에 따라 bracket pair가 결국 VS code의 네이티브 기능이 되었다는 것이다. 따라서 '이제는 확장으로 사용할 수 없으니 bracket pair를 지우고 내장된 기능으로 사용하라'는 알림이었던 것이다. 그래서 기존 사용자는 확장탭에서 bracket pair를 지우고, 신규 사용자의 경우 추가로 extension 설치를 할 필요없이 settin.. 2021. 12. 28.
Prettier, ESLint 자동화하기 Prettier, ESLint로 협업 강화하기 글에 이어서 자동화를 시켜보자. 저번 글에서 설명한 것처럼 사용하지 않는 변수와 같은 '코드 품질' 검사는 ESLint에게 맡기고 '일관된 코드 스타일', '가독성'은 Prettier가 담당을 했다. 둘의 장점을 합쳐 통합까지 완료를 하고보니 매번 개발자가 명령어를 실행하기엔 비효율적이다. 이 효과를 제대로 보려면 자동화가 필요하다. 자동화를 하는 방법은 두 가지로 나뉜다. 깃 훅(Git Hooks)을 사용하는 방법 VS Code extension을 사용하는 방법 Git Hooks 깃(git)은 어떤 이벤트가 생겼을 때 자동으로 특정 스크립트를 실행하도록 할 수 있다. 다시 말해 깃 훅은 명령어 실행 전후에 특정 스크립트를 실행하게 만들 수가 있다. 이걸 좀.. 2021. 12. 27.
반응형

티스토리툴바