전체 글

[Vue.js] Vue.js

View: 눈에 보이는 화면 (화면의 요소는 HTML) HTML은 DOM을 이용해서 javascript로 조작 -> Reactivity DOM Listeners: View에서 사용자 이벤트는 Vue의 DOM Listeners로 청취 Modal: Vue에서 청취한 이벤트를 통해 javascript에 있는 데이터를 변경하거나 특정 로직을 실행 javascript를 통해 데이터가 변경되었을 경우 Data Bindings 동작하여 View에 반영 Instance 뷰 개발 시 필수로 생성이 필요한 코드 인스턴스 생성 시 Vue 개발자 도구에서 Root 컴포넌트로 인식 var vm = new Vue({ el: '#app', data: { message: 'hi' }, methods: { }, created: fun..

[Flutter] Flutter란?

스마트폰의 앱 개발 방식은 3가지로 분류된다. 네이티브 방식 - Native App 안드로이드나 ios 자체에서 제공하는 개발환경으로 개발하는 형식 안드로이드(안드로이드 스튜디어 - Java, Kotlin언어 사용) 하이브리드 방식 - Hybrid App 웹 기술을 활용하여 앱화면을 만든 후 네이티브 기술로 감싸서 앱 형태로 보여주게 만드는 방식 크로스 플랫폼 형식 - Cross-Platform App 안드로이드와 ios 등 각 플랫폼용 앱을 한번에 구현하는 방식 (Xamarin-C#, Fullter-Dart, React Native - Java) Flutter란? flutter는 Google에서 만든 오픈소스 모바일 앱 개발 프레임워크이다. 두개의 운영체제 모두에서 돌아가는 앱을 한번에 구현할 수 있는..

[SCSS] HTML에 SCSS 적용하는 법

CSS를 사용하다보면 각종 클래스 혹은 태그들을 나열하느라 시간이 오래 걸리고 반복적으로 클래스와 태그들을 적어줘야 하기 때문에 작업을 하다보면 굉장히 비효율적이란 느낌이 든다. 또한 오타가 발생했을 때 오타를 찾기도 쉽지가 않다. 이러한 이유들로 SCSS를 사용한다. SCSS를 사용하면 CSS 코드가 훨씬 간결해진다. HTML에 SCSS 적용하는 방법 툴에 프로젝트를 생성한다. 해당 프로젝트 안에 'index.html'파일을 만들어 준다. 해당 프로젝트 안에 'css'라는 폴더를 생성해 준다. css 폴더 안에 style.css와 style.scss 파일을 생성한다. index.html에 css코드를 불러온다. → scss에 작성한 내용이 자동으로 작성되도록 설정하면 scss는 따로 불러오지 않아도 된..

MVC 패턴

MVC 패턴이란? MVC란 Model-View-Controller의 약자로 애플리케이션을 세 가지 역할로 구분한 개발 방법론이다. 사용자가 Controller를 조작하면 Controller는 Model을 통해 데이터를 가져오고 그 데이터를 바탕으로 View를 통해 시각적 표현을 제어하여 사용자에게 전달하게 된다. 이러한 패턴을 성공적으로 사용하면 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시작적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있게 된다. 위 개념을 WEB에 적용 시 사용자가 웹사이트에 접속 Controller는 사용자가 요청한 웹페이지를 서비스하기 위해서 모델을 호출 Model은 데이터베이스나 파일과 같은 데이터..

[Web] google material-icons 적용하기(Outlined, Fill, Rounded, Sharp, Two tone)

폰트 아이콘 보통 홈페이지에서 아이콘은 이미지로도 사용하지만, 모바일도 지원해야 할 경우에 이미지의 크기를 조정해야 한다. 이미지의 크기를 2배 이상으로 넣어야 하고, 크기를 마음대로 늘리고 줄일 경우 깨짐 현상이 발생할 수도 있다. 이런 경우에 사용할 수 있는 것이 폰트 아이콘이다. 폰트 아이콘은 말 그대로 폰트 스타일 내부에 아이콘을 삽입해 제공함으로써 벡터 이미지의 형태를 띠게 된다. 폰트이기 때문에 사이즈나 컬러도 마음대로 조정할 수 있다. 또한 깨지지도 않는다. google material icons 적용하기 google material icons는 사용성 높은 폰트 아이콘 중의 하나이며 한 아이콘에도 여러 가지 스타일을 제공한다. 사용법 상단에 링크를 import한다. 홈페이지에 들어간 후 원..

체크 표시 특수 문자(✓, ✔, ☑)

✓, ✔, ☑