본문 바로가기

TOOL

 (74)
[VSCode] 드래그 한 스타일만 포맷 변환하는 확장 (style-compressor) 확장 사용 예시프로젝트를 협업하다보면 CSS 포멧 스타일이 다를때가 있다. 지금 하고 있는 프로젝트 CSS 스타일은 한 줄에 한클래스의 스타일을 나열하는 Compact 형식이다. CSS/SCSS 포맷 종류에 대해서는 전에 게시해둔 글을 참고해도 좋다.https://jintrue.tistory.com/entry/SCSS-CSS-Format-%EC%A2%85%EB%A5%98%EC%97%90-%EA%B4%80%ED%95%98%EC%97%AC [SCSS, CSS] Format 종류에 관하여CSS 전처리기인 SCSS를 통하여 작업을 한 후 해당 SCSS 파일을 CSS로 컴파일하게 된다.이때 컨파일하는 CSS 파일 포맷 종류를 정할 수 있다.Format의 종류에는 Expanded, Compact, Compresse..
[VSCode] Git Bash 사라짐 fnm를 설치하여 한 프로젝트를 로컬에 셋팅하던 와중에 VSC에 Bash창이 날라가버렸다...아마도 아래 명령어 때문인거 같은데eval "$(fnm env --use-on-cd --shell bash)" 환경변수 설정을 하려다가 더 꼬일꺼 같아서 VSC 의 settings.json 파일에 bash 경로를 정확하게 설정해 볼까한다. 우선 내 로컬에서 bash가 어디에 설치되어있는지 봐야하는데, 커멘드 라인에서 위치를 찾아보면which bash/usr/bin/bash로 나오므로 정확하게 알수 없다..보통 git을 설치하게 되면 C:\\Programs 폴더에 설치되므로 참고!나는 D 드라이브에 program이라는 폴더를 만들어서 설치했었다. {"terminal.integrated.profiles.windows..
[VSCode] 알록달록 주석 색상 설정 1. 기본 설정기본 VSCode 안에 내장되어 있는 설정이다.간단하게 settings.json에 설정값만 입력해주면 바로 적용이 된다.우선 Ctrl + Shift + P 를 눌러 ">setting" 검색 후 "Open User Settings (JSON)"를 검색한다.   아래와 같이 설정값을 채워준다.{//......// 주석 색상 설정 "editor.tokenColorCustomizations": { "comments": "#2596be" },//......}원하는 주석 헥스값을 넣어주면 된다.  2. 기호에 따른 색상 설정주석 맨 앞에 어떤 기호가 오는지에따라 색상이 달라지는 플러그인이 있다.Better Comments
[Github] Github Pages 이용하여 홈페이지 배포 ++ 단순하게 해당 레파지토리 깃허브 페이지에서 Github Page를 띄울 수 있다. 1. 해당 repository 페이지의 settings 탭으로 이동 > Branch 영역에 최초엔 None으로 셀렉 되어있는 것을 원하는 브랜치 명으로 바꾸고 측면 Save 버튼을 눌러 저장한다. 2. 그후 상단에 "GitHub Pages source saved."라는 문구가 뜨고, 3. 몇 분정도 기다리다가 새로고침을 하면 아래처럼 View site 버튼이 활성화 된다. 클릭해보면 Github Page가 퍼블리싱 된 것을 확인할 수 있다.
[VScode] react styled component 색상 구별 React.js 로 개발을 하다보면 스타일을 입힐때 styled component 사용시 에디터 안에서 색상 구별이 되지 않아 불편함이 있다.이 떄 VScode Plugin "vscode-styled-components" 하나로 해결된다. 색상 뿐만 아니라 자동완성 기능까지 함께 추가된다!
[VScode] Next.js에서 Tailwind 사용시 주황색 에러 밑줄 제거 하기 next.js 프레임워크나 react.js 라이브러리를 사용하여 작업할 때 tailwind와 함께 사용을 선택했다면 아래 tailwind를 연결시 주황색 구불구불 밑줄을 발견한다. 그럴땐 VScode 플러그인 중에 PostCSS Language Support 를 설치하면 바로 주황 밑줄이 안 보일것이다.  심각한 오류는 아니나 작업 내내 보일 주황밑줄이라면 코드를 작성하면서 계속 거슬릴 것 같아서 이런 요소들은 시간을 내서 제거해 주는것이 한결 마음 편하게 작업할 수 있다. 여담으로 Next.js 를 지금 살펴보고 있는데 React.js를 베이스를 한 프레임워크라 그런지 익숙하면서도 재밌다.리액트 하나만으로는 CSR이라 보안에 상당히 취약한 것을 포트폴리오 작업 내내 피부를 느꼈었는데 SSG, SSR, ..
[VSCode] minimap에서 현재 위치 알리는 주석 만들기 VSCode 플러그인 중 주석을 기깔나게 만들어주는 Convert To ASCII Art 를 소개한다. 예시로는 그럼 미니 맵에서 이렇게 보인다. https://marketplace.visualstudio.com/items?itemName=BitBelt.converttoasciiart Convert To ASCII Art - Visual Studio MarketplaceExtension for Visual Studio Code - Utility extension to convert text to ASCII art.marketplace.visualstudio.com 설정1. VSCode ctrl + alt + P > settings(json) 선택2. "convertToAsciiArt.favoriteF..
[Notion] 데이터베이스 조건 수식 구문 사용하기2 오늘 작업은 오늘 할일 이라고 표시하고 싶을 땐 아래 조건 수식을 이용해서 값이 0일때 표시를 하면 된다! dateBetween(prop("작업일"), dateSubtract(dateSubtract(now(), hour(now()), "hours"), minute(now()), "minutes"), "days")

티스토리툴바