2021년 12월 13일 월요일

Javascript 전체내용 From MDN

Javascript 및 웹 개발에서 백과사전과도 같은 MDN을 요약 정리해놓은 문서

Ref

What is Javascript

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions.

JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

  • Prototype-based programming: Class의 명시적 선언 없이, 인스턴스에 property와 method를 선언하여 class를 만드는 방식

Compiling and Linking

  • Compilation

    Programming Language를 Machine Language로 변환하는 과정

    <filename>.o or <filename>.obj 파일 생성: machine language file

    에러 형식: a missing semicolon, an extra parenthesis

  • Linking

    각각 떨어져 있는 machine language file 을 OS가 실행할 수 있는 하나의 Executable File로 묶는 과정

    에러 형식: missing or multiple definitions

  • Compilation phase와 Linking phase를 분리하는 이유

    파일 변경 시 매번 전체 파일을 Compilation 하는 건 비효율적임. 수정된 파일만 Compilation 혹은 Linking 하여 효율성을 높인다. IDE에서 대체적으로 잘 제공해주는 기능

  • JIT Compilation (Just-in-time)

    compilation during execution of a program (at run time)

    JIT compilation is a combination of the two traditional approaches to translation to machine code—ahead-of-time compilation (AOT), and interpretation - and combines some advantages and drawbacks of both.

    Compiled 코드는 속도가 높다 + interpretation은 유연성이 높다

    JIT compilation is a form of dynamic compilation, and allows adaptive optimization such as dynamic recompilation and microarchitecturespecific speedups.

Fundamental

  • JS를 활용하여 브라우저의 APIs를 활용할 수 있다. APIs

    • DOM API, Geolocation API, Canvas & WebGL, Audio & Video API (HTMLMediaElement & WebRTC)
  • JS의 실행환경은 브라우저의 탭이다 ← Execution environments : 각 탭은 완전히 독립 환경을 가지고 있다. ← 보안에 좋음

  • JS의 실행 순저는 Top-bottom 따라서, 순서가 중요함

  • JS는 Interpreted programming 언어 (the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.) 이지만 대부분의 모던 JS 인터프리터는 perfomance를 높이기 위해 just-in-time compiling 테크닉을 활용한다. (JavaScript 소스 코드는 스크립트가 사용되는 동안 더 빠른 바이너리 형식으로 컴파일되어 최대한 빨리 실행할 수 있습니다. 그러나 JavaScript는 컴파일이 미리 처리되지 않고 런타임에 처리되기 때문에 여전히 Interpreted 언어로 간주됩니다.)

  • Dynamic in client-side: 실시간으로 새로운 HTML table이나 서버로 부터 오는 data를 feeded되는 것을 말한. Static과 반대

  • DOM이 Parsing 되기 전 js가 수행되는 오류를 방지하기 위해

    • Internal: document.addEventListener("DOMContentLoaded", function() {..
    • external: <script src="script.js" defer></script>
    • </body> tag 전으로 js코드를 뒤에 배치할 순 있지만, 그 동안 js가 완전히 block 되기 때문에 js의 loading/parsing 측면에서 performance issue 가 있을 수 있다.
  • async & defer

    • async - execution순서를 보장 X. 각 스크립트가 독립적일 경우 / defer - html이 모두 파싱된 이후 ⇒ DOM이나 순서에 영향을 받을 script라면 필요

Basic Syntax

  • var: Back when JavaScript was first created, this was the only way to declare variables. The design of var is confusing and error-prone. So let was created in modern versions of JavaScript, a new keyword for creating variables that works somewhat differently to var, fixing its issues in the process.
    • Hoisting: 모든 선언문을 위로 끌어올리는 행위
    • you can declare the same variable as many times as you like
  • template literal:
    • use backtick characters (```) const greeting =Hello, ${name};
    • Template literals respect the line breaks in the source code. To have the equivalent output using a normal string you'd have to include line break characters (\\n) in the string
  • basic array methods
    • indexOf, push, pop, shift, unshift, splice, filter, map, split, join ..
  • Looping method
  • Function Call
    • btn.onclick = displayMessage; ← 클릭했을 때 함수 호출
    • btn.onclick = displayMessage(); ← 선언시 바로 함수 호출
  • event: 특정 상황에 수행되는 매커니즘 ex) onClick, onLoad
    • When such a block of code is defined to run in response to an event, we say we are registering an event handler. Note: Event handlers are sometimes called event listeners - 사실 js에서 처리하는거이 아니라 브라우저 api에서 처리하는 것 or Nodejs Event Model

    • The modern mechanism for adding event handlers is the [addEventListener()](<https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener>) method. rather then Event handler properties ← bad practice

      • counter part & abort

        • btn.addEventListener('click', bgChange, { signal: controller.signal });
          • controller.abort();
        • btn.removeEventListener('click', bgChange);
      • multi register

        myElement.addEventListener('click', functionA);
        myElement.addEventListener('click', functionB);
        
    • event object

      • function bgChange(e) {e.target.style.backgroundColor = rndCol;}
      • e.target : 이벤트가 발생한 html element를 가리킨다
    • e.preventDefault(): default 이벤트 block - link

    • Bubbling and capturing

      • capturing: onclick 이벤트가 <html> 태그 부터 밖에서 안으로 전부 수행
      • target: 클릭한 해당 element의 onclick만 수행
      • bubbling: 클릭한 target element에서부터 <html> 까지 밖으로 전부 onclick 수행
      • In modern browsers, by default, all event handlers are registered for the bubbling phase.
      • e.stopPropagation();
      • Event delegation
  • arrow functions () => x is valid shorthand for () => { return x; }.

Object

  • object literal — we've literally written out the object contents as we've come to create it. This is in contrast to objects instantiated from classes

    const person = {
    	name: 'Bob',
    	age: 32,
    	greeting: function() {
    		alert('Hi! I\\'m ' + [this.name](<http://this.name/>) + '.');
    		}
    	};
    
  • dot notation === bracket notation →  person.name.first === person['name']['first']

    • bracket notation: dynamic member name → person[myDataName] = myDataValue;
  • this: he this keyword refers to the current object the code is being written inside → context change 에 대응할 수 있음

  • bult-in objects: Array, Math 등.. 그러나 built-in object가 항상 자동으로 instance 를 만드는건 아님. 예를들면, Notification의 경우 필요할때 new object를 만듬

  • constructor function: define and initialize objects and their features - normal function의 shortcut 개념. object를 선언하고 return 할 필요가 없다.

    function Person(name) { // constructor function usually start with Capital letter
    	[this.name](<http://this.name/>) = name;
    	this.greeting = function() {
    	alert('Hi! I\\'m ' + [this.name](<http://this.name/>) + '.');
    	};
    }
    
    const instance = new Person('Paul')
    
  • Object() constructor

    let person1 = new Object({
    	name: 'Chris',
    	age: 38,
    	greeting: function() {
    	alert('Hi! I\\'m ' + [this.name](<http://this.name/>) + '.');
    	}
    });
    
  • create() method: using an existing object as the prototype of the newly created object.

    let person2 = Object.create(person1);Object.getPrototypeOf(obj).
    
  • Prototype

    • Prototypes are the mechanism by which JavaScript objects inherit features from one another. JavaScript is often described as a prototype-based language
    • Prototype chain: 아래에서 부터 해당 property 가 있는지 체크하고 없으면 그 위로, 그 위로

    • access to prototype

      • proto: deprecated before ECMA2015
      • Object.getPrototypeOf(obj): new access
    • property of Object

      • Object.prototype. : inherit 시키려는 property
      • Object. : Object 자체에서만 쓸 수 있는 property
    • create() Object

      • let person2 = Object.create(person1); ← person1을 prototype으로 Object를 생성
      • person2.proto ← return person1 Object
    • constructor property

      • person1.constructor ← return Person()
      • person2.constructor ← return Person()
    • modifying prototypes: methods added to the prototype are then available on all object instances created from the constructor

      Person.prototype.farewell = function() {
      	alert(this.name.first + ' has left the building. Bye for now!');
      };
      
      • performing delete person1.__proto__.farewell or delete Person.prototype.farewell would remove the farewell() method from all Person instances.
  • Inheritance

    • call function: This function basically allows you to call a function defined somewhere else, but in the current context
    function Teacher(first, last, age, gender, interests, subject) {
    	Person.call(this, first, last, age, gender, interests);
    	this.subject = subject;
    }
    
  • using JSON: js object와 형식이 유사하나, string의 경우 큰 따옴표로 써야함. 네트워크 통신에 유리한 구조. JSON.parse , JSON.stringify 활용

    request.open('GET', requestURL);
    request.responseType = 'text'; // now we're getting a string!
    request.send();
    
    request.onload = function() {
    var superHeroesText = request.response; // get the string from the response
    var superHeroes = JSON.parse(superHeroesText); // convert it to an object
    populateHeader(superHeroes);
    showHeroes(superHeroes);
    }
    
  • Object.assign(): Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
  • Object.call():call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다
function Product(name, price) {
	[this.name](<http://this.name/>) = name;
	this.price = price;
}
function Food(name, price) {
	Product.call(this, name, price);
	this.category = 'food';
}
console.log(new Food('cheese', 5).name);
// expected output: "cheese"

Async

The answer is because JavaScript, generally speaking, is single-threaded

  • Thread: Each thread can only do a single task at once

    • javascript는 main thread 하나로만 구성될 수 있음, 하지만 Web worker 등의 툴을 통해서 worker thread를 활용할 수 있음
      Main thread: Task A --> Task C
    Worker thread: Expensive task B
    
    • 하지만 web worker는 두가지 문제점이 존재
      • DOM에 직접 접근할 수 없음
      • 언제 끝나는지 정확한 시점을 알 수 없음
  • There are two main types of asynchronous code style you'll come across in JavaScript code, old-style callbacks and newer promise-style code

    • Async callback: call back function을 argument로 넘겨주는 것
    • Promises: Promises are the new style of async code that you'll see used in modern Web APIs
        • chain으로 연결 가능, 순서 보장, 에러 핸들링
  • event queue: async operation이 호출되면 곧바로 event queue로 넘어가서 main thread가 끝난 후에 실행되어, 결과를 js에 다시 넘겨준다

  • Promise

    let timeoutPromise = new Promise((resolve, reject) => {
    	setTimeout(() => {
    		resolve('Success!');
    	}, 2000);
    });
    
  • Async: Invoking the async function now returns a promise

    • let hello = async function() { return "Hello" };
  • Await: await only works inside async functions

    • await can be put in front of any async promise-based function to pause your code on that line until the promise fulfills, then return the resulting value.
    • error handling: You can use a synchronous [try...catch](<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch>) structure with async/await

중급

고급

프로토타입 메소드 상속

  • prototype chain: 속성이나 메소드를 해당 instance에서 못찾으면 prototype에서 찾고 없으면 다시 그 prototype에서 찾는다.window.Object.prototype까지 찾았는데도 없다면 undefined를 출력
var o = {
  a: 2,
  m: function(b){
    return this.a + 1;
  }
};

console.log(o.m()); // 3
// o.m을 호출하면 'this' 는 o를 가리킨다.

var p = Object.create(o);
// p 는 프로토타입을 o로 가지는 오브젝트이다.

p.a = 12; // p 에 'a'라는 새로운 속성을 만들었다.
console.log(p.m()); // 13
// p.m이 호출 될 때 'this' 는 'p'를 가리킨다.

객체 생성 방법

var o = {a: 1};
// o 객체는 프로토타입으로 Object.prototype 을 가진다.
// 이로 인해 o.hasOwnProperty('a') 같은 코드를 사용할 수 있다.
// hasOwnProperty 라는 속성은 Object.prototype 의 속성이다.
// Object.prototype 의 프로토타입은 null 이다.
// o ---> Object.prototype ---> null
var a = ["yo", "whadup", "?"];
// Array.prototype을 상속받은 배열도 마찬가지다.
// (이번에는 indexOf, forEach 등의 메소드를 가진다)
// 프로토타입 체인은 다음과 같다.
// a ---> Array.prototype ---> Object.prototype ---> null
function f(){
	return 2;
}
// 함수는 Function.prototype 을 상속받는다.
// (이 프로토타입은 call, bind 같은 메소드를 가진다)
// f ---> Function.prototype ---> Object.prototype ---> null
var b = Object.create(a); // only for ECMAScript 2015
// b ---> a ---> Object.prototype ---> null

Class 키워드 - only for ECMAScript 2015

'use strict';

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }
  get area() {
    return this.height * this.width;
  }
  set sideLength(newLength) {
    this.height = newLength;
    this.width = newLength;
  }
}

var square = new Square(2);
// square ---> Square ----> Polygon ----> Object.prototype ---> null

프로토타입 상속의 종류

  • 위임형 상속: 메소드를 위임 상속할 경우 모든 객체가 각 메소드에에 대해 하나의 코드를 공유하므로 메모리를 절약할 수 있다. 일반적 상속
class Greeter {
	constructor (name) {
	[this.name](<http://this.name/>) = name || 'John Doe';
}
hello () {
	return Hello, my name is ${ this.name };
}
const george = new Greeter('George');
const msg = george.hello();
console.log(msg); // Hello, my name is George
  • 연결형 상속: 연결형 상속은 한 객체의 속성을 다른 객체에 모두 복사함으로써 상속을 구현하는 방법이다.이 상속법은 Javascript 객체의 동적 확장성을 이용한 방법이다. 객체 복사는 속성의 초기값을 저장하기 위한 좋은 방법이다.
const proto = {
	hello: function hello() {
		return Hello, my name is ${ this.name };
	}
};
const george = Object.assign({}, proto, {name: 'George'});
const msg = george.hello();
console.log(msg); // Hello, my name is George

엄격모드 'use strict'

엄격 모드는 평범한 JavaScript 시멘틱스에 몇가지 변경이 일어나게 합니다.

  1. 기존에는 조용히 무시되던 에러들을 throwing합니다.
  2. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어집니다.
  3. 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지합니다.

Typed Array

빠르고 쉽게 형식화 배열의 원시 이진 데이터를 조작할 수 있게 하는 것

메모리 관리

Concurrency model & Event Loop

  • Stack: 함수 호출 코드실행 스택
function foo(b) {
	var a = 10;
	return a + b + 11;
}
function bar(x) {
	var y = 3;
	return foo(x * y);
}
console.log(bar(7)); //returns 42
  • Heap: 객체들이 저장되는 영역. 구조화되지 않은 넓은 영역
  • Queue: JavaScript 런타임은 처리 할 메시지 목록 인 메시지 대기열을 사용합니다. 각 메시지에는 메시지를 처리하기 위해 호출되는 관련 함수가 있습니다. 런타임은 대기열에서 가장 오래된 메시지부터 처리하기 시작합니다. 그렇게하기 위해, 메시지는 큐에서 제거되고 해당 기능이 메시지를 입력 매개 변수로 호출됩니다. 언제나 그렇듯이, 함수를 호출하면 그 함수의 사용을위한 새로운 스택 프레임이 생성됩니다.
  • Event Loop: 웹 브라우저에서 이벤트 리스너가 부착된 이벤트가 발생할 때마다 메시지가 추가됩니다. 리스너가 없으면 이벤트는 손실됩니다. 클릭 이벤트 핸들러가 있는 요소를 클릭하면 다른 이벤트와 마찬가지로 메시지가 추가됩니다.
while(queue.waitForMessage()){
	queue.processNextMessage();
}

2021년 11월 25일 목요일

재림 # 1

인생의 가장 큰 수수깨끼는 자신이 가진 프레임으로 세상을 바라볼 때 불현듯 찾아온다.

기적은 마치 유성처럼 부지불식간에 우리 옆을 아무 일 없다는 듯 비켜지나갈때도 있지만

그 반대의 경우를 생각할 수 없을 만큼 인간의 삶은 너무나도 짧고 허망할 뿐이다.


"두.. 두줄. 어째서..?"

지원은 두 눈을 의심했다. 하늘이 무너지는 기분을 느끼며 차가운 바닥에 쓰러졌다. 

"이럴 수 없어.. 이럴 수 .."

꽃다운 나이 스무살, 연애경험도 없는 지원에게 동정임신이란 형언할 수 없는 끔직한 기적이었다.


"그래. 예수가 어떤 존재였을지 한번 상상해보세요."

나이가 지긋해 보이는 흰 머리의 교수는 교단을 이리저리 돌아다니며 졸고있는 학생들 앞에서 혼잣말 처럼 중얼거리는 듯 강의를 이어나갔다.

"예수라는 한 사람은 말이죠, 사실은 그렇게 처음부터 밝은사람이 아니었을지도 몰라요"

"싱글맘의 품에서 자라며 온갖 굳은일을 하며 자라났죠. 어찌보면 약간의 애정결핍과 세상에 대한 분노 또한 마음속에 있었을지도 모릅니다."

고산대 신학대학 교수 곽철호는 그렇게 혼잣말 같은 강의를 마치고 너저분한 랩실로 돌아왔다.  랩실에는 젊어보이지만 어딘지 모르게 추레한 이미지의 대학원생 경표가 맨 바닥에 늘어지듯 누워있었다.

"얌마 경표야! 그렇게 맨바닥에 누워있지 말라고 해도!"

"어엇..! 교수님 일찍오셨네요"

경표는 슬그머니 상체를 일으켰지만 아직 엉덩이는 바닥에 대고 다시 늘어지게 하품했다.

"그 지난번에 말씀하신 자료들은 일단 몇개 찾아서 웹하드에 저장해두었는데요. 이게 뭐 워낙 드문 케이스다 보니 사실 자료 찾기가 쉽지 않네요."

교수는 혀를 끌끌 차며 의자에 털썩 앉았다.

"그래 뭐. 그렇게 드문 일이니 사람들이 기적 기적 하는거지.. 자주 일어났으면 기적이라고 하겠어? 일단 지난번 자료도 한번씩 다시 스크랩 해서 정리좀 하자."

교수는 무심히 웹하드를 뒤져보며 파일을 하나씩 열어본다.

경표는 간신히 바닥에서 일어나며 혼잣말을 했다.

"에휴.. 말이 안되는 일이니까.."


2024년 10월 6일 서울 밤10시. 초등학교 고학년 쯤 되보이는 학생이 검은 후드를 눌러쓴 채 다 쓰러져가는 빌라의 공동 쓰레기통을 비우고 있다.

"후우 .. 하아"

각종 더러운 쓰레기들. 비닐과 비닐 안에 쌓여있는 음식물 쓰레기들을 다 튿어진 장갑으로 하나씩 가져온 쓰레기통에 담는다. 

"에이 씨발! 정말 못해먹겠네"

어린아이의 입에서 나왔다고 하긴 어려울 찰진 발성의 육두문자가 허공을 갈랐다.

삑-삑-삑

공동 현관 문을 열며 누군가 걸쭉하게 취해서 들어온다. 남자가 비틀비틀 대며 학생에게 불안하게 다가갔다.

"이새끼 너 .. 누구야?"

취한 남자는 초면에 반말을 시전하며 아이의 후드티를 뒤집어 깠다. 

어린아이의 얼굴 이라고는 믿기 힘들정도로 세상의 풍파를 다 맞은 듯한 표정과 눈 밑에 자그마한 상처. 액면가는 중학생은 되어보이지만 영양 부족 탓인지 골격과 키는 아직 초등학생 수준에 머물러 있는듯한 체구. 

16살 진호는 화들짝 놀라며 다시 후드를 뒤집어 썼다.

"아니.. 저 그냥 청소하러.."

"이새끼가 말 똑바로 안해?"

착!

다짜고자 진호의 뺨을 때리는 취한남성

털썩

진호는 성인 남성의 힘을 버티지 못하고 다리에 힘이 풀려 주저앉았다.

"후.. 씨발"

주저앉은 채로 주머니에서 뭔가를 꺼내는 진호.

진호는 다시 일어서며 작은 주머니칼을 꺼내 남자앞에 들이밀었다.

"이 씨발새끼야. 내가 쓰레기 치우러 왔지 뺨맞으려고 온줄알아?"

남자는 슬슬 뒷걸음질 치더니 계단위로 휙 올라가버렸다.

"하아.. 저 개같은"

한참을 그렇게 덩그러니 떨리는 손으로 주머니칼을 쥔채 서 있었다. 옆은 눈물이 앞을 가렸지만 진호는 분노를 꾸역꾸역 누르며 하던일을 마저 해나갔다.

2021년 1월 10일 일요일

프론트경험 없는 개발자가, React Native로 앱 만든 후기

대기업 프로그래머 6년차. 하지만 앱개발 및 프론트앤드 경험은 거의 없음.

참고로 안드로이드 IOS 개발경험은 전무하였고, 실제 업무는 데이터 처리 및 클라우드쪽.


사실 프론트앤드 개발하면서 가장 어려웠던 부분은, Javascript 진영을(landscape) 이해하는 것 이었다.

볼륨이 워낙 커서 어떤 순서로 어떻게 이해해야 할지 상당히 난감했던 기억이 있었다.

 * 추천드리는 순서: ES3~ES7까지의 히스토리와 문법 이해 -> Javascript 내부구조(이벤트루프, 비동기) + Nodejs이해 -> BOM, DOM 조작 관련 커멘드 -> Webpack 들 모듈러에 대한 이해


사실 안드로이드나 IOS 도메인의 내부 구조에 대해서는 잘 몰랐고 지금도 잘 모른다. 이미 RN이 상당한 수준으로 감싸고 있기 때문에 많은경우 신경 쓸 필요가 없다. (과거에는 manual install 이나 linking 등등 떄문에 android를 너무 모르면 개발하기 쉽지 않았다.)

ReactJS 와 React Native는 웹과 앱이라는 도메인이 다르지만 구조적 개념은 비슷하다. 따라서 둘 중 하나만 배우면 둘다(웹과 앱) 잘할 수 있다.

--

React Native를 사용하며 느꼈던 점

1. UI 조작이 직관적이다: DOM 을 직접 조작하는건 매우 고통스러운 일이며, 직관적이지 않다. React는 각 UI 요소를 전부 컴포넌트로 관리하여 살제로 우리에게 보이는 UI묶음이 하나의 객체처럼 여겨진다. 즉, UI와 실제 코드의 괴리감이 적은편


2. 맨바닥부터 시작하지 말라: 물론 React Native 도 미리 제공하는 예쁜 컴포넌트들을 다수 가지고있지만,  그런 기본 컴포넌트보다 디자인이 들어간 컴포넌트를 원할것이다. 필자는 Kitten UI 를 사용하였고, 일종의 Wrapper로써, 꽤나 전문적이어 보이는 디자인을 활용할 수 있었다.


3. 찾아보면 다 있다: 내가 필요한 기능을 집어넣고 싶을때 가장 먼저 해야할것은 구글링. 리액트 네이티브의 써드파티들은 생각보다 엄청나게 일을 열심히한다. 예를들면 카메라 조작이 필요하다면 검색을 잘 해서 가장 최근까지 활발히 개발되어있는 컴포넌트를 사용하면 된다. 


4. 설치하면서 자주 막힌다: 이게 특히나 안드로이드쪽 번들링할때 문제가 많이 발생하는데 왠만하면 gradle 떄문인 경우가 많다. 설치가 좀 꼬였을 경우 왕왕 cd ./android & ./gradlew clean 으로 해결되는 경우가 꽤 많다. 그 외에도 자잘하게 이슈들이 계속 발생한하는데 무었이 문제인지 알기 어려운 부분이 너무 많다. 이떄는 그냥 'what went wrong' 부분을 카피해서 구글링하면 대체로 해결법을 찾을 수 있다. 


5. 될수있으면 서버리스로: firebase를 일정부분 무료로 사용할 수 있기때문에, 구태여 백엔드를 만들지 않아도 서버리스로 쉽게 무료로 앱을 만들 수 있다. 또한 Invertes라는 회사가 firebase에 대해 react native 에서 조작할 수 있도록 패키지를 만들었고 문서도 상당히 잘 되어있기 때문에 활용도가 높다.


6. 상태에 대한 이해가 필수: 다음과 같은 키워드에 대해 잘 이해해야 한다. Redux, Hook, useEffect, useStatue, Subecribe. 리액트는 무조건 상태값 조정으로 모든 동작이 이루어진다. 리액트의 정적구조는 JSX 가 책임지고 동적구조는 function 과 status가 책임진다. 처음 앱을 설계할 때 이 상태값을 어떻게 관리하고 조작할 것인지 미리 생각해두는게 스파게티코드를 막는 매우 중요한 부분이다.


7. 성능에 대해서 신경써야한다: 컴포넌트 상태가 자주 바뀌고 그에따라 자주 랜더링될수록 사용자는 버벅거림을 느낄 수 있다. 개발할 떄 항상 이점을 염두해두고 같은 동작이라면 최대한 랜더링이 자주 되지 않는 방향으로 설계해야한다.


8. IOS 개발하려면 어쨌든 맥이 필수: 아무리 하이브리드용 언어라지만 Xcode와 에뮬레이터가 있어야 앱을 번들링해서 앱스토어에 등록할 수 있다. 또한 실물 아이폰이 없으면 아무리 에뮬레이터에서 잘 돌아가도 실제 기기에서의 동작을 보장할 수 없다. 개발 자체도 맥에서 하는게 더 편한 이유는, 리액트네이티브 코드가 안드로이드 에뮬레이터에서 썩 좋은 성능올 돌아가지 않는다.


--


결과물 : 여기저기 다니면서 맛집이나 카페 등등 기록하려고 만든 앱입니다. 친구들끼리 팔로잉 할수도 있고. 이웃들끼리 소통할 수 있는 플랫폼 입니다.


온더랜드 - 지역기반 SNS

Android: https://play.google.com/store/apps/details?id=com.duddlsdbql.ontheland

Ios: https://apps.apple.com/us/app/id1518369229#

원문: https://www.clien.net/service/board/lecture/15783611