스파르타코딩클럽 썸네일형 리스트형 [리액트 심화반] 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. 상태값이 변경되었으므로 화면이 다시.. 더보기 [앱개발 종합반] 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하는.. 더보기 [앱개발 종합반] 1주차 개발일지 1. 배운 내용 자바스크립트 기본 문법과 ES6에 새로 추가된 문법 중에 앱 개발할 때 자주 사용하는 문법 2. 새로 알게 된 내용 1) 비구조 할당 방식(destructuring assignment) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression) let blog = { owner : "jj", url: "dev-jejecrunch.tistory.com", getPost() { console.log("ES6 문법 정리"); } }; * 기존 방식 let owner = blog.owner let getPost = blog.getPost() * ES6 방식 let { owner, getPost } = blog; 해당 딕셔너리의 키 값과 변수.. 더보기 이전 1 2 다음