분류 전체보기195

• 

  [TypeScript] never never Type은 가능한 값의 집합이다. 예를 들면 string 타입은 가능한 모든 문자열의 집합을 의미한다. 따라서 변수의 타입을 지정하면, 해당 변수는 오직 지정한 타입에 가능한 값만을 가질 수 있다. TypeScript에서 never 타입은 값의 공집합이다. 그래서 never를 TypeScript의 바닥타입이라고 부르기도 한다. 집합에 어떤 값도 없기 때문에 never 타입은 any 타입의 값을 포함해 어떤 값도 가질 수 없다. type IsNever = T extends never ? true : false; type A = IsNever; type B = IsNever; 위 코드에서 Type A는 true, Type B는 false를 반환할 것 같지만 그렇지 않다. 코드를 직접 작성해서 확인.. 🖥️Frontend/TypeScript 2023. 11. 9.

• 

  [React Native] iOS 배포 오류 React-Native-Splash-Screen Symbolic Link 에러 상황 xCode에서 앱을 빌드 및 업로드한 뒤 TestFlight 에 올라간 앱이 몇 분 후 Build 목록에서 사라져 버리는 현상 발생했다. 없어진 Build에 관한 오류 상황을 위 그림과 같이 메일로 전달받았다. 에러 코드 ITMS-90332: Invalid Symbolic Link - The symbolick link 'react-native-splash-screen/node_modules/.bin/react-native' resolves to an invalid location. Make sure that the symbolic link does not resolve to itself, and thatt the location exists and is contanined within the .. 📱Mobile/오류해결 2023. 10. 27.

• 

  [JavaScript] Exception & trycatch & throw 예외란? 개발을 하면서 '예외(Exception)'라는 단어를 자주 접하게 된다. '예외'란 생성된 정상적인 동작에서 어긋나 예외 상황이나 에러가 발생하는 경우를 뜻한다. JavaScript에서는 예외 발생을 처리하기 위해서 try/catch문을 사용해서 작성하게 된다. try/catch/finally문 try문 안에는 예외가 발생할 지도 모르는 동작의 코드를 작성한다. catch문 안에는 try문의 예외 발생 시 처리할 동작의 코드를 작성한다. finally문 안에는 try문, catch문의 동작이 끝나면 실행될 코드를 작성한다. catch문과 finally문은 생략해서 사용해도 되지만, try문을 사용하는 의미가 없어지기 때문에 하나 이상의 블록과 같이 사용하는 것이 좋다. 아래는 try/catch/.. 🖥️Frontend/JavaScript 2023. 10. 17.

• 

  [JavaScript] overflow-x 적용 시 stacky 적용 안되는 현상 개요 반응형 웹을 만들던 도중 모바일에서 x축 스크롤이 생겨났고 body에 overflow-x: hidden을 적용했다. 그로 인해 모바일 웹에서 position: sticky가 적용된 태그가 동작하지 않는 현상이 발생했다. 해결 방안 Stack Overflow를 찾아보니 sticky는 overflow의 hidden, auto, scroll 속성에서는 동작하지 않는다고 한다. overflow-x에 clip속성을 적용해주니 정상적으로 동작하는 것을 확인할 수 있었다. 코드 body { overflow-x: clip; } .no-scroll { position: sticky; left: 0; top: 0; } 참고 사이트 https://developer.mozilla.org/en-US/docs/Web/CSS.. 🖥️Frontend/JavaScript 2023. 10. 12.

• 

  [React Native] Android BLE Advertising BLE 란? Bluetooth Low Energy의 줄임말로, 저전력 블루투스 라고 한다. Bluetooth는 크게 Bluetooth Classic과 BLE로 구분된다. Bluetooth 3.0 까지는 Bluetooth Classic, Bluetooth 4.0 부터는 BLE로 불린다. Bluetooth Classic은 다른 기기와 단거리 에서 무선으로 연결되어 통신되는 엄청난 편리함을 주었지만 배터리 소모로 인해사용하는데 불편함이 있었다. 그리고 쌍방향 통신만 가능했기 때문에 데이터를 수신하기 위해서는 항상 기기가 대기상태여야 했다. 2010년 새로운 Bluetooth 표준으로 Bluetooth 4.0이 채택되었다. Bluetooth Classic과의 가장 큰 차이는 훨씬 적은 전력으로 Classic과 .. 📱Mobile/React Native 2023. 9. 14.

• 

  [React] xlsx & file-saver & csv 엑셀(xlsx) 파일과 csv의 차이 엑셀 파일 업로드 및 다운로드 기능을 구현하면서 csv라는 확장자를 처음 알게 되었다. 엑셀로 두 파일을 실행시켜 보니 같은 양식이었고 두 라이브러리의 차이점을 모르겠어서 찾아보았고 차이는 아래와 같다. csv 1. 단순히 읽기, 쓰기 용도에 적합한 라이브러리이다. 2. 라이브러리가 가볍다. 3. 가벼운 만큼 기능이 제한적이다. xlsx 1. 라이브러리에서 제공해주는 기능이 많다. 2. csv에 비해 라이브러리가 무겁다. csv 를 사용해 코드를 작성한 후 xlsx 로도 작성해보니 확실히 csv를 사용하는 것이 간단하게 작성할 수 있어서 편했다. 구현하려는 기능을 파악한 후 사용할 라이브러리를 선택하면 될 것 같다. CSV 사용 1. react-csv 라이브러리 설치.. 🖥️Frontend/React 2023. 9. 14.

• 

  [React] React 배포 시 CORS 이슈 웹 프로젝트를 진행하면서 CORS 정책 위반으로 에러가 발생했다. 이전 프로젝트를 진행할 때는 서버 담당자가 해결해 주었지만, 프로젝트를 React로 리뉴얼하는 과정에서 서버를 수정할 수 없었고 클라이언트에서 CORS 에러를 해결해야만 했다. 아직 100% 해결된 상태는 아니지만 CORS 에러에 대해 찾아보면서 적용했던 해결 방안을 정리해보려고 한다. CORS 란? Cross-Origin Resource Sharing의 줄임말로, 한국어로 직역하면 교차 출처 리소스 공유라고 할 수 있다. 개발자의 입장에서는 CORS 정책때문에 골치아플 수는 있지만, CORS에 의해 출처가 분명한 리소스만 제공받을 수 있다. 그렇다면 CORS에서 말하는 "출처"가 무엇인지 간단하게 알아보겠다. 출처(Origin) 란? 우.. 🖥️Frontend/React 2023. 9. 13.

• 

  [Spring Boot] 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - 13 EC2 서비스 시작하기 EC2란? AWS에서 제공하는 성능,용량 등을 유동적으로 사용할 수 있는 서버다. 보통 AWS에서 '리눅스 서버 혹은 윈도우 서버를 사용합니다'라고 하면 EC2를 이야기하는 것이다. EC2란 이름은 Elastic Compute Cloud에서 C가 2개 있어서 C2라는 이름이 붙었다. AWS에서는 대부분 첫 글자가 중복되면 숫자로 표기한다. 비슷한 예로 AWS의 S3는 Simple Storage Service를 줄여 S가 3개라고 하여 S3이다. AWS에서 무료로 제공하는 프리티어 플랜에서는 EC2 사용에 아래와 같은 제한이 있다. 사양이 t2.micro만 가능하다. vCPU(가상 CPU) 1 Core, 메모리 1GB 사양이다. 보통 vCPU는 물리 CPU 사양의 절반 정도의 성능을.. 🛠️Backend/Spring 2023. 6. 17.

• 

  [React Native] Kakao Login 구현하기 Kakao Login 라이브러리 설치 React Native Project에서 터미널을 키고 아래의 명령어로 Kakao Login 라이브러리를 설치한다. npm i @react-native-seoul/kakao-login Kakao Developer Application 등록 1. Kakao Login 후 Application을 등록해준다. 2. Application의 이름과 사업자명을 입력해주고 약관에 동의해준다. 저장 버튼을 누르면 아래와 같이 앱 키를 생성해준다. React Native로 개발 중이므로 네이티브 앱 키를 사용한다. 3. 카카오 로그인 기능을 사용하기 위해 카카오 로그인 API를 활성화해준다. 안드로이드 플랫폼 설정 Kakao Developer 사이트 왼쪽 메뉴에 있는 플랫폼 탭으로 .. 📱Mobile/React Native 2023. 3. 28.

• 

  [React Native] Naver Login 구현하기 NAVER Login 라이브러리 설치 React Native Project에서 터미널을 키고 아래의 명령어로 NAVER Login 라이브러리를 설치한다. npm i @react-native-seoul/naver-login@2.3.1 NAVER Login 2.3.1 버전 설치 이유 [RN, Error] NAVER Login Error (tistory.com) [RN, Error] NAVER Login Error 에러 상황 React Native에서 NAVER Login 기능을 구현하고 버튼을 눌러 로그인 함수를 호출하면 아무런 에러 메시지도 없이 앱이 꺼져버리는 현상이 발생했다. 해결 방법 @react-native-seoul/naver-login 라이 tlseoqja.tistory.com NAVER Dev.. 📱Mobile/React Native 2023. 3. 28.

• 

  [React Native] NAVER Login Error 에러 상황 React Native에서 NAVER Login 기능을 구현하고 버튼을 눌러 로그인 함수를 호출하면 아무런 에러 메시지도 없이 앱이 꺼져버리는 현상이 발생했다. 해결 방법 @react-native-seoul/naver-login 라이브러리의 버전을 다운그레이드한다. npm i @react-native-seoul/naver-login@2.3.1 ! 현재 @react-native-seoul/naver-login 라이브러리의 최신 버전은 3.0.0-rc.1 이다. 📱Mobile/오류해결 2023. 3. 24.

• 

  [React Native] Firebase 문자 인증 아직 Firebase Project를 만들지 않았다면 아래 글을 참고해서 생성하고 진행하길 바란다.  Firebase Project 생성 및 연동 방법[RN] Firebase 프로젝트 생성 및 연동 (tistory.com) [RN] Firebase 프로젝트 생성 및 연동Firebase 프로젝트 생성 1. 신규 Project 생성 우선 구글 계정으로 로그인 후 Firebase 사이트에 접속해준다. https://firebase.google.com/?hl=ko Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시tlseoqja.tistory.com   안드로이드 앱 추가 및 프로젝트 설정 우선 이전에 생성한 Firebase Project Console로 들어간다. 그리고 앱 추가를.. 📱Mobile/React Native 2023. 3. 23.