👩‍💻 Programming/Frontend

👩‍💻 Programming/Frontend

HTML & CSS

HTML Hypertext Markup Language(하이퍼텍스트 마크업 언어)의 줄임말로, 웹페이지의 기본적인 형태를 만드는 정적 언어이다. CSS HTML 구성요소들이 표시되는 방법을 개선하는 데 주로 사용되는 스타일 시트(style sheet) 언어이다. CSS는 정적인(static) 프로그래밍 언어이기는 하지만, 웹사이트를 시각적인 표현을 담당한다. Javascript 브라우저 자체에서 내장된 해석기능을 이용한 클라이언트 기반의 일종의 스크립트 언어이며, 웹의 동적 처리를 담당한다. HTML 개념 웹페이지의 기본적인 형태를 만드는 코드이다. 예시: 글자, 버튼 html은 쉽고 직관적이기 때문에 쉽게 배울 수 있다. !+Tab을 누르면 기본적인 html 코드가 생성된다. 괄호 안에 적힌 영어 단어..

👩‍💻 Programming/Frontend

[React] axios 활용

Axios? axios는 js 기반의 환경에서 http 통신을 수행할때 사용하는 모듈로 많은 사람들이 사용 중으로 알고있다. 해당 모듈을 별도의 설정없이도 사용이 가능하지만, 프로젝트 진행시에는 공통된 옵션을 기본설정하여 사용할 수 있다. 여기서는 axios의 기본 사용법보다는 프로젝트에서 사용할때 도움이 될 만한 내용을 정리하며, 기본 내용 및 관련한 내용들은 모두 공식문서를 참조하였습니다. Axios를 async/await 를 이용하여 사용하는 방법 axios를 이용하여 API호출을 하는 경우 바로 응답이 오지 않기에 일반적으로 비동기 방식을 사용한다. axios 문서에서도 기본적으로 소개하는 사용방식은 Promise-then 방식의 비동기 호출방식을 소개하고 있다. 다만 then 방식의 경우도 ap..

👩‍💻 Programming/Frontend

React Native 앱 5주차 개발일지

Advertisement 수익형 앱 앱 마켓에 유료앱 배포 수익 모델 앱 내 배너 광고 수익 모델 앱 콘텐츠 판매 수익 모델: 인 앱 결제 구독 수익 모델 앱 개발 용역 수익 모델 외부 브랜드 광고 수익 모델 가장 쉽게 수익 구조를 앱에 연결 할 수 있는 방법은 [앱 내 배너 광고 수익 모델] 이다. 1. 배너 클릭 2. 배너 광고 시청 3. 배너 광고 사용자 참여 이 3가지 모두 앱에 쉽게 적용할 수 있는 방법을 구글 애드몹 광고 서비스에서 제공해준다. 구글 광고, 애드몹 구글 애드몹에서는 총 4가지의 광고 유형을 제공한다. 구글 애드몹 역시 Expo에서 지원해준다. 하지만 공식 문서에서 애드몹의 사용가능 플랫폼을 보면, 모두 가능하지만 웹에서는 안된다는 것을 확인할 수 있습니다. 웹의 경우 구글에서는..

👩‍💻 Programming/Frontend

React Native 앱 4주차 개발일지

Server 1. Server 앱에서 서버에 데이터를 요청하거나 데이터를 보내는 대화를 하려면 서버가 정한 규칙에 따라 대화 요청(Request)을 해야한다. 정한 규칙에 따라 요청을 하지 않으면 응답(Response)이 오지 않는다. 서버 쪽에서 정한 규칙을 우린 보통 API(Application Programming Interface)라고 부른다. API는 서버가 제공하는 도메인, 혹은 서버가 만들어놓은 함수 형태로 제공된다. 서버에서 주는 데이터 형식은 JSON이다. 리액트 네이티브로 앱을 만들면서 서버와 통신(대화)하는 시점은 크게 두 가지이다. 1) 앱 화면이 그려진 다음 데이터를 준비 ← useEffect useEffect(()=>{ //서버 API 사용 //이 화면에서 사용 할 데이터 준비 ..

👩‍💻 Programming/Frontend

React Native 앱 3주차 개발일지

React 1. React 기초 지식 1) 컴포넌트(Component) : 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분 컴포넌트는 즉, 화면의 모든 부분이다. 그리고 컴포넌트란 App.js의 큰 App 함수처럼, 코드 전체를 감싸고 있는 함수를 뜻하기도 한다. 2) 속성(Props) : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달! 속성은 쉽게 생각해서 컴포넌트에 데이터를 전달한다는 것이다. 그 전달 모습은 kye와 value의 형태이다. Text 태그의 numberOfLines 속성, Image 태그의 resizeMode 속성이 그 예시이다. 속성에는 규칙이 있다. 컴포넌트에 속성(데이터)을 부여해줘서 전달할땐, 키와 벨류(content={content})..

👩‍💻 Programming/Frontend

React Native 앱 2주차 개발일지

EXPO 및 JSX 문법 1. Expo javascript만으로 개발을 할 수 있도록 도와주는 도구이다. 기존의 ReactNative CLI와 달리, android와 ios 앱에 대한 코드가 필요하지 않다. expo 클라이언트 앱을 제공해서, 휴대폰에서 바로 확인할 수 있다. 2. 앱 개발 준비 : 리액트 네이티브 & Expo 설치 도구를 가져오기 위한 도구: Node, NPM, yarn Node로 개발 환경을 구축하고, NPM 혹은 Yarn으로 자바스크랩트 앱 개발 도구를 가져온다. $ npm install -g yarn $ npm install -g expo-cli expo 서비스를 가입하면 대시보드에서 관리할 수 있다. expo 서비스에 가입하고, local 컴퓨터에서 expo에 로그인한다. $ e..

👩‍💻 Programming/Frontend

React Native 앱 1주차 개발일지

javascipt 기초 문법 1. 변수 let,var 중 하나 사용 일괄적으로 let 사용 let num = 20; console.log(num); 사칙연산 let a = 1 let b = 2 let c = a+b console.log(c) console.log(a*b) // 문자 let first = "gunhee" let last = 'kim' console.log(first + last) console.log(first + " " + last) console.log(first + a) // 숫자를 문자로 바꾼 뒤 수행 변수명 let firstName //camel case let first_name // snake case // 하나를 정해서 일괄적으로 사용하자. const로 변수 선언 const ..

나리 집사
'👩‍💻 Programming/Frontend' 카테고리의 글 목록