emayom.log

오늘은 macOS 환경에서 NVM(Node Version Manager)를 설치해 볼까 합니다! NVM은 말 그대로 노드 버전 매니저. 노드 버전을 관리해 주는 프로그램입니다 ;) 🤔 우리가 NVM을 사용하는 이유는 아주 명확하죵...! # 빠른 설치가 가능해요. # 커맨드라인을 통해 간편하게 버전을 스위칭하거나 관리할 수 있어요. 하나 이상의 프로젝트를 진행하다 보면 여기서는 A 버전 다른 곳에서는 B 버전 또 어느 곳에서는 C 버전의 노드가 필요한 경우가 생기기 마련일 텐데 NVM을 사용하면 주로 사용하는 디폴트 버전을 설정하거나 현재 설치된 버전 전체 리스트를 확인하기도 편리하고, 필요가 없어질 경우 커맨드라인으로 간단하게 삭제할 수 있습니다. 오늘은 간단하게 curl 명령어로 nvm을 설치 해 봅..

☝🏻 매번 콘솔을 찍을 때 마다 console.log()를 치는게 너무 싫어서 몇달 전에 shortcut 등록을 해뒀는데 오늘 생각난 김에,,, 까먹기 전에,,, 적으려한다,,, +) 우연히 유데미 강의를 보다가 알게된 사실 ,, log + Enter 에 바로 자동완성이 된다는 사실 ,, 하지만 키보드 숏컷 등록을 제대로 알았으니 괜찮다 ,, ⭐️ 우선 거두절미하고!!! 단축키는 Preference > Keyboard Shortcuts에서 설정할 수 있다. (cmd 누르고 + k, + s) 하지만 개인적으로는 기등록된 숏컷이 주르륵 뜨니까 어디서 어떻게 추가해야할지 처음에 너무 당황스러웠다ㅣ...... 그래서 이미 등록된 숏컷의 키바인딩을 수정할게 아니라면,,! 직접 JSON 파일을 수정하는 것을 추천한..

간단한 미니 게임을 만들었다! random-word-api를 활용해서 랜덤 단어들을 가져오고 10초 안에 타이핑한 만큼 점수를 얻을 수 있는 게임이당ㅎㅎㅎㅎ 인간적으로 10초는 너무 짧은 것 같긴 하다 ㅎㅎㅎㅎㅎㅎ해보니 2점 맞았다. axios를 npm으로 인스톨하지않고 처음 CND으로 넣어서 써봤는데 다른 영상들을 보면 fetch 대신 axios를 사용하시는 분들이 많았다... 아직 그 이유는 자세히 잘 모르겠어서 한 번 포스팅해봐야겠다 ㅎㅎㅎㅎ typing-master 남은시간: 10초 획득 점수: 0점 emayom.github.io

오늘은 조금 긴 글이 될 것 같다,,,! 웹 개발을 위한 웹 접근성에 대해 제대로 알아보자. 🤔 접근성 ? 접근성이라는 말 되게 자주 듣고 산다. 사전적으로 정의하기를 사용자가 어떤 제품이나 서비스 등에 편리하게 접근, 이용할 수 있는 정도를 의미한다. 웹 접근성 ? 그렇다면 웹 접근성이란 정확히 뭘까? '어떠한 사용자가 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것'으로 즉, 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것을 의미한다. 더보기 예를 들어 시각 장애를 가지신 분들은 청각, 촉각과 같은 다른 감각을 통해서 정보를 파악하게 되는데 이때 '스크린 리더 '라는 보조기기를 사용하여 웹에 보이는 이미지, 글씨를 음성으로 듣고..

가끔 색 조합이 너무 고민될 때 어울리는 색 조합을 추천해주는 사이트에서 트랜디한 컬러들을 간편하게 pick!!!! 해보자. 👇🏻 https://color.adobe.com/ko/trends color.adobe.com Gradient Background Colors - Eggradients.com Ready to use gradient background colors. ✓ Cool Gradients are prepared according to the latest design trends. And it is served in the form of eggs. ✓ With hex and CSS codes. www.eggradients.com

우연히 버튼 인터랙션 디자인을 보다가 클릭했을 때 지정한 시간동안 색이 변하게 설정해보고싶었다! 1. 결과 : 다른 버튼이 클릭되었을 때 중복되어 색이 변하는 이벤트가 발생하는 문제가 생겼다 ㅠㅠ 처음에는 자바스크립트로 버튼 클릭 이벤트가 있을 때 이벤트 타겟에 classList.add()로 클래스를 추가하고, 미리 CSS에 해당 클래스의 스타일 요소를 시트의 마지막에 설정해둔 뒤 추가되었을 때 나타나게 해주었다. 그리고 setTimeout을 지정해 시간이 지나면 클래스가 삭제되도록 실행해봤다. 2. 결과 : ㅠㅠ 시간차가 있어도 같은 버튼을 클릭하면 다른 버튼을 클릭하기 전까지 색이 변하지 않는다,, 클릭한 하나의 버튼만 배경색을 변경하고 싶었기 때문에 ..! 시간이 지나면 서서히 원래의 배경색으로 돌..

git 브랜치 변경 git checkout [branch]

보기 좋은 떡이 먹기도,, 좋,,, 다 😜 크롬 브라우저에서 JSON Viewer를 활용하면, 응답받은 JSON 데이터를 정렬해 한눈에 보기 좋게 만들어준다! 아래의 크롬 앱스토어에서 확장 프로그램을 추가하면 사용할 수 있다 👍🏻🎉 (스타일 에디터를 통해 형식을 커스텀도 할 수 있다!) JSON Viewer Validates and makes JSON documents easy to read. Open source. chrome.google.com

구구절절 더보기 노마드코더 바닐라 JS로 크롬 앱 만들기 강의를 진행하다가 ,,, 등록한 todo-list에서 삭제 버튼을 누르면 해당 리스트(li)가 삭제가 되도록 버튼에 addEventListener("click", deleteTodo)를 등록했다. 그런데 엔터키를 누르자 todo-list가 등록되지 않고 다른 addEventLisenter의 click 이벤트로 인식해 자꾸 첫 번째 todo-list에서 deleteTodo()를 실행했다 ㅠㅠㅠ 혹시나 해서 event.type === "click"일 경우에만 삭제하도록 추가해봤는데 그대로였다 ㅠㅠ 다음은 todo-list 등록 이벤트를 "submit"이 아닌 "keydown"으로 수정하고, event.keyCode === 13 일 때만 실행하도록 했더..

클릭없이특정 폴더로 바로 이동하고 싶을 때 유용하게 많이 쓰는 Finder 단축키! 👇🏻👇🏼 command-D : 선택 파일 복제 shift-command-D : 데스크탑 폴더 열기 shift-command-F : 최근 사용 윈도우 열기 / 최근에 보았거나 변경한 모든 파일 표시 shift-command-G : 폴더로 이동 shift-command-H : 현재 macOS 사용자 계정 홈 폴더 열기 option-command-L : 다운로드 폴더 열기 shift-command-N : 새 폴더 생성 shift-command-O : 문서 폴더 이동 (Documents) command-왼쪽 대괄호([): 이전 폴더로 이동 command-오른쪽 대괄호(]): 다음 폴더로 이동 Mac 키보드 단축키 특정 키 조합을..