[Javascript] 클로저(Closure) 란? 클로저(Closure)함수를 지칭하면서, 함수가 생성됐을때의 렉시컬 환경의 조합자신이 선언됐을때의 환경을 기억한다즉 함수안에 내부함수가 외부함수의 변수를 사용했을때 그 환경을 기억하고 있는것// 이해를 위해 코드로 확인해보기function outerFunc() { let name = 'hr'; return function closureFunc(type) { return name = `${name}${type}`; }}let tistory = outerFunc();console.log(tistory('-devlog')); // hr-devlog outFunc()는 closureFunc를 return함으로써 소명을 다하고 종료됐지만 당시에 선언되었던 name 변수를 closureFunc로 접근가능 이를 .. 더보기 [React] Gridsify , Data-Grid-Generator R&D 사업을 위한 백오피스 어드민 진행 중 테이블을 제작하던 찰나, 앞으로 더 다양한 R&D 사업에 대응할 예정이라는 소식과 함께자유로이 커스텀할 수 있는 Data-Grid-Generator를 만들어야겠다고 생각이 들었다,, 내가 정했던 조건들을 나열해 보자면 1. 어떠한 형태의 데이터 타입이든, 그리고 어떠한 키:벨류 든 큰 공수없이 호환이 가능해야 한다.2. 각 셀을 사용자가 원하는대로 커스터마이징 할 수 있어야한다. 각 조건들을 해결했던 방법먼저 어떠한 키:벨류를 만족하기 위해서 받는 데이터를 최초 한번은 지정을 해줘야한다.테이블 컴포넌트 내에서는 new Map을 사용했고, 테이블 사용처에서는 2D String Array로 사용처의 데이터타입에 맞게 Props를 전달하도록 했다 // Table 사.. 더보기 [React] 하이브리드 웹앱 웹뷰에서 Swift,Kotlin과 통신하기 네이티브 공수를 줄이기 위해 특정화면을 웹뷰로 진행하기로 했고, 작업했던 회고 정리하기타입정의 하기타입스크립트를 사용중이였기 때문에 글로벌로 타입을 정의! // swift, kotlin과 통신하기 위에 window 객체를 사용// typescript 사용할 경우, 내가 호출해야 하는 함수는 타입 정의 필요declare global { interface Window { android: { NamingWithAOSDeveloper: Function; }; webkit: { messageHandlers: { NamingWithIOSDeveloper: { postMessage: (param: string) => void; }; .. 더보기 [React] Validate 함수 만들기 개발 도중 Formdata 를 통해서 굉장히 많은양의 데이터를 핸들링해서 백엔드로 보내야하는 케이스가 생겼었는데,전송하기전 버튼혹은 함수안에서 어디든간에 한곳에서는 엄청나게 많은 키벨류를 Validate 해야만 했다. 물론 하나하나 조건문을 써가며 작성할 수 있었지만 굉장히 더러워지는 코드와 망해버리는 가독성을 보고는 함수 하나 만들어보지 뭐 하고 만들기 시작한 함수! import { some } from "lodash";type DisabledConditionTypes = { condition: Function; keys: string[];};const useValidate = ( target: { [key: string]: string | number | null | undefined | .. 더보기 [React] Axios paramsSerializer API 통신을 하다보면 Optional한 값과 함께 Params를 보내야 하는 경우가 있다.처음에는 삼항등 조건문으로 구별했었는데 가독성도 안좋아지고, State로 초기값과 함께 관리될때 초기값이 Params에 낑겨 들어가서에러를 발생시키곤 했다. 바로 그럴 때 Axios paramsSerializer를 사용하면 된다 // 공통 axios 파일axios.defaults.paramsSerializer = (params) => { let query = ""; forEach(params, (value, key) => { if (value === "" || value === null || value === undefined) { } else { if (Array.isArray(value).. 더보기 [NextJS] Module-Federation 4 Module Federation로 프로젝트 배포 후 prod 환경에서 작업을 하다보면 remote App의 변경사항이 추가되었고, 실제 Repo도 최신화 됐음에도 이전 버전의 remoteEntry.js를 가져오는 경우가 발생합니다. 이유는 Host App에서 remoteEntry.js를 가져오는데 캐시되어있는 remoteEntry.js와 새로운 remoteEntry.js를 구별할 수 없음에 remoteEntry.js가 교체되지않고 캐시되어있는 파일을 읽어오면서 생기는 문제인데요. 이 경우 브라우저의 캐시를 지워준다면 정상적으로 remoteEntry.js를 가져오는 것을 확인할 수 있었습니다. 하지만 우리가 서비스를 운영한다면 사용자에게 매번 업데이트가 있으니 캐시를 비워주세요! 할 수 도 없기 때문에 아.. 더보기 [NextJS] Module-Federation 3 이번에는 Remote에서 가져온 Components 에 Props 전달을 해볼까요 ?먼저 Remote Button 부터 수정해보죠Remote Button 수정// Shared/ui/Button/index.tsximport React from "react";export default function Button() { return ( Hi I am Remote Button in Shared UI );}// 원래 이랬던 친구를 아래처럼 바꾸기// Shared/ui/Button/index.tsximport { ComponentPropsWithRef } from "react";interface CustomButtonPropsType extends ComponentPropsWithRef.. 더보기 [NextJS] Module-Federation 2 저번글에서는 Monorepo 프로젝트 셋팅을 해보았는데 이번에는 Module-federation을 통해서RemoteApp에서 HostApp으로 Component를 가져와보겠습니다! 먼저 Next.js에서 Module-Federation을 하기위해 hostApp과 remoteApp에 @module-federation/nextjs-mf 를 설치하겠습니다그리고 Module-Federation을 위해 Webpack도 설치해주겠습니다~ // apps/mono-app // shared/uiyarn add @module-federation/nextjs-mfyarn add webpack// rootyarn Host에서 RemoteApp 불러오는 설정하기// apps/mono-app// next.config.js/**.. 더보기 이전 1 2 다음
