Evan의 개발 저장소

react 개발자라면 react hook을 다루면서 의존성 배열을 사용해본 경험이 있을것이다. 예를 들어 flag 라는 값이 변경 할 때 마다 특정 함수를 실행하고 싶은 경우 아래 처럼 코드를 작성할 것이다. useEffect(() => { toDoFunc(); }, [flag]) 여기서 의존성 배열이 어떤식으로 작동하는지, 어떤 값들을 넣어야 하는지 이해하고 사용할 필요가 있다. 렌더링에서도 비슷한 예를 볼 수 있는데 react의 컴포넌트는 props값이 바뀌면 다시 렌더링 되는 특징을 가지고 있다. 아래 처럼 FlagComponent에 flag값을 props로 넘겨준다면 flag 값이 변경 될 때 해당 컴포넌트가 다시 렌더링 될 것이다. return ( ) 위의 예시들의 작업이 일어나는 방식은 자바스..

사내에서 개발중인 프로젝트가 여러개 있는데 어떤 프로젝트는 npm으로 또 어떤 프로젝트는 yarn classic으로 패키지 관리를 하고 있었다. 패키지를 많이 사용하다보니 생각보다 종종 dependency 의존성에 문제가 발생하였고 그럴 때마다 기존 패키지 파일을 날리고 다시 설치를 하는 수고를 부담했어야 했다. (시간도 오래 걸림) 손을 봐야겠다고 생각은 하고 있었는데 때마침 이번에 사용중인 모든 프론트 프로젝트들을 Next js (typescript)로 새로 이전하는 대규모 작업을 진행하게 되었고 이때다 싶어 팀장님께 yarn berry를 적용하자고 말씀드렸다. 팀장님께 yarn berry 관련된 포스팅 링크를 드렸고 읽어 보신 후에 적용하면 좋을 것 같다는 긍정적인 피드백을 받았다. yarn ber..

서비스를 개발하다보면 간간히 iframe을 사용해야할 일이 발생한다. 가령 도메인이 다른 서비스를 기존 서비스 내에서 보여줘야 한다던지 특정 요소 안에서 외부 서비스를 보여줘야 하는 등 생각보다 사용해야할 일이 많이 생긴다. 서로 다른 도메인을 가지고 있기 때문에 window 객체를 직접 참조하려고 하면 cors에러가 발생하게 된다. 그럼 서로 데이터를 공유하거나 통신해야하는 로직이 필요한 경우 어떻게 해야하는가? iframe 내에서 window.parent.postMessage() 메서드를 사용하고 부모 window에서 event handler 메서드를 추가해주면 iframe에서 보내주는 메세지를 부모 window에서 처리할 수 있게 된다. 뒤로가기를 부모 window에서 할 수 있게 처리하는 예시이다..

일전에 IOS에서 fastlane으로 테스트 앱 자동배포 구축에 대해 글을 포스팅했었다. [iOS / Swift] Fastlane으로 테스트 앱 자동 배포(CD) 구축하기 (1) 회사에 처음 입사하고 가장 먼저 한 일이 자동 배포 구축이었다. 왜 이 작업을 가장 먼저 했는 지는 아래에서 설명하고자 한다. 기존의 프로세스 기존의 앱 서비스 개발 방식은 아래와 같았다. 1. kwtjdtn.tistory.com IOS에서 fastlane으로 테스트앱 자동 배포 구축(2) [iOS / Swift] Fastlane으로 테스트 앱 자동 배포(CD) 구축하기 (2) 지난번 포스팅 때 Firebase App Distribution 세팅 및 이용 방법에 대해 얘기했었다. [iOS / Swift] Fastlane으로 테스..

얼마전 웹에서 Json 데이터를 엑셀 파일로 저장하는 내용을 포스팅 했었다. json 데이터가 있을 경우 엑셀 파일로 다운로드 되고 없을 경우 alert를 띄워줘야 하는데 우리는 시스템 alert가 아닌 custom alert modal을 사용했고 alert modal component을 만들면서 state update가 안됐던 것에 대해 이번에 글을 쓰고자한다. 처음 만들었던 코드 ExcelDownloadBtn.tsx interface ExcelProps { fileName: string; dataSource?: any; } export const ExcelDownloadBtn = ({ fileName, dataSource }: ExcelProps) => { const [showAlert, setSho..

static html 파일을 서버에서 serving 해야 할 필요가 있다. daum postcode api 사용등 정적 파일 환경에서 테스트가 불가능한 것들이 예로 들 수 있을 것 같다. 방법은 매우 간단하다. 방법 먼저 express 프레임워크를 설치한다. npm install express --save 설치가 완료 되었다면 해당 디렉토리에 server/index.js 파일을 추가한다. index.js 파일을 수정한다. const express = require("express"); const app = express(); const PORT = 3000; app.use(express.static("/Users/myname/Desktop/static")); // directory 경로 app.get("..

어드민 서비스에 JSON 데이터를 엑셀 파일로 변환하여 다운로드 할 수 있는 기능을 추가하게 되었다. 여러가지 방법들이 있겠지만 xlsx 라이브러리를 이용하기로 했다. (너무 간단하기 때문,,) 라이브러리 설치 yarn add xlsx 혹은 npm install xlsx --save Json to Excel File import * as XLSX from 'xlsx'; const downloadExcel = (data) => { const worksheet = XLSX.utils.json_to_sheet(data); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'my_sheet'); XLS..

최근에 Adjust tracking sdk를 설치하고 딥링크 기능을 추가했다. 안드로이드의 경우 앱 설치 및 미설치 유저들의 deeplink가 정상 작동했지만 iOS의 경우 앱 미설치 유저의 설치 후 액션이 작동하지 않았다. 원인을 찾기 위해 디버깅을 해야 하는데 앱 설치 후 액션을 어떻게 디버깅해야 하는지 또 코드를 수정하면서 수정된 버전의 에서 딥링크가 작동하는지를 어떻게 테스트해야 하는지 감이 잘 오지 않았다. Adjust 공식 문서에서 확인해보니 iOS에서 디퍼드 딥링크를 처리하기 위해 코드 추가가 필요했다. Adjust Help Center Adjust Help Center help.adjust.com 코드 수정 AppDelegate 에서 adjust 콜백을 추가하고 deeplink action..

지난번 포스팅 때 Firebase App Distribution 세팅 및 이용 방법에 대해 얘기했었다. [iOS / Swift] Fastlane으로 테스트 앱 자동 배포(CD) 구축하기 (1) 회사에 처음 입사하고 가장 먼저 한 일이 자동 배포 구축이었다. 왜 이 작업을 가장 먼저 했는 지는 아래에서 설명하고자 한다. 기존의 프로세스 기존의 앱 서비스 개발 방식은 아래와 같았다. 1. kwtjdtn.tistory.com 오늘은 Fastlane을 통해 수정된 앱을 App Distribution에 올리는 법에 대해 글을 적고자 한다. Fastlane 설치 brew install fastlane sudo get minstall fastlane Fastlane Setting 프로젝트 디렉토리로 이동해 fastl..

회사에 처음 입사하고 가장 먼저 한 일이 자동 배포 구축이었다. 왜 이 작업을 가장 먼저 했는 지는 아래에서 설명하고자 한다. 기존의 프로세스 기존의 앱 서비스 개발 방식은 아래와 같았다. 1. 서비스 기획 2. 디자인 개발 3. 앱 개발 및 테스트 앱 배포 4. QA 진행 - 실패시 다시 3번 작업 진행 5. 스토어 업로드 이 중 가장 오랜시간에 소요되는 구간이 바로 3. 앱 개발 및 테스트 앱 배포이다. 매번 개발자가 직접 테스트 앱을 빌드 후 TestFlight 혹은 apk 파일 전달 등의 방식으로 QA를 진행해 왔다고 한다. 개발자와 QA팀 사이에도 헷갈리고 환경 설정에 어려움이 많았다고 하여 자동화 배포를 구축하고자 했다. Firebase App Distribution (테스트 앱 서비스) 먼저..