beMajor

github.com/sweethoneybee/hello-world sweethoneybee/hello-world Repository that I made for the first time. Contribute to sweethoneybee/hello-world development by creating an account on GitHub. github.com 프로젝트 진행하면서 데일리로 올리는 글은 8월 19일 부터 시작해서 쭉 적고 있습니다(좀 늦게 시작함). 깃허브에서도 구경하세용

jwt 스프링 서버에서 넘어온 jwt를 내가 시크릿키로 풀어보면 자꾸 invalid signiture오류가 났다. 계속 오류를 찾다가 스프링 서버의 코드도 찾아봤는데 아래 두 개의 메소드가 인자로 base64EncodedSecretKey를 String으로 받고 있는 것을 발견했다. Jwts.builder().signWith() Jwts.parser().setSigningKey() 그런데 현재 우리가 구현한 코드는 시크릿키를 base64로 인코딩하지 않고 넘겨주고 있었고 그래서 웹소켓서버에서 자꾸 유효하지 않은 시그니처 오류가 난 것이다. base64로 인코딩, 디코딩 했을 때 하나의 쌍은 있으나, 인코딩 하지 않은 문자를 디코딩했을 경우 쌍을 이루지 못한다. 따라서 스프링에서 Jwt를 만들 때는 꼭 시크..

react react-native - Image: 앱 실행 시 이미지 캐싱을 위해 prefetch 메소드를 사용함. 인자는 string으로 이미지 url을 전달해줌. 예시) Image.get("url") - StatusBar: 컴포넌트. 스마트폰 스크린에서 맨위 통신상태, 배터리 등의 정보를 보여주는 것을 StatusBar라 하는데, prop으로 bar-style을 주어 색을 조절해줄 수 있음. 예시) bar-style="light-content" || "dark-content" - Dimensions: 함수. Dimensions.get("screen") 으로 기기의 화면 사이즈를 { width, height }를 반환함. - ActivityIndicator: 컴포넌트. 일반적인 동그라미 로딩 이미지를 ..

useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount 와 비슷하다. 3가지 경우를 전부 포함하는 느낌이다. componentDidMount 역할을 해서 새로고침하면 호출되고, componentDidUpdate 역할을 해서 새로 렌더링 되어도 호출된다. useEffect는 2개의 인자를 받는데 첫 번째는 function으로써의 effect이다. 두 번째 인자는 dependency이다. 만약 deps가 있다면 effect는 deps리스트에 있는 값일 때만 값이 변하도록 활성화될 것이다. dependency는 componentDidUpdate의 호출을 제어하고 싶을 때 사용한다. 자세한 예시는 아래와 같다. useEffect(functi..

useState는 항상 배열을 반환한다. const [value, setValue] = useState(0); 배열의 첫 번째 요소는 value를 초기화 하는 값이고 배열의 두 번째 요소는 value를 바꾸는 함수이다. setValue를 너무 어렵게 생각하지말고, 인자로 넘겨주는 값으로 value를 바꿔준다고 생각하면 된다. 클래스에서 메소드로 state를 setter로 관리하는 식으로 생각하면 편해. useState는 아래 처럼 쓸 수도 있음 useState(0)[0]

위도, 경도 값만 있다면 날씨 API를 통해서 해당 위치의 날씨를 알 수 있다. 사용할 API는 OpenWeather 의 API이다. 먼저 아래의 사이트에 가입하고 API키를 받아오자 (발급받은 직후는 인식되지 않고 한 30분 정도 기다려야 정상적인 키로 인식된다) https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Dashboard and Agro API We provide satellite imagery, weather data and other agricultural services that are based on geodata. By using Agro API , you can easily power your solu..

expo는 리액트 네이티브를 개발을 지원하는 강력한 오픈 소스 플랫폼이다. 리액트 네이티브보다 더 많고 간편한 API들을 지원하니 적절하게 설치해서 가져다 쓰면 개발이 편해진다. expo-location은 그것의 일종으로, 리액트 네이티브의 geolocation보다 다양한 기능을 지원하는 API이다. 사용을 위해선 설치하고 import 해주어야 한다. expo install expo-loacation import * as Location from "expo-location" 레퍼런스를 보면 다양한 기능을 지원한다. 그중에서 날씨앱에 활용하는 것은 두 가지 정도가 있다. (1) 위치정보 사용하도록 사용자에게 허가 받기 - Location.requestPermissionsAsync() Location.req..

React Native는 리액트와 마찬가지로 자바스크립트로 동작된다. 아이폰, 안드로이드폰에는 자바스크립트엔진이 있어서 자바스크립트를 해석할 수 있으니 리액트 네이티브도 굴러가는 것이다. 그러니 리액트와 유사하게 컴포넌트, JSX로 코딩을 하는데 세부적인 게 조금씩 다르다. 예를 들면 리액트에서 쓰던 div, span이 리액트 네이티브에선 View, Text로 쓰인다(이렇게 정해졌기에 따라야 함). View, Text import React from "react"; 와 리액트! 와! import React from "react"; import { StyleSheet, Text, View } from "react-native"; 와 리액트 네이티브! 와! 위의 코드에서 윗부분은 리액트, 아래부분은 리액트 ..

React Native의 프로젝트를 만드는 방법은 두 가지 있다. 하나는 Expo CLI, 또 하나는 React Native CLI 이다. Expo는 우리가 react에서 create-react-app 을 사용했던 것처럼 native한 파일들을 감추어 주고 설정이 다 자동으로 되어있어 개발하기 좀 더 편한 환경을 제공한다.(이외에도 좋은 라이브러리들을 제공하니 웬만하면 expo를 써서 앱을 만들자) React Native CLI는 리액트 네이티브를 좀 더 네이티브(?)하게 사용할 수 있다. 이것으로 프로젝트를 진행하는 것은 좀 더 큰 규모의 회사(리액트 네이티브의 코어 부분을 좀 더 만저야 하는 프로젝트를 하는 회사)가 사용한다고 하는데... 실제로 이걸 쓸 일은 거의 없을 것 같다. 그래서 날씨앱을 만..

gh-pages를 사용해 내가 만든 웹사이트를 빌드해서 배포할 수 있다. 깃허브에서는 리퍼지토리에 무료로 웹사이트를 빌드하게 해주는데, 주소는 다음과 같다. https://{github아이디}.github.io/{repository_name} gh-pages 설치 먼저 gh-pages를 설치한다. npm i gh-pages 이후 프로젝트 폴더의 package.json 파일을 수정해준다. (1) hompage 프로퍼티 추가 ... ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "homepage": "https://sweethoneybee.github.io/movie_app/"..