코딩하는 라이언

chrome 브라우저에서 자주 사용하는 탭 관련 단축키에 대해 정리한 포스팅입니다. 더 많은 단축키를 확인하려면 아래 링크를 확인하세요! chrome 기기별 단축키 window일 경우 아래 cmd를 ctrl버튼으로 대체하면 됩니당탭 닫고 열기현재 탭 닫기 : cmd + w최근 닫은 탭 열기 : cmd + shift + t새 탭 열기 : cmd + t특정 탭으로 이동하기cmd + (1~8) : 탭 열린 순서로 번호로 이동 가능표로 브라우저 탭 단축키 확인

텍스트 중간 정렬하는 방법 2가지이미지와 같이 간혹 font 이슈로 text태그는 flex를 align-item : center; justify-content: center;를 하여도 간혼 중간 정렬이 안됩니다. 이때, 텍스트를 중간 정렬을 하는 방법은 2가지가 있습니다. 첫번째는 padding에 위아래 높이를 주어 중간 정렬을 하기, 두 번째는 div와 같은 요소안의 텍스트의 높이(line-height)와 감싸진 요소의 높이(height)를 맞춰주는 것입니다. 필자는 padding을 활용하여 중간 정렬 하는 것을 선호하는 편입니다. 아래 이미지로 가운데 정렬을 주려합니다. padding 값 위아래 주기위 코드는 a태그로 만들어진 버튼입니다.padding값을 아래 코드처럼 주면 중간 정렬이 되는 것을 확..

box-sizing 기본값 알기기본으로는  태그들은 box-sizing: content-box로 기본 속성을 가진다.width : 100px일때 padding을 16px로 하면 전체 width가 132px이 된다. 즉, content-box일때 padding이랑 margin값을 추가하면 기존 컨텐츠 박스의 값 + (마진값 or 패딩값)이 된다.이때, 컨텐츠박스안에 패딩값을 포함되게하고 싶다면 box-sizing 속성을 border-box로 변경해주면 width가 100px인 박스안에 패딩값이 들어가게 된다.  예시 코드아래 이미지처럼 padding값만 추가했을 경우에는 box-sizing 속성이 content-box로 돼있기 때문에 padding값 + width값으로 표시된다. 만약 width값은 100..

리액트 코드 스니펫 깃허브단축어로 리액트 코드 작성하기React 프로젝트를 진행하다 보면 반복적으로 작성해야 하는 코드가 많아져 번거로울 때가 있습니다. 특히, 컴포넌트를 생성하거나 useState, useEffect와 같은 훅을 사용할 때마다 동일한 반복해서 작성하는 시간이 지루하게도 느껴집니다. 이런 반복되는 코드 작업을 줄여주는 익스텐션이 ES7+ React/Redux/React-Native Snippets 입니다.해당 익스텐션은 VS Code 코드에서 React, Redux, React-Native 관련 코드 스니펫을 제공하여 생산성을 크게 높여줍니다. 단축어 자동완성 기능을 통해 리액트 코드를 빠르게 작성할 수 있습니다.ES7+ React/Redux/React-Native Snippetsrfce..

프리티어 공식 홈페이지Prettier란?프리티어는 내가 원하는 코드 컨벤션을 자동으로 맞춰주는 코드 포맷터입니다.Visual Studio Code에 전역으로 Prettier 설정하기1. VScode extention에서 prettier 설치VScode 화면 좌측 블럭 아이콘을 눌러 extensions 마켓에 prettier를 검색합니다. 다운로드 횟수가 제일 많은 prettier 클릭 후 우리가 설치하려는 프리티어 익스텐션이 맞는지 확인 후 install을 클릭해 설치를 해주세요.2. VScode 포맷터 기본값 prettier로 설정해주기 설치가 완료되었으면 우리의 VSCode에 기본 포맷터를 프리티어로 설정해주어야 합니다. cmd+, 로 VS code 설정창 들어가 주세요.아래 이미지처럼 설정화면 상단..

homebrew에서 개발관련 패키지만 설치할 수 있는 것이아니라 웹 애플리케이션을 설치할 수 있다는 것을 알게되었습니다. 설마 앱스토어에 애플리케이션도 다운받아질까하여 homebrew로 카카오톡을 설치하며 정리한 포스팅입니다.homebrew로 설치할 수 있는 프로그램 종류homebrew로 설치할 수 있는 것은 크게 정리하면 아래와 같습니다.homebrew 로 개발관련 패키지 설치 ( node, nvm, git 등등 )homebrew cask로 웹 애플리케이션 설치 ( 크롬 브라우저, 도커, 슬랙, 디스코드 등등) - Homebrew 최신 버전에 내장됨.homebrew mas로 Mac 앱스토어 애플리케이션 설치만약 homebrew가 설치되어있지 않다면 아래 버튼을 눌러 homebrew 설치 방법을 확인하세..

웹 화면에서 버튼은 사용자와의 상호작용을 위한 중요한 요소입니다. 버튼은 클릭하여 페이지 이동을 하거나 키보드 이벤트를 통해 특정 작업을 하는 등 화면 속 버튼은 개발자의 스타일과 목적에 따라 다양한 방식으로 구현될 수 있습니다. 버튼을 나타내는 방법을 크게 3가지로 나누어지는데, 상황에 부적합한 태그를 사용할 경우 아래와 같은 문제가 생길 수 있어 각 태그의 특징을 알고 사용하는 것이 좋습니다.버튼에 잘 못된 태그 사용할 경우 문제점접근성 문제사용자 경험 저하SEO 성능 악화이번 포스팅에서는 화면에서 버튼을 구현하는 데 사용되는 주요 태그들과 각 태그의 특징, 버튼으로 사용될 때 속성 설정 방법을 정리해보았습니다.화면 버튼으로 쓰이는 태그 별 특징 알아보기1. a 태그a 태그는 원래 하이퍼링크를 생성하..

✏️ 익힐 때마다 하나씩 추가하는 포스팅입니다. 글자 색상 입히기 Command + Shift + H= 가장 최근 사용한 글자색으로 입혀짐토글> + Space  노션용 마크다운 문법 정리마크다운 공식문서 바로가기

그냥 여러 파일 옮길 때는 드래그앤 드롭으로 옮겼는데 요즘 터미널에서만 작업을 하다보니 mv 명령어로 여러 파일 옮기는 방법에 대해 찾아보았다. 우분투 한국 커뮤니티의 질문 답변에서 알 수 있었다.✔️ 터미널에서 파일 옮기는 법파일이나 폴더 옮기는 법은 mv 명령어로 옮길 수 있다mv  옮기면서 파일명을 변경할 경우에는 옮겨질 경로 다음에 변경할 파일 이름을 입력하면 된다.mv  예를 들어 Desktop에 있는 test.txt을 Desktop의 projects 폴더에 옮겨 happy.txt로 바꾸려면 아래와 같이 입력하면 된다.mv ~/Desktop/test.txt ~/Desktop/projects/happy.txt`✔️ mv 명령어로 여러 파일 옯기는 법모두 경로가 다르다면 아래와 같은 방법으로 옮..

정리 정돈 안하는 나를 위해 프로젝트 파일이라도 안보이는 곳에 두자는 생각이 들었다. 바탕화면에 무수히 쌓이는 프로젝트 폴더들을 보니까 안그래도 산만한데 더 산만해지는 느낌이 들었다. 정리가 안되면 아예 안보이게 하면되지?! 바탕화면이 프로젝트 폴더를 만들어 숨김 처리하고 그 안에 프로젝트 폴더들을 다 넣어버여야겠다.✔️ 터미널로 파일 및 폴더 숨김 처리하기command + space로 터미널을 검색하여 열고 아래 명령어를 입력해 파일 또는 폴더를 숨김 처리할 수 있다.chflags hidden  Desktop에 있는 projects 폴더를 숨김 처리하려면chflags hidden ~/Desktop/projects만약 경로 확인이 어렵다면 해당 파일을 터미널에 드래그해서 놓아주면 폴더 또는 파일 위치를 ..