블로그

프로그래밍/스파르타코딩 | 앱 개발 종합반

실행 화면 드디어..!!!!!!!! 끝났다!!!!!!!!!!!!!으아아ㅏ아ㅏ아아가아강 사실 코드 짜는 것도 별로 없었고, 떠먹여다 주다 못해.. 즙으로 갈아 먹인 정도였는데 왜이렇게 힘들었는지 모르겠습니다..ㅋㅋㅋㅋㅋㅋㅋㅋ 취지&설명 기획을 하지 않았기 때문에 취지는 없고요^^.. 수업 예시 그대로 만들어진 앱을 설명하자면, '나만의 생활 꿀팁'을 알려주는 뉴스피드 형식의 어플입니다. 기술 설명 리액트를 이용해 프론트 작업을 했고, 서버는 직접 구성하진 않고, 구글 서버 리스 서비스인 파이어베이스를 이용했습니다. 어려웠던 점 & 극복 방법 리액트 코드 짜여진 부분이 이해하기 어려웠습니다. 그래서 하루 날잡고 이해될 때까지 공부했습니다. 공부했던 방식은, 영상을 0.5배속하고 보면서 한 문장씩 이해했습니다..

2021. 9. 7.

프로그래밍/스파르타코딩 | 앱 개발 종합반

네비게이션을 만들어보자! 스택네비게이터 Navigator 안에 Screen으로 구성된다. 설치 후 임포트해서 사용한다. import { createStackNavigator } from '@react-navigation/stack'; 스택이라는 변수에 네비게이션 함수를 담아서 사용한다. const Stack = createStackNavigator(); 스택 스크린은 각각의 컴포넌트를 페이지화 시킨다. 각각의 컴포넌트는 페이지가 아니다! (중요) 카테고리안에 넣어주기 위해선 페이지화하는 과정이 필요하다. (아래 코드) 네비게이션을 App.js에서 사용하기 위해서 스택 네비 함수를 다른 페이지에서도 사용할 수 있도록 export 해준다. export default StackNavigator; (App.js..

2021. 9. 6.

프로그래밍/스파르타코딩 | 앱 개발 종합반

useState는 리액트의 기본 기능입니다. 아래와 같이 임포트하여 사용 가능합니다. import React,{useState,useEffect} from 'react'; 기본 공식 (상태변수 초기화) const [state, setState] = useState([]) useState는 2개를 받는다. 컴포넌트 안에서 데이터를 관리할 상태 변수: State 데이터가 변화되면 setState 함수로 데이터를 변화시킴 *useState는 한 컴포넌트 안에 여러개 놓을 수 있다. 기본 state, 로딩상태의 state, 등등 메인페이지에서 사용한 useState const [ready,setReady] = useState(true) (데이터가 준비되기 전 로딩화면을 먼저 보여줌) 이거를 useEffect 에..

2021. 9. 6.

프로그래밍/스파르타코딩 | 앱 개발 종합반

※주의: 쌩초보의 관점으로 쓰여진 글입니다 ※ 컴포넌트를 만드는 법 (결론: 임포트를 하고 태그를 넣는다.) 자, 우리 메인페이지에 카드 컴포넌트를 넣어보자!!!!!! 메인페이지 코드 { cateState.map((content,i)=>{ return () }) } 라는 태그를 만든다. (이게 하나의 컴포넌트가 된다.) 그럼 태그는 어떻게 만드냐? 위에서 메인페이지 안에서 임포트를 해줘야 함. 그럼 를 컴포넌트로 인식함. import Card from '../pages/components/Card'; 카드.js 코드 export default function Card({content,navigation}){ return( //카드 자체가 버튼역할로써 누르게되면 상세페이지로 넘어가게끔 TouchableOp..

2021. 9. 6.