개발새발, 써놓기

favicon generator : https://favicon.io/

https://www.favicon-generator.org/

어울리는 색 조합찾기

https://color.adobe.com/ko/create/color-wheel

https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event 

ㅇ를 입력하면 초성, 중성, 종성을 조합을 할 수 있게 되면서 compositionstart가 trigger되는 듯 하다.

document.addEventListener('compositionstart', function(e){
	debugger;
});

https://ko.wikipedia.org/wiki/%EC%9C%84%EC%A7%80%EC%9C%84%EA%B7%B8#cite_note-2  // 용어공부

Sencha htmlEditor를 이용할 때 IE와 Chrome에서 동작 차이

sencha extjs의 htmlEditor: https://examples.sencha.com/extjs/7.8.0/examples/kitchensink/#froala-document-ready 

참고로 IE디버깅을 위해서는 Edge를 켜고 IE로 로드, IE 개발자도구 (%systemroot%\system32\f12\IEChooser.exe) 를 통해 IE전용 디버그 툴을 열어야 가능하다. 

그리고 htmlEditor에 줄바꿈을 넣고 싶었는데, <br><br>을 두개 넣어야 cursor까지 옮길 수 있었다. 

<br>을 하나만 넣었을 때는 입력하고있던 cursor가 옮겨지지 않았는데 두개 넣으니 옮겨지더라. 

stackoverflow의 아래를 읽고 시도해보았다. 

https://stackoverflow.com/questions/20552474/how-does-execcommand-insertbronreturn-work 

첫 번째 차이점, <br> 태그 chrome에서는 사라지고 IE에서는 남아있다. 

텍스트 입력 후에 두번째 <br>이 사라져있음을 볼 수 있다.

하지만 IE에서는 ?

두번째 <br>태그가 여전히 남아있는 것으로 확인된다.

p태그를 추가하였을 때, 재밌는 현상이 있는데,

<br>태그도 같이 생성된다는 것이다.

텍스트를 입력하면 (개발자도구에서 해당 element를 선택해놓고 텍스트입력을 해보면) <br>태그가 텍스트 입력했을 때 사라져있음을 볼 수 있다. 

하지만 IE에서는 텍스트를 입력했어도 뒤에 <br /> 태그가 남아있었다. 

두 번째 차이점, range의 범위가 다르다. 

let selection = document.getSelection();
let range = selection.getRangeAt(0);
let currentNode = range.startContainer;

currentNode를 확인해보면 Chrome에서는 한글을 입력에 enter를 쳐서 확인해도 range의 startOffset과 endOffset이 같은데,  IE에서는 한글을 입력중에 엔터를 친 경우에 아직 조합이 끝났다고 보지않아 startOffset과 endOffset이 차이가 있었다. 

https://ko.javascript.info/comparison

alert('01' == 1); //true
alert('01' === 1); //false

alert(null >= 0); //true
alert(null <= 0); //true
alert(null == 0); //false
alert(null == undefined); //true

alert(undefined >= 0); //false
alert(undefined <= 0); //false

alert(isNaN(undefined)); //true

null은 기타 비교 연산자(>, <. >=, <=)와 연산될 때는 숫자형으로 변환돼 0으로 취급된다. 

undefined는 숫자형으로 변환될 때 NaN으로 변환된다. NaN이 피연산자인 경우 비교 연산자는 항상 false를 반환한다.

아래 포스팅 참고

/xl/sharedStrings.xml ~

xlsx 확장자를 zip으로 바꾼 후 /xl/sharedStrings.xml 파일을 열어 error가 나는 문자열을 확인한다.

https://bathildis.tistory.com/76 

https://velog.io/@hslim8888/%EC%97%91%EC%85%80%EC%9D%B4-ZIP-%ED%8C%8C%EC%9D%BC%EC%9D%B4%EC%97%88%EB%8B%A4%EB%8B%88

https://learn.microsoft.com/en-us/previous-versions/office/developer/office-xp/aa140066(v=office.10)?redirectedfrom=MSDN

str.replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2580-\u27BF]|\uD83E[\uDD10-\uDDFF])/g, '');

참고

https://stackoverflow.com/questions/10992921/how-to-remove-emoji-code-using-javascript

ScrollView는 여러 컴포넌트와 view를 담을 수 있는 스크롤되는 container

https://reactnative.dev/docs/using-a-scrollview

import React from 'react';
import {Image, ScrollView, Text} from 'react-native';

const logo = {
  uri: 'https://reactnative.dev/img/tiny_logo.png',
  width: 64,
  height: 64,
};

// 아래로 스크롤바를 밀어서 페이지 이동할 수 있다. 
// pagiongEnabled prop을 넣으면 swipe 될 때 scroll view의 size 몇 개를 넘기고 멈춘다. 
// 자세한 사항: https://reactnative.dev/docs/scrollview#pagingenabled
// maximumZoomScale, minimumZoomScale prop을 통해서 사용자가 줌인, 줌아웃 가능하게 할 수도 있음.
// 화면에 맞지 않는 긴 리스트가 있다면 FlatList 사용 권장
const App = () => (
  <ScrollView>
    <Text style={{fontSize: 96}}>Scroll me plz</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 96}}>If you like</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 96}}>Scrolling down</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 96}}>What's the best</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 96}}>Framework around?</Text>
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Image source={logo} />
    <Text style={{fontSize: 80}}>React Native</Text>
  </ScrollView>
);

export default App;

FlastList 변하지만 구조적으로 유사한 데이터의 스크롤되는 리스트를 담는 컴포넌트. 시간이 지남에 따라 변하는 아이템이 있는 데이터의 긴 리스트에 잘 작동한다.

★ 일반적인 ScrollView와 달리 화면에 현재 보이는 요소들만 렌더링한다. 한 번에 모드 요소를 렌더링하지 않음. ★

FlastList 컴포넌트는 data와 rederItem 두 가지의 prop이 필수이다. data는 리스팅할 데이터. renderItem은 데이터에서 하나 꺼내서 렌더링되는 컴포넌트를 돌려준다. 

import React from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        // 데이터들을 전부 Text 컴포넌트로 렌더링 된다. 
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>
  );
};

export default FlatListBasics;

section header 를 통해 논리적으로 구분되는 데이터를 렌더링하고 싶으면 SectionList를 사용할 수 있다.

import React from 'react';
import {SectionList, StyleSheet, Text, View} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const SectionListBasics = () => {
  return (
    <View style={styles.container}>
      <SectionList
        sections={[
          {title: 'D', data: ['Devin', 'Dan', 'Dominic']},
          {
            title: 'J',
            data: [
              'Jackson',
              'James',
              'Jillian',
              'Jimmy',
              'Joel',
              'John',
              'Julie',
            ],
          },
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
        renderSectionHeader={({section}) => (
          <Text style={styles.sectionHeader}>{section.title}</Text>
        )}
        keyExtractor={item => `basicListEntry-${item}`}
      />
    </View>
  );
};

export default SectionListBasics;

list view 공통의 특징으로 서버에서 가져오는 데이터를 보여준다. 

서버에서 가져오는 데이터에 관한 자세한 문서: https://reactnative.dev/docs/network 

Text input은 사용자가 글을 입력할 수 있게하는 핵심 컴포넌트.

onChangeText: 텍스트가 변할때마다 호출되는 함수

onSubmitEditing: submit될 때 호출되는 함수

https://reactnative.dev/docs/handling-text-input

import React, {useState} from 'react';
import {Text, TextInput, View} from 'react-native';

const PizzaTranslator = () => {
  // text는 시간에 따라 변하므로 state에 저장한다.
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text
          .split(' ')
          .map(word => word && '🍕')
          .join(' ')}
      </Text>
    </View>
  );
};

export default PizzaTranslator;

※ 변하는 것만 re-render 한다.

https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable 

// AS-IS
function App() {
  /* 여기에서 키보드 타자를 칠 때마다 (onChange될 때 마다) 
     setFirstName 을 통해 함수를 호출하고 다시 렌더링 되는데, 
     re-rendering performance를 최적화 하기 위해서는,
     <PageContent /> 는 input의 state에 영향을 받지 않으므로
     input의 state를 다루는 컴포넌트를 따로 만든다. */
  const [firstName, setFirstName] = useState('');
  return (
    <>
      <form>
        <input value={firstName} onChange={e => setFirstName(e.target.value)} />
      </form>
      <PageContent />
    </>
  );
}

// TO-BE
function App() {
  return (
    <>
      <SignupForm />
      <PageContent />
    </>
  );
}

function SignupForm() {
  const [firstName, setFirstName] = useState('');
  return (
    <form>
      <input value={firstName} onChange={e => setFirstName(e.target.value)} />
    </form>
  );
}
/* 이 경우 performance가 상당히 향상되는데, 
   이제는 키입력에 따라 onChange 이벤트가 호출될 때,
   SignupForm만 다시 렌더링하기 때문이다. */