[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.. [Node.js] node -v 인식 안됨 nodejs 를 초기에 윈도우에 설치할때 잡아주는 기본 경로는 아래와 같다.C:\Program Files\nodejs 하지만 임의로 변경해두고 나중에 fnm(fast nodejs manger)나 해당 프로젝트 노드버전을 설치할때 node -v 이 명령어 자체가 인식이 안될 수도 있다.그래서 윈도우 시작 버튼에서 "오른쪽 마우스 > 시스템 > 고급 시스템 설정 > 시스템 변수" 를 통해 수정을 하거나 node를 제거하고 다시 설치하거나 해야한다.둘 다 해봤는데 시간 아끼려면 제거 후 재 설치를 추천한다. 제어판 > 프로그램 제거 ) node를 찾아 제거한 후 재설치https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript r.. [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.. [Node.js] nvm 대신 fnm을 써보자 nvm는 node version manger로서 프로젝트마다 노드버전을 달리할 때 프로젝트 별 맞는 버전을 그때그때 변환하기 쉽게 관리하는데 도움을 준다.최근에(?) 알게된 노드 관리자로서 fnm을 알게되었는데 nvm 보다는 속도도 빠르고 가볍다고 한다. 사실 차이를 잘 모르겠지만 nvm이랑 거의 비슷한거 같다. 프로젝트 중에 node version이 16.18.32 인 플젝이 있어서 새로운 로컬에 설치할 상황이 생겨 테스트겸 fnm을 사용해 보았다.1. fnm download# fnm 다운로드 및 설치winget install Schniz.fnm 2. fnm 으로 원하는 버전 설치fnm i 16.18.32 위와 같이 입력하면 윈도우 64비트일 경우, 아래와 같은 에러가 나올 것이다. Installing.. [VSCode] 알록달록 주석 색상 설정 1. 기본 설정기본 VSCode 안에 내장되어 있는 설정이다.간단하게 settings.json에 설정값만 입력해주면 바로 적용이 된다.우선 Ctrl + Shift + P 를 눌러 ">setting" 검색 후 "Open User Settings (JSON)"를 검색한다. 아래와 같이 설정값을 채워준다.{//......// 주석 색상 설정 "editor.tokenColorCustomizations": { "comments": "#2596be" },//......}원하는 주석 헥스값을 넣어주면 된다. 2. 기호에 따른 색상 설정주석 맨 앞에 어떤 기호가 오는지에따라 색상이 달라지는 플러그인이 있다.Better Comments [SCSS, CSS] Format 종류에 관하여 CSS 전처리기인 SCSS를 통하여 작업을 한 후 해당 SCSS 파일을 CSS로 컴파일하게 된다.이때 컨파일하는 CSS 파일 포맷 종류를 정할 수 있다.Format의 종류에는 Expanded, Compact, Compressed(minify), Nested가 있다. 1. Expanded하나의 라인에는 하나의 속성이 존재한다. 가독성이 좋고 유지보수하기 쉽다. 하지만 코드줄이 많아저 로딩 속도가 느려질 수 있다..styled-example { width: 100vw; heght: 100%;} 2. Compact하나의 라인에 모든 속성이 존재한다. 여러 속성이 하나 라인에 존재하기 때문에 유지보수하기 어렵고 가독성이 부족하다..styled-example { width: 100vw; heght: 100%.. [Github] Github Pages 이용하여 홈페이지 배포 ++ 단순하게 해당 레파지토리 깃허브 페이지에서 Github Page를 띄울 수 있다. 1. 해당 repository 페이지의 settings 탭으로 이동 > Branch 영역에 최초엔 None으로 셀렉 되어있는 것을 원하는 브랜치 명으로 바꾸고 측면 Save 버튼을 눌러 저장한다. 2. 그후 상단에 "GitHub Pages source saved."라는 문구가 뜨고, 3. 몇 분정도 기다리다가 새로고침을 하면 아래처럼 View site 버튼이 활성화 된다. 클릭해보면 Github Page가 퍼블리싱 된 것을 확인할 수 있다. [React.js] style-component와 framer-motion 컴포넌트화 하기 페이지별 공통으로 사용하는 스크립트나 scss는 import를 시키면 코드를 효율적으로 줄일 수 있다. 이처럼 style-comonponent와 framer-motion 또한 공통 파일로 꾸려서 import 하면 효과적으로 코드를 작성할 수 있다. 예를 들어 270줄이였던 한 페이지를 94줄로 줄였었다. 방법은 간단하다.1. src 폴더 안에 js/styled.js 라는 임의의 js 파일을 생성2. 공통으로 사용하는 스타일 컴포넌트와 프레이머 모션을 다 가져와서 styled.js에 저장한다. 그후 사용하려는 페이지에 import 시킨다. 주의할 점은 styled.js 파일 안에 const 변수를 꼭 export 시켜야 외부에서도 사용이 가능하다. [src/js/styled.js]import styled.. 이전 1 2 3 4 ··· 32 다음
