[타입스크립트] 웹뷰 인터페이스 브릿지

// index.d.ts // Window 객체에 각 네이티브별 인터페이스와 메서드 정의 declare global { interface Window { webkit?: { messageHandlers: { iOSInterfaceGoToScheme: { postMessage: (message: string) => void; }, iOSInterfaceCloseWebview: { postMessage: (message: string) => void; }; }; }; AndroidInterface?: { goToScheme: (data: string) => void; closeWebview: (message: string) => void; }; } } // aos, ios 각각 해당 인터페이스가 있는지 확인..

[JS] 클로저란?

클로저란? 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 뜻한다. 자바스크립트만의 고유한 개념이 아니라, 여러 함수형 프로그래밍 언어에서 공통적으로 발견되는 특성이다. 클로저의 핵심은, 스코프를 이용하여 변수의 접근 범위를 닫는 폐쇄성이다. 스코프를 이해해야 클로저를 이해할 수 있다. https://is-this-it.tistory.com/134 [JS] 스코프(Scope)란? 스코프란? 식별자 접근 규칙에 따른 유효 범위를 말한다. 변수, 함수, 클래스 등의 식별자에 접근할 수 있는 범위가 존재하는데, 이 범위는 중괄호(블록)-Block Scope- 또는 함수-Function Scope-에 의해 is-this-it.tistory.com 클로저 스코프 체인 모든 클로저에는 세가지 스코프(범위..

[JS] 스코프(Scope)란?

스코프란? 식별자 접근 규칙에 따른 유효 범위를 말한다. 변수, 함수, 클래스 등의 식별자에 접근할 수 있는 범위가 존재하는데, 이 범위는 중괄호(블록)-Block Scope- 또는 함수-Function Scope-에 의해 나눠진다. 특이사항으로, 자바스크립트에서 화살표 함수는 블록 스코프로 취급된다. 규칙 1. 안쪽 스코프에서 바깥쪽 스코프로만 접근 할 수 있다. (반대는 불가능) 2. 스코프는 중첩이 가능하다. 3. 가장 바깥 쪽의 스코프를 전역 스코프(Global Scope), 그 외의 스코프는 모두 지역 스코프(Local Scope)다. 4. 지역 변수는 전역 변수보다 우선 순위가 높다. 변수 선언 키워드 - var, let, const var 키워드로 선언한 변수는 블록 스코프를 무시하고 스코프..

[JSX] 조건에 따른 JSX 작성 패턴 - if, switch, object 구조

리액트에서 JSX 작성 중에 조건문이 필요할 때 주로 삼항연산자를 사용하고, case가 다양할 때에는 switch문을 사용하는 편이다. 삼항 연산자가 워낙에 간편하다 보니 if 문을 사용한적이 없는 것 같은데, 아래처럼 사용할 수 있다. 1. JSX 내에서 if 문 function Component() { return ( {(() => { if (someCase) { return ( someCase ) } else if (otherCase) { return ( otherCase ) } else { return ( catch all ) } })()} ) } 2. JSX 내에서 switch 문 function Component() { return ( {(() => { switch (status) { case..

[JS] 연속된 정수 배열을 만드는 다양한 방법

기본적인 사용자 지정 함수 function getNumberArray (N) { let a = Array(N), b = 0; while(b < N) a[b++] = b; return a; } getNumberArray(10); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] ES6+ API을 활용한 1줄 짜리 방법들 - 0으로 시작하는 기본 수열 Array.from(Array(10).keys()) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] [...Array(10).keys()] // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] Array.apply(null, {length: 10}).map(Number.call, Number) // [0, 1, 2, 3, 4, ..

[Docker] 도커 빌드할 때 (환경)변수 전달하기

// .gitlab-ci.yml docker buildx build --build-arg NODE_ENV=dev -t $AWS_ECR/$APP_NAME:$TAG . --push // Dockerfile FROM node:18-alpine ... ARG NODE_ENV ENV env_name $NODE_ENV RUN npm run build:$env_name ... 1. "--build-arg" 플래그를 통해 문자 "dev"를 NODE_ENV라는 변수에 담아 보냄. 2. 도커파일에서 ARG 변수로 NODE_ENV 가져오기.

서버사이드렌더링이란? SSR, Server Side Rendering

SSR, Server Side Rendering이란? SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(Client-side rendering)보다 페이즈를 구성하는 속도는 늦어지나, 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점이 빨라진다. 또한, 검색 엔진 최적화(SEO, Search Engine Optimization)에도 유리하다. SSR 동작 방식 사용자가 웹 페이지를 방문하면(request), 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML ..

[git] 커밋 메시지 수정하기

1. push 전 ( 커밋이 로컬에 있을 때 ) 1) 가장 최근 커밋 메시지 수정하기 git commit --amend 2) 최근이 아닌 커밋 메시지 수정 // 깃 로그부터 확인 git log // 위에서 3번째 커밋 선택 git rebase -i HEAD~3 // 이후 아래처럼 뜨면, 수정할 커밋들을 "pick"에서 "reword"로 바꾼 후 순서대로 수정 pick e499d89 Delete CNAME pick 0c39034 Better README pick f7fde4a Change the commit message but push the same commit. # Rebase 9fdb3bd..f7fde4a onto 9fdb3bd # # Commands: # p, pick = use commit # ..

[Docker] 도커란?

Docker 2013년에 출시된 Docker는 애플리케이션을 신속하게 구축, 테스트 및 배포할 수 있는 소프트웨어 플랫폼이다. 소프트웨어를 컨테이너라는 표준화된 유닛으로 패키징하며, 이 컨테이너에는 라이브러리, 시스템 도구, 코드, 런타임 등 소프트웨어를 실행하는데 필요한 모든 것이 포함되어 있다. 이 컨테이너라는 가상화 환경에서 애플리케이션을 패키징하고 실행한다. Docker를 사용함으로써 환경에 구애받지 않고 애플리케이션을 신속하게 배포 및 확장할 수 있는 것이다. 도커는 workflow를 단순화하고 가속하여 다양한 이점을 제공한다 Docker 작동 방식 도커는 컨테이너를 위한 운영 체제로, 코드를 실행하는 표준 방식을 제공한다. 가상 머신이 서버 하드웨어를 가상화하는 방식과 비슷하게, 컨테이너는 서..

자바스크립트 스크롤 애니메이션 넣기 - Intersection Observer API

Intersection Observer API Intersection Observer API: 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰할 수 있게 한다. 예시 let observer = new IntersectionObserver((e) => { e.forEach((el) => { console.log(el.intersectionRatio); // 화면에 포함된 퍼센트 if (el.isIntersecting) { console.log(el.intersectionRatio); el.target.style.opacity = el.intersectionRatio; } else { el.target.style.opacit..