크롱의 Dev Log

코드 포매터(Code Formatter), Prettier가 무엇인가요? 코드 포매터란 정한 코딩 컨벤션(코드 작성 스타일 규칙)에 따라 코드 스타일을 알아서 정리해주는 도구입니다. Prettier는 VSCode Extension으로, 코드 포매터입니다. 코딩 컨벤션을 정하고 코드 포매터를 활용하면 아래 밈처럼 두 개발자 사이의 시빌워가 생기지 않습니다. 정한 코딩 컨벤션에 맞춰 알아서 포맷팅해주기 때문에 코딩 컨벤션을 지키지 않아 다른 개발자를 화나게 하는 일 혹은 추후에 수정해야하는 노고를 줄여줍니다. 또한 개발할 때도 코딩 컨벤션을 일일이 찾아보면서 스타일을 맞추는 수고없이 코드를 짜기만 하면 됩니다. Prettier 설치 및 설정 방법 (+저장 시 자동 정렬 설정) 좌측 메뉴바의 Extension..

일단 관리 탭> 플러그인에서 코드 문법 강조 플러그인을 사용했다. (지금도 사용 중이긴 함) 하지만 폰트도 그렇고 마음에 안들어서 자체 css를 적용하기로 했다. 블로그 관리 > 스킨 편집 > html 편집 > css탭을 들어간다. 위에 원하는 폰트를 import 해준다. 이후 code태그의 스타일링 부분을 찾아간다. font-family를 원하는 폰트로 바꿔준다. 폰트 변경 이외에도 배경색, 마진, 패딩, 모서리 둥글게 등을 추가 설정해줬다. +) 원하는 웹폰트 찾는 법 구글 폰트에서 검색 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 개발자 도구로 스타일링이 잘 적용된..

git 폴더명 변경하기 $ git mv oldName newName위 명령어를 통해 바꿀 수 있다. 기존 폴더명 파일명을 앞에 입력하고 뒤에 새롭게 바꾸고 싶은 이름을 입력하면 된다. 로컬에서 변경한 파일명이 깃허브에서 적용 안되는 이유 로컬에서 변경한 파일명이 git에는 반영되지 않아 당황스러웠던 적이 있었다. 알아보니 git은 대소문자를 구분하지 않기 때문에 대소문자만 변경하였을 경우에는 에러가 발생할 수 있다고 한다. ex) foo라는 이름의 폴더를 Foo로 변경하는 경우 이 때는 조금 번거롭지만 두단계를 거쳐서 이름을 변경해주면 된다. $ git mv foo temp $ git mv temp Foo

블로그 포스트나 깃허브 리드미 파일에 디렉토리 구조를 아래와 같이 보여주고 설명하는 걸 본 적이 있을 것이다. 반대로 본인이 블로그나 리드미 파일 등에서 디렉토리 구조를 보여주고 설명해야하는 경우도 있을 것이다. 이때 일일이 특수 기호 찾아가며 아래와 같이 적는 게 아니라 tree라는 명령어를 쓰면 폴더 하위 구조를 쉽게 그릴 수 있다. 다음은 tree명령어에 /F옵션을 줘서 확인한 next.js 프로젝트의 pages폴더 이하의 구조이다. C:\USERS\{username}\{projectName}\PAGES │ index.tsx │ portfolio.tsx │ project.tsx │ _app.tsx │ _document.tsx │ ├─api └─profile [userID].tsx 명령어 기본 사용법..