Develop in a heartbeat

본문 바로가기

인기글

下 편: 동남아 국가 인프라를 고려한 서비스의 기술적 개선 과정 下 편: 동남아 국가 인프라를 고려한 서비스의 기술적 개선 과정 上 편에서 앞서 인도네시아(동남아) 국가 인프라 상황과 스마트폰 보급 상황 그리고 국내 상황과의 차이점 등등을 전반적으로 알아보았습니다. 上 편: 동남아 국가 인프라를 고려한 성능 최적화 개선 과정 上 편: 동남아 국가 인프라를 고려한 성능 최적화 개선 과정 현재 서비스 중인 MyVenus는 인도네시아 중심으로 동남아 국가들을 타겟팅한 뷰티 플랫폼 서비스 App입니다. 제 개발자 커리어의 첫 서 k0502s.tistory.com 다시 정리하자면 동남아(인도네시아) 국가의 인프라 및 상황은 아래와 같습니다. 동남아(인도네시아) 국가의 인프라 및 상황 1. 국내보다 불안정한 인터넷 환경. 2. 대략 90%가 Android 디바이스, 나머지 10.. 2023.09.22
NextJs - 4편: SEO(검색 엔진 최적화)를 위한 종류별 세팅 SEO(검색 엔진 최적화)를 위한 종류별 세팅 이번에는 NextJs을 사용하는 이유 중 하나인 SEO에 대해 더 깊이 기록하고자 4편을 쓰게 되었습니다. NextJs의 SSR이라는 특징으로 SEO 엔진에 최적화되었다는 것은 사실이지만 여기서 끝나는 것이 아니라 SEO 엔진에 최적화를 위해 추가로 설정해야 하는 개발 및 환경 세팅이 존재합니다. NextJs만 쓰면 모든게 해결되면 좋겠지만 추가적인 최적화 세팅 및 개발이 없다면 NextJs을 사용하는 가치를 최대한으로 끌어올릴 수 없으니 필수라고 생각합니다. 현재 실제로 제가 서비스 운영 중인 MyVenus 인도네시아 뷰티 플랫폼의 NextJs 프로젝트로 구축한 서비스 메인 웹 페이지를 통해 예시 또한 보여줄 예정입니다. MyVenus - Aplikasi .. 2023.09.18
React Native - E2E UI 테스트 도입, Detox E2E UI 테스트 도입, Detox Detox Made For CI Execute your E2E tests on CI platforms like Travis CI, CircleCI or Jenkins without grief. wix.github.io 💡 현재 서비스 운영 중인 사용자 앱의 서비스가 점점 커지다 보니 개발 및 유지보수 후 예측할 수 없는 사이드 이펙트로 인한 중요 비즈니스 기능들의 이슈에 대한 영향이 더 많이 있을 수 있다고 판단하였습니다. 그래서 사용자 앱 서비스 프로덕션 배포전 E2E 테스트를 거쳐갈 필요가 있다고 판단하여 Detox라는 E2E 자동화 테스트 라이브러리를 도입하여 개발 환경에 E2E 자동화 테스트 환경을 구축하게 되었습니다. Detox는 React Native 앱의.. 2023.08.18
실제 서비스 운영중 생긴 API 인증(Certified) 이슈 트러블슈팅과 Axios 인터셉터(interceptors) 실제 서비스 운영 중 생긴 API 인증(Certified) 이슈 트러블슈팅과 Axios 인터셉터(interceptors) 운영 중인 서비스 프로젝트에는 Axios라는 API 연동 라이브러리를 사용하고 있습니다. Axios 기능을 통해 RestFul 한 기능들을 만들고 기능을 생산하는데 많은 도움을 주고 있는 라이브러리입니다. Axios interceptors는 API을 관리하는데 아주 유용하면서도 필수적이라고 생각합니다. request/response 둘 다 공통적으로 호출 작업을 실행하기 전 처리하는데 매우 유용합니다. Axios interceptors의 간단한 사용 방법과 Axios interceptors을 활용을 통한 서비스 이슈 해결을 기록하려 합니다. Axios interceptors 란? 인터.. 2023.08.21
上 편: 동남아 국가 인프라를 고려한 서비스의 기술적 개선 과정 上 편: 동남아 국가 인프라를 고려한 서비스의 기술적 개선 과정 현재 서비스 중인 MyVenus는 인도네시아 중심으로 동남아 국가들을 타겟팅한 뷰티 플랫폼 서비스 App입니다. 제 개발자 커리어의 첫 서비스 운영/개발이었는데 동시에 첫 해외 서비스를 운영하는 경험 또한 하게 되었습니다. 서비스 운영/개발을 하기 전 과거에는 SI 업무를 통해 App 개발을 해보았기에 App 개발에는 완전 처음이 아니었습니다. 하지만 SI 업무에서 했던 App 개발들은 모두 국내용이었고 사실 이것은 일반적이었습니다. 하지만 지금 이렇게 동남아 해외 서비스 App을 개발/운영하면서 국내용 서비스와 다르게 추가적으로 개발/운영하는데 꽤 많은 고려사항이 있었습니다. 이번 上편에서는 국내 서비스와 동남아 서비스를 하면서 알게 된 .. 2023.09.18
NextJs - 3편: NextJs에서의 서버 컴포넌트 RSC(React Server Component) 3편: NextJs에서의 서버 컴포넌트 RSC(React Server Component) 2편에서 기록하면서 알아가게 된 NextJs 13 ver.에서 등장한 서버 컴포넌트 RSC(React Server Component)에 대하여 개인적으로 많이 생소하여 좋은 블로그 글을 발견하여 제 블로그에 기록하게 되었습니다. NextJs - 2편: NextJs 버젼 12에서 13으로 넘어오면서 2편: NextJs 버전 12에서 13으로 넘어오면서 NextJs는 12 버젼에서 13으로 넘어오면서 사용방법이 바뀔 정도로 많은 변화가 있었습니다. 당연히 최신 버전인 13을 바로 사용해도 되지만 아직도 많은 프 k0502s.tistory.com RSC(React Server Component) 서버 컴포넌트 RCC에서는.. 2023.09.14
React Native - 코드 푸쉬(Code Push) 정의 / 개발 환경 세팅 / Staging 환경 세팅 코드 푸시(Code Push) 정의 CodePush는 마이크로소프트의 Visual Studio App Center에서 제공하는 서비스 중 하나로, 클라우드 기반의 앱 원격 업데이트 서비스입니다. 원리는 git과 유사하다. git은 코드를 수정하고 우리가 터미널을 통해 수정한 코드를 커밋하고 우리의 git 서버에 push 하면 다른 개발자가 pull을 통해 내가 수정한 코드를 내려받을 수 있는 구조입니다. CodePush도 우리가 터미널에서 배포 명령을 실행하면 앱을 bundle 파일로 변환하고 이를 CodePush 클라우드 서버에 저장합니다. 그럼 사용자가 기존에 설치한 앱을 실행하면 CodePush 서버에 업데이트 여부를 확인하고 수정된 내용을 병합하는 것입니다. Code Push를 통해 얻는 이점 R.. 2023.08.10
Front End 시점에서의 서비스 대량 트래픽 발생 그리고 대응 Front End 시점에서의 서비스 대량 트래픽 발생 그리고 대응 현재 제가 운영 중인 서비스 MyVenus는 아직 초기이기 때문에 대량 트래픽이 발생하지 않는 수준입니다. 대량 트래픽에 대한 걱정은 사실 평소에 많이 하지 않고 있었습니다. 하지 어느 날 운영팀에서 운영 중인 서비스 인스타그램 광고 계정의 하나의 릴스 영상이 1600만 뷰 이상의 조회수가 발생하면서 사건의 발단이 되었습니다. 이 릴스의 광고 효과로 지금까지 경험해보지 못한 대량 트래픽이라고 말할 수 있는 수치를 기록하게 되었습니다. 엄청난 유저들이 앱을 인스톨하고 회원가입 이벤트가 엄청나게 발생한 것이었습니다. 이때 일어난 일들을 Front End 관점에서 기록하였습니다. 물론 서버 쪽의 대응이 더욱더 중요한 시점이었지만 제 포지션은 F.. 2023.08.24
React Native - 딥링크(Deep Link) Ios, Android 구현하기 딥링크란 딥링크는 특정 페이지에 도달 할 수 있는 링크를 말합니다. 그렇다면 모바일 딥링크란 모바일 어플리케이션의 특정 페이지에 도달 할 수 있는 링크를 말하는 것입니다. 가끔씩 모바일로 웹 서핑을 하다가, 어떤 버튼을 눌렀는데 네이티브 앱으로 바로 이동하는 기능을 해본적이 있을 것인데 그것이 바로 '모바일 딥링크'를 이용하여, 특정 앱 페이지로 들어가는 것입니다. 딥링크의 종류 친구들과 특정 웹 페이지를 공유할 때 자주 사용하는 웹 URL(예를 들어, https://k0502s.tistory.com/category/React%20Native) 처럼, 모바일에 어플리케이션에도 특정 페이지에 들어갈 수 있는 링크가 있는 것이라고 말할 수 있습니다. 딥링크의 형태는 앱 스킴(URL 스킴) 혹은 일반적인 ht.. 2021.10.06
서비스 운영 A/B 테스트 적용기 (feat. Firebase) 서비스 운영 A/B 테스트 적용기 A/B 테스트는 여러 많은 서비스에서 쓰이고 있는 아주 기본적인 테스트입니다. 해외 서비스는 인스타그램, 국내는 토스 등등 대표적인 서비스들도 많이 사용하는 테스트입니다. 말 그대로 A, B 두 조건의 기능 두 개를(두 개 이상이도 됩니다.) 50대 50으로 기능을 사용자들에게 골고루 배포하여 사용자들의 기능 사용 수치와 효율성을 비교하여 따져보는 것입니다. 무작정 예측으로만 기능을 때려박아 수치가 올라가는 것을 지켜보기만 하는 것이 아니라 직접 기능의 수치를 측정하여 사용자들이 진심으로 원하는 것을 현실적으로 파악하여 냉정하게 기능을 빼기도 하며 많은 도움이 되지 못할 것 같은 예상치 못한 기능들이 들어가는 경우도 있었습니다. 실제 제가 운영중인 서비스도 A/B 테스트.. 2023.08.14
IT 서비스 개발 운영 - 글로벌 서비스 다국어 지원 기능 구현하기 (feat. i18next) 글로벌 서비스 다국어 지원 1. 서비스 다국어 지원 도입 배경 MyVenus - Aplikasi Perawatan Kecantikan Terlengkap & Terpecaya #1 di Indonesia Bergabunglah dengan komunitas kami untuk menemukan solusi dari berbagai masalah seputar dunia kecantikan, melihat real review hingga mencari tahu segala hal yang berhubungan dengan treatment kecantikan maupun operasi plastik! myvenus.io 현재 제가 서비스 운영 중인 뷰티 플랫폼 MyVenus는 인도네시아 중심으로 주변 동.. 2023.08.09
프론트엔드 개발자의 백엔드 개발자/기획자/디자이너와의 협업과 투쟁 프론트엔드 개발자의 백엔드 개발자/기획자/디자이너와의 협업과 투쟁 프론트엔드 개발자는 필연적으로 백엔드 개발자 / 기획자 / 디자이너 등등 많은 다른 직군들과 협업하고 커뮤니케이션하며 업무를 진행해야 합니다. 개발자라는 직업이 혼자서 주로 일하고 사람들과 부딪히는 일이 별로 없다고도 합니다. 하지만 직접 프론트엔드 개발자가 되고 나서 일을 경험해 보니 개발자인 프론트엔드는 오히려 반대라고 생각합니다. 3년 가까이 프론트엔드 개발자로 일을 하면서 겪었던 커뮤니케이션 이슈, 협업 등등 깨달은 점들을 프론트엔드 개발자 관점에서 기록해보고자 합니다. 예비 프론트엔드 개발자 혹은 예비 기획자 / 디자이너 등등 IT 업계의 업무 방식이 궁금한 분들에게 많은 도움이 되고자 합니다. 왜 프론트엔드 개발자는 결국 부딪히.. 2023.09.06
NextJs - 2편: NextJs 버젼 12에서 13으로 넘어오면서 2편: NextJs 버전 12에서 13으로 넘어오면서 NextJs는 12 버젼에서 13으로 넘어오면서 사용방법이 바뀔 정도로 많은 변화가 있었습니다. 당연히 최신 버전인 13을 바로 사용해도 되지만 아직도 많은 프로젝트가 12 버전을 쓰고 있으며 유지보수를 위해서라도 13 버전 이전의 NextJs 사용 방법을 알고 가는 것이 맞다고 생각합니다. 아직 13버전의 Appdir와 같은 기능들이 공식 Docs에서 공식적으로 스테이블 단계에 들어갔다고 발표한 것도 몇 달이 채 되지 않았으며 12과 13의 차이점을 알고서 개발에 임하는 것이 매우 중요할 거 같아 이렇게 2편에 12과 13 버전의 차이점과 사용방법을 기록하고자 합니다. 우선 1편을 보고 읽는 것을 추천드립니다. 기본 이론 개념들이 많이 스킵됩니다. .. 2023.09.11
React native - 파이어베이스(FireBase) Ios, Android 세팅하기 파이어베이스 환경 세팅하기 파이어베이스를 react native 프로젝트에서 세팅하기 위해서는 ios 별 android별 환경 세팅을 각각 해줘야합니다. 일단 파이어베이스 홈페이지에 들어가서 공통적으로 프로젝트 생성을 해야합니다. Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 구글 로그인 후 프로젝트 생성을 클릭하여 시작을 한다. 프로젝트 이름, 요금 등등을 선택하며 생성할 수 있습니다. { "react-native": { "messaging_android_notification_channel_id": "high-priority" } } 위의 코드를 react native 루트 프.. 2021.10.06
Javascript 클래스(class) 이론 클래스(class) 클래스는 계급, 집단, 집합을 뜻 하는데 자바스크립트에서는 뜻 그대로 집단으로 나뉠 수 있다. 왼쪽 그림에서 class 파트는 직접적으로 사용되는 생성된 객체 배열 [1,2,3] 등등이 아니라 이 생성 객체를 만드는 매개가 되는 생성자 범위를 class라고 부른다. 이 class 파트에서 생성자의 메소드들을 정적 메소드, 정적 프로퍼티로 구분할 수 있으며 프로토타입의 메소드는 그냥 메소드 아니면 프로토타입 메소드라고 불린다. 생성자에 인하여 생성된 직접적으로 사용하는 객체 instance는 프로토타입 메소드에 접근이 가능하다. 왜냐하면 __proto__의 매개체를 생략 가능하므로 가능하다. 하지만 생성된 객체 instance가 정적 메소드 및 프로퍼티에 바로 접근은 되지 않는다. 프로.. 2020.12.04
NextJs - 1편: NextJs 시작을 위한 기본 이론 그리고 프로젝트 생성하기 1편: NextJs 시작을 위한 기본 이론 그리고 프로젝트 생성하기 NextJS는 ReactJs의 몇몇 한계점을 극복한 프레임워크라고 말할수 있습니다. ReactJs의 기반에서 더 좋은 SEO(검색 엔진 최적화), SSR을 통한 효율적으로 최적화된 랜더링 속도와 비용 절감 등등이 추가되었습니다. 하지만 그만큼 ReactJs에 비해 NextJs의 러닝커브가 올라갔다고 할 수도 있습니다. 그래서 NextJs에 대한 기본적인 이론과 알아야할점들을 기록하고자 합니다. ReactJs에 대한 개념이 우선적으로 알고나서 이 글을 보시면 NexJs에 대하여 더 디테일 하게 이해하는데 좋을거 같습니다. CSR과 SSR CSR과 SSR을 크게 두 가지로 비교할 수 있습니다. 1. 초기 화면 랜더링 방법. 2. 그 이후 페.. 2023.09.08
Babel 바벨 Babel 바벨 공식문서에서는 바벨을 자바스크립트 컴파일러라고 소개하며 최신 자바스크립트 문법을 사용할 수 있다고 나와있으며 더 정확하게 말하면 트랜스파일러라고 말할 수 있습니다. 왜 바벨이 필요하고 바벨이 있어야만 자바스크립트의 최신 문법을 사용할 수 있는 이유는 자바스크립트가 실행되는 환경때문입니다. 다른 언어와 달리 자바스크립트는 정말 많은 환경에서 실행되는데 웹 브라우저, NodeJS, Deno 등에서 실행되는데 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 자바스크립트 코드를 읽게 됩니다. 게다가 이렇게 실행되는 환경의 버전에도 자바스크립트는 영향을 받으며 특정 버전 이상에서만 실행되는 코드가 있고 특정 브라우저에서는 실행되지 않는 코드도 있습니다. 그렇기 때문에 모든 자바스크립트 실행 .. 2022.04.12
Javascript 프로토타입(prototype) 이론 프로토타입(prototype) 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질 때 그 객체에 연결된다. new을 이용해 만든 constructor 즉 생성자가 새로운 객체를 만들면 이 새로운 객체에 생성자의 프로토타입이라는 내용이 새로운 객체의 __proto__라는 것을 통해 연결되어 생성자을 참조하게 된다. 즉 생성자.prototype와 객체.__proto__는 같은 객체를 바라본다는 뜻이다. 그리고 __proto__는 생략이 가능하다. 한마디로 프로토타입으로 연결되어 생성된 객체가 생성자의 메소드들을 꺼내서 마음대로 쓸 수 있다는 것이다. 만약 Array 생성자가 새로운.. 2020.12.04
Javascript 클로저(Closure) 이론 클로저(Closure) 함수와 그 함수 선언될 당시의 협동이라고 말할 수 있다. 다르게 말하면 실행 콘택스트 A와 함수B가 콤비가 되어 무언가를 한다라고 볼수 있다. 여기서 눈여겨 봐야할 것은 LexicalEnviroment의 outerEnvironmentReterenced이다. 함수B와 실행 콘텍스트 A가콤비가 되어 무언가를 한다고 했는데 이는 함수 B가 A에서 선언한 무언가로 앤해 A로 접근하려고 할 때 문제가 되는데 이때 함수 B가 A로 접근할 수 있게 도와주는 함수 B의 outerEnvironmentReterenced가 초점을 맞쳐야할 대상이다. 즉 다시 말해 함수 B의 outerEnvironmentReterenced는 컨텍스트 A의 environmentRecord를 참조하므로 "컨텍스트 A에서 .. 2020.12.04
Test-Driven Development(TDD) TDD Test-Driven Development(TDD)는 매우 짧은 개발 사이클의 반복에 의존하는 소프트웨어 개발 프로세스입니다. 우선 개발자는 요구되는 새로운 기능에 대한 자동화된 테스트케이스를 작성하고 해당 테스트를 통과하는 가장 간단한 코드를 작성하고 일단 테스트 통과하는 코드를 작성하고 상황에 맞게 리팩토링하는 과정을 거치는 것입니다. 말 그대로 테스트가 코드 작성을 주도하는 개발방식입니다. TDD의 종류 - Add a test 테스트 주도형 개발에선, 새로운 기능을 추가하기 전 테스트를 먼저 작성한다. 테스트를 작성하기 위해서, 개발자는 해당 기능의 요구사항과 명세를 분명히 이해하고 있어야 합니다. 이는 사용자 케이스와 사용자 스토리 등으로 이해할 수 있으며, 이는 개발자가 코드를 작성하기 .. 2022.05.08
Javascript ES6+ Promise Promise Promise의 상태 unnsettled (미확정) 상태: pending. thenable하지 않다. settled (확정) 상태: resolved. thenable한 상태다. - fulfilled (성공) - rejected (실패) const promiseTest = param => new Promise((resolve, reject)=> { setTimeout(()=> { if(param) { resolve("해결") } else { reject(Eroor("실패")) } }, 1000) }) const testRun = param => promiseTest(param) .then(text => { console.log(text)}) //.then은 resolve 의미로 성공했을 때 .. 2020.12.22
JavaScript의 동작 원리 JavaScript의 동작 원리 자바스크립트의 동작 원리를 보기 전에 먼저 전체적인 동작 구조를 살펴봐야 하는데 자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요합니다. 자바스크립트는 엔진은 V8, Rhino, SpiderMonkey 등 다양하게 있지만 이 중에서도 가장 대표적인 예는 Google에서 만든 V8 엔진입니다. JavaScript 엔진 자바스크립트 엔진은 두 가지 구성요소로 구성됩니다. 하나는 Memory Heap(메모리 힙)이고, 다른 하나는 Call Stack(호출 스택)입니다. Memory Heap(메모리 힙)은 메모리 할당이 발생하고, Call Stack(호출 스택)은 코드 실행에 따라 스택이 하나씩 쌓이는 곳입니다. 자바스크립트를 사용하다 보면 setTimeOut() 같은 수.. 2022.04.10
MVC 패턴 MVC MVC 패턴은 'Model, View, Controller' 를 뜻하는데 프로젝트 구성요소를 나누는 일종의 패턴입니다. MVC 패턴의 기본 구성 위의 사진은 MVC 패턴의 가장 기본적인 구조를 설명하고 있습니다. 각각의 패턴들이 하는 역할은 다음과 같습니다. - Model : Controller에게 받은 요청에 따라 데이터를 관리합니다. 해당 데이터는 다시 Controller에게 전송합니다. - Controller : Client로부터 요청을 받아 데이터를 가져와야 한다면 Model에게 해당 데이터를 요청합니다. Controller는 Client, Model, View에 모두 접근할 수 있습니다. Controller는 Model로 부터 받은 데이터를 조건에 맞게 View로 .. 2022.05.08
React Hooks React Hooks React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리입니다. 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있으며 함수 컴포넌트는 클래스 컴포넌트와 다르게, 모듈로 활용하기가 쉬우므로 서로의 장점을 전부다 가지고 있습니다. Hooks 간단 소개 1. useState: 컴포넌트의 state(상태)를 관리 할 수 있습니다, 2. useEffect: 어떤 변수가 변경될때마다, 특정기능이 작동하도록 할 수 있습니다. 3. useContext: 여러개의 컴포넌트에서 사용할 수 있는, 변수 or 함수를 만들 수 있습니다. ( 전역으로 관리 ) 4. useReducer: state(상태) 업데이트 로.. 2022.05.16

티스토리툴바