요소의 특정한 부분에 CSS 속성을 적용할 수 있도록 선택자에 추가하는 키워드입니다.요소에 CSS 속성을 적용하는 것과 같은 방법으로 다양한 CSS 속성을 적용할 수 있기 때문에 하나의 하위 요소처럼 사용할 수 있어서 가상 요소라고 합니다.::before: 요소 내용

오늘은 Promise에 대해서 이야기를 나눠보려고 합니다.요즘 들어서 기본 개념이 매우매우 부족하다는 생각을 하고 있습니다.. 🤦‍♂️사실 Promise에 대해서 공부하려고 하는 것도.. axios 라이브러리에 대해서 찾아보다가.. 이해가 잘 되지 않아서.. 찾아보게

오늘은 React Hook Form 라이브러리를 이용해서 MUI와 같은 UI 라이브러리 컴포넌트를 제어하는 방법을 같이 나눠보려고 합니다.우선 React Hook Form 라이브러리에 대한 개념 없이 MUI 컴포넌트를 제어하는 방법을 찾기까지 너무 힘들었습니다.. 💩

사용자에게 적합한 레이아웃을 제공하기 위해서 media query를 사용합니다.미디어 쿼리는 단말기의 유형이나 해상도에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.장치의 일반적인 범주를 나타냅니다.not이나 only 논리 연산자를 사용할 때를 제외하면 선택사

Next.js에 전체적으로 Emotion을 적용하는 방법을 알아보려고 합니다.회사에서 주로 모바일 웹앱으로 작업을 하다가 새로운 프로젝트를 작업하게 됐는데요.반응형 웹으로 작업을하고 초기세팅까지 하려고 하니 익숙하지 않은 부분이 많았습니다 😢emotion에서 제공하는

CRA로 구축할 때 타입스크립트를 기본으로 사용하는 프로젝트에서 eslint와 prettier를 설정하는 방법을 남겨보려고 합니다!기본적으로 타입스크립트로 언어를 설정하고 CRA를 통해서 프로젝트를 생성했다면 typescript-eslint를 사용하면 됩니다.전체적인

Next.js의 pageExtensions 기능을 통해서 index.page.tsx와 같은 형식으로 페이지를 표현할 수 있습니다!pageExtensions는 next.config.json 옵션 중 하나로 특정 형식의 이름을 페이지로 인식하는 기능입니다.이렇게 사용하는

이전에 나만의 eslint-config 만들기 (이론편)을 포스팅했는데요!사실 이론편이라기 보다는 ESLint의 공식문서의 일부를 번역한 내용입니다!실제로 eslint-config를 만들기 위해서는 더 다양한 부분을 이해할 수 있어야할 것 같습니다.다른 eslint-c

해당 포스팅은 eslint 공식 홈페이지를 번역한 내용입니다.ESLint Configuration을 공유하기 위해서는, 공유 가능한 config를 만들어야 합니다.공유 가능한 config를 NPM에 배포할 수 있으며, 다른 사용자들이 배포된 config를 다운로드하고

이전에 @typescript-eslint와 prettier를 설정한 적이 있습니다.prettier는 코드 포맷팅을 하기 위한 라이브러리이기 때문에 크게 설정할 내용이 없었는데요.eslint의 경우에는 문제가 있었습니다.저는 기존에 CRA을 이용해서 프로젝트를 생성했었습

읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약린터를 사용한다는 가정하에 린터로 검출할 수 없는 모호한 부분을 가이드이번에 회사에서 마크업 코딩 컨벤션 관련해서 정리하게 될 기회가 생겼습니다.여러 포스팅들을 찾아보고 저희한테 맞는 코딩 컨벤션을 작성

릴리즈 노트란 무엇일까? 🤔일상 속에서 릴리즈 노트와 가장 비슷한 노트를 찾을 수 있는 가장 쉬운 방법은 무엇일까요?제가 생각한 방법은 바로 게임 업데이트(패치) 노트를 확인하는 것입니다.어떠한 새로운 이벤트들이 추가 됐는지, 캐릭터의 밸런스 패치, 버그 수정 등 쉽

자바스크립트 및 타입스크립트에 대한 코딩 컨벤션을 주도적으로 다루게 될 기회가 생겨서 자료를 정리해보았습니다.다른 자료들을 찾아보시면 훨씬 더 많은 컨벤션 내용을 확인하실 수 있습니다.저는 TypeScript 컨벤션으로 분류될 수 있을만한 내용만 간단하게 추려보았습니다

기존에 CSS-in-JS로 emotion을 사용하고 있었는데요.styled-components와 달리 emotion에서는 stylelint를 설정하는 방법이 따로 없었습니다.공식문서를 봐도 stylelint와 관련된 내용을 찾아보기 어려웠습니다. 🤦‍♂️몇 일동안 정

업무, 개인 프로젝트 등 우리는 커밋 메시지를 매일 작성합니다.개인적으로 그만큼 제대로 신경쓰지 않고, 커밋 메시지를 작성했던 것 같습니다.오늘은 이렇게 신경쓰지 않은 커밋 메시지 작성법에 대해서 나눠보려고 합니다.사실 회사에서는 이렇게 커밋 메시지를 작성하세요! 라고

오늘은 git 명령어에 대해서 톺아보는 시간을 가져보려고 합니다.최근에 톺아보기 라는 단어가 제 눈에 많이 보였는데요톺아보기는 구석구석 꼼꼼히 살펴보기 라는 뜻이 됩니다!본 뜻을 찾아보면, '톺다'라는 뜻은 틈이 있는 곳마다 모조리 더듬어 뒤지면서 찾다 라는 뜻입니다.

enum을 사용하던 와중 우연히 enum을 사용하면 안된다라는 포스팅을 본 적이 있습니다.하지만 왜 enum을 사용하면 안되는지에 대해서는 자세하게 알지 못했습니다.오늘은 꼭 enum을 사용하면 안되는 것인가..? 에 대해서 자세하게 알아보려고 합니다.제가 속한 조직에

오늘은 eslint에 대해서.. 정말 마지막으로 ESLint에 대해서 뿌셔보려고 합니다..!그래도 이전에 @typescript-eslint나 styleslint 등을 사용하면서 eslint를 그래도 잘 사용하고 있다고 생각하고 있었는데요!매번 사용을 할 때마다 계속 헷

오늘은 $와 \_의 의미를 자세하게 알아보려고 합니다.이전에 제이쿼리를 사용하면서 $는 자주 볼 수 있었는데요.\_는 조금 생소하기도 하고, 정확한 의미를 정리해두는 게 좋을 것 같아서 내용을 찾아 보았습니다.요즘 많은 부분에서 공부가 필요하다고 느낍니다.. 😂$와

이전에 타입스크립트 코딩 컨벤션 관련 내용을 작성하면서 궁금한 점이 생겼습니다.any 혹은 unknown 두 타입은 잘 사용하지 않지만, 어떤 타입을 사용하는게 맞는지에 대한 내용을 다루는 컨벤션이 많았습니다.그 중에서 우아한형제들 기술블로그에서 해당 내용에 대해서 굉