본문 바로가기

전체 글

 (364)
Virtual DOM(가상돔) 리액트가 수많은 개발자들 사이에서 사랑받는 이유 중 하나는 바로 빠른 속도. 리액트는 Virtual DOM을 이용해서 보다 효율적으로 원하는 페이지를 브라우저에 그려준다. # DOM이란? 브라우저를 통해 어떤 웹사이트를 들어가면 제목도 있고, 버튼도 있고 사진도 있다. 이런 하나하나의 요소들을 element라고 부른다. 그리고 이 모든 것을 담고 있는 웹페이지를 문서, document라고 부른다. 브라우저는 이 페이지에 해당하는 HTML을 분석해서 화면에 띄워준다. DOM은 이렇게 웹페이지에 들어가있는 element들을 tree형태의 구조로 표현한 것. html이 이렇게 작성되어서 브라우저상에 올라왔다면 DOM은 오른쪽과 같은 구조를 가지고 있다. DOM 트리 안에는 각각의 elemet에 상응하는 nod..
네이티브 앱 vs 크로스플랫폼 앱 vs 모바일웹앱 vs 하이브리드 앱 공부를 하다가 네이티브 앱/크로스플랫폼 앱/모바일웹 앱/하이브리드 앱의 차이를 정확하게 몰라 찾아서 정리를 하였다. # 네이티브 앱 (Native app) - 우리가 일반적으로 앱스토어(iOS-아이폰)나 구글플레이스토어(Android-삼성폰)에서 다운받아서 쓰는 앱을 의미한다. - 모바일기기에 최적화된 언어로 개발된 앱으로, 안드로이드 SDK를 이용해 Java, Kotlin 등의 언어로 만든 앱, iOS기반 SDK를 이용해 Swift로 만든 대부분의 앱을 의미. 안드로이드 iOS 개발환경 안드로이드 스튜디오 XCode (현재) 프로그래밍 언어 코틀린(Kotlin) 스위프트(Swift) (과거) 프로그래밍 언어 자바(Java) 오브젝트-C(Object-C) - 이렇게 각 OS에 맞는 언어로 iOS 앱개발자..
컴파일러 vs 인터프리터 컴퓨터는 0과 1이란 신호들을 사용해서 돌아간다. 때문에 컴퓨터가 알아듣는 명령어들은 0과 1의 기나긴 조합들로 되어있다. (사람이 이걸로 프로그램을 짜려면 죽어난다...) 때문에 오늘날 널리 사용되는 프로그래밍 언어들은 사람들이 보다 알아보고 작성하기 수월하도록 설계돼있다. 나날이 쉬워지고 간결해지고 기능도 강력해지는 언어들 덕분에 손쉽게 코딩을 할 수 있다. 하지만 기계들은 이 코드들을 알아보지 못하기 때문에 이를 기계들의 언어로, 또는 그 중간 단계로 번역해주는 작업이 필요하다. 이걸 언제 하느냐에 따라 컴파일러/인터프리터 둘 중 한 범주에 들어가게 된다. # 컴파일러 C, C++, 자바 등의 언어들은 개발자가 코딩을 마치고 완성된 프로그램을 출시하는 단계에서 컴퓨터에게 일을 하나 시킨다. 이 일이..
객체지향 프로그래밍에 대해서 # 객체지향 프로그래밍이란? 객체지향 프로그래밍은 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나, 여러 개의 독립적 단위, 즉 '객체'의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다. ### 프로그래밍 패러다임이란? 여기서 잠깐! '프로그래밍 패러다임'은 도대체 뭘까? - 패러다임 : 특정 분야에서의 사고 방식이나 문제 해결을 위한 체계적인 접근 방법 - 프로그래밍 패러다임 : 특정 프로그래밍 언어나 기술의 사용 방법, 코드의 구조화, 문제 해결 방법 등에 대한 전반적인 철학이나 접근 방식. => 이해는 가는데 딱 정의하기는 조금 어려워, 내가 나름대로 내린 정의는 '프로그래밍 표현 방법론 또는 구현 방식(스타일)'. ## 객체지향 프로..
Vue의 SPA 원리 (feat.webpack, vue-loader..) # vue파일들 SPA는 HTML 파일 하나, 단 하나의 파일 만을 가지고 웹 서비스를 제공한다. 단 하나의 '정적 페이지(HTML)'만을 가지고 웹 서비스를 제공한다. 하지만, 정말 웹서비스를 제공하는데 HTML파일 하나면 될까? → 정답은 No!! 실제 개발한 서비스를 제공하기 위해서는 필요한건 아래와 같다. 1. 웹서비스의 밑바탕을 이루는 HTML 파일 2. 스크립트 코드들이 빌드된 JS파일 3. 이미지, 폰트와 같은 정적 리소스(jpg, png 등) 보통 이렇게 3가지 구성으로 SPA의 기반이 마련되고, 하나의 웹 서비스를 제공할 수 있다. 일반적으로 SPA는 개발을 할 때, 각 파일별로 기능이 나누어져있다. 이 SPA의 파일들은 실제 서비스에 직접적으로 사용되지는 않는다. 예를 들어, Vue.j..
[Udemy Vue 완벽가이드 Section15] 230. 요약 Vuex가 어떤 원리이며 어떻게 사용하는지 배웠다. 핵심은 메인 status이다. actions 및 mutations을 통해 조작하고, getters를 통해 메인 status를 받았다. - actions, mutations 및 getter를 설정하고, 다양한 폴더 구조와 여러 모듈을 이용해 복잡한 상태를 관리하는 법을 알아봤다. - 헬퍼 함수인 mapGetters와 mapActions도 살펴봤다. Vuex가 기본적으로 아주 복잡하지는 않다. 상태를 관리하기 위해 일부 추가 코드를 작성해야하지만, 한번 하고나면 명확하게 정의된 플로우와 상태를 관리하기 적합한 구조를 갖추게 된다. Vuex를 이용하면 명확하게 정의된 방식으로 상태를 공유해 앱 어디서든 조작할 수 있다. 큰 프로젝트에서 Vuex가 특히나 유용..
[Udemy Vue 완벽가이드 Section15] 226. 도전 과제! 애플리케이션 전역에서 관리되는 상태 전체를 Vuex로 이전해보자. products, isLoggedIn 상태 및 cart까지 전부. Vuex에 설정하는데 원한다면 모듈을 사용해도 좋고, 네임스페이스를 사용해도 좋다. ** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.
[Udemy Vue 완벽가이드 Section15] 225. Vuex 코드 및 파일 구조화하기 기본적인 설정은 거의 마쳤지만 한 가지 문제가 있다. → 바로, main.js 파일이 아주 크다는 것. '메인 저장소 전체'와 '추가 모듈'까지 있다. 아직은 간단한 앱이라 문제가 없지만, 코드가 아주 복잡하다. 이보다 더 큰 앱일 경우, 전부 main.js에 넣지 말아야 한다. routing에서 했던 것처럼 파일을 하나 더 만들어보자. 1/ store.js파일을 만들어 저장소 전체를 따로 아웃소싱하자. 모듈과 저장소를 선택해서 main.js에서 잘라낸 뒤 store.js에 추가하자. // main.js import { createApp } from 'vue'; import { createStore } from 'vuex'; import App from './App.vue'; // 저장소 모듈 const..

티스토리툴바