🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁TIL 회고 - [31]일차🚀31일차에는 먼저 Express 서버로 수정/삭제 기능 구현을 모두 완료하고 useEffect와 useEffect에서 cleanUp하는 부분을 배울 수 있었다.그 후 리액트로 구현했던 Todo 리스트 프로젝트를 조금 더 개선하여 "작성날짜"와 "할일완료유무" 등을 확인할 수 있도록 Memo 프로젝트를 진행하였다.잘 구현할 수 없을 것 같던 투두리스트 프로젝트를 기능별로 하나씩 구현해보니 시간은 꽤 오래걸렸지만 원하는 기능을 구현해낼 수 있었다.회고를 통해 프로젝트를 구현하면서 했던 생각들을 정리하고자한다! 리액트에 Express 적용 (할일 추가) express서버의 추가하는 부분 (index.js)let idGen = 3;rou..
ExpressNode.js의 웹 애플리케이션 프레임워크Node.js는 크롬의 V8엔진을 통해 브라우저가 아닌 자바스크립트로 서버를 구축한 후 그 서버에서 자바스크립트가 작동되도록 해주는 런타임 플랫폼Express는 이러한 Node.js를 기반으로 웹 애플리케이션을 만들기위한 프레임워크💡정리하자면 Node.js를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체자바스크립트 + Node.js를 이용한 Web API 만들기1. 설치 ➡️npm install -g express-generator ⚠️ 프로젝트는 다른 리액트프로젝트의 하위가 아닌 새 프로젝트로 생성해야한다.-g 옵션 : global로 전역옵션으로 설치해달라는 것$ npm install -g express-generatorn..
🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁TIL 회고 - [30]일차🚀30일차에는 리액트로 Todo리스트를 구현하면서 추가, 삭제, 수정 기능을 어떻게 구현하면 좋을지 배울 수 있었다.useState가 중요하게 자주 쓰였고 props로 함수객체와 데이터객체를 전달하여 다른 컴포넌트에서 수행한 값을 전달할 수 있었다. 회고를 통해 코드를 다시 해석해봐야겠다고 생각했다. Todo 리스트 만들기전체 컴포넌트를 감싸는 컴포넌트 = TodoBox 컴포넌트그 안에서 Input을 받는 Todo = TodoInput 컴포넌트Todo들을 보여주는 컴포넌트 = TodoList 컴포넌트추가 기능할 일 입력 후 엔터 입력 시 “할일이 등록되면서” 리스트에 정보 출력 (input태그에 이벤트onKeyDown 활용)리스트의..
🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁TIL 회고 - [29]일차🚀29일차에는 상태관리를 할 수 있는 useState와 DOM객체를 참조할 수 있는 useRef에 대해서 배웠다.또한 부모-자식으로 묶여있는 컴포넌트들을 한번에 가져와 화면에 반영해볼 수 있었다. 범위는 적었지만 그 안에서 새롭게 배운것이 많아서 이번 회고를 통해 정리를 잘 해놔야겠다고 생각했다.여러 컴포넌트 전달 ▶️실습 - XML 요소(Element)안의 내용들을 props로 전달XML요소 Helloprops.children : props가 가지고 있는 내용을 전달Parent.jsfunction Parent(props){ return( {props.children} )}ex..
🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁TIL 회고 - [28]일차🚀28일차에는 리액트를 배울 수 있었다. 이전에 조금 접했던 라이브러리이지만 토이 프로젝트로 빠르게 지나간 이유로 기초가 많이 부족했다. 또한 시간이 많이 지나 기억이 잘 안나기도 하였다.리액트의 기초부터 배우게되면서 리액트의 상태변화라던지 DOM을 가상 DOM으로 사용하는 것들이 자바스크립트 라이브러리에서 리액트가 자주쓰이는 이유임을 알 수 있었다. 회고를 진행하면서 다른 실습도 진행해봐야겠다고 느꼈다. 리액트 React리액트 js : 메타에서 개발한 “오픈소스 자바스크립트 라이브러리”Angular, Vue.js 와 함께 프론트엔드에서 많이 쓰임Virtual DOM (가상 문서 객체 모델)을 활용하여 업데이트해야하는 DOM 요소를..
'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 지금까지 프로젝트를 진행해왔는데, 다뤄보지 못했던 언어도 접하고, 각종 프레임워크, 라이브러리를 공부하다보니 서비스 개발에 더 흥미가 생기기 시작했습니다. 이번 기회를 토대로 앞으로도 꾸준히 '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) ..
