코딩을 보라

채팅화면을 구성하는 2가지 방법에 대해 알아봅시다! 1. FlatList의 inverted prop 사용 const data = [ "안녕하세요! 채팅을 입력해주세요", "안녕", "반갑습니다!", "나는 보라야", ] inverted prop을 사용하면 data는 위가 아닌 아래부터 배치가 됩니다. (좌) 이 상태라면, data가 추가될 때마다 위에 쌓이게 됩니다. 따라서 data.reverse()를 통해 data의 순서를 역으로 세팅해줍니다. (우) 아주 간단하죠! 그런데 data의 첫원소인 "안녕하세요! 채팅을 입력해주세요"가 빨간박스의 좌상단이 아닌, 파란박스의 좌상단부터 배치되게 할 수는 없을까요? 그렇다면 inverted는 포기해야..😶‍🌫️ (하는 줄 알았는데 현구님께서 댓글을 달아주셨어요..

메세지 큐 시스템: SQS,Worker,Cron,Queue API Server 목표 - 대량의 푸시를 Main Server 영향 가지 않도록 [정해진 시간에, 따로, 안전하게] 보내기 : 유저 경험 최적화🔥 : DB 부하 줄여 비용 절감🔥 현재 문제 상황 : Main Server에서 [DB에게 무리한 데이터를 요청]하고 [무거운 로직을 메인서버에서 돌려] 사용자에게 푸시를 보내는 과정에서 부하가 발생하여, [비용이 들고] [유저 경험을 안좋게] 만든다. 문제점: [DB에게 무리한 데이터를 요청] 해결법: DB에게는 최대한 심플하게 데이터 요청 where절에 많은 요청 금지. 최대한 select만 해서 데이터 가져오고, 나머지 데이터 필터링은 (DB보다 값싼) 인스턴스 안에서 하자. 문제점: [무거운 로직..

Debounce 도입 배경 아래 화면은 루빗 앱에서 진행되는 회원가입의 최종 화면이다. - "이대로 시작할래" 버튼을 누를 때 회원가입 API 호출이 일어난다. - API 호출 결과, DB에 User가 하나 생성된다. - 이 때 "이대로 시작할래" 버튼을 여러번 누른다면? User가 여러개 생성된다. - 그렇다면 User가 여러개 생성되는 것을 방지해야한다. - 방지하기 위해 버튼을 누르는 순간 loading state를 true로 만들어 해당 버튼을 비활성화 시킨다. 위 조건을 코드로 구현하면 아래와 같다. const [totalSignupLoading, setTotalSignupLoading] = useState(false); /** 회원가입 */ const signup = () => { setTot..

구글 플레이스토어 구독상품을 유저가 구독하면 GPA.1111-1111-1111-11111 이런식으로 주문 ID가 생긴다. 22.02.15에 처음 구독하고 그 다음에는 갱신을 한다고 해보자. 그러면 주문ID는 매번 새롭게 생성될까? 아니다. 자세히 살펴보니 일련의 규칙이 있었다. 위 케이스를 보면, 동일한 주문ID 뒤에 붙는 숫자만 1씩 늘어나는 것을 볼 수 있다. 사진에는 나와있지 않지만, 최초 구독은 GPA.1111-1111-1111-11111 만 붙고, 1회차 갱신은 GPA.1111-1111-1111-11111..0 이 된다. 따라서, GPA.1111-1111-1111-11111..10 을 해석하면 이건 11회차 갱신이 되는 것이다! 총 12번을 결제한 유저인 것이다. (고마운 유저분이다!) 이렇게 ..

이미 깃헙에 ssh 올려져 있는데도, 로컬 터미널에서는 git push 시 암호 입력해야하는 경우가 있다. 그런 경우에는, 로컬 ssh-agent에 암호가 등록되어있지 않은 경우다. ssh-agent: SSH 키를 관리하고 키를 사용할 때마다 암호를 입력하지 않도록 도와주는 프로그램. eval "$(ssh-agent -s)" ssh-add ~/.ssh/id_rsa 이렇게 하면 등록 완료! 이제 로컬에서 git push 마다 암호를 입력하지 않아도 된다. 출처: Chat GPT (고마워 gpt.....)

원하는 기능 // KST(UTC+9) 기준, "2023-02-17 18:00:00"

react native에서 날짜 관련 코드를 다룰 때, dayjs 라이브러리를 사용하고 있다. 등록되지 않은 timezone 한국 시간으로 고정시켜주고 싶어서 다음 코드를 사용했는데, import dayjs from 'dayjs'; import DayJSUtc from 'dayjs/plugin/utc'; import DayJSTimezone from 'dayjs/plugin/timezone'; dayjs.extend(DayJSUtc); dayjs.extend(DayJSTimezone); const time = dayjs.tz("2023-02-17 09:00:00", "Asia/Seoul"); RangeError: com.facebook.hermes.intl.JSRangeErrorException: Inv..

아스키 아트 : 텍스트와 특수문자만을 조합하여 사진,그림,텍스트를 흉내내는 것을 말한다. : 이모티콘도 문자로 그림을 표현하는 점에서 아스키 아트의 일종이다. ex) -__- , :) 알아두면 재밌는 아스키 아트! 적절한 곳에 이용해보자.. 우리 회사에서 일하셨던 서버 개발자님은 로컬 서버를 켤 때 이 아스키 아트를 이용하셨다. 서버 켤 때마다 괜히 기분 좋음~😁😁 그렇다면 어떻게 만들까? 아래 사이트에서 다양한 폰트로 만나볼 수 있다. 아스키 아트 생성기 사이트👇 https://textkool.com/ko/test-ascii-art-generator?text=Your%20text%20here%20 Test ~330 fonts Ascii 아트 생성기 | TextKool 복사 및 붙여 넣기 Ascii 아트..

첫번째 InvalidParameterValue 오류 An error occurred (InvalidParameterValue) when calling the UpdateEnvironment operation: Environment named xxx is in an invalid state for this operation. Must be Ready. 환경 상태가 ok가 아닌 다른 상태면 github action 도중 오류가 나는 것 같다. 사진처럼 ok 상태일 때 배포를 다시 진행해보자! 두번째 InvalidParameterValue 오류 An error occurred (InvalidParameterValue) when calling the UpdateEnvironment operation: No Ap..

AWS 로그를 뜯어보던 중... 다음 에러를 발견했다. PayloadTooLargeError: request entity too large 그대로 구글링하니 해결법은 쉬웠다. 파싱하려는 데이터의 크기가 너무 크기 때문에 생기는 에러이며, 파싱할 수 있는 최대치를 늘려주면 해결된다. 기본은 100kb인데, 50mb까지 늘려주었다. import { urlencoded, json } from 'body-parser'; app.use(json({ limit: '50mb' })); app.use(urlencoded({ limit: '50mb', extended: true })); body-parser란? - 요청의 본문을 해석해주는 미들웨어다. - post, put 요청 메소드의 request.body를 읽어올 ..