Package.json NPM에서 패키지를 관리하기 위한 파일 dependencies : 프로젝트에서 항상 사용되는 모듈 devDependencies : 개발환경에서만 사용되는 모듈 scripts : NPM에 내장된 다양한 script를 언제 어떻게 실행할 것인지 설정 browserlist : 지원 브라우저와 Node.js 버전 설정. 이 값은 프로젝트 내에서 공유되며 바벨에서 생성하는 스크립트에 영향을 미침 //package.json { "browserslist": [ "ie 11", //IE11 지원 ">0.2%", //브라우저 점유율 0.2% 이상 지원 "not dead", //지원이 중단된 브라우저 제외 "not ie
증상 npm install로 패키지 설치 시 아래 경고가 출력되는 경우가 있습니다. PM> npm install typesafe-actions npm : npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.1 (node_modules\chokidar\node_modules\fsevents): At line:1 char:1 + npm install typesafe-actions + CategoryInfo : NotSpecified: (npm WARN option...ules\fsevents)::String) [], RemoteException + FullyQualifiedErrorId : NativeCommandError npm WARN notsup..
Redux는 자바스크립트 앱의 State 관리 프레임워크입니다. 리덕스를 사용함으로서 리액트에서 State 변이와 State 전달에 있어 복잡성을 낮추어 주며, 리액트에서 데이터 로직과 비지니스 로직을 손쉽게 분리할 수 있는 방법이기도 합니다. 또한 지루하고 반복적이고 복잡한 앱의 테스트와 디버깅을 쉽게 만들어주며 테스트 코드를 통해 테스트를 자동화할 수 있게 도와줍니다. 리덕스 사용 시 준수해야 할 3원칙 전체 State를 하나의 객체로 관리 State를 하나의 객체로 관리함으로써 State 변화를 쉽게 추적하고 관리 할 수 있게 만들어줍니다. 리액트 프로그램을 특정 State로 손쉽게 재현할 수 있게 되며 테스트나 디버깅에 용이함을 제공합니다. 프로그램의 State 변화를 히스토리 처럼 관리할 수 있..
클래스형 컴포넌트는 함수형 컴포넌트와 Hook이 등장하기 이전에 사용하던 컴포넌트 형태로 ES6(ECMA Script 2015)부터 추가된 JavaScript Class를 바탕으로 컴포넌트를 작성합니다. 함수형 컴포넌트 성능이나 메모리 사용에 있어 약간의 이점이 있음 Hook을 통해 state, lifeCycle을 구현함 클래스형 컴포넌트에 비해 표현이 간결함 클래스형 컴포넌트 ES6(ECMA Script 2015)부터 추가된 Class를 통해 컴포넌트 선언 함수형 컴포넌트와 Hook이 등장하기 전에 폭넓게 사용되었기 때문에, 레거시 코드에서 자주 발견할 수 있는 형태 표현방법이 좀 더 명시적이고, 함수형 컴포넌트 보다 약간 기능이 더 많음 클래스형 컴포넌트 생명주기 - 암기할 필요는 없지만 각 단계를 ..
이 글은 A Simple Explanation of React.useEffect()를 바탕으로 번역된 내용입니다. 잘못된 해석이 있을 수 있으며, 모든 권리는 원저자에게 있으며 원저자의 요청에 따라 언제든지 수정/삭제될 수 있습니다. React hook의 풍부한 표현식은 상당히 인상적입니다. hook을 사용하면 적은 코드를 작성하면서 더 많은 작업을 할 수 있습니다. 하지만 hook의 간결함에는 대가가 있습니다. 상대적으로 사용하기 어렵죠. 함수형 컴포넌트에서 side-effect를 관리하기 위한 useEffect() hook이 특히 사용하기 어렵습니다. 이 포스트에서는 useEffect() hook은 언제 어떻게 사용해야하는지 안내해드립니다. 1. useEffect()는 Side-effect를 위한 함..
useEffect()? React에서 제공하는 useEffect()는 Side-Effect를 처리하기 위해 사용한다고 합니다. 그렇다면 Side-Effect는 무엇일까요? 의료계에서 말하는 부작용의 의미는 아니고, 컴퓨터 공학에서 사용하는 다른 의미가 존재합니다. Side-Effect? 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말합니다. 예를들어 함수에서 전역변수의 값을 변경하거나 혹은 함수 외부에 존재하는 버튼의 텍스트를 변경하거나, 파일을 쓰거나, 쿠키 저장, 네트워크를 통해 데이터를 송신하는 것 등이 있습니다. Side-Effect는 절차형 프로그래밍에서 흔히 존재하는 작업이었고 무조건 나쁜 패턴이라고는 볼 수 없습니다. 하지만 Side-Effect는 프로그램을 ..
drawable과 drawable-v21 폴더만 생성되는 이유 언제부턴가 Android 프로젝트를 생성하면 res 폴더에 drawable과 drawable-v21 폴더만 생성됩니다. 과거에는 픽셀 밀도에 따라 drawable-mdpi, drawable-xhdpi ... 등의 폴더가 생성되었는데, 2015년 9월 Android Studio 1.4버전부터 Vector Asset Studio 도구가 추가되면서 drawable과 drawable-v21만 생성되도록 변경된 것입니다. drawable과 drawable-v21 폴더만 생성되는 이유를 간단히 설명하자면, Android Studio 1.4 부터 벡터 이미지를 중점적으로 사용하도록 변경되었지만 벡터 이미지는 안드로이드 v21 (5.0 롤리팝)부터 지원합니..
Import 종류 Dart 언어에서 import는 크게 3가지로 나누어집니다. 1. dart core library import : Dart Core Pageckage에서 제공하는 library의 경우 'dart:' 접두사를 사용하여 importimport 'dart:math'; 2. package import : 패키지명+/lib 폴더부터 시작되는 절대경로를 사용하여 import import 'package:package_name/absolute/path.dart'; 3. relative import : 현재 파일부터 시작되는 상대경로를 사용하여 import import '../models/user.dart'; Import 정렬순서 Dart Coding Standard에 따르면 import 구문들은 다..
파일, 폴더 작명규칙 Flutter에서 강제하는 작명규칙은 없습니다. 하지만 Dart 언어를 사용하기 때문에 Dart Coding Standard에 따라 작명합니다. 파일명은 소문자로만 구성합니다 운영체제에 따라 대소문자 처리 규칙이 다르기 때문에, 사전에 문제를 방지하기 위해 항상 소문자만 사용합니다. 파일명이 길어질 경우 구분자는 언더바('_')를 사용합니다 운영체제에 따라 허용되는 특수문자가 다릅니다. 운영체제에 따라 문제가 발생하지 않도록 언더바(_)만 사용하며 다른 특수문자(공백, 하이픈 등)은 사용하지 않습니다. 폴더명 정해진 규칙은 없지만 대게 아래와 같은 폴더명을 사용합니다. models : Model 성격의 Data Class providers, prov, viewmodels, vm : ..
Flutter에서는 코딩에 대한 구체적인 표준이나 규범을 정의하지 않고 있습니다. 하지만 Flutter는 Dart 언어를 사용하기에 Dart의 Coding Standard를 준수하여 작성하게 됩니다. 여기서는 Dart의 Coding Standard를 정리해 보았습니다. 식별자 (Identifiers) Dart에서는 UppderCamelCase, lowerCamelCase, lowercase_with_underscores 네이밍 규칙을 사용합니다. UppderCamelCase : 대문자로 시작하며, 각 단어의 시작 문자를 대문자로 합니다. (예: UpperCamelCase) lowerCamelCase : 소문자로 시작하며, 각 단어의 시작 문자를 대문자로 합니다. (예: lowerCamelCase) low..
- TypeScript
- React
- ASP.NET Core
- Xamarin.Forms 요약
- material-ui
- Xamarin.Forms
- Xamarin
- flutter
- Android
- Vue
- .NET Standard
- npm
- VisualStudio
- WPF
- AntDesign
- Xamarin.Forms eBook
- ios
- Xamarin.iOS
- StringComparison
- MS SQL
- Total
- Today
- Yesterday