1. 로그인 화면 버튼 및 이벤트 생성 선행되어야 할 사전 작업이 있다. 루트 디렉토리에 있는 routes.js를 보면 isLoggedIn 이 true인지 false인지에 따라 화면이 다르게 보인다. 그런데 로그인이 안 된 상태에서도 다이어리와 뉴스탭이 있는 메인 화면을 보여주고자 한다. 이건 비회원인 상태에서도 메인화면을 보여주기 위함인데 다이어리 기능은 제한을 두고 뉴스탭만 보여주고자 한다. 그래서 isLoggedIn 이 false일 때 리턴되는 부분에도 메인화면이 보이도록 작업하자. 버튼을 눌러도 아무런 반응을 하지 않는데 이건 onPress를 이용한 이벤트를 발생시키지 않아서이다. 비회원 버튼을 눌렀을 때 메인화면으로 이동할 수 있게끔 작업을 해보자. 구현한 게 화면에 잘 나오는 건 import ..

1. 로그인을 위한 Validation Framework 작성 로그인의 버튼 만들기 전 선행되어야 하는 게 로그인 검증 validation이다. 로그인 검증 프로세스를 위한 파일을 하나 만들 건데 /app/utils/forms 에 validationRules.js 를 만들자. 이 파일에서 검증 항목과 검증 방법을 구현할 것이다. 파일의 반환은 true or false 인데 문제가 없다면 true, 하나라도 문제가 있다면 false가 반환될 것이다. 그리고 authForm.js에서는 반환된 값을 이용해 버튼을 동작시킬지 오류를 발생시킬지 구현할 것이다. // /app/utils/form/validationRules.js const validation = (value, rules, form) => { let..

1. TextIput 이벤트 핸들러 및 함수 textInput 에 커서를 두고 클릭을 하고 키보드 입력을 해도 아무런 반응이 없다. 텍스트가 입력이 될 때마다 이벤트를 발생시키는 onChange 라는 텍스트 프로퍼티가 필요하다. 단순히 입력된 값을 업데이트 시키는 함수만이 아니라 이번에는 onChangeText라는 이벤트 핸들러에 화살표 함수를 사용할 것이다. 여기에 value라는 매개변수를 전달해 값을 바로 업데이트시킬 것이다. updateInput 함수에는 2가지 인자를 넣는데 하나는 string, 하나는 value를 넣자. string 값을 써주는 이유는 2가지가 있다. 1. 이메일, 비밀번호 textInput에서 구분하기 위한 인자를 만들기 위해서 2. 업데이트되는 value 값은 state에서 ..

왜 데이터 타입이 그렇게 중요한가? JS의 변수에는 어떤 데이터 타입의 값도 할당 될 수 있다. let myname = 'byein'; string 값이 담겨 있던 변수에 아래처럼 number 값이 담기더라도 에러가 발생하지 않는다. myname = 1; JS는 이런 문제를 사전에 막아주지 못하고 나중에 프로그램을 사용하다가 나중에 버그가 있는 걸 발견할 수 있다. 그럼 타입스크립트는 어떻게 이런 문제를 해결할 수 있을까? 변수에 데이터 타입을 지정하는 방법 타입스크립트는 변수 선언 시에 데이터 타입을 지정한다. 그럼 TS를 JS로 컴파일 할 때 다른 값이 할당되면 오류를 발생시켜 알려준다. let myname: string = 'byein'; myname 변수에 string 타입을 지정했는데 아까처럼 ..

TS Playground TS 온라인 플레이그라운드는 웹 브라우저에서 TS 코드를 작성하고 실행할 수 있는 도구다. 사용방법은 다음과 같다. 1. 접속 https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org 2. 코딩 코드를 작성하면 자동으로 TS를 JS 코드로 변환하고 오른쪽 창에 변환된 코드를 보여준다. 3. 실행 "Run" 버튼을 클릭하여 TS 코드를 실행할 수 ..