전체 글

이번 글에서는 앱과 웹뷰의 통신에 대해 간단하게 정리보려고 한다 !웹뷰가 무엇인지, 앱과 웹뷰가 통신을 어떻게 할 수 있는지에 대해 알아보자   1. 웹뷰(WebView)란 ? 웹뷰란 네이티브 앱에 내장되어 있는 웹 브라우저 이다.https://docs.tosspayments.com/resources/glossary/webview 웹뷰(WebView) | 토스페이먼츠 개발자센터웹뷰(WebView)는 네이티브 앱에 내제되어 있는 웹 브라우저입니다. 웹뷰를 사용하면 웹 콘텐츠를 네이티브 앱 뷰와 같이 사용자에게 보여줄 수 있어요.docs.tosspayments.com간단하게 말하면, 웹뷰란 것을 통해 App에서 웹 페이지를 보여줄 수 있다 !(네이티브 앱과 웹 앱..

45장 Promise 1. 비동기 처리를 위한 콜백 패턴의 단점 1) 콜백 헬 어떠한 함수를 실행했을 때, 해당 함수 내부의 비동기 함수가 완료되지 않았다해도, 비동기 함수를 기다리지 않고 즉시 종료 된다. ex) setTimeout 비동기 함수 let g = 0; setTimeout(() => { g = 100; }, 0); console.log(g); // 0 ex) get요청 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { return JSON.parse(xhr.response); } }; const res = get('https://tis..

오랜만에 작성하는 글..! (사실 쓰다가 만 비공개 글이 10개는 넘지만...) 이번 글에선 Rollup을 이용해 커스텀 컴포넌트 라이브러리를 만들어보는 토이 프로젝트를 작성해볼 것이다 !! rollup을 왜 사용하는가에 대한 질문이 있을 수 있는데, rollup은 webpack과 같은 번들러지만 웹팩과 다르게 esm빌드가 가능해서 라이브러리/패키지를 만들 때 유용하다 그리고 웹팩보다는 빌드 설정이 좀 더 간편한 편이기도 하고.. 중복 제거에 특화된 번들러다. 자 그러면 개발 환경 세팅을 해주자 ! 1. 개발 환경 세팅 1) 필요 모듈 설치 React, Ts, Sass, Storybook, Rollup 을 설치 해줄 것이다 npm i -D react typescript @types/react sass p..

* 개발 환경 : react(cra), ts, storybook, sass, tailwind, rollup 1. 이슈 사항 프로젝트 내에서 상대경로를 쓰지 않고 custom alias 사용 중인 상황 ex) @ea => ./src rollup 에서 custom alias를 처리하기 위한 플러그인으로 @rollup/plugin-alias 가 있다. https://www.npmjs.com/package/@rollup/plugin-alias @rollup/plugin-alias Define and resolve aliases for bundle dependencies. Latest version: 5.0.1, last published: 9 days ago. Start using @rollup/plugin-a..

이번 글에서는 Style Dictionary가 무엇인지와 사용 방법을 간단히 정리하고자 한다 1. 디자인 시스템과 Style Dictionary Style Dictionary가 무엇인지 알기 전에, 디자인 시스템이 무엇인지 알 필요성이 있다. 쉽게 설명하자면, 디자인 시스템은 디자인과 개발을 좀 더 쉽게, 일관되게, 효율적으로 만들고 관리하는 방법이라고 할 수 있다. 그러면 Style Dictionary와 디자인 시스템이 무슨 상관이 있는 걸까? Style Dictionary는 디자인 시스템에서 사용되는 디자인 토큰을 관리하고 적용하는 오픈 소스이다. * 디자인 토큰: 디자인에서 사용되는 요소(글꼴, 색상, 그림자 등)을 표준화 한 요소 그럼 디자인 토큰이 왜 필요한 걸까? 디자인 토큰은 css변수를 설..

tsconfig의 path에 아래 별칭을 이용하여 사용중이었는데 "@": ["./packages/my-app"], "@/*": ["./packages/my-app/src/*"], storybook내부에서 아래 별칭을 사용하려면 main.ts에 alias설정을 해줘야 한다. https://storybook.js.org/docs/react/builders/webpack#troubleshooting Webpack Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open ..

12장 함수 1. 함수란 ? 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정한 것 함수 정의를 통해 생성하고, 함수 호출로 실행한다. 2. 함수를 사용하는 이유 코드의 재사용성 유지보수의 편의성 코드의 신뢰성/가독성 3. 함수 리터럴 📌 구성 요소 : 함수 이름, 매개변수 목록, 함수 몸체 일반 객체는 호출할 수 없지만, 함수는 호출할 수 있으며 고유의 프로퍼티를 갖는다. 함수는 "객체" 이다. 4. 함수 정의 1) 함수 선언문 function add(x,y) { return x + y; } console.dir(add); // console.log와 다르게 객체의 프로퍼티까지 출력 console.log(add(2,3)); ✅ 함수 선언문은 표현식이 아닌 "문" 이다. (und..

09장 타입 변환과 단축 평가 1. 타입 변환 1) 명시적 타입 변환(explicit coercion) / 타입 캐스팅 : 개발자가 의도적으로 값의 타입을 변환 하는 것 var x = 10; var str = x.toString(); // 숫자를 문자열로 타입 캐스팅 2) 암묵적 타입 변환 : 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것 var x = 10; var str = x + ''; // typeof str = string 👉 명시적/암묵적 타입 변환은 기존 원시 값을 직접 변경하는 것이 아니라, 새로운 원시 값을 생성하는 것! 2. 암묵적 타입 변환 1) 문자열 타입으로 변환 1 + '2' // "12" NaN + '' // "NaN" true + ''..

맨날 까먹어서 정리하는 내용 ... 자바스크립트에서의 숫자는 다른 언어와 달리 하나의 숫자 타입만 가진다. Number ECMAScript 사양에 따르면, 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따른다. 모든 수를 실수로 처리하며, 정수를 표현하기 위한 데이터 타입이 별도로 존재하지 않는다. 배정밀도 64비트 부동소수점은 무엇일까 ? 컴퓨터에서 실수를 표현하는 방법에는 크게 4가지가 있다. 컴퓨터가 소수점 아래 숫자가 있는 실수를 표기할 때, 소수점의 위치를 고정시켜 표현하는 방식을 고정소수점, 소수점의 위치를 고정시키지 않고 가수와 진수를 이용하는 방식을 부동소수점 이라 한다. 1. 단정밀도/배정밀도 고정소수점 방식 단정밀도 고정소수점 방식은 소수를 아래처럼 표현한다. [ 0 000000..