하수도키의 성장일기

개발일기/SCSS(SASS)

[SCSS(SASS)] 반응형 breakpoints 추가하는 방법

개요 이번에는 반응형 웹사이트 작업 시 꼭 필요한 mediaquery를 공부해봅시다! scss 사용해서 살펴보겠습니다 : ) 코드 우선 완성된 코드를 보여주고 설명해드릴게요 : ) $breakpoints: ( 'mobile-extra-small': (min-width: 21.25rem), // 340 'mobile-portrait-only': (max-width: 29.9375rem), // 479 'mobile-landscape': (max-width: 51rem), // 816 'tablet-portrait': (min-width: 48rem), // 768 'desktop-template': (min-width: 48.0625rem), // 769 'tablet-portrait-only': (max..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증(#1. 인증소개)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Vue.js

[Vue.js] Vue 3 Reactivity (#1)

[Vue.js] Vue 3 Reactivity (#1) 개요 이 문서는 www.vuemastery.com 에 Vue 3 Reactivity 를 보고 정리했습니다. Vue3가 드디어 릴리즈가 되었다. 아직 베타인것 같지만... Vue3 Reactivity System(반응형)에 대해 알아보자. 이걸 알면 좋은 점은?? Vue 내부 디자인 패턴 이해 Vue 디버깅 스킬 향상 Vue3 modularzied 반응형 라이브러리 사용 Vue3 소스 코드에 기여 가능 어마어마한 혜택들이 있다. 반응형(Reactivity) 이해하기 Vue 반응형은 정말 매직과 같다. 아래 코드로 어떻게 작동하는지 살펴보자. Price: ${{ product.price }} Total: ${{ product.price * product..

개발일기/CSS

CSS - 반응형 16:9 비율 유지하는 법

CSS - 반응형 16:9 비율 유지 개요 이 https://css-tricks.com/aspect-ratio-boxes/ 페이지를 보고 번역/의역을 했습니다. 자세한 내용은 위 링크를 참고해주세요. 유투브 동영상 또는 반응형 작업시에 필요한 비율에 대해 다뤄봤습니다. padding-top 사용 padding-top 또는 padding-bottom 사용 padding 값은 요소의 width을 참조한다. width값이 100px이고 padding이 20%이면 px로 계산하면 20px이다. padding-top을 56.25%을 주면 16:9 비율로 보인다. height: 0을 주면 박스 모델 높이에 영향을 주는 것이 padding-top밖에 없다. .video { overflow:hidden; padding..

개발일기/Web

JavaScript에서 Local Storage를 사용하는 방법

JavaScript에서 Local Storage를 사용하는 방법 원글(https://tania.dev/how-to-use-local-storage-with-javascript)을 번역/의역했습니다. 서론 일반 JavaScript를 사용하여 간단하고 새로운 탭 페이지 응용 프로그램을 만들어 브라우저의 내장 웹 스토리지를 사용하는 방법에 대해 알아보자. 저는 작은 응용 프로그램을 처음부터 순수한 JavaScript로 완전히 구축하는 튜토리얼을 만드는 것을 좋아한다. todolist은 일반적인 앱 아이디어이지만, 할 일을 저장할 데이터베이스가 없으면 그다지 유용하지 않으며, 이는 초보자 영역을 넘어서는 복잡성을 가중시킨다. 이것은 실제로 빠른 메모를 하는데 유용할 수 있다. 브라우저에서 앱을 새 탭페이지로 설..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 6 - 매개변수와 return 문을 정리하라)

자바스크립트 코딩의 기술(시리즈 6 - 매개변수와 return 문을 정리하라) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 대지는 진행하면서 가늠잡아 보겠다. 개요 함수 인수를 변경하는 계획을 세워보고, 간결하면서 유연성을 제공하는 매개변수를 생성하는 방법을 알아보자. 예를 들면, 함수는 인수 2개를 받고 있었는데 갑자기 받을 인자가 늘어 6개의 인자를 받게 될 경우 대처하는 방법 등을 살펴보자. 매개변수 기본값을 생성하라(TIP28) 이번 팁에서 매개변수가 채워져 있지 않을 때 매개변수 기본값으로 값을 설정하는 방법을 알아보자. 파운드(pound)를 킬로그램(kilogram)으로 변환하는 코드를 보면서 알아보자. pound를 2.2로 나눠야 k..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 5 - 반복문을 단순하게 만들어라(2/2))

자바스크립트 코딩의 기술(시리즈 5 - 반복문을 단순하게 만들어라(2/2)) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 갈지는 진행하면서 가늠잡아 보겠다. 개요 데이터를 순회할 때 사용하는 배열메서드를 알아보자. 여태까지 for문만 사용했으면 이제 적합한 도구(배열메서드)를 사용해보자. forEach()로 동일한 동작을 적용하라.(TIP24) forEach() 메서드를 이용해 배열의 각 항목에 동작을 적용하는 방법을 살펴보자. map(), filter(), find()와 달리 forEach()는 배열을 전혀 변경하지 않는다. 대신, 모든 항목에 동일한 동작을 수행 한다. 회원들에게 이메일로 초대장을 보내는 예제 코드를 보면서 살펴보자. cons..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 5 - 반복문을 단순하게 만들어라(1/2))

자바스크립트 코딩의 기술(시리즈 5 - 반복문을 단순하게 만들어라(1/2)) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 갈지는 진행하면서 가늠잡아 보겠다. 개요 데이터를 순회할 때 사용하는 배열메서드를 알아보자. 여태까지 for문만 사용했으면 이제 적합한 도구(배열메서드)를 사용해보자. 화살표 함수로 반복문을 단순하게 만들어라(TIP20) 화살표 함수(=>)를 이용해 관련 없는 정보(기존 함수에서)를 제거하는 방법을 알아보자. 필요없는 정보 function 키워드 인수를 감싸는 괄호 return 키워드 중괄호 this와 관련된 문맥 내용도 있으나 여기서는 지나가고 나중에 TIP36에서 살펴볼 것이다. 영문 이름 값을 받아 첫 번째 글자를 대문자..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 4 - 조건문을 깔끔하게 작성하라)

자바스크립트 코딩의 기술(시리즈 4 - 조건문을 깔끔하게 작성하라) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 갈지는 진행하면서 가늠잡아 보겠다. 개요 이번장에서 참과 거짓에 관련된 코드를 간결하게 작성하는 방법을 알아보자. 참과 거짓에 대한 기초 지식 삼항 연산자 단락 평가 거짓 값이 있는 조건문을 축약하라(TIP17) 거짓 값과 참 값을 이용해 서로 다른 정보를 확인하는 방법을 알아보자. 불 자료형(boolean type)이라고 부르는 원시값 true, false 와 참(truthy) 또는 거짓(falsy) 값이라고 부르는것들에 대한 차이를 살펴보자. 우선 동등과 일치에 대해 살펴보자. 1 == '1' // true 동등 : ..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 3 - 특수한 컬렉션을 이용해 코드 명료성을 극대화하라)

자바스크립트 코딩의 기술(시리즈 3 - 특수한 컬렉션을 이용해 코드 명료성을 극대화하라) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 갈지는 진행하면서 가늠잡아 보겠다. 객체를 이용해 정적인 키-값을 탐색하라(TIP10) 데이터에 따라 UI에 색상을 적용해야 하는 경우를 생각해보자. 다음 예제 코드와 같이 배열에 16진수 값을 넣었지만, 이것만으로 각각 무슨 의미인지 알 수 없다. const colors = ['#d10202', '#19d836','#0e33d8']; 사용자 정보를 담은 배열처럼 구조적으로 유사하고 다른 데이터와 교체해도 괜찮은 경우와 다르게 위에서 살펴본 색상들은 각각 다른 목적으로, ..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 2 - 배열로 데이터 컬렉션을 관리하다)

자바스크립트 코딩의 기술(시리즈 2 - 배열로 데이터 컬렉션을 관리하다) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 갈지는 진행하면서 가늠잡아 보겠다. 배열로 유연한 컬렉션을 생성하라(TIP5) 자바스크립트에는 데이터 컬렉션을 다루는 구조로 배열, 객체 이렇게 두가지가 있었다. 모던 자바스크립트에서 맵(Map), 세트(Set), 위크맵(WeakMap), 위크셋(WeakSet), 객체, 배열을 사용할 수 있다. 컬렉션을 선택할 때는 정보로 어떤 작업을 할지 생각해봐야 된다. 대부분 배열을 사용하며 배열을 사용하지 않아도 배열에 적용되는 개념을 빌리게 된다. 배열의 순서가 기술적으로 보장되지 않지만 대부분 상황에서 동작한다고 생각하면 된다.(htt..