profile
지금은 갈팡질팡하지만 점차 바르게 걷게될지어다
post-thumbnail

React-Native [14. AdMob 전면 광고 추가하기]

전면 광고 추가하기 카드를 클릭하면, 그 카드의 상세 정보 화면이 나타나기 전에 잠깐 나오는 전면 광고를 추가해보았다. 게임하거나 어플 쓰면서 가장 킹받는 광고 예시코드 사용법 "expo-ads-admob" 라이브러리에서 사용할 광고 기능을 가져온다. 전면 광고는

2022년 4월 8일
·
0개의 댓글
post-thumbnail

React-Native [13. AdMob 기본설정, 배너 광고 추가하기]

AdMob 특징 앱에서 구글 배너 광고를 추가할 수 있도록 도와준다. 수익 현황 조회, 현금화도 가능하다. 광고 종류 총 6가지의 광고 종류를 제공한다. 이렇게 보니 그냥 배너 광고가 굉장히 양반이구나 하는 생각이 든다. 이 중 배너 광고와 전면 광고를 적용해본다

2022년 4월 8일
·
0개의 댓글
post-thumbnail

React-Native [12. Firebase로 저장한 데이터 조회/삭제]

저장한 데이터 조회하기 예시코드 사용법 리얼타임 데이터베이스의 like 폴더에서, 유저의 id에 해당하는 폴더의 데이터를 가져오도록 ref()에 주소값을 입력한다. 가져온 데이터가 존재할때, 그 화면이 보이도록 tip에 데이터를 입력하고, ready를 false로 변경한다. firebasedb에서 가져온 데이터가 Object라는 딕셔너리에 쌓여서 가져와...

2022년 4월 7일
·
0개의 댓글
post-thumbnail

React-Native [11. Firebase로 특정 데이터 조회/저장]

한꺼번에 모든 데이터를 가지고 페이지를 이동하는것은 상식적으로 느릴 수 밖에 없다. 이동하는 페이지에 필요한 데이터만 가지고 오는 기능이 필요한 이유! 예시코드 사용법 카드를 클릭하면 기존에는 content 데이터 전부를 넘겨주었었는데, 이를 {idx:content.idx}, 즉 primary key만 넘겨준다. {idx: 클릭한 카드의 idx}를 넘...

2022년 4월 7일
·
0개의 댓글
post-thumbnail

React-Native [10. Firebase로 데이터 관리하기]

Firebase 특징 구글에서 만든 서버리스(Serverless) 서비스 > Serverless 서버가 없다는 뜻이 아닌, 서버를 직접 만들 필요가 없다는 뜻! 필요한 서버 기능을 제공하는곳에서 서비스를 사용하기 때문에 매우 편리하다. 생성 및 설정 프로젝트를 생성한 후 앱/파일 저장소/리얼타임 데이터베이스를 생성해야한다. 앱 생성은 현재 개발중인 앱과 ...

2022년 4월 6일
·
0개의 댓글
post-thumbnail

React-Native [9. 날씨 API 사용하기]

API 정의 앱에서 서버에 데이터 요청(Request)을 하기 위해서는 정해진 규칙을 사용해야한다. > 서버쪽에서 정한 규칙 = API(Application Programming Interface) 특징 일반적으로 JSON 형태의 리스트([]), 딕셔너리({}) 복합구조 화면이 처음 보여질때 필요한 데이터를 가져올때 필요 화면에서 데이터 저장과 관련된 동...

2022년 4월 5일
·
0개의 댓글
post-thumbnail

React-Native [8. 공유하기, 링크]

공유하기 예시 코드 사용법 기존 "react-native" 라이브러리에서 Share 기능을 추가로 import 공유 기능을 실행시킬때 작동할 Share 기능을 작성한다. 예시에서는 Share.share 함수에 message를 작성하였다. 화살표함수로 share() 함수를 실행시킨다. 링크 설치코드 예시코드 사용법 expo-linking을 설치한다...

2022년 4월 4일
·
0개의 댓글
post-thumbnail

React-Native [7. React Navigation으로 페이지 이동하기]

앱에서 만든 컴포넌트들을 페이지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리! Expo에서 제공하고 있다. 1) React Navigation 설치코드 2) Stack Navigator > 컴포넌트에 페이지 기능 부여. 컴포넌트 -> 컴포넌트 이동 가능케함 => 페이지 이동 기능! 설치코드 예시코드 사용법 createStackNa...

2022년 4월 3일
·
0개의 댓글
post-thumbnail

React-Native [5. React의 필수 개념 : 컴포넌트, 속성, 상태, useEffect]

컴포넌트(Component) > 화면의 조각조각. 작은 컴포넌트들이 하나의 큰 컴포넌트를 구성한다. 속성(Props) > 컴포넌트에 데이터를 전달하는 기능! 규칙 1. Key & Value (content={content}) 형태로 전달 2. 컴포넌트 반복문 실행시, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을것! 상태...

2022년 3월 31일
·
0개의 댓글
post-thumbnail

React-Native [4. 간단한 소개 페이지 만들기]

헷갈렸던것들 가운데정렬 Text는 textAlign: 'center'!!!! alignItems vs justifyContent alignItems : 세로 방향만 따지는 정렬이다. 따라서 center 선언시 세로 기준 가운데 정렬이 된다. justifyContent : 가로 방향만 따지는 정렬이다. 따라서 center 선언시 가로 기준 가운데 정렬이 된...

2022년 3월 30일
·
0개의 댓글
post-thumbnail

React-Native [3. json과 map 함수]

json 다루기 어떤 데이터가 필요한지 나누어서 생성 딕셔너리{}의 키는 무엇으로 할것인지, 그 키에 해당하는 리스트[]에는 또 어떠한 딕셔너리/리스트/키/값으로 구성되어있을지 잘 나누어서 선언 사용할 페이지에서 선언 후 키 값을 참조하여 사용 예시처럼 let tip = data.tip 을 보면 data.json을 data로 선언한 후, data의 키값인...

2022년 3월 30일
·
0개의 댓글
post-thumbnail

React-Native [2. 개발 진행 순서]

Element로 구성하여 먼저 틀을 만든다 가장 밑그림이 되는 View(혹은 ScrollView)를 container로 놓고, 그 위에 차근차근 겹겹이 element를 선언한다. Style을 세분화한다 가장 바깥쪽 container 가장 바깥을 차지하는 container는 borderWidth를 1로 선언하고 위치부터 확인해보면 훨씬 편하다. 가장 밑바탕...

2022년 3월 30일
·
2개의 댓글
post-thumbnail

React-Native [1. 개발환경 구축, 기본적인 코드, style 문법]

기본적인 style 속성을 잘 알아놓아야겠다. 개발환경 구성하기 필수 설치 프로그램 npm npm을 설치하면 node도 알아서 설치된다. npm -v, node -v로 설치가 되었는지 확인할것! yarn npm install -g yarn 으로 설치하려하는데 np

2022년 3월 30일
·
0개의 댓글

Docker를 배워보자!

개발 유튜버 '드림코딩 by 엘리' 님의 영상, '도커 한방에 정리 🐳 (모든 개발자들이 배워보고 싶어 하는 툴!) + 실습' 을 보고 Docker가 무엇인지, 어떻게 사용하는지에 대해 정리해보았다.

2022년 3월 12일
·
0개의 댓글
post-thumbnail

JavaScript 공부 [13. JavaScript 구조, 브라우저 작동]

자바스크립트는 싱글 쓰레드 언어! 자바스크립트가 동작하는 브라우저(웹 API) 사용시 멀티 쓰레드 가능 자바스크립트가 동작하는 실행환경에서 이벤트 루프 등을 사용해서 멀티 쓰레드 효과 가능 JavaScript Engine 구조 Memory Heap 변수, 함수 등 데이터 선언시 할당된 데이터가 임의로 저장 Call Stack(LIFO) 함수 작동 순서 저...

2022년 3월 9일
·
0개의 댓글
post-thumbnail

깃허브로 내가 만든 리액트 페이지를 올려보자

깃허브로 내가 만든 리액트 페이지를 올려보자

2022년 2월 7일
·
0개의 댓글

FrontEnd 만들때 느꼈던 점과 나름의 꿀팁들

MarkUp - CSS - Event

2021년 8월 21일
·
0개의 댓글

Rendering 기본 개념 이해

DOM -> CSSOM -> Render Tree -> Layout -> Paint -> Composition

2021년 8월 19일
·
0개의 댓글

DOM 기본 개념 이해

MDN 사이트에 정의된 DOM과 이와 관련된 용어들을 찾아보고 정리해보았다

2021년 8월 18일
·
0개의 댓글