자바스크립트에서 웹서비스, 웹사이트를 개발하기 위해서는 서버와 통신하는 것도 중요합니다. 로컬환경에서 돌아가는 페이지를 만들수도 있지만 웹서비스라고 한다면 많은 유저들이 어디서든 서비스에 접근해서 이용이 가능해야합니다. 그 기능을 담당할 Ajax (에이잭스)를 공부해보겠습니다. Ajax란? - 자바스크립트 페이지의 전환없이 서버에서 값을 받아올 수 있는 방법입니다. - 서버가 클라이언트한테 데이터를 제공하는 포맷은 JSON으로 이루어져있습니다. 이번 예제실습에서는 OpenAPI로 이용할 수 있는 "미세먼지OpenAPI"를 사용해보겠습니다. JSON이란? - 딕셔너리와 리스트의 조합입니다. 데이터를 관리하기 위해 키와 데이터로 이루어진 리스트가 여러개 있는 것입니다. 클라이언트가 요청할때 '타입'이라는 것..
자바스크립트를 배우면서 웹개발을 하기위해 jQuery (제이쿼리)가 중요하다는 것을 알게되었습니다. jQuery는 자바스크립트를 더 유용하게 만들어주는 라이브러리입니다. 이번에는 웹 개발을 하기위한 jQuery에 대해 공부해보겠습니다. jQuery(제이쿼리)란? - HTML의 요소들을 조작하는, 편리한 자바스크립트를 미리 작성해둔 라이브러리 - 자바스크립트로도 모든 기능 (버튼글씨 바꾸기 등)을 구현할 수 있지만, 코드가 복잡해질 수 있고 호환성 문제도 고려하여 제이쿼리라는 라이브러리가 등장하게 되었습니다. - 전문 개발자들이 짜둔 코드를 가져와서 사용하는 것이기때문에 제이쿼리를 사용하기 위해선 import를 해야합니다. 1. 박스 하나 감추는 것 1) 자바스크립트에서 사용 document.getElem..
저번 'Javascript 공부일지' 에서는 '앱 개발'을 5주간 배우며 앱 서비스를 배포하는 것까지 완성해보았습니다. 개발을 할때 앱을 만들어 배포하는 것도 좋지만, 인터넷을 통해 쉽게 접속하고 모바일로도 쉽게 접할 수 있는 '웹 서비스' 개발 또한 흥미가 생겼습니다. 이번 'Javascript 공부일지2' 에서는 앱을 만들지 않고, 인터넷에 접속하는 것만으로 웹 서비스를 이용할 수 있는 '웹 개발'에 대해 배워보려고합니다! 이 블로그 내 관련 게시물 : https://lefton.tistory.com/50 1. 이미지 넣기 background-image:url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-c..
'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 지금까지 프로젝트를 진행해왔는데, 다뤄보지 못했던 언어도 접하고, 각종 프레임워크, 라이브러리를 공부하다보니 서비스 개발에 더 흥미가 생기기 시작했습니다. 이번 기회를 토대로 앞으로도 꾸준히 'App' 개발을 공부해보려고 합니다. 현재 만든 프로젝트는 수업내용을 따라가며 만든 프로젝트이기 때문에 기존 수업에서 완성되는 최종 앱과는 크게 다르지 않습니다. 앱의 이름과 설명만 조금 수정했습니다. https://expo.dev/@gnob/Mytips?serviceType=classic&distribution=expo-go Expo Expo is an open-source platform for making universal native apps..
앱 서비스를 다 만들었으면 앱 배포도 만드는것 못지않게 중요합니다. 앱 스토어나 구글 플레이스토어 등 앱 마켓에 따라 배포가이드가 다르기때문입니다. 이번에는 배포를 하기 위한 체크리스트에 대해 공부해았습니다. 앱 개발을 하면서 써왔던 "Expo"는 개발 뿐 아니라 배포,수정재배포 등 앱 개발 전체과정을 도와주는 툴입니다. Expo도움을 받아 앱버전관리, 안드로이드, ios 인증버전관리 등을 쉽게할 수 있습니다. 먼저 앱 배포에 필요한 것들은 1) 앱 로고 2) 스플래시 스크린(앱 시작 초기화면) 3) 앱 마켓에 올릴 설명 이미지 입니다. 플래시 스크린은 앱을 다운받았을 때 스마트폰 화면에 출력될 로고이미지와 앱을 켰을때 메인화면이 나오기 전 로고 등 '인트로페이지' 와 같이 짧게 보여지는 화면입니다. 스..
앱 서비스를 만들때 앱에 광고넣을 수 있는 방법 중 배너 생성에 대해 공부해보았습니다. 1. 애드몹 가로배너 광고 단위 설정 2. 앱 상에 적용 간단한 구조입니다. Google 애드몹에서 부여받은 배너 키값을 ios의 googleMoileAdsAppId 부분에 넣어주시면 됩니다. 두번째 키 값은 '배너 형태의 그림 썸네일' 이므로 실제 Main 페이지나 Detail 페이지 등 실제 페이지에서 배너를 보여줄 공간에 사용해야합니다. MainPage.js 에는 import { setTestDeviceIDAsync, AdMobBanner, AdMobInterstitial, PublisherBanner, AdMobRewarded } from 'expo-ads-admob'; 가 추가됩니다. 위 코드에서는 expo-..
앱 서비스를 만들때 수익 창출도 가능한지 알아보다가 수익성 앱에 광고넣을 수 있는 방법에 대해 공부해보았습니다. 수익성 앱? : 앱에서 수익을 내는 방법을 말합니다. : 수익을 내는 방법으로는 구글광고, 애드몹 등이 있습니다. : 예를 들어 시중에 등록되어있는 앱 서비스들을 보면 메모장이나 캘린더의 UI 디자인을 예쁘게 꾸며 1000원~3000원 사이의 유료 앱으로 출시한 것을 볼 수 있습니다. 수익성 앱 배포방법? : 리액트 네이티브 & Expo 앱으로 쉽게 배포하기 다양한 광고 수익 모델 1) 앱 내 배너 광고 수익 모델 >> 외부링크로 넘어가는 것 (Expo의 Linking 기능도 이용 가능) 2) 앱 콘텐츠 판매 수익 모델 >> 인앱결제 / 예를들어 앱 내에서 결제를 해야 하는 경우가 해당 3) ..
파이어베이스에서 제공하고있는 Realtime Database(리얼타임 데이터베이스) 에 대해서 공부해보겠습니다. 만약 어떠한 컨텐츠를 누르면 특정 페이지로 넘어가는 기능을 구현하고자할떄 그 컨텐츠에 담긴 모든 데이터를 특정 페이지로 넘기게 될 수 있습니다. 하지만 이러한 방식은 모든 상세 데이터를 넘기는 것이므로 느려지거나 무거울 수 있습니다. 예를 들어 인스타그램이나 페이스북처럼 실시간으로 댓글이 달리고 수정되는 서비스에서 모든 상세 데이터를 특정 페이지에 넘긴다고했을때 문제가 될 수 있는 것입니다. 댓글같은 경우엔 실시간으로 데이터가 변경될 수도 있기 때문입니다. 이를 개선하여 그 컨텐츠의 인덱스를 조회해서 그 인덱스에 해당하는 컨텐츠를 누를때마다 최신 데이터를 가져오게 해야합니다. 실습) data...
파이어베이스는 서버를 쉽게 사용할 수 있도록 도와주는 서비스입니다. 이번 공부일지에서는 파이어베이스에 가입하고, 프로젝트에 적용하여 사용하는 방법까지 공부해보겠습니다. 파이어베이스를 사용하기 위해서는 구글 계정으로 로그인 후 '시작하기'를 눌러 진행해야합니다. 가입을하고 프로젝트를 생성했으면 이제 앱에 연결할 수 있습니다. 정리하자면, 1) 파이어베이스에 가입 2) 파이어베이스 프로젝트를 생성 (만든 프로젝트와 이름이 일치해야합니다.) 3) 그 후 두개를 연결 파이어베이스에 가입을 완료하였으면, 1) 프로젝트 시작하기 2) 프로젝트 이름 지정 (Expo 프로젝트와 이름을 일치시키는게 관리하기 편합니다.) 3) 구글 애널리틱스 사용 설정 >> 이 서비스를 기본적으로 권장 cf) 구글 애널리틱스? >> 웹사..
