profile
UI 화면 만드는걸 좋아하는 UI개발자입니다. 프론트엔드 개발 공부 중입니다. 공부한 부분을 블로그로 간략히 정리하는 편입니다.
post-thumbnail

response(반응형) 적용

breakpoint는 아래 변수를 통해 커스텀 가능하다.$media-breakpoint-up는 최대 너비$media-breakpoint-down는 최소 너비를 뜻하며 @include를 통해 미디어 쿼리 대신 약어로 간편하게 사용할 수 있다.

2022년 4월 20일
·
0개의 댓글
post-thumbnail

vuex

vuex는 중앙 집중식 데이터 관리를 위한 vue 공식 플러그인이다.프로젝트 구조가 복잡해지면 여러 컴포넌트들간에 props, emit, provide, inject 등으로만 데이터를 주고받기엔 너무 복잡해지기 때문에 이럴 경우 vuex를 사용한다.보편적으로 이 중앙

2022년 4월 17일
·
0개의 댓글
post-thumbnail

구성

Bootstrap 5버전부터 IE를 지원하지 않는다.부트스트랩 기본 구성 scss(https://getbootstrap.com/docs/5.1/customize/sass/- 부트스트랩 sass 관련 구성(https://getbootstrap.com/d

2022년 4월 16일
·
0개의 댓글
post-thumbnail

Vue Router

use를 통해 라우터를 연결createRouter 를 사용하여 라우터를 구성하여 exportcreateWebHashHistory 를 사용하여 Hash모드 적용

2022년 4월 16일
·
0개의 댓글
post-thumbnail

컴포넌트 - 속성 상속

컴포넌트 - 속성 상속 기본적으로 컴포넌트 태그에 속성을 작성하면 컴포넌트의 최상위 요소에 속성들이 들어간다. 하지만 최상위 요소가 2개 이상일 경우 어느 요소에 속성이 들어가야할지 모르기 때문에 적용되지 않는다.

2022년 4월 15일
·
0개의 댓글
post-thumbnail

webpack

웹팩 베이스 패키지$ npm i -D webpack커맨드라인 인터 페이스를 사용하기 위한 패키지$ npm i -D webpack-cli개발 서버 구동 및 HMR을 사용하기 위한 패키지$ npm i -D webpack-dev-serverhtml로 결과물을 생성하기 위한

2022년 4월 8일
·
0개의 댓글
post-thumbnail

Parcel

Parcel bundler Parcel bundler는 중소규모 프로젝트에 사용하기 좋은 간편한 번들러다.

2022년 4월 7일
·
0개의 댓글
post-thumbnail

SNS 공유하기

먼저 공유하기 버튼을 html, css로 만든다.아이콘을 만들던 버튼으로 만들던 상관없다.아래 내용을 클릭이벤트에 연결해주면 된다.페이스북은 공유할 url만 정해주면 된다.의외로 간단하다.카카오 디벨로퍼(https://developers.kakao.com/)에

2022년 3월 19일
·
0개의 댓글
post-thumbnail

CLOUDFLARE로 배포해 보기

cloudflare는 깃헙 페이지스나 netlify 같이 깃헙 저장소를 배포하는 기능이 있는 플랫폼이다.cloudflare는 배포 기능 말고도 다른 여러가지 서비스를 제공해주지만 일단 배포 기능을 살펴보겠다.일단 배포 뒤 주소가 깔끔하다. 예를들어 깃헙 저장소 이름이

2022년 3월 18일
·
0개의 댓글
post-thumbnail

Svelte - Await 블록

중요한 부분이라 일반적으로 추구하는 간략한 포스팅 보다 조금 설명이 길어질것 같다.아래 코드는 버튼을 클릭했을 때 2초 뒤에 데이터를 받아오는 프로미스 객체를 promise 변수에 담는 로직이다.(스벨트 문법은 하이라이트가 제대로 안된다..)프로미스 객체를 담은 pro

2022년 3월 15일
·
0개의 댓글
post-thumbnail

Svelte - 깃헙 pages 배포

테스트겸 깃헙 페이지스에 배포해보려고 간만에 깃헙에 접속해보았다.빌드 도구(엄밀히 말하면 스벨트는 빌드가 아니라 컴파일이지만..)는 snowpack 환경이고, 기본적으로 npm run build를 하면 build 폴더로 결과물들이 나온다.깃헙 페이지스의 배포 포인트는

2022년 3월 14일
·
0개의 댓글
post-thumbnail

Lodash

배열, 객체, 숫자, 문자열 등의 데이터를 손쉽게 변형 및 수정시킬 수 있는 다양한 기능이 들어 있는 패키지.$ npm i -D lodashupperFirst 메서드는 문자열의 맨 앞글자를 대문자로 변경unionBy는 앞에 인수들에 들어오는 배열 데이터를 병합하고, 마

2022년 3월 8일
·
0개의 댓글
post-thumbnail

svelte-spa-router

svelte-spa-router 라우터 구성 라우터 링크 라우터 링크 active

2022년 3월 7일
·
0개의 댓글
post-thumbnail

snowpack

공식 문서snowpack.config.js위와 같이 설정시public 폴더는 build시 루트 경로( build )가 되고 (static한 index.html, favicon.ico 등이 위치되는 경로)src 폴더는 build시 build/dist 경로가 된다. (프로

2022년 3월 7일
·
0개의 댓글
post-thumbnail

Promise(), async, await

Promise(), async, await Promise와 async, await는 비동기 로직 호출 함수의 실행 순서를 보장해주기 위해서 만들어졌다. Promise는 Ecmascript2015(ES6)에 나온 기술이고 async, await는 Ecmascript20

2022년 2월 21일
·
0개의 댓글
post-thumbnail

Composition API

composition API는 분산되어 있는 로직을, 관련 있는 로직들끼리 그룹핑하기 위해 만들어졌다.기존 문법은 아래와 같이 여러 로직들이 섞인채로 작성되도록 설계되어 있다.하지만 composition api 문법을 사용하면 아래와 같이 관련 있는 로직별로 그룹핑하는

2022년 2월 16일
·
0개의 댓글
post-thumbnail

4.1 값 변환

어떤 값을 다른 타입으로 바꾸는 과정이 명시적이면 '타입 캐스팅', 암시적이면 '강제변환'이라고 하는데, '명시적 강제변환'은 코드만 봐도 의도적으로 타입변환을 일으킨다는 사실이 명백한 반면, '암시적 강제변환'은 다른 작업 도중 불분명한 부수 효과로부터 발생하는 타

2022년 2월 15일
·
0개의 댓글
post-thumbnail

ref

ref는 reference의 약자로, vue에서 간략히 DOM(Document Object Model)에 접근하게 해주는 속성이다.DOM에 접근하는 것이기 때문에 mounted() 라이프 사이클에서 접근해야 한다.자식 컴포넌트에 ref 속성으로 최상위 요소를 참조할 수

2022년 2월 15일
·
0개의 댓글
post-thumbnail

Provide, Inject

Props 같은 경우, 부모 > 자식 > 손자 컴포넌트 처럼 중첩된 컴포넌트 뎁스가 깊어질 수록 중간에 props 데이터만 전달해주기 위한 코드들이 무의미하게 많이 생성된다.Provide와 Inject는 이와 같은 과정 없이 다이렉트로 부모 컴포넌트에서 손자 컴포넌트로

2022년 2월 15일
·
0개의 댓글
post-thumbnail

Slot

컴포넌트 태그 사이에 정보를 넣어, 자식 컴포넌트로 컨텐츠를 전달할 수 있다.부모 컴포넌트의 컨텐츠를 자식 컴포넌트에 <slot></slot> 슬롯 태그가 선언된 위치에 받을 수 있다.부모 컴포넌트에서 컨텐츠가 넘어오지 않는다면 아래와 같이 <slot>

2022년 2월 12일
·
0개의 댓글