본문 바로가기

FRONTEND67

220426 CSS Toggles css-toggles 패키지 사용방법 해당 포스팅은 큰 특징만 정리하였습니다. 기타 다른 사항은 oddbird.net/ Docs 를 참고하세요 Global Color Toggle light / dark 모드를 변경할 때 사용할 수 있습니다. html { toggle-root: mode [auto light dark]; } html:toggle (mode light) { ... } html:toggle (mode dark) { ... } .mode-btn { toggle-trigger: mode; } Binary self-toggle switches .todo li { toggle: todo self; list-style-type: '❌ '; } .todo li:toggle(todo) { l.. 2022. 4. 26.
211105 Javascript - Array 에서 최소, 최대 값(Min/Max) 구하기 Math.max(1, 2, 3) // 3 Math.min(1, 2, 3) // 1 const nums = [1, 2, 3] Math.min(nums) // NaN Math.max(nums) // Nan var nums = [1, 2, 3] Math.min.apply(Math, nums) // 1 Math.max.apply(Math, nums) // 3 Math.min.apply(null, nums) // 1 Math.max.apply(null, nums) // 3 const nums = [1, 2, 3] Math.min(...nums) // 1 Math.max(...nums) // 3 Math.min(1, 2, 3) Math.max(1, 2, 3) 2022. 1. 13.
211217 Mac에서 Sourcetree Keychain 저장하기 Mac에서 Sourcetree Keychain 저장하기 MacOS 에서 Sourcetree 를 깔고 원격 저장소에서 맨 처음 클론을 받은후, Push/Pull/Fetch/Merge 를 하면 이런 메세지가 뜬다. 솔직히 매번 bitbucket 비밀번호 입력하는거 너무 귀찮다... 이럴땐 Mac 에서 키체인을 설정해두면 편리하다. 절차 $ git config --global credential.helper osxkeychain $ git config --global credential.helper store # 여기서 Bitbucket 로그아웃 / 로그인 / CAPCHA 설정 # Push/Pull/Fetch/Merge 등 작업 ... $ git pull credential 설정 Bitbucket 홈페이지에 .. 2021. 12. 17.
211206 Javascript if 의 대체코드 작성방법 Javascript if 의 대체코드 작성방법 if 조건 // 나쁜 예 const welcomeMessage = ({ admin }) => { let message if (admin) message = 'Welcome, administrator!' return message } 간단한 if 조건은 아래와 같이 삼항 연산자로 대체할 수 있습니다. boolean ? valueForTrue : valueForFalse // 좋은 예 const welcomeMessage = ({ admin }) => admin ? 'Welcome, administrator!' : 'Welcome, user' const welcomeMessage = ({ admin }) => `Welc.. 2021. 12. 6.
211201 Javascript Module Export & Import Module Export & Import Export Import Export 사용 예시 Module Export & Import MDN export, import 모듈 설명이 너무 성의없이 되어있어 사용 방법이랑 정리를 해봤다. Export /* MDN 공식문서 export */ // Exporting individual features export let name1, name2, …, nameN; // also var, const export let name1 = …, name2 = …, …, nameN; // also var, const export function functionName(){...} export class ClassName {...} // Export list export { na.. 2021. 12. 2.
211201 Javascript Reduce Method 활용법 JavaScript Reduce Method Made Simple reduce() 메서드는 가장 자주 사용되는 Array 메서드인 ES6(ECMAScript 2015) 에 추가된 JS 기능입니다. reduce() 의 역할은 제공된 reducer function 을 실행하여 주어진 Array 를 한 개의 값으로 줄여나가는 역할을 합니다. 결과적으로는 한 개의 값으로 줄여나가는 것 입니다. // reduce() 문법 array.reduce(callback, initialValue) const reducer = (accumulator, currentValue, index) => { // ... } 사용법 reduce 메서드는 보통 전체 총합/평균/최소/최대 값을 구할 때 사용됩니다. 이 말은 다른데에도 사용할.. 2021. 12. 1.
210914 Javascript - Regex 백업 Javascript - Regex 형식 백업 외부에서 텍스트를 받아와 목록에서 찾기 function findText (text) { const regex = new RegExp(text, 'gi') // text 찾기 }예제코드 See the Pen 210924 Regex_FindText by Jaeeun Jung (@dmsdl950823) on CodePen. Email 형식 확인 function emailValidator (email) { const regex = /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9].. 2021. 11. 27.
210610 Javascript - File / Blob / 업로드 / 다운로드 / Encoding / Decoding Blob 이란? FileList 와 File 의 생김새 차이 FileReader 사용하기 Image 를 Base64 코드로 변환하기 Base64 코드를 Image 로 변환하기 파일 내부 데이터를 텍스트로 변환하기 파일 업로드 파일 다운로드 부록 - 파일 용량 체크 Blob 이란? Blob Object 는 file 같은 나열할 수 있는(Enumerable) 오브젝트이며, raw data 입니다 Text 나 binary data 처럼 읽힐 수 있고, ReadableStream 으로 변환될 수 있습니다. FileList 와 File 의 생김새 차이 console 로 확인해보면, FileList 와 File 의 생김새의 차이는 아래와 같습니다. - FileList : { 0: File, length: 1 } -.. 2021. 11. 25.
210625 Javascript Textarea Input 이벤트에 맞춰 길이 늘리기 Javascript Textarea Input 이벤트에 맞춰 길이 늘리기 Vanilla Javascript const textarea = document.querySelector('textarea') textarea.addEventListener('input', e => { textarea.style.height = textarea.scrollHeight + 'px' }) Vue.js const textareaWrap = this.$refs.textarea.$el const textarea = textareaWrap.querySelector('textarea') textarea.style.height = 'auto' textarea.style.height = textarea.scrollHeight + '.. 2021. 11. 25.
210823_HTTP Message HTTP 메세지 HTTP 메세지 메시지의 흐름 메시지의 각 부분 메시지 문법 Method Status code Header 일반 헤더 종류 요청 헤더 종류 Entity 헤더 메시지의 흐름 인바운드client => 메시지 => server (인바운드) 아웃바운드client 2021. 8. 25.
210820_유용한 VS Code Extensions 모음 Auto Close Tag Auto Rename Tag Auto-Open Markdown Preview Bookmarks Bracket Pair Colorizer CodeSwing Community Material Theme CSS Peek Document This ES7 React/Redux/GraphQL/React-Native snippets ESLint git flow Git Graph Git History GitHub GitLens GLSL Lint HTML CSS Support HTML Play Increment Selection InteliSence for CSS classnames in HTML json2ts Live Server Markdown All in One Markdown Previ.. 2021. 8. 20.
210503_Node의 기본모듈 노드의 기본 모듈 노드의 기본 모듈 global - 전역 객체 util - 유틸리티 event - 이벤트 Buffer - 버퍼 Stream - 스트림 fs - 파일 시스템 path - 경로 net - 네트워크 http, https - HTTP와 HTTPS url, query - URL 과 쿼리 문자열 child_process - 자식 프로세스 Cluster TCP 를 이용한 채팅 예제 모듈 종류 정리 해당 포스트에서는 노드가 제공하는 기본 모듈을 살펴봅니다. 노드에 포함된 모듈을 기본 모듈 이라고 부르고, 추가 설치가 필요한 모듈은 확장 모듈 이라고 합니다. global - 전역 객체 전역 객체 global 는 모든 스코프에서 접근 가능할 수 있는 객체를 말합니다. client javascript 에서는.. 2021. 7. 14.

티스토리툴바