본문 바로가기

전체 글

 (98)
[React] 로컬 폰트 적용하기(.ttf/.otf) 기존 폰트가 아닌 다른 폰트를 적용하게 되어 기록. 1. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 등을 통해 폰트를 다운받는다. 2. 원하는 경로에 font관련 폴더를 만들어 해당 폰트를 넣는다. 3. .css 파일에서 폰트를 불러온다. 나는 default.css 파일을 따로 만들어 폰트를 관리하도록 했다. @font-face {}를 통해 해당 폰트를 불러올 이름을 font-family로 지정하고, src: url();를 통해 폰트를 저장한 경로를 불러온다. 4. font 사용법 위처럼 해당 폰트를 사용할 부분에 3번의 font-family로 설정한 이름을 불러온다...
[React] VS Code 사용 시 React에서 Emmet 사용하기 Emmet에 익숙해진 상태에서 React를 사용하면 참 별거 아닌데도 불편함이 느껴진다. 다시 Emmet을 활성화 시키는 방법을 찾아 나중을 위해 기록. 1. Mac의 경우 Command + , Window의 경우 Ctrl + , 를 통해 Settings를 엽니다. 2. Settings에서 workspace setting 검색 3. Edit in settings.json 클릭 4. 열린 json파일에 아래의 내용 추가 "emmet.includeLanguages": { "javascript": "javascriptreact" } 5. 이제 React에서도 jsx 작성 시 Emmet을 사용할 수 있게 되었습니다:)
[npm] npm 버전 최신/특정 버전으로 설치하기 팀 프로젝트 작업 시 프로젝트 오류 방지를 위해 npm 버전을 맞추게 되었습니다. 1. npm 버전 확인 $ npm -v 2. npm 최신 버전 설치 $ sudo npm intall -g npm sudo를 통해 npm으로 npm을 설치하는 깡패같은 방법 ㅎㅎ.. 3. npm 특정 버전 설치 (ex | 1.1.1 버전의 npm을 설치하려면) $ sudo npm install -g npm@1.1.1
[node.js] Node.js 란 무엇인가? 1. Node.js란 무엇인가? Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위는 Node.js의 홈페이지로 메인 화면에 자신들을 하단의 내용으로 소개하고 있다. Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. runtime(런타임)이란 : 특정 프로그래밍 언어가 구동될 수 있는 환경 및 동작 즉, Node.js는 자바스크립트가 구동되는 환경 및 동작을 말한다. Javascript는 이름에서 알 수 있듯 스크립트 언어인데 이는 독립 언어가 아니라는 뜻으로 특정 프로그램 안에서만 동작이 가능하며 Javascript의 경우엔 웹 브라..
[Mac] Homebrew를 통해 node.js, npm, yarn 설치하기 1. Homebrew 설치하기Mac 운영체제에서 개발 환경 설정시 사용하는 패키지 관리 프로그램. HomebrewThe Missing Package Manager for macOS (or Linux).brew.sh위의 사이트를 통해 들어가면 아래의 명령어가 있습니다.terminal 또는 iterms 등을 열어 실행합니다.$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"  2. node.js, npm 설치하기Homebrew가 설치 되었다면 하단의 명령어를 차례로 실행해 node.js와 npm을 설치해야 합니다.Homebrew를 통해 설치시 최신 버전이 필요할 수 있으니 업데이트 부터..
[Mac] 맥 용 SVN 연결하기 : SnailSVN Lite 회사 업무로 인해 Mac에서 SVN을 사용하게 되었으므로 SnailSVN Lite를 활용하게 되었다. Mac의 SnailSVN은 window의 tortoiseSVN과 비슷하다고 하지만, 사용해 본 적이 없어서 모름. 우선 App Store에서 SnailSVN Lite를 찾아 설치한다. Lite가 아닌 유료버전(19,000원)도 있으나 하나의 포트만 사용하는 경우 무료버전이 있으니 잘 활용하면 된다. 설치하기 1. App Store > snailsvn 검색 > SnailSVN Lite: SVN for Finder 설치 2. SVN 버전 선택 > Next 설치된 SVN 버전에 맞추면 되나 나중에 환경설정으로 수정도 가능하다. 2-1. Next 선택 2-2. Continue 선택 3. 설치 완료 후 자동 실행..
[Sass/SCSS] 6. Sass/SCSS Mixins 사용법 Mixins는 style sheet 전반에서 재사용을 할 CSS 그룹을 정의하는 기능입니다. (1) @Mixin //SCSS @mixin 이름 { 스타일 정의 } //Sass =이름 스타일 정의 //SCSS @mixin l-red-text { font-size: 30px; font-weight: bold; color: red; } //Sass =l-red-text font-size: 30px font-weight: bold color: red ① 선택자 포함 가능 ② 상위(부모) 요소 참조 가능 ex)& @mixin l-red-text { font: { size: 30px; weight: bold; } color: red; &::after { content: "content"; } span.icon { ..
[Sass/SCSS] 5. Sass/SCSS의 연산 (1) 연산(Operations) Sass는 기본적인 연산 기능을 지원하므로 default value를 기준으로 계산할 시 유용하게 사용할 수 있습니다. 산술 연산자 연산자 설명 참고 + 더하기 - 빼기 * 곱하기 하나 이상의 값이 반드시 Number / 나누기 오른쪽 값은 반드시 Number % 나머지 비교 연산자 연산자 설명 == 동등 != 부등 보다 크다 = 보다 크거나 같다 논리 연산자 연산자 설명 and 그리고 or 또는 not 부정 (2) 숫자 (Number) ① 상대적 단위 연산 보통은 px 단위를 사용하여 연산하지만, 상대적 단위의 연산일 경우 CSS의 calc()를 사용하여 연산합니다. width: 100% - 20px; //error 단위 모순 width: calc(100% - 20px..

티스토리툴바