사용자 입력 form 만들기 사용자의 값을 총 3번 받을 예정이라, 반복해서 사용할 컴포넌트(InputAIMake)를 정의해준 뒤에 각각 props로 다른 값을 주었다. InputAIMake는 사용자의 입력을 받는 컴포넌트이기에, TextField를 사용하여 값을 받아주었다. 값이 바뀌면 자동으로 전역변수 역할을 하는 state를 업데이트해주어야하기때문에, onChange를 통해 값을 업데이트해주었다. 바뀐 값의 종류에 따라 다른 state를 업데이트해주어야하기 때문에, id에 따라 다르게 분기해주어 처리해주었다. useState를 통해 state를 업데이트해주었다. 사실 state의 경우 input의 객체로 testSize, maxTrial, epochs를 가지고 있어도 되지만, .....ㄱ...귀찮아..
로그인 여부에따라 state 지정하기 지난번 로그인을 통해 access-token을 만들어주었다. getCookie를 통해 쿠키가 없으면(undefined), 이동해야하는 path를 /admin/ai-choosing으로 쿠키가 있으면 /login-page로 이동시켜서 로그인하도록 한다. 링크를 타고 들어갈 수 있는 컴포넌트에게 state 전달 원래는 223이었던 코드를 226으로 바꾸었다. redirect 해야하는 path를 위에서 지정해준 path로 값을 주었다. 결과 로그인이 안되어있을 때는(쿠키가 없을 때) admin/이 포함되는 링크로 가려하면 바로 login-page로 향한다.
Flow 정리 1. 메인화면에서 로그인을 클릭한다 2. 로그인 페이지에서 승인된 사용자의 id와 pw로 로그인을 한다 3. 로그인을 성공하면 API 서버가 토큰을 반환한다 4. 반환된 토큰을 저장하여, 페이지를 이동하거나 사용자 인증이 필요한 요청을 수행할 때, 헤더에 토큰을 넣어보낸다. 5. API 서버는 요청받은 message의 헤더에서 토큰을 찾아 승인된 사용자인지 확인한다. Token을 어디에 어떻게 저장할까 반환해주는 Token은 두가지가 있다. - refresh-token - access-token 여기를 참고하여 정리를 해보면, 결국 받아온 토큰을 저장할 때, 1. refresh token은 local storage에 저장하고, access token은 cookie에 저장하라 2. 요청 헤더..
Loading Screen 이제 로딩 스크린을 만들어 보자!! 저번처럼 App.js의 아래에 만들 수 있겠지만, 따로 파일을 만들어 작업해보자. 저번 React강의에서는 class형이었지만 이번엔 함수형!!이다. export default를 해주어 export해주고, App.js에서 가져와준다. 그러면 오른쪽처럼 너무 top에 붙어서 화면이 나오니 flex로 화면 조정을 해주자!! 다음의 코드 중에 paddingHorizontal과 paddingVertical는 React Native에서만 있는 속성이다. 배경색까지 설정해주면 완성이다!! 폰트 설정까지 따로 해주면, 참고로 fontSize에서 숫자로 적으면 따옴표가 필요없고, px를 붙이면 따옴표가 필요하다. fontSize : 40 fontSize :..
Layout React Native에서 적용되는 Layout에 대한 규칙들이 있다. (expo뿐만 아니라 React Native 전체에 다 적용되는 규칙들) 위 화면에 보이는 것처럼 flex라는 것이 있다. 1. flexdirection 위에서 보이는 것처럼 컴포넌트의 flexdirection 디폴트는 column이다. 웹에서는 row였지만, 모바일에서는 대게 모든게 서로 아래에 있기 때문이다. 바꾸고 싶다면 물론 바꿀 수 있다. 2. flex : 1? 웹사이트에서는 1이나 2처럼 지정해주지 않는다. 아래 코드를 보자 다음과 같이 만들어진다. container는 아빠다. container에서의 flex가 1은 모든 공간을 사용가능하다는 것을 의미한다. styles에서 container를 모두 지워버리면 ..
이 글은 노마드코더님의 강의를 요약한 것입니다. https://nomadcoders.co/react-native-fundamentals/lectures/1572 How does React Native Work? 모바일앱을 만드는 데에는 세가지 방법이 있다. 완전 native : Switf or objective-c로 iOS앱을 만드는 것, Java 또는 코틀린을 가지고 Android를 만드는 것 Xcode와 Android Studio를 통해 만든다. 앱 기반 웹뷰를 만드는 것 : 매우 심플한 앱을 만드는 것 Cordova나 PhoneGap을 이용해서 그 안에 그냥 HTML, CSS를 넣는 것 앱 안에서 작동하는 웹사이트 같은 것 현재 아마존앱이 그렇게 만들어졌음 React Native 방식 : Andro..
