healim

parcel-bundler/parcel#470

"build": "parcel build index.html --public-url ./",

-> --public-url ./ 안 붙였더니 빌드되고 난 이후 파일, 경로 안 맞아서 로드 안 되었음

healim

react-native 프로젝트에서 api key 저장하기

• react-native-maps 쓰면 네이티브 코드에서 api key 저장하도록 예제 나와있음
  • 앱에 직접 api-key 쓰는거 불안함
  • https://medium.com/code-better/hiding-api-keys-from-your-android-repository-b23f5598b906
    • 안드로이드는 이 방법으로 수정했는데 이게 최선은 아닌 것 같음
    • ios가 문제인데, 네이티브 파일 생성해서 수정하고 빌드 프로세스에 넣고 하는 설명 못 따라하겠다 OTL
      • info.plist에 저장하는거 안전하지 않음
  • 찾아본 결론 : client에 저장하는 정보 어떻게 하든 안전하지 않음
    • https://www.facebook.com/groups/react.native.community/permalink/1111190372349873/
• https://www.reddit.com/r/iOSProgramming/comments/5xh7my/how_do_you_securely_store_api_keys/

healim

react-native_custom-default-ui-style

• Navigation shadow 없애기
• ref : react-navigation/react-navigation#790

// index.js
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';

import { createStackNavigator } from 'react-navigation'
import App from './App';

healim

babel 설정 에러 해결하기

• babel/babel-loader#560

  If you're using Babel 7's Beta, you'll need to install and use the Babel 7 version of the plugins too, e.g.

  • parcel + react 쓰고 있었는데 front에서 async/await 쓰니까 에러 발생, 에러 내용은 위와 동일

    Uncaught ReferenceError: regeneratorRuntime is not defined

    TypeError: this.setDynamic is not a function

  • 기존 .babelrc 설정

{

healim

속성 접근자 Property Accessors

• [] 쓰는 문법(Computed property names) 헷갈려서 객체 접근하는 방법 같이 찾아봄
  • ex. form에 input 여러개일 때 입력된 값 다루는데 computed property names 문법 사용 가능 [e.target.name]:e.target.value
    • cf. 같이 봤던 예제 코드 : https://velopert.com/3634
  • [](braket notation)은 있는지 없는지 체크하면서 쓸 때 사용하는 느낌이면 .(dot notation)은 있는거 콕 찝을 때 쓰는 느낌?

Property accessors provide access to an object's properties by using the dot notation or the bracket notation.

// property accestors MDN document에 있는 예제를 ES6 문법 사용하여 테스트해봄
const person = {}
person['firstname'] = 'Mario' // braket notation

healim

웹/모바일에서 아이콘 잘 쓰는 법 탐구하기

• 리액트 js, 네이티브에서 svg 리소스 잘 활용하는 법 찾아보기
  • 아이콘으로 쓰는 경우 / 그래픽으로 쓰는 경우(애니메이션 적용시) 나뉨

svg 아이콘 사용

• svg 리소스를 font로 말아서 쓴다.
  • https://icofont.com/
• https://junojunho.com/front-end/svg-icon
  • 시행착오까지 정리 꼼꼼하게 되어있는 갓 글 발견 ㅜㅜ
• figma에서 뽑은 svg파일 하나씩 수정하는거 번거로워서 안 하고 있는데 symbol로 저장하는 방법 보고 적용해봐야겠다.

healim

parse-server-example.md

• https://stackoverflow.com/questions/35503595/local-parse-server-throwing-unauthorised-despite-correct-keys
  • api 테스트 할 때 위 예시처럼 Header에 X-Parse-Application-Id, X-Parse-Master-Key 같이 보내줘야 함
• appId, masterKey 말고

healim

리액트 네이티브 Expo 앱에서 custom font 사용하기

• create-react-native-app 으로 프로젝트 만들 때 템플릿으로 tab/blank 선택할 수 있는데 tab으로 만들면 안에서 custom font 쓴거 볼 수 있음
• blank로 앱 만들어서 [expo documents][1]에 있는 예제 보고 [폰트 넣어봄][2]
• 근데 예제에서 폰트 로드 되었는지 확인하는 방식이 번거롭다

  <View style={styles.container}>
    {this.state.fontLoaded ? (<Text style={styles.content}>Hello, world!</Text>) : null}
  </View>

• tab template 코드보면 예제처럼 삼항연산자로 로드되었는지 아닌지 체크해서 쓰는게 아니라 MonoText 컴포넌트를 만들어서 그걸 불러오는 방식으로 커스텀 폰트 사용함

healim

private, public, priviledged

• _underscore 이해하는 중
  • private 언제쓰지?
    • => 근데 deprecated 됨
    • 대신 Symbol로 처리하면 된다는 내용 본 것 같음
    • API 만들 때 외부에서 로직(?) 노출 안 되게 하려고...?
      • 아, 근데 java에서는 private 다른 object가 허용되지 않은 값 함부로 접근해서 수정하는거 못 하게 하려고 썼었음
      • 캡슐화 (?)
• Class 만드는 코드

healim

javascript underscore

• 자바스크립트 코드 보다보면 _ 사용하는거 종종 나오는데 무슨 의미인지 잘 모르겠다.
  • java에서 class의 member 같은 느낌인데 모르니 찾아보기 ㄱㄱ + private, static 개념도 같이 정리할 수 있을 듯
    • static 나오면 singleton 패턴도 같이 정리해야되는데, 그럼 prototype이랑 class도 봐야됨 ㅋㅋㅋㅋ
    • [Oracle]Understanding Class Members
      • 아 이거 설명 잘 되어있다.
        • static : 각 인스턴스에 귀속되는 값이 아니라 클래스가 공유하는 값
          • 모든 인스턴스가 동일하게 쓸 수 있음, 인스턴스 만든다고 메모리에 새로 자리 차지하는게 아니라 하나만 존재
          • static 쓰는 상황
• > you need a field to keep track of how many Bicycle objects have been created so that you know what ID to assign to the next one. Such a field is not related to any individual object, but to the class as a whole