분류 전체보기

Contents JSX은 react를 사용해 개발할 때 거의 필수적으로 사용 JSX란? JS: JavaScript JSX : A syntax extension to JavaScript(자바스크립트의 확장 문법) JSX : JavaScript + XML/HTML JSX 코드 // 대입연산자 오른쪽에 html 코드가 나옴 // JavaScript코드와 HTML 코드가 결합된 JSX 코드 const element = Hello, world!; JSX의 역할 JSX는 내부적으로 XML/HTML 코드를 JavaScript 코드로 변환하는 과정을 거침 그렇기 때문에 실제로 우리가 JSX로 코드를 작성해도 최종적으로는 JavaScript 코드가 나오게 됨 아래에서 JSX 코드를 JavaScript 코드로 변환하는 역..

Contents 앞에서는 기존에 있는 웹사이트에 react를 적용하는 방법에 대해 배워보았다 하지만 새로운 웹사이트를 만들 때에는 굳이 그렇게 할 필요가 없다 처음부터 react가 적용되어 있는 상태로 개발을 시작하면 되기 때문 그래서 react로 웹사이트를 개발할 때에는 주로 create-react-app을 사용 create-react-app : react로 웹애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태. 프로젝트를 생성해주는 도구 (실습) create-react-app 필요한 것 Node.js v14.0.0 이상 npm v6.14.0 이상 VS Code create-react-app은 npx 명령어를 이용하여 실행 npx : npm package를 설치한 이후에 곧바로 실행(exec..

Contents 1. (실습) HTML만으로 간단한 웹사이트 만들기 index.html 작성 소플의 블로그 소플의 블로그에 오신 여러분을 환영합니다! 2. (실습) CSS를 사용하여 웹사이트 스타일링하기 styles.css h1 { color:green; font-style: italic; } index.html에 styles.css 적용 브라우저로 열때는 다음과 같이 마우스 오른쪽 버튼 클릭 > Open with Live Server 3. (실습) 웹사이트에 React.js 추가하기 react와 react-dom ,react component 가져오기 react component 만들기 그냥 react component가 이렇게 생겼구나 하고 넘어가기 // 아주 간단한 react의 함수 컴포넌트 fun..

retrofit을 테스트해보기 위해 아래 블로그를 참고했다 [Kotlin][Android] retrofit2 이용한 HTTP 통신 코틀린을 통해 간단한 http 통신을 테스트 해보겠습니다. 간단한 GET, POST 요청을 진행할 예정입니다. 서버쪽은 간단한 php 코드를 이용하였고 상세한 세팅과 코드는 생략하였습니다. 포스팅에서 stickode.tistory.com 모델 클래스 선언 DataModels.kt에 선언 package com.asiae.retrofit2test data class HTTP_GET_Model( var something: String? = null, var users: ArrayList? = null ) data class UserModel( var idx: Int? = null,..

이제 앱을 실행해 테스트하는 방법을 살펴보자 2가지 방법 안드로이드 스튜디오가 제공하는 가상 기기 이용 실제 스마트폰 이용 가상 기기에서 실행 안드로이드 가상 기기는 AVD(Android Virtual Device)라고 하며 흔히 에뮬레이터(Emulator)라고 부름 먼저 AVD로 앱을 테스트하는 방법을 살펴보자 안드로이드 스튜디오에서 오른쪽 위에 있는 [Device Manager]를 클릭하면 그림처럼 디바이스 매니저(Device Manager) 창이 나타남 디바이스 매니저 창에는 안드로이드 개발 환경을 구축하며 자동으로 설정된 AVD가 목록 형태로 보여줌 AVD는 버튼(▶)을 클릭하여 실행 가능 만약 디바이스 매니저 화면에 AVD가 보이지 않거나, 새 AVD를 만들고 싶다면 버튼을 클릭 새 AVD를 만..

Contents 프로젝트 생성 안드로이드 스튜디오를 실행하면 첫 화면에서 [New Project]를 선택해 새로운 프로젝트 만들기 새로운 프로젝트를 만드는 첫 번째 단계는 앱이 실행될 플랫폼과 템플릿을 선택하는 것 안드로이드 앱은 스마트폰뿐만 아니라 웨어러블, TV, 자동차 등 여러 플랫폼에서 실행되지만, 이 책에서는 스마트폰에서 실행되는 앱을 만듦 왼쪽 메뉴에서 [Phone and Tablet] 선택 후 템플릿 목록에서 빈 화면을 제공하는 [Empty Views Activity] 선택 빈 화면 말고도 화면이 아예 없는 템플릿부터 네비게이션, 전체 화면, 지도, 탭 화면 등 다양한 템플릿 제공 그다음으로 프로젝트 정보를 입력하는 화면이 나타남 여기서는 Name 부분에 AndroidLab이라고 입력하고 나..

설치 파일 내려받기 아래 사이트 접속 Download Android Studio & App Tools - Android Developers Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today. developer.android.com 클릭 설치 파일 내려받았으면 바로 실행해서 설치 시작 설치 과정에서 안드로이드 가상 기기와 설치 위치 등의 옵션을 바꾸지 않고 Next를 클릭하다가 이 나오면 클릭 그러면 안드로이드 스튜디오가 기본 옵션으로 설치됨 설치가 완료되면 를 클릭하고 가 체크된 상태에서 를 클릭해 ..

Retrofit이란? Retrofit은 스퀘어에서 만든 HTTP 통신을 간편하게 만들어주는 라이브러리 Retrofit은 1 버전과 2 버전이 있지만 Retrofit2가 2015년에 나왔으므로 지금 Retrofit이라고 하면 대부분 Retrofit2라고 봐도 무방 따라서 이 책에서 소개하는 Retrofit은 Retrofit2를 의미 retrofit 소개 Retrofit A type-safe HTTP client for Android and Java square.github.io Retrofit을 이용하려면 먼저 프로그램의 구조를 이해해야 한다 Retrofit은 네트워크 통신 정보만 주면 그대로 네트워크 프로그래밍을 대신 구현해 줌 위의 그림에서 interface는 코틀린의 interface 키워드로 직접 ..

RecyclerView 동작 과정 구현하기 1. activity_main.xml 안에 RecyclerView 생성 2. RVAdapter라는 코틀린클래스 생성 // RecyclerView.Adapter는 RVAdapter.Viewholder를 사용하여 RecyclerView에 데이터를 표시하고 관리하는 데 사용되는 어댑터 // 매개변수로 문자열 데이터의 리스트인 items를 받고 RecyclerView.Adapter를 상속받음 class RVAdapter (val items : MutableList) : RecyclerView.Adapter(){ override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RVAdapter.ViewHolder {..

Contents MainActivity에서 Adapter로 a,b,c란 데이터를 보낸다 그러면 Adapter에서 listview_item.xml에 a,b,c를 하나씩 값을 넣어서 activity_main.xml에 있는 listView에 넣어줌 구현하기 1. activity_main.xml에 mainListview라는 이름의 리스트뷰를 만든다 이 리스트뷰에 아이템들(a,b,c)을 하나씩 넣어주어야 함. 하나씩 넣어주는 역할을 Adapter가 담당 MainActivity에서 Adapter로 데이터를 넣어주고 Adapter에서 데이터들을 하나하나 listview_item.xml에 넣어서 activity_main.xml에 있는 listview에 하나씩 넣어주어야 함 일단 MainActivity에서 Adapter..