본 글은 『Learning JavaScript Design Patterns』 책을 기반으로 작성한 글 입니다.https://www.yes24.com/Product/Goods/129374961 자바스크립트 + 리액트 디자인 패턴 - 예스2420가지 이상의 디자인 패턴으로 배우는 최신 웹 개발유지보수가 쉬운 구조적인 코드를 만들고 싶은가? 최신 웹 개발 모범 사례를 참고하고 싶은가? 그렇다면 『자바스크립트 + 리액트 디자인 패www.yes24.com 1. 생성 패턴생성 패턴에는 아래 패턴들이 있다.생성자 패턴모듈 패턴노출 모듈 패턴싱글톤 패턴프로토타입 패턴팩토리 패턴 1-1. 생성자 패턴- 개념 : 생성자를 통해 객체 생성 및 초기화 하는 패턴- 필요한 이유 : 비슷한 속성과 행위를 묶어 모듈화 하기 위해..

1. 환경- React 앱을 AWS s3+cf로 배포- 사용자의 실제 접속 국가에 따른 루트 경로에서의 URL 리다이렉트 처리가 필요한 상황ex) 한국에서 접속한 사용자는 /domain/kr, 독일에서 접속한 사용자는 /domain/eu 형태로 리다이렉트 되어야 함 2. 방법 1. AWS 정책 추가https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/adding-cloudfront-headers.html CloudFront 요청 헤더 추가 - Amazon CloudFrontCloudFront가 최종 사용자의 요청에서 원본 또는 엣지 기능으로 특정 HTTP 헤더를 추가하도록 CloudFront를 구성할 수 있습니다. 이러한 HT..

본 글은 『Learning JavaScript Design Patterns』  책을 기반으로 작성한 글 입니다.https://www.yes24.com/Product/Goods/129374961 자바스크립트 + 리액트 디자인 패턴 - 예스2420가지 이상의 디자인 패턴으로 배우는 최신 웹 개발유지보수가 쉬운 구조적인 코드를 만들고 싶은가? 최신 웹 개발 모범 사례를 참고하고 싶은가? 그렇다면 『자바스크립트 + 리액트 디자인 패www.yes24.com  Chapter 01 - 디자인 패턴 소개 "좋은 코드는 후임 개발자에게 보내는 러브레터와도 같다!" 디자인 패턴은 코드를 체계화 하기 위한 공통적인 패턴을 제공하여 코드를 쉽게 이해하도록  도와준다.  Chapter 02 - 패턴성 검증, 프로토 패턴 그리고..

최근 사내에서 딥링크 관련 레포를 전임(?) 받게됐는데요게 정확히 어떻게 동작하는지, 다른 방식들과 어떤 차이가 있는지 직접 정리해보면서 알아가보려고 한다!   1. 딥링크란 ?모바일 환경에서 어떤 링크를 눌렀을 때사용자를 앱 내의 어떤 화면으로 이동 시켜서 원하는 화면을 보여줄 수 있게 하는 기술이다!  위 예시로, 카카오 결제하기 화면에서 "다음" 이라는 버튼을 눌렀을 때 카카오톡 내 결제하기 화면으로 이동하게 되는데,이런 것들이 바로 딥링크라고 볼 수 있다.   이런 딥링크 기술은 3가지 종류가 존재하는데, 각 방식과 구현 방법에 대해 알아보자  2. URL Scheme 커스텀 스킴이라고 불리는 URL 스킴은 가장 오래되었고 현 제일 많이 쓰이는 스킴이다.URL 스킴은 아래와 같은 구조를 갖고 있다..

13장 스코프  1. 스코프란: 식별자의 유효한 범위 식별자란, 변수나 함수의 이름 등을 의미한다.식별자는 어떠한 값을 구별할 수 있어야 하므로 유일해야 한다. 즉 중복될 수 없다.자바스크립트에서는 스코프라는 개념을 통해 식별자의 중복을 방지한다.렉시컬 환경 : 스코프를 구분하여 식별자를 등록/관리하는 저장소(상위 스코프에 대한 참조를 관리함)실행 컨텍스트 : 현재 실행중인 코드에 대한 데이터 구조를 담고있는 동적인 데이터 구조스코프 내에서 식별자는 유일해야 하지만, 다른 스코프에서는 다른 이름의 식별자를 사용할 수 있다즉, 스코프는 네임스페이스다 👍 2. 스코프의 종류1) 전역 스코프- 전역에서 선언된 변수는 전역 스코프를 가진다.- 전역 변수는 어디서든지 참조할 수 있다. 2) 지역 스코프- 함수 ..

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://..

오늘의 글CRA(Create-React-App) 없이 React+Typescript 앱 환경 구축하기 ! 옛날에는 Cra를 많이 썼었지만, 이제는 거의 쓰지 않는 추세이다. (2022/04 기준 으로 업데이트 되지 않고 있음)또한 예전 리액트 공식문서에서는 CRA가 포함되어있었지만새 React 공식문서에서는 이제 nextJs나 다른 프레임워크를 사용하라고 권장하고 있다.https://react.dev/learn/start-a-new-react-project Start a New React Project – ReactThe library for web and native user interfacesreact.dev      Webpack, vite, rollup 등 다양한 번들러들이 있긴하지만필자는 CRA..

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

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