개발
-
webpack개발/react 2020. 12. 13. 15:10
webpack 은 자바스크립트로 짠 애플리케이션의 모듈 관리용 툴이다. 애플리케이션에서 필요한 모듈의 의존성을 관리하고 프로젝트용 코드를 만들어준다. 예로 리액트 자바스크립트에서 필요한 babel, style-loader, css-loader 같은 스타일용 로더, 애플리케이션의 시작위치를 정하는 entry, 디버깅용 devtool 설정, 서버 관리까지 모두 webpack을 이용해서 관리가 가능하다. 짜치는 일들을 하나로 묶어서 관리해주는 라이브러리니 배워두면 프로젝트 관리할 때 크게 도움이 될 것 같다. 1. Configuration webpack.config.js 파일을 통해서 webpack에서 관리하고 싶은 설정을 추가할 수 있다. 아래 코드는 튜토리얼 프로젝트에서 추가한 webpack 설정 코드다...
-
localStorage개발/react 2020. 12. 11. 18:00
리액트의 localStorage는 Android의 SharedPreference나 iOS의 UserDefaults 처럼 애플리케이션 단위로 key-value 값을 저장할 수 있는 라이브러리다. 아래 코드를 보면 getItem 함수에 key값을 넣어서 값을 받아오고 setItem 함수에 key 값을 넣어서 값을 업데이트한다. 아래 코드를 보면 JSON 라이브러리를 사용해 변환하는 과정이 있는데 이 이유는 localStorage에서는 string의 형태로만 저장이 가능하기 때문이다. 그래서 일반 텍스트를 사용하는 것이 아니면 모두 JSON을 이용해 값을 변환해서 저장해야한다. 배열 같은 값을 저장한다면 어차피 변환하는 과정이 필요하기 때문에 항상 써두는 것도 나쁘지 않을 것 같다. class App exte..
-
Props개발/react 2020. 12. 11. 18:00
props는 리액트에서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 할 때 사용하는 기능이다. 아래 그림처럼 Header가 App 안에 포함되어 있을 때 App에서 Header에게 title과 subtitle을 전달하게 되는데 이를 props를 이용해서 할 수 있다. 1. 데이터 전달 class App extends React.Component { constructor(props) { super(props); } render() { const title = '아는개발자' const subtitle = '리액트를 공부해봅시다' return ( ) } } 상위 컴포넌트의 render() 함수에서 하위 컴포넌트를 리턴할 때 내부에 key와 value로 전달한다. Header 컴포넌트에 subtitle로 전..
-
state개발/react 2020. 12. 11. 18:00
state는 리액트 컴포넌트 내에서 사용할 변수를 관리하는 역할을 한다. 예로 간단하게 정수 값을 표시하고 1씩 증가시키고 감소시키는 버튼이 있다고 하자. 아래와 같은 기능을 제공하는 앱이라면 컴포넌트중 누군가는 현재 화면에 표시되는 값을 들고 있어야 한다. 1. state 관리 이 값은 컴포넌트내의 state 변수에서 관리한다. 아래 코드를 보면 App 컴포넌트의 생성자에서 state를 만들고 그 안에 counter라는 값을 초기화 하는 것을 볼 수 있다. 그리고 render() 함수에서 현재 state 값을 참조해 counter 값을 보여주고 있다. class App extends React.Component { constructor(props) { super(props); this.state = {..
-
item decoration개발/안드로이드 2020. 12. 6. 14:25
recycler view를 사용할 때 item 간의 간격을 다르게 주고 싶을 때가 있다. 예를 들어 a타입과 b타입의 아이템 사이의 간격은 상하 10dp, b타입과 c타입의 간격은 상하 5dp 이런식으로 설정하거나 더 보편적으로는 마지막 아이템인 경우에는 간격을 좀 더 띄워서 넣으려고 하는 경우가 있다. 이때 가장 빠르게 떠오르는 방법은 recyclerview의 adapter에서 position별로 margin을 주는 경우인데 이렇게 하면 안된다. recyclerview에서 자체적으로 position을 관리하기 때문에 내가 보고 있는 recyclerview에서 관리하고 있는 position이 다르다. 그래서 나는 분명히 제대로 준것 같은데 실제로 보면 다른 item에 margin이 들어간다. 이 부분이 ..
-
babel개발/react 2020. 12. 6. 14:12
babel은 JFX로 작성된 react javascript 파일을 브라우저에서 인식할 수 있도록 변경해주는 컴파일러다. 예시로 아래처럼 생긴 코드를 브라우저에 렌더링 하려고 하면 const appRoot = document.getElementById('app'); function renderApp() { // JSX - JavaScript XML var template = Hello react var appRoot = document.getElementById('app'); ReactDOM.render(template, appRoot); } renderApp() 요런 에러가뜬다. 이건 JFX로 작성된 형태를 브라우저에서 읽을 수 없기 때문이다. react에서 기본적으로 만들어주는 프로젝트를 사용하면 이런..
-
arrow function개발/react 2020. 12. 6. 13:59
요즘 트렌드 언어 답게 react에서 사용하는 javascript도 arrow function으로 함수를 줄일 수 있다. 자바에서 사용하는 람다나 swift의 closure 랑 비슷하게 이름없는 함수(anonymous) 를 사용해서 1회성의 함수를 따로 선언하지 않고 삽입해서 쓸 수 있는 기능이다. 이 함수들은 모양새는 다르지만 모두 똑같이 제곱값을 리턴하는 함수다. const square1 = function(x) { return x * x }; const square2 = (x) => { return x * x; }; const square3 = (x) => x * x; 객체 내에서 함수로 들어갈 때도 동일하게 줄일 수 있다. const user = { name: 'kwony', cities: ['p..
-
Realm개발/iOS 2020. 12. 5. 15:21
Realm은 오픈소스로 운영되는 모바일용 데이터베이스 클래스다. CoreData 처럼 관계형 데이터베이스를 읽고 쓰는 것을 지원하고있다. 개인적으로 CoreData를 사용하는 것 보다 훨씬 직관적이고 사용하기가 간편하다. 이번 포스트에서는 Realm을 Swift에 사용하는 방법을 간단히 정리해본다. 1. Realm cocoapod 임포트 pod 'RealmSwift', '~> 4.4.1' RealmSwift 라이브러리를 임포트시킨다. 몇 ios 버전에선 이전 Realm 버전으로 임포트하면 persmission 에러가 뜬다고 해서 4.4.1 버전으로 임의로 설정했다. 2. 클래스 설정 import Foundation import RealmSwift class Category: Object { @objc d..