bravo my life!

1. 개요 앞서 배웠던 routing을 이용해 간단한 로그인 페이지를 만들어 보았다. 유저정보를 입력 후 로그인 버튼을 클릭해 콘솔에 정보를 띄우자. 2. 코드 상세 //App.tsx const App: React.FC = () => ( ); export default App; //login.tsx const Login: React.FC = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); function loginUser() { console.log(`username: ${username}, password: ${password} `); } return ( Example Pa..

1. 개요 리액트의 것과 다를 것이 없는 개념이다. spa 방식에서 페이지를 routing하여 다른 내용을 보여준다. 2. 코드 상세 //App.tsx //Home.tsx Hello World! Click Me! //Example.tsx Example Page! Hello example Page! 결과물은 다음과 같다.

1. 개요 ionic-react로 inputUI를 만들어 보았다. 2. 코드 상세 setText(e.detail.value!)} > setNumber(parseInt(e.detail.value!, 10))} > clear Input setInput(e.target.value)} clearInput /> stacked label setInput(e.target.value)} /> Floating Label Fixed Label 아래는 코드의 결과물이다. 사진으로 표현이 힘든 부분에 대해 상세 설명하겠다. number타입 input은 input요소안에 숫자 입력시 상하 버튼이 나타나고 1, -1씩 증감할 수 있다. clear input은 input요소안에 내용을 입력한다면 x버튼이 나타나 입력내용을 한 번에..

1. 개요 ionic-react로 버튼을 만들었는데, 버튼ui의 속성들을 하나하나 구현하고 어떤 모양을 가지고 있는지 확인해 보았다. 2. 코드 상세 1. expand 속성 expand="default" expand="full" expand="block" 2. fill 속성 fill="default" fill="clear" fill="outline" fill="solid" 3. size 속성 size="small" size="default" size="large" 4. disabled 속성 disabled 5. mode 속성 mode="ios" mode="md" 6. shape 속성 shape="round" 7. strong 속성 strong 8. slot 속성 slot="" slot="end" slot..

1. 개요 모바일 환경에서 빠질 수 없는 UI인 slide를 구현해 보았다. 각각 좌에서 우로, 우에서 좌로 슬라이드를 한 상태이다. 구현 영상은 다음과 같다. 2. 코드 상세 //좌에서 우로 슬라이드 Hello //우에서 좌로 슬라이드 alert("pressed delete!")}>Delete 슬라이드 방향을 구분하는 것는 IonItemOptions의 side속성으로 제어가 가능하다. side속성에는 start, end 두가지의 타입만 가능하다. start는 좌에서 우로 슬라이딩한 경우 좌측에 컴포넌트를, end는 우에서 좌로 슬라이딩한 경우 우측에 컴포넌트를 보여준다.

react와 크게 사용법이 다르진 않다. ionic 감을 익힐 겸, 튜토리얼을 보며 따라하고 있다. 튜토리얼에서 사용된 메소드 간략 설명. 1. Array() : 배열을 만드는 메소드. 인자에 3을 넣는다면 비어있는 length가 3인 배열이 만들어진다. 2. fill() : 배열을 채워주는 메소드. 인자에 1을 넣는다면 배열에 1을 생성해준다. 3. map() : 주어진 배열을 새로운 배열로 반환하는 메소드.

Ionic-React의 기본 세팅은 어떻게 되어 있는지 구경해 보았다. 1. 프로젝트 기본 구조와 프로젝트 실행 시 만나 볼 수 있는 화면이다. 2. 컴포넌트와 페이지의 내용. 좌측은 컴포넌트 파일(ExploreContainer.tsx)이고, 우측은 메인페이지(Home.tsx)의 내용이다.

npm i -g @ionic/cli //ionic 프레임워크 설치 ionic start 프로젝트명 blank --type=react //리액트 기반 ionic 프로젝트 설치 ionic serve //프로젝트 실행하기. 일반적인 react프로젝트 실행과는 명령어가 다르다. 주의하자.