React Native로 권한을 제공해야 하는 커스텀 훅을 만들기 위해서 작업을 하는 도중 타입을 선언하는 과정에서 새로운 경험을 하게 되었다. import { checkMultiple, PERMISSIONS, PermissionStatus, requestMultiple, RESULTS,} from 'react-native-permissions';import usePlatform from './usePlatform';import {useEffect} from 'react';type AndroidPermissions = (typeof PERMISSIONS.ANDROID)[keyof typeof PERMISSIONS.ANDROID];type IOSPermissions = (typeof PERMIS..

마우스로 눌렀을 때 3D 형식으로 문이 열리고 캐릭터가 화면에 나오는 애니메이션을 만들어보려고 한다. CSS만 활용해서 먼저 애니메이션을 구현하고 이후 사용자 이벤트와 함께 연동할 생각이다.  CSS 애니메이션애니메이션을 만든다고 바로 적용하는 것이 아닌 우선 레이아웃을 구성할 계획이다.  css 코드를 넣어주기 위해서 link 태그를 통해 파일을 연결해 주고 배경화면이 되는 stage div와 각각의 문을 나타내는 door div, 배경이 되는 back과 캐릭터, 열리는 문이 될 front..

GitHub Action에 대해서는 앞서 어떤 요소들이 있는지 알아봤다. 최종적으로 나 역시 CI / CD를 구축하는 것을 목표로 GitHub Action을 사용하려고 한다.  CI의 베이스가 되는 브랜치 전략으로 Git Flow를 사용하려고 한다. GitHub Flow 등도 있을 텐데 최초 브랜치 전략을 공부할 때 Git Flow를 알아봤었고 아직까지 많이 사용되는 전략이라서 굳이 다른 방향을 알아보진 않았다.  어떤 방향으로 GitHub Action을 사용할 것인가! 이게 중요할 것 같은데, Git Flow를 이야기하는 이유는 브랜치의 속성에 따라 Action을 설정해줄 생각이다. 내가 사용할 브랜치로Main : 프로젝트 | 서비스의 메인 브랜치로 정식 배포가 된 환경의 브랜치다. Develop : ..

GitHub Action은 빌드, 테스트 및 배포 파이프라인을 자동화 할 수 있는  지속적인 통합과 지속적인 배포 플랫폼이다. [ Like CI / CD ] ( Like가 아닌 그 자체임 )우리는 워크플로우를 만들어서 우리의 레포지토리를 테스트하고 배포할 수 있으며, 합쳐서 배포할 수 있다.  그 외에도 이슈를 만들면 해당 이슈에 적절한 Label을 붙여주는 등 특정 이벤트에 반응하는 워크플로우도 만들 수 있다.  The components of GitHub ActionsPR이 열리거나 이슈가 만들어지는 등 레포지토리에 이벤트가 발생하면 GitHub Action의 워크플로우가 트리거 되도록 구성할 수 있다. 워크플로우는 직렬 또는 병렬로 실행할 수 있는 하나 또는 여러개의 작업을 포함하고 있다. 각 작업..

실시간 위치 정보를 가지고 오기 위해서 여러가지 도전을 했다.  mauron85/react-native-background-geolocation 검색을 했을 때 가장 먼저 나오는 부분이 react native의 해당 라이브러리이다. 대부분의 글이 해당 라이브러리를 기준으로  작성이 되어 있고 유튜브에 검색했을 때도 똑같은 라이브러리를 사용했었다. 그래서 나도 해당 라이브러리를 먼저 사용해보려고 생각했다.  설치를 위해서 npm을 들어가봤는데,,,,, 165개?? 일주일에 165번 밖에 다운받아지지 않는 라이브러리를 사용하는게 맞을지 고민이 생겼다. 그래서 본격적으로 라이브러리를 사용하기 전에 유튜브 영상을 먼저 보고 내가 필요한 기능이 정상적으로 동작하는지 확인하기 위해서 보면서 댓글을 확인했는데, 걱정..

자바스크립트에서 변수가 선언되기 전에 접근하면 어떤 결과가 발생할까? 룰과 매너를 지킨 개발자라면 다음과 같은 에러가 발생할 것이다. console.log(a);const a = "asd"Uncaught ReferenceError: a is not defined ... a라는 변수가 선언되기 전에 호출을 했으니 당연한 결과일 것이다. 하지만 var 키워드를 사용한다면 다음과 같은 결과가 발생할 것이다. console.log(a);var a = "asd"undefined undefined 라고 출력이 되고 에러를 발생시키지 않는다.지난번 스코프에서도 경험했지만 var 키워드를 멀리해야 하는 이유 중 하나이다.  JavaScript로 로직을 작성하는 과정에서 에러를 만나게 되면 동작을 멈추고 화면에 노출된다..

동료의 코드 리뷰를 하면서 동일한 css 파일이 같은 페이지 내에서 여러 곳에서 호출되고 있었다. css 파일이기 때문에 공통의 부모 요소에만 호출하면 동일하게 호출이 될 것이라서 해당 방식이 잘못 됐다고 생각했다.  근데 이런 부분 말고도성능상에도 손해가 있을 수 있지 않을까?  라는 생각이 들었다. 같은 파일을 중복으로 호출하면 페이지 내에서 동일한 CSS 파일을 여러 번 요청하기 때문에 그만큼 낭비가 있을 것이라고 생각했다.  그래서 바로 테스트를 호다닥 진행하기로 했다. 테스트 방식은 간단하다. 한 페이지에 자식 요소를 몇개 만들고 각 자식에서 동일한 css 파일을 호출하면 끝이다. // 부모 페이지import React, { useEffect } from "react";import Childre..

const variablesArea = function () { let confined = "I'm trapped!";}console.log(confined); // confined is not defined ... JavaScript에서 함수에 선언한 값이 외부에서 호출되지 않는다. 이것은 Scope라는 개념이 있어서 그렇다.  우선 전역 스코프와 지역 스코프에 대해서 먼저 알아보자 .  전역 스코프, 지역 스코프 let x = 0; const scopeTest = function () { let y = 1; console.log(x); // 0}console.log(x); // 0console.log(y); // y is not defined ... 위 코드의 전체 영역을 전역 스코프 공간이..