꿈꾸는 개발자

[slack_bolt] app.event 또는 app.action에서 reply 하기

mjune.kim — Mon, 15 Apr 2024 13:29:13 +0900

Reply 로 메세지를 생성하기 위해서는 아래와 같이 thread_ts 를 say로 전달해 주면 된다.

app.event

@app.event("message")
def handle_message_events(body, event, say):
	say({
       "channel": body["event"]["channel"],
       "text": "This is a threaded reply!",
       "thread_ts": body.get("thread_ts", body["event"]["ts"]),  # Use thread_ts if available, otherwise use ts
  	})

app.action

@app.action("action_id")
def button_click(ack, body, say):
    # Acknowledge the action
    ack()
    say({
        "channel": body['channel']['id'],
		"text": "This is a threaded reply!",
		"thread_ts": body.get("thread_ts", body["message"]["ts"]),  # Use thread_ts if available, otherwise use ts
  	})

[React Native] Issue - Progress bar 에서 Progress 가 채워지지 않는 문제

mjune.kim — Thu, 4 Apr 2024 10:20:37 +0900

react-native-progress 를 이용해 상태 바를 표시하게 되는 경우 아래 그림과 같이 바의 일부분만 채워지는 문제가 발생한다.

<Progress.Bar
    animated={false}
    color='pupple'
    unfilledColor='white'
    progress={progress}
    height={10}
    width={width*0.6}/>

문제 상황

이는 아래와 같이 View Component 로 Progress.Bar Component 를 감싸주면서 간단하게 해결이 가능하다.

<View>
    <Progress.Bar
        animated={false}
        color='pupple'
        unfilledColor='white'
        progress={progress}
        height={10}
        width={width*0.6}/>
</View>

[JIRA] git commit 과 연동하기

mjune.kim — Thu, 21 Mar 2024 07:18:22 +0900

Jira Ticket에 깃허브 또는 비트버킷의 커밋 을 연동하기 위해서는 커밋시 Jira 의 티켓 번호를 코멘트 처음에 기입하면 된다. 예를 들어 티켓 아이디가 JIRA-31 이라면 커밋시 "JIRA-31 Fix the issue ..." 라고 메세지를 입력하면 된다.

Commits
Include the issue key in the commit message to link the commit to your Jira issue.
For example: git commit -m "JRA-123 <commit message>"
This works by default in connected Bitbucket, GitLab, GitHub, GitHub Enterprise, and Fisheye tools

https://support.atlassian.com/jira-software-cloud/docs/reference-issues-in-your-development-work/

[React] Debugging Tip

mjune.kim — Thu, 14 Mar 2024 10:00:24 +0900

애뮬레이터에서 어플리케이션 동작 및 기능을 검증하는 과정에서 자주 경고 문구나 에러 메세지를 마주하게 된다. 디버깅 기능을 통해 콜스택을 확인할 수 있고 문제가 되는 코드가 내가 작성한 라인이면 바로 수정이 가능하겠지만 때로는 콜스택이 리액트 라이브러리 내부에서 발생하는 경우에는 디버깅이 어려워 질수 있다. 다행히 리액트에서는 아래 화면과 같이 예외 경우가 발생할 경우 동작을 일시 정지하여 문제되는 코드를 바로 확인할 수 있다. 이는 'Pause on uncaught exceptions' 과 'Pause on caught exception'을 활성화 시킨 후 확인할 수 있다.

[React] Combined Directory

mjune.kim — Mon, 19 Feb 2024 11:44:34 +0900

서로 다른 두개의 디렉토리 변수를 하나로 결합 한 경우

a = {"1": "a", "2": "b"};
b = {"3": "c", "4":"d"};
c = {...a, ...b} // c = {"1": "a", "2": "b","3": "c", "4":"d"}

[React Native] Enable/Disable debugging mode in android emulator

mjune.kim — Wed, 14 Feb 2024 12:33:04 +0900

안드로이드 에뮬레이터에서 개발을 하다보면 특정 컴포넌트 동작이 느린 경우가 발생한다.

내 경우엔 react-native-modal 을 import 해 실행해보니 화면에 보여지기까지 대략 2~3초의 시간이 걸리는 문제가 발생하였다.

Debugging Mode로 실행하는 경우 뷰 전환시 딜레이가 발생하는 경우가 있으니 아래와 같이 디버깅 모드를 해제후 다시 시간을 확인해 보길 권장한다.

디버깅 모드를 해제하려면 윈도우: Ctrl+m, 맥: CMD+m 으로 설정변경이 가능하다.

[React Native] Lifecycle of Class Component

mjune.kim — Tue, 13 Feb 2024 13:06:52 +0900

getDerivedStateFromProps(props, state) : 상태 또는 파라미터 변경 후 기존에 생성되었던 컴포넌트 오브젝트의 render() 를 호출시 해당 변경된 값들을 반경시킬때 사용할 수 있다.

static getDerivedStateFromProps(props, state) {
if (state.key != props.route.params.key) {
return new_state; // { key: new_value, ... }
} else {
return null;
}
}

Prop object:

State: Class component 의 state object (e.g., this.state = {key: value})

[troubleshooting] Icon was not shown when using react-native-vector-icons

mjune.kim — Tue, 31 Oct 2023 16:33:30 +0900

React native 에서 제공하는 아이콘을 사용하기 위해 react-native-vector-icons 패키지 설치후 관련 설정을 반!드!시! 추가로 해줘야만 한다. 그렇지 않고 패키지 만을 설치하고 아이콘을 호출하면 네모 모양의 이상한 아이콘만 계속 표시될 수 있다.

안드로이드 앱을 개발하는 경우 번들에서 앱이 참조할 수 있도록 추가로 설정을 해줘야만 한다.

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

https://github.com/oblador/react-native-vector-icons

GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling.

Customizable Icons for React Native with support for image source and full styling. - GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source a...

github.com

OpenVPN Client App For MAC

mjune.kim — Tue, 29 Aug 2023 09:22:52 +0900

맥북에서 사용할 OpenVPN 클라이언트 앱을 찾고 있다면 TunnelBlick 을 추천한다.

일단 무료이고 단순한 UI 로 사용하기가 쉽다. 단점이라면 아무래도 필요한 기능만 있다보니 사용자 편의성 측면에서는 부족한 기능일 듯 싶다.

https://tunnelblick.net/downloads.html

[React] 컴포넌트의 생명 주기

mjune.kim — Mon, 31 Jul 2023 12:21:04 +0900

리액트 컴포넌트의 생명주기(Life Cycle)는 컴포넌트가 생성되고, 업데이트되거나, 제거될 때 특정한 이벤트들을 호출하는 것을 의미한다. 리액트 컴포넌트는 다음과 같은 생명주기를 가지고 있다:

constructor(): 컴포넌트가 처음 생성될 때 호출.
getDerivedStateFromProps(): 컴포넌트가 처음 생성되거나 props가 변경될 때 호출된다. 이 메서드에서 state를 업데이트할 수 있다.
render(): 컴포넌트가 렌더링될 때 호출된다. 이 메서드에서 컴포넌트의 HTML을 생성한다.
componentDidMount(): 컴포넌트가 DOM에 마운트된 후 호출된다. 이 메서드에서 컴포넌트가 DOM과 상호작용하기 위한 작업을 수행할 수 있다.
componentDidUpdate(): 컴포넌트가 업데이트된 후 호출된다. 이 메서드에서 컴포넌트의 상태가 변경된 후 수행할 작업을 구현할 수 있다.
componentWillUnmount(): 컴포넌트가 DOM에서 언마운트되기 전에 호출된. 이 메서드에서 컴포넌트가 DOM과 상호작용하는 작업을 중지할 수 있다.

이 외에도 리액트 컴포넌트에는 다음과 같은 생명주기 메서드가 있습니다:

static getDerivedStateFromProps(): constructor() 메서드와 비슷하지만, static으로 선언해야 한다.
shouldComponentUpdate(): 컴포넌트가 업데이트되어야 하는지 여부를 결정하는 메서드이다.
getSnapshotBeforeUpdate(): render() 메서드가 호출되기 전에 DOM의 상태를 가져오는 메서드이다.

리액트 컴포넌트의 생명주기 메서드는 컴포넌트의 특정 단계에서 특정 작업을 수행하기 위해 사용된다. 예를 들어, componentDidMount() 메서드는 컴포넌트가 DOM에 마운트된 후 통신을 시작하기 위해 사용될 수 있다.

리액트 컴포넌트의 생명주기 메서드는 선택적으로 구현할 수 있다. 하지만 특정 작업을 수행하기 위해 생명주기 메서드를 사용해야 하는 경우에는 반드시 구현해야 한다.

lifecycle

https://www.w3schools.com/react/react_lifecycle.asp

React Lifecycle

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.