자바스크립트에서 변수가 선언되기 전에 접근하면 어떤 결과가 발생할까? 룰과 매너를 지킨 개발자라면 다음과 같은 에러가 발생할 것이다. 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 ... 위 코드의 전체 영역을 전역 스코프 공간이..

React Native를 테스트할 때 가장 쉬운 방법 중 하나가 firebase로 테스트 배포를 하는 것이다. iOS랑 Android 모두 배포를 해볼 수 있으며, 업데이트도 빠르게 확인이 가능하다.  환경 설치첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 개발 환경도 함께 올린다.공식 사이트에서 without Framework의 내용을 보고 설치를 진행하였다. npx @react-native-community/cli@latest init [프로젝트명] 설치가 끝나면 파이어베이스 라이브러리를 설치한다. yarn add @react-native-firebase/app  설치까지 완료하면 package.json은 다음과 같다 : "dependencies": { "react": "18.2.0", ..

단순하게 서버에게서 데이터를 요청하고 요청 받는 것은 React Query로 간단하게 구현할 수 있다.  이제 변화가 필요하다. 단순하게 서버에서 데이터를 받는것 뿐 아니라 네트워크 성능, 렌더링 부분도 신경을 써야겠다는 생각이 들었다.  Request Waterfalls요청 폭포수, 앞선 요청이 완료되어야지 다음 요청을 진행할 수 있는 것을 말한다. | -> Markup | -> JS | -> CSS// ... 다음과 같이 React 같은 코드에서는 Markup ( HTML 로드 )가 되고 JS 로드를 하고 CSS 같은 부분들이 로드가 이루어 진다. 해당 플로우 자체는 HTML 파일에서 JS 파일을 불러와야지 전체적인 코드가 실행되고 그 과정에서 root div에서 렌더링이발생하면서 CSS..

끝이 다가오고 있다. 네이버, 카카오, 구글을 구현하고 이번엔 애플 로그인을 구현할 계획이다.  작업 환경은 iOS ( Macbook )이다.  환경 설정 환경을 설치하는 것은 따로 올리지 않으려고 했지만 첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 올린다.공식 사이트에서 without Framework에서 내용을 보고 설치하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 구성이 끝나면 바로 애플 로그인 라이브러리를 설치하였다. yarn add @invertase/react-native-apple-authentication 설치가 끝나면 iOS환경에서도 로그인이 필요하므로 npx pod-install 명령어를 바로 사용해서 pod 라..

어드민 페이지를 개발할 때 가장 많이 사용하는 요소가 아마 Table일 것 같다. 그동안은 table을 table 태그를 사용해서 개발하지 않았다. 테두리 관련된 작업이나, 요소를 구현할 때 colspan 등을 사용하는 방법보단 div 태그를 활용해서 만드는게 더 간단하다고 생각했기 때문이다.  어드민 한정된 요소라면 상관없을텐데, 클라이언트 페이지에서 표를 사용하는 경우도 있을텐데 시맨틱한 구조로 개발하는 것이 SEO 측면에서도 좋을 것이다. 또한 rowspan, colspan을 사용할 때도 div로 만든다면 flex 옵션 등을 사용해서 추가 설정을 줘야한다.  이렇다보니 테이블을 어떤 방식으로 만드는 것이 좋을지 여러가지 생각을 해봤다. 어쩌면 이런 고민이 의미가 없을 수 있는게 antd나 mater..

Expo가 아닌 React Native cli 환경에서 네이버 구글 로그인을 구현하려고 한다. 카카오 로그인 또는 네이버 로그인이 필요한 분은 각 링크를 참고해도 좋다.  작업 환경은 iOS ( Macbook )으로 작업했다.  환경 설치 환경을 통일하면 아무래도 오류가 줄어들 것이기 때문에 시작부터 함께하자. 공식 사이트의 without Framework에서 내용을 보고 설치하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 구성이 끝나면 구글 로그인 라이브러리를 설치한다. yarn add @react-native-google-signin/google-signin 설치가 끝나면 iOS 환경 설정을 위해서 pod 라이브러리를 설치한다. npx p..