</>

이번 글에서는 React + TypeScript 기반 프로젝트에 ESLint와 Prettier을 도입하는 과정을 설명한다. 작업은 IntelliJ IDEA Ultimate 으로 진행하지만, 굳이 IntelliJ 가 아니더라도 콘솔 및 기타 환경에서도 진행이 가능한 정도의 수준이다. React 프로젝트 생성하기 먼저, Yarn 을 활용하여 TypeScript 기반의 React 프로젝트를 'react-eslint-prettier' 라는 이름으로 생성한다. TypeScript 를 사용하지 않더라도 굳이 상관없으나 필자는 TypeScript를 활용한다. yarn create react-app react-eslint-prettier --template typescript npx 로도 다음과 같이 프로젝트를 생성할..

지난 포스트에 이어서 이번 포스트에서는 마찬가지로 Material Components가 지원하는 Bottom Navigation을 만들어 보자. 이번 포스트 역시 Material 공식 가이드 문서를 참조한다. 우리가 흔히 쓰는 앱들 안에서 하단에 탭이 위치해 탭의 버튼을 누르면 특정 페이지로 넘어가는 뷰를 본 적이 있을 것이다. 해당 페이지는 액티비티가 넘어가는 것이 아니라, Navigation의 원리로 인해 전환되는 것이다. 우선 우리가 만들어볼 화면의 완성본은 다음과 같다. 하단에 보라색 바가 있고, 아이콘과 텍스트가 결합되어 하나의 메뉴를 이루고 있다. 또한 메뉴를 클릭하면 클릭한 메뉴만 흰색으로 변하게 된다. 우선 가장 먼저 필요한 Bottom Navigation을 구현하기 위해 BottomNav..

지난 포스트에 이어 OutlinedButton 을 만들어 보겠다. 우선 지난 포스트에서 사용한 코드를 공유한다. ​ 버튼을 만들었고, 터치하면 동그란 애니메이션이 발생하는 것을 볼 수 있다. 이제 Outlined button을 살펴보자. 우선 Outlined button은 원래 MaterialButton 에 Outline 을 적용하는 style 만 추가하면 바로 결과를 확인할 수 있다. ​ xml 코드에서 MaterialButton 아래에 새로운 버튼을 추가해 보자. 지난 포스트와 마찬가지로 parent 레이아웃에 제약 조건을 잡아 주고, 너비를 150dp로 고정해 보자. 단, 두 번째 버튼의 상단은 parent가 아닌, 지난 포스트에서 만들었던 MaterialButton이 될 것이다. 두 버튼이 겹치면..

지난 포스트에 생각보다 반응이 좋아 이번 포스트에서는 이전 포스트에서 진행하였던 Gradle Sync 세팅을 바탕으로 기본적인 Material Design 을 활용하여 안드로이드 화면 내에 Material Button 을 표시해 보겠다. 이번 포스트는 이전 포스트와 비교해 버전 차이가 있을 수 있으므로 다음 build.gradle 파일을 참조하여 버전을 맞추기 바란다. (2020년 7월 기준) apply plugin: 'com.android.application' apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions' android { compileSdkVersion 29 buildToolsVersion "29.0.3" defau..

이번 포스팅에서는 Android 프로젝트에 Google Material Design 컴포넌트를 적용하는 방법을 살펴본다. Google Material Design 이란? Google에서 공식적으로 제공하는, Web, Android, iOS, Flutter 등을 대상으로 하는 디자인 라이브러리이다. 본 포스트에서는 Android에 적용하는 과정만을 담는다. https://material.io/ 안드로이드 프로젝트에 Material Design 적용 본 포스트에서 제공하는 문서에 대한 기준 환경은 다음과 같다. Java 1.8, Android Studio 3.x.x, Gradle 3.5.x 1. 새로운 Android Project를 생성 Start a new Android Studio Project를 클릭한..

이전 장들...1장. 개발환경 세팅하기 (java, eclipse)2장. Eclipse 기본 사용법3장. 자바 메인 메소드, 기본 출력4장. 컴퓨터가 읽지 않는 문자, 주석5장. 변수와 자료형6장. 상수7장. 형 변환8장. 연산자9장. 실행 흐름의 컨트롤 - if문, 삼항 연산자10장. 실행 흐름의 컨트롤 - switch문 9~10장에서는 실행 흐름의 컨트롤 중 '조건문'이라는 문법을 알아보았다. 조건문은 말그대로 실행 흐름 중에 조건을 걸어 해당 조건이 성립되면 성립될 시 해당하는 코드를 실행하고, 성립되지 않을 시 해당 코드를 건너뛰는 형식의 문법을 말한다. 이번 장에서는 실행 흐름의 컨트롤 중 '빈복문'이라는 문법을 알아볼 텐데, 이 문법도 말그대로 '반복한다'는 의미를 가진다. 프로그래머가 프로그..

이전 장들...1장. 개발환경 세팅하기 (java, eclipse)2장. Eclipse 기본 사용법3장. 자바 메인 메소드, 기본 출력4장. 컴퓨터가 읽지 않는 문자, 주석5장. 변수와 자료형6장. 상수7장. 형 변환8장. 연산자9장. 실행 흐름의 컨트롤 - if문, 삼항 연산자 이전 장에서는 if문이라는 조건문을 통해 프로그램이 모든 코드를 실행하는 것이 아닌, 조건에 맞는 코드만 실행할 수도 있다는 문법을 알아보았다. 이번 장에서도 동일한 역할이지만 문법이 약간 다른 switch ~ case ~ default문에 대해 알아보겠다. Switch ~ Case 문?! 이 역시 if 문과 비슷하게 switch문, switch case문, switch ~ case ~ default문 등 여러 가지로 불리운다...

이전 장들...1장. 개발환경 세팅하기 (java, eclipse)2장. Eclipse 기본 사용법3장. 자바 메인 메소드, 기본 출력4장. 컴퓨터가 읽지 않는 문자, 주석5장. 변수와 자료형6장. 상수7장. 형 변환8장. 연산자 이전 장에 이어 이번 장에서는 '실행 흐름의 컨트롤'이라는 개념을 살펴보도록 하겠다. '실행 흐름의 컨트롤'? 말그대로 프로그램의 실행 흐름을 컨트롤할 수 있다는 의미인 것 같은데, 정확히 어떤 의미일까? 우리는 지금까지 코드를 작성하고, 프로그램이 실행될 때 해당 코드들을 모두 차례대로 컴파일하는 과정을 거친다고 알아왔다. 하지만, 프로그래머가 프로그램의 실행 흐름을 마음대로 컨트롤할 수 있다면 어떨까? 가장 흔한 예로, 만약 사용자가 프로그램을 통해 특정 아이디로 로그인한다..