얕지만 쓸데있는 신비한 잡지식들

이 포스트는 Homebrew 설치 및 터미널 환경설정이 완료된 이후 시점을 기준으로 하고있습니다. NVM 설치NVM(Node Version Manager)는 여러 버전의 Node.js를 손쉽게 설치하고 관리할 수 있는 도구로 프로젝트마다 필요한 Node.js 버전이 다를 수 있을때 유용하게 사용할 수 있습니다. 아래 명령어로 Homebrew로 NVM을 설치합니다.# homebrew로 nvm 설치brew install nvm # NVM 디렉토리 생성mkdir ~/.nvm 환경 변수를 설정해줍니다.(zhs 기준)echo 'export NVM_DIR=~/.nvm' >> ~/.zshrcecho 'source $(brew --prefix nvm)/nvm.sh' >> ~/.zshrcsource ~/.zshrc 잘..

이 포스트는 애플 실리콘을 이용하는 mac 환경에서 작성되었습니다.터미널 설정 및 Homebrew와 같은 패키지 관리자 설치가 완료된 이후 시점 기준입니다. 터미널 환경 및 Homebrew 설치는 아래 포스트를 참고해 주세요! Mac에서 개발환경 세팅하기(1) 터미널 환경 설정이 포스트는 애플 실리콘을 이용하는 mac 환경에서 작성되었습니다.기기 초기화 및 소프트웨어 업데이트, xcode, 업무용 또는 개인적으로 필요한 프로그램의 설치는 생략하였습니다. Homebrew Homebrewkim-berry.tistory.com Git 설치하기 Git git-scm.comGit은 버전 관리 시스템(Version Control System)의 하나로 소스코드의 변경사항을 추적하고 여러명의 개발자들이 협업할 수 있..

이 포스트는 애플 실리콘을 이용하는 mac 환경에서 작성되었습니다.기기 초기화 및 소프트웨어 업데이트, xcode, 업무용 또는 개인적으로 필요한 프로그램의 설치는 생략하였습니다. Homebrew HomebrewThe Missing Package Manager for macOS (or Linux).brew.shmacOS용 패키지 관리자입니다. 명령어를 통해 소프트웨어의 설치, 업데이트 삭제를 관리할 수 있도록 도와줍니다. 터미널에 아래 코드를 붙여넣어 설치해줍니다./bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 제대로 설치가 되었는지 확인하기 위해 brew --version 명령어를..

익스플로러가 살아숨쉬던때는 이미지 썸네일을만들거나 비디오 사이즈 조절을 할때 아래처럼 만들곤했다.프로젝트 성격상 이미지 비율이 일정치 않게 유동적으로 사용될 수 있을 경우 javascript로 이미지의 가로 세로 사이즈에 따라서 어느쪽에 여백을 남길건지 정하기도 하면서 ㅎ See the Pen thumbnail-img use padding by Kim-berry (@heungs) on CodePen. but 익스플로러가 사망한 이제는 번거롭게 만들 필요없이object-fit을 사용하면 아주 기깔나게 들어간다. See the Pen thumbnail-img use object-fit by Kim-berry (@heungs) on CodePen. ++++ 상세스펙 및 함께보면 더 좋은 object-po..

사이트 하나에 라이트모드, 다크모드 두가지 컬러셋을 구현한다고 했을때,컬러 변수를 설정해두고 요리조리 편하게 컬러를 바꿔보겠습니다. See the Pen Change Variable colors - SCSS by Kim-berry (@heungs) on CodePen. 위 코드는 아래 링크를 보고 만들었습니다. 스택오버플로우는 오늘도 사랑입니다.https://stackoverflow.com/questions/49809524/change-variable-colors-if-else-in-scss

체크박스나 라디오 박스, 화살표 모양 아이콘등등간단한 background-image의 경우 SCSS에서 간단한 방법으로 이미지만 바꿔줄 수 있다. 먼저 SVG파일을 개발자도구로 확인해보면 아래와 같이 코드형태로 볼 수 있는데 태그를 열고 닫는 ''부분을https://www.w3schools.com/tags/ref_urlencode.ASP 페이지 하단 ASCII Encoding Reference를 참고하여각각 '%3C', '%3E'로 바꿔서 아래처럼 함수 하나를 만들어줍니다.@function checkChecked($color) { $color: '%23'+$color; $icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width..

퍼블리싱을 하다보면 header, footer, gnb, lnb등등 반복되는 구조가 많다.한번 만들고나서 수정이 안된다면야 너무나 고마운 일이지만 현실은 그렇지 않기 때문에ㅜ반복되는 컴포넌트는 그냥 따로 파일을 만들고 include하는게 좋다. https://www.w3schools.com/howto/howto_html_include.asp위 내용을 참고하여 약간의 수정을 해봤다. index.htmlinclude.jsinclude - header.html 우선, include폴더 안에 import할 header.html 파일을 만든다. 메뉴명1 메뉴명2 ..

이래저래 정말 자주 만들어야 하는것중 하나인 Tab panel탭메뉴 리스트 안의 앵커 hash와 패널 div의 아이디 값을 일치시켜주면 잘 작동한다. See the Pen javascript TabPanel by Kim-berry (@heungs) on CodePen.

위와같이 PC와 모바일 css 파일을 폴더를 나누어서 관리를 하고 싶은데기존에 사용하던 'Live Sass Compiler' 확장프로그램으로는 불가능했다.(VS code 사용중입니다.) 찾아보니 'Live Sass Compiler'라는 이름의 확장 프로그램이 2개가 있었다.상대적으로 더 많은 사람들이 다운 받았고 나도 쓰고 있었던Ritwick Dey의 3.0 버전 확장프로그램! 이 버전은 expanded, compact, compressed, nested의네가지 컴파일 방식을 모두 지원하지만내가 원했던 다중 폴더별 컴파일은 지원하지 않았다ㅠ(못찾은걸지도..) 그래서 이 녀석을 지우고 아래 버전으로 다시 설치했다. Glenn Marks의 5.0.4버전.이 확장프로그램은 내가 원했던 폴더별 컴파일 기능을 지..

예전에 scss를 써볼까해서 gulp로 프로젝트 폴더를 빌드하고 scss 파일을 컴파일하는 테스트를 해본적은 있었지만실제 업무에서는 사용할 기회가 업었다.그러다 리액트환경에서 처음 scss를 업무에서 도입해봤는데...헐...아니 세상에...너무 편했다...그래서 찾아보니 VSCode에서 편하게 컴파일 해주는 Extension이 있었다. 우선 VSCode Extension에서 Live Sass Compiler를 설치해주자 설치를 하면 우측 하단에 Watch Sass라는게 생기는데 그걸 눌러서 실행하면scss 파일을 작성하고 저장할때마다 실시간으로 css 파일로 컴파일해준다. 컴파일할 파일의 확장자나 컴파일방법, 저장 경로등의 설정은 VSCode의 settings.json파일에서 설정가능하다. 옵션은 아래..