npm 패키지 배포하기 안녕하세요 TriplexLab 입니다 :) 오늘은 자신이 직접 개발한 자바스크립트 패키지를 npm에 배포하는 방법에 대해서 알아보겠습니다. npm 로그인 npm 계정을 만드셨다면 터미널에서 npm login 커맨드를 입력하고 npm 사이트에서 계정을 만들 때 입력했던 개인 정보들을 입력합니다. $ npm login (...) Logged in as daleseo on https://registry.npmjs.org/. 제대로 로그인이 되었다면 npm whoami 커맨드를 입력했을 때, 본인의 username이 출력될 것입니다. $ npm whoami triplexlab 패키지 생성 npm init -y package.json 파일은 모든 npm 패키지에 반드시 있어야 하는 파일입니..

🌐 Postman으로 API서버 통신하기 안녕하세요 TriplexLab입니다 :) 오늘은 Postman에 관해서 정리 해보겠습니다. 보통 실무에서 프론트 개발자와, 백엔드 개발자와 협업해서 같이 서버스(웹사이트)를 만들어 갑니다. 보통은 백앤드 개발자는 서버(API 서버)를 만들고, 프론트 개발자는 그것을 받아서 화면에 그려주는 역할을 합니다. 하지만 실무에서 일하다보면 백앤드 개발자분이 API 서버를 다 만들어 줄 때까지 프론트 개발자는 마냥 기다릴 수는 없는 상황이 됩니다. 그런 상황일때 Postman에서 재공 하는 mock server(가짜 서버)를 이용하면 유용할 것 같습니다. Postman 로그인 하시고 들어가면 첫화면이 보입니다. mock server 만들기 다음과 깉은 순서로 화면을 클릭하면..

ECMAScript [ES6-11] 최신 문법 정리 안녕하세요 TriplexLab입니다. 오늘은 javascript ECMAScript [ES6-11] 최신 문법에 대해서 정리해보겠습니다. 👉Shorthand Property Names( 객체 초기자 ) /** * Shorthand Property Names * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer */ { const TripexLab1 = { name: 'Ellie', age: '18', }; const name = 'Ellie'; const age = '18'; // 💩옛날 옛적에 사용했던 방법 const TripexLab2 ..

VScode Prettier 안녕하세요 TriplexLab 입니다 :) 오늘은 코드 품질를 좀더 효율적으로 관리하기 위해서 prettier라는 확장 프로그램을 사용해 봅시다. VS code 에디터에서 prettier를 설치해 주세요. 그리고 단축키 command + ,를 눌러서 설정 파일에 들어가주세요. settings.json 파일로 들어가시면 됩니다. 저는 하단에 있는 옵션들을 추가 했습니다. 옵션들을 공식문서에서 검색해서 무슨 의미인지 보시고, 자신의 프로젝트에 추가 하는것을 추천 합니다. 참고로 editor.defaultFormatter 같은 경우에는 VScode(에디터) 기본적으로 Formatter기능을 가지고 있습니다. 뿐만 아니라, Beautify등 Formatter기능을 하는 다른 확장프로..

익스플로러 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..

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..

개인 블로그 다크모드 적용하기 안녕하세요 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 상에서 운영체제가 선호하는 색상 테마가 다크모드인지 감지해서 다크모드 일때만 해당 코드를 실행해주는 것 입니다. 저..

React / ES6 / Webpack 프로덕션 빌드 최적화 안녕하세요 TriplexLab 입니다. 오늘은 요즘 프론트앤드 개발에 필수인 ES6, Webpack, React 의 환경 설정에 대해서 알아보도록 하겠습니다. 많은 분들이 저에게 React, Webpack 빌드 최적화에 대해서 많이들 물어보셔서 이번 기회에 정리합니다. package.json 파일은 현재 프로젝트에서 사용하는 라이브러리(의존성 모듈)의 버전들을 관리하는 파일입니다. 한번 설정해놓으면 다른 프로젝트 할때마다 기존 package.json 파일들을 참고 하는것 같습니다. 왜냐하면 버전이 달라서 빌드할때 에러가 날 경우가 있습니다. 그럴때 참고하는것이 좋은것 같습니다. //package.json { "name": "React", "ve..