ETC
유닉스 커맨드 라인과 그 밖에 유용한 TIP들을 공유합니다.
-
VScode Prettier 안녕하세요 TriplexLab 입니다 :) 오늘은 코드 품질를 좀더 효율적으로 관리하기 위해서 prettier라는 확장 프로그램을 사용해 봅시다. VS code 에디터에서 prettier를 설치해 주세요. 그리고 단축키 command + ,를 눌러서 설정 파일에 들어가주세요. settings.json 파일로 들어가시면 됩니다. 저는 하단에 있는 옵션들을 추가 했습니다. 옵션들을 공식문서에서 검색해서 무슨 의미인지 보시고, 자신의 프로젝트에 추가 하는것을 추천 합니다. 참고로 editor.defaultFormatter 같은 경우에는 VScode(에디터) 기본적으로 Formatter기능을 가지고 있습니다. 뿐만 아니라, Beautify등 Formatter기능을 하는 다른 확장프로..
VScode PrettierVScode Prettier 안녕하세요 TriplexLab 입니다 :) 오늘은 코드 품질를 좀더 효율적으로 관리하기 위해서 prettier라는 확장 프로그램을 사용해 봅시다. VS code 에디터에서 prettier를 설치해 주세요. 그리고 단축키 command + ,를 눌러서 설정 파일에 들어가주세요. settings.json 파일로 들어가시면 됩니다. 저는 하단에 있는 옵션들을 추가 했습니다. 옵션들을 공식문서에서 검색해서 무슨 의미인지 보시고, 자신의 프로젝트에 추가 하는것을 추천 합니다. 참고로 editor.defaultFormatter 같은 경우에는 VScode(에디터) 기본적으로 Formatter기능을 가지고 있습니다. 뿐만 아니라, Beautify등 Formatter기능을 하는 다른 확장프로..
2021.02.14 -
익스플로러 IE만 CSS적용하기 안녕하세요 TriplexLab입니다 :) 오늘은 익스플로러 IE만 CSS 적용하기에 관해서 살펴보도록 하겠습니다. 📌 첫번째 방법 /* IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Enter your style code */ } /* IE6,7,9,10 */ @media screen and (min-width: 640px), screen\9 { /* Enter your style code */ } /* IE6,7 */ @media screen\9 { /* Enter your style code */ } /* IE8 */ @media \0screen { /* Ent..
익스플로러 IE만 CSS적용하기익스플로러 IE만 CSS적용하기 안녕하세요 TriplexLab입니다 :) 오늘은 익스플로러 IE만 CSS 적용하기에 관해서 살펴보도록 하겠습니다. 📌 첫번째 방법 /* IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Enter your style code */ } /* IE6,7,9,10 */ @media screen and (min-width: 640px), screen\9 { /* Enter your style code */ } /* IE6,7 */ @media screen\9 { /* Enter your style code */ } /* IE8 */ @media \0screen { /* Ent..
2021.01.26 -
Github Sourcetree 안녕하세요 TriplexLab입니다. 오늘은 Github + Sourcetree에 관해서 살펴보도록 하겠습니다. 📌 Sourcetree에 Github 계정 추가하기 1. 소스 트리 첫 화면에서 조그마한 '설정' 버튼을 클릭합니다. 2 : '계정'을 클릭 👉 2-1 : 추가 버튼 클릭 👉 2-2 : 추가 할 github name / password 작성 결과) 👉 다음과 같이 개인 계정이 추간 된 모습을 확인할 수 있습니다. 📌 Github 프로젝트 주소와 연동하기 프로젝트마다 remote github url을 설정해주어야 해요. 1. : 프로젝트를 열어서 우측 상단에 설정버튼을 클릭 👉 1-1. : 원격 탭으로 이동 👉 1-2. : 추가 버튼 클릭 2. : 계정정보 + g..
Github SourcetreeGithub Sourcetree 안녕하세요 TriplexLab입니다. 오늘은 Github + Sourcetree에 관해서 살펴보도록 하겠습니다. 📌 Sourcetree에 Github 계정 추가하기 1. 소스 트리 첫 화면에서 조그마한 '설정' 버튼을 클릭합니다. 2 : '계정'을 클릭 👉 2-1 : 추가 버튼 클릭 👉 2-2 : 추가 할 github name / password 작성 결과) 👉 다음과 같이 개인 계정이 추간 된 모습을 확인할 수 있습니다. 📌 Github 프로젝트 주소와 연동하기 프로젝트마다 remote github url을 설정해주어야 해요. 1. : 프로젝트를 열어서 우측 상단에 설정버튼을 클릭 👉 1-1. : 원격 탭으로 이동 👉 1-2. : 추가 버튼 클릭 2. : 계정정보 + g..
2021.01.23 -
개인 블로그 다크모드 적용하기 안녕하세요 TriplexLab 입니다 :) 오늘은 티스토리 개인 블로그에 다크모드를 적용하는 방법에 대해서 알아 보도록 하겠습니다. // 다크 모드인 경우 @media (prefers-color-scheme: dark) { body { background-color: #1e1f21 !important; color: #fff !important; } .cover-masonry ul li a { color: #fff !important; } .cover-masonry ul li .excerpt { color: #fff !important; } } 위 코드는 css 상에서 운영체제가 선호하는 색상 테마가 다크모드인지 감지해서 다크모드 일때만 해당 코드를 실행해주는 것 입니다. 저..
개인 블로그 다크모드 적용하기개인 블로그 다크모드 적용하기 안녕하세요 TriplexLab 입니다 :) 오늘은 티스토리 개인 블로그에 다크모드를 적용하는 방법에 대해서 알아 보도록 하겠습니다. // 다크 모드인 경우 @media (prefers-color-scheme: dark) { body { background-color: #1e1f21 !important; color: #fff !important; } .cover-masonry ul li a { color: #fff !important; } .cover-masonry ul li .excerpt { color: #fff !important; } } 위 코드는 css 상에서 운영체제가 선호하는 색상 테마가 다크모드인지 감지해서 다크모드 일때만 해당 코드를 실행해주는 것 입니다. 저..
2021.01.02 -
React / ES6 / Webpack 프로덕션 빌드 최적화 안녕하세요 TriplexLab 입니다. 오늘은 요즘 프론트앤드 개발에 필수인 ES6, Webpack, React 의 환경 설정에 대해서 알아보도록 하겠습니다. 많은 분들이 저에게 React, Webpack 빌드 최적화에 대해서 많이들 물어보셔서 이번 기회에 정리합니다. package.json 파일은 현재 프로젝트에서 사용하는 라이브러리(의존성 모듈)의 버전들을 관리하는 파일입니다. 한번 설정해놓으면 다른 프로젝트 할때마다 기존 package.json 파일들을 참고 하는것 같습니다. 왜냐하면 버전이 달라서 빌드할때 에러가 날 경우가 있습니다. 그럴때 참고하는것이 좋은것 같습니다. //package.json { "name": "React", "ve..
React / ES6 / Webpack 프로덕션 빌드 최적화React / ES6 / Webpack 프로덕션 빌드 최적화 안녕하세요 TriplexLab 입니다. 오늘은 요즘 프론트앤드 개발에 필수인 ES6, Webpack, React 의 환경 설정에 대해서 알아보도록 하겠습니다. 많은 분들이 저에게 React, Webpack 빌드 최적화에 대해서 많이들 물어보셔서 이번 기회에 정리합니다. package.json 파일은 현재 프로젝트에서 사용하는 라이브러리(의존성 모듈)의 버전들을 관리하는 파일입니다. 한번 설정해놓으면 다른 프로젝트 할때마다 기존 package.json 파일들을 참고 하는것 같습니다. 왜냐하면 버전이 달라서 빌드할때 에러가 날 경우가 있습니다. 그럴때 참고하는것이 좋은것 같습니다. //package.json { "name": "React", "ve..
2020.11.20