본문 바로가기

전체 글

[리액트 심화반] 2주차 개발일지 1. 배운 내용 토큰 기반 인증 파이어베이스 이용해서 로그인 기능 구현 로그인 유지 구현 로그인 권한을 체크하는 컴포넌트 구현 2. 새로 알게 된 내용 1) Promise - 자바스크립트가 비동기처리를 하기 위한 패턴 중 하나로 콜백이 있는데 전통적인 콜백 패턴은 일명 콜백 헬이라고 불리는 중첩 문제가 발생하기 쉽다. 중첩 문제가 발생하면 오류가 발생했을 때도 캐치하기 어렵다. - 콜백 헬이 발생하는 이유는 비동기 처리 함수 내에 또 다른 비동기 작업이 필요할 경우에 중첩이 생기면서 콜백 헬이 발생한다. - Promise : 콜백 헬 때문에 ES6에서 도입한 또다른 비동기 처리 패턴. - Promise 생성 방법 // 프라미스 객체를 만듭니다. // 인자로는 (resolve, reject) => {} 이.. 더보기
[리액트 심화반] 1주차 개발일지 1. 배운 내용 자바스크립트 문법 (변수와 상수, 자료형, 객체, 함수, 콜백함수, 프로토타입) 기획서 쪼개기 메인페이지 만들기 최소단위 컴포넌트 만들기 2. 새로 알게 된 내용 1) TDZ (Temporal Dead Zone, 일시적 사각지대) let, const는 호이스팅이 된다. 스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이(=실행 컨텍스트가) 변수가 있는 실제 위치에 도달할 때까지 액세스를 못할 뿐. 2) const로 선언된 객체는 수정될 수 있다. 객체에 대한 참조를 변경하는 것이 불가능. 3) 콜백 함수 : 함수를 값처럼 전달할 때, 인수로 넘겨주는 함수 4) 프로토타입 : 자바스크립트의 모든 객체는 자신의 부모 객체와 연결되어있다. 좀 더 정확히는 부모 객체의 원형. (.. 더보기
[앱개발 종합반] 5주차 개발일지 1. 배운 내용 구글 광고(애드몹) 적용하기 배포하기 2. 새로 알게 된 내용 1) 애드몹에서 가입을 하고 앱 생성 후 광고 설정해주는 방법 - 아직 게시하지 않은 앱에 광고를 붙이기 때문에 게시하지 않았습니다에 체크해주고 앱을 생성한다. - 안드로이드와 ios 모두 만들어주어야 한다. - app.json의 내용에 아래 코드를 추가해준다. "ios": { "supportsTablet": true, "buildNumber": "1.0.0", "bundleIdentifier": "com.myhoneytip.gun", "config": { "googleMobileAdsAppId": "" } }, "android": { "package": "com.myhoneytip.gun", "versionCode": 1, .. 더보기
[앱개발 종합반] 4주차 개발일지 1. 배운 내용 외부 API를 이용해서 특정 데이터 활용하기 파이어베이스 이용해서 파일 스토리지와 리얼타임 데이터베이스 사용해보기 2. 새로 알게 된 내용 1) 파이어베이스에서 파일 스토리지 사용법 - 파일 저장소에 이미지 및 사용할 파일을 올려두고, 필요할 때마다 꺼내 쓰는 용도로 사용함. - 파이어베이스 메뉴에서 Storage 메뉴 접속 후 시작하기 눌러서 시작한다. - 폴더도 생성할 수 있고, 폴더에서나 루트 위치에 파일을 업로드할 수 있다. - 파일을 올리면 이미지가 저장된 주소를 제공해주어서 해당 주소로 이미지 태그 url에 첨부해주면 된다. 2) 파이어베이스에서 리얼타임 데이터베이스 사용법 - JSON 형태로 저장/관리되는 데이터베이스 서비스이다. - 파이어베이스에서 제공해주는 함수들을 이용하.. 더보기
[앱개발 종합반] 3주차 개발일지 1. 배운 내용 리액트 컴포넌트, 상태 관리, 속성, useEffect 배우기 Expo로 앱 상태 바 관리하기 앱 페이지 이동 기능을 위해 네비게이터와 스택네비게이션 사용해보기 앱 내에서 앱 내용을 공유하는 share 함수 사용해보기 외부 링크 클릭 이벤트 사용해보기 2. 새로 알게 된 내용 1) 컴포넌트와 상태를 이용한 로딩화면 만들기 Loading 컴포넌트를 만들어주고, MainPage.js에서 ready 값으로 상태를 관리한다. 1. ready 값이 true 이므로 return 구문에서 ? 물음표 바로 뒤의 Loading 컴포넌트가 화면에 그려짐 2. 화면이 그려지고 난다음, 1초 이따가 상태값들이 채워지고 변경됨 3. ready 상태 값이 false 가 됨 4. 상태값이 변경되었으므로 화면이 다시.. 더보기
[React] You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. * 상황 - 열심히 리액트에 라우트 설정 다 해줬는데 실행이 안되는 것이다 ! * 문제점 - footer.js에 아무 내용 안넣어줘서 그런 것이었다. 정확히는 footer.js에서 export 한 게 없어서 그런 것이었다. * 해결방법 - footer.js에 아무 내용이라도 넣고 export default footer; 추가 해줬더니 잘 돌아갔다. 더보기
[앱개발 종합반] 2주차 개발일지 1. 배운 내용 expo-cli 설치하고 expo 프로젝트 생성하기 앱 화면 만들기 앱개발에서 자주 사용하는 문법 정리하기 2. 새로 알게 된 내용 1) expo-cli 설치 경로와 실행 경로가 상이한 점 해결 https://dev-jejecrunch.tistory.com/93 Windows에서 npm 패키지 전역 설치 경로 지정해주기 https://dev-jejecrunch.tistory.com/40 expo-cli 업데이트하는 방법 * 컴퓨터 사양 Winodow 10 Node v14.15.3 npm 6.14.9 * 상황 - expo를 이전에 써서 업데이트를 먼저 해주려고 이런 저런 방법을 썼지만 expo-c.. dev-jejecrunch.tistory.com 2) 노란색 경고창 없애기 export하는.. 더보기
Windows에서 npm 패키지 전역 설치 경로 지정해주기 https://dev-jejecrunch.tistory.com/40 expo-cli 업데이트하는 방법 * 컴퓨터 사양 Winodow 10 Node v14.15.3 npm 6.14.9 * 상황 - expo를 이전에 써서 업데이트를 먼저 해주려고 이런 저런 방법을 썼지만 expo-cli 자체가 업데이트 되지 않았다. expo-cli --version 위 명령을 실행.. dev-jejecrunch.tistory.com * 사양 Window 10 Home Node v14.16.0 npm 6.14.11 * 상황 앱개발 종합반을 듣다가 expo가 필요해서 버전 업데이트를 또 해줘야 하는 상황이 왔다. 그런데 expo는 그렇다면 매번 이 방법으로 해주어야 하는가?에 대한 고질적인 의문이 들어서 좀 더 검색해보니까 더.. 더보기
반응형

티스토리툴바