안녕하세요. 모바일엔트로피에서 웹 프론트엔드를 담당했던 개발자 Octoping입니다. 해당 글은 리멤버 웹 서비스 좌충우돌 Yarn Berry 도입기를 아주 감명 깊게 읽었던 한 개발자가 Yarn Berry를 도입하고, 그 과정에서 겪었던 여러 이슈들을 정리한 글입니다. 리멤버 웹 서비스 좌충우돌 Yarn Berry 도입기 - DRAMA&COMPANY 리멤버 프로덕션 서비스를 Yarn Berry로 마이그레이션 해본 경험, A to Z까지! blog.dramancompany.com 리멤버의 킹갓종택님과는 다르게 이 글은 프론트엔드 초보들끼리 삽질한 내용들이 주가 될 것 같아, 어찌보면 저 원본 글과는 달리 조금 절망편의 느낌이 묻어나는 글이 될 것 같네요 ㅎㅎㅎ Yarn Berry를 써야 할 결심 리멤버 ..

타입스크립트를 사용하다보면, 더 정확한 타입 추론을 위해 함수의 파라미터를 string, number 따위 대신 리터럴로 받고 싶어질 때가 있다. 굉장히 인공적인 예시이지만 다음 예시를 살펴보자. 타입을 리터럴로 받고 싶은 상황의 예시 function returnTypeofString(name: string) { return name; } // both types are string 🤯 const res = returnTypeofString("abc"); const res2 = returnTypeofString('John' as const); 나는 아주 강력한 타입 추론을 위해 res의 타입이 'abc'와 같이 나오길 원한다. 하지만 타입은 string으로 나오게 된다. 하지만 이런 상황에서 리터럴로 타..

시작에 앞서 시대의 흐름은 변화무쌍하여, Javascript의 생태계를 엄청나게 바꾸어놓은 ES6(ECMA2015) 스펙이 출몰한지 이제 8년이 되었다. 여러 회사들이 프론트엔드 채용 공고에 이제는 React를 올려놓고 있으며, 신입 채용에서 우대사항이었던 Typescript는 이제 슬슬 자격 요건으로까지 내려오고 있다. 하지만 그럼에도, 세상의 어떤 곳에는 아직도 ES5 이하 버전으로 개발하며, jQuery를 사용하는 회사들이 우리와 함께 숨쉬고 있다. 이런 이야기를 남들에게 하면 한숨을 쉬며 얼른 다른 회사로 이직을 하라는 조언의 목소리를 보내겠지만, 그럼에도 회사가 굴러가기 위해서는 누군가는 이런 작업을 해내야 한다. 그렇다면 우리 회사는 애초부터 안 좋은 스택을 쓰고 있었으니.. 하며 그저 손 놓..

문제 상황 네이버페이 결제 시스템을 구현을 하는데, 네이버페이 결제창을 호출하기 위해서는 자기들의 js 파일을 script 태그를 이용해서 불러와야 했다. 네이버페이 개발자센터 응답 예 Response HTTP/1.1 200 OK { "code": "Success", "message": "", "body": { "businessNo": "2208162517", "differenceResults": [{ "differenceRequestId": "DR201810300000008013", "payHistId": "20181113NP1000488732", "orderNo": "TEST001", "sequence": "00" developer.pay.naver.com npm을 통한 설치 방식이나, js파일을 직..

배열의 원소들을 파라미터로 하는 Promise를 체이닝해야 하는 일이 있었다. 물론 async와 await을 활용하면 간단하게 구현할 수 있겠지만 함수 안에서 await을 사용할 경우 해당 함수가 async가 되어버리고 만다. 레거시 코드를 리팩토링하는 것이었기 때문에 이것이 어떤 영향을 끼칠지 무서워 다음과 같은 방식으로 작업하였다. function waitAndLog(data) { return new Promise((resolve) => { setTimeout(() => { console.log(data); resolve(); }, 2000); }); } const dataArray = ['hello', 'world', 'and', 'javascript']; function waitAndLogEver..

Math.random() 을 통한 난수 만들기 Math.random() 함수를 이용하면 0이상 1 미만의 난수를 출력한다. 따라서 다음과 같이 난수를 뽑아낼 수 있다. // 0 이상 1 미만의 난수 구하기 Math.random(); // 두 값 사이의 난수 구하기 Math.random() * (max - min) + min; // 두 값 사이의 정수 난수 구하기 Math.floor(Math.random() * (max - min)) + min; window.crypto.getRandomValues()를 통한 난수 만들기 Math.random()은 암호학적으로 안전한 난수를 제공하지는 않다. 따라서 보안과 관련된 곳에는 window.crypto.getRandomValues()를 사용하자. self.cryp..

function dateFormat(format) { const weekName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"]; const d = new Date(); const lpad = x => String(x).padStart(2, '0'); return format.replace(/(yyyy|yy|mm|dd|e|24h|hh|mi|ss|a\/p)/gi, function($1) { switch ($1) { case "yyyy": return d.getFullYear(); case "yy": return lpad(d.getFullYear() % 1000); case "mm": return lpad(d.getMonth() + 1); case "dd": re..