본문 바로가기

분류 전체보기253

React native 상단바 겹침 paddingTop: Platform.OS === `ios` ? 0 : Expo.Constants.statusBarHeight, 제일 상단 뷰에 스타일로 적용하여 해결 {Platform.OS === 'ios' && } - 수정 - expo 프로젝트를 새로 만들었을 때, 기본 제공되는걸로 보아 최적인 듯하다. - 스타일이 아니라 컴포넌트로 사용 2020. 2. 4.
[JS] 웹페이지 로딩 후 JS 실행 웹을 처음 로딩할 때, 모든 소스가 다 다운로드 되지 않은 상태에서 JS를 실행하다보니 애니메이션같은 경우 끊김이 발생하여 보기 좋지 않았다. 그래서 window.onload $(document).ready() 등과 같은 것들을 사용해봤지만 효과가 좋지 않았다. $(window).on('load',function() { // script }) 이것으로 쓰는 것이 제일 효과가 좋았다. 2020. 1. 30.
Google Tag Manager_2 (with.Facebook) 배경 이 내용은 Facebook 픽셀과 Google Tag Manager를 사용하여 웹사이트에 이벤트 트래킹 코드를 추가하는 방법에 대한 설명입니다. 아래는 단계별로 설명해드리겠습니다 방법 페이스북 픽셀로 이동: 페이스북 비즈니스 관리자에 로그인하고 "이벤트 관리기" 섹션으로 이동하여 픽셀을 선택합니다. 이벤트 만들기: 이벤트 관리기에서 원하는 이벤트를 생성합니다. 이벤트의 이름과 유형을 설정합니다. 예를 들어, "추적하려는 이벤트의 이름"과 "PageView"와 같이 이벤트 유형을 선택할 수 있습니다. 픽셀 코드 복사: 이벤트를 만든 후, 생성된 픽셀 코드를 복사합니다. 구글 태그 매니저로 이동: Google Tag Manager에 로그인하고 작업하려는 계정 및 컨테이너를 선택합니다. 새 태그 만들기:.. 2020. 1. 10.
[REACT] react-router-dom / react router 설치 yarn add react-router-dom 사용 BrowserRouter라는 컴포넌트 HTML5의 API를 이용하여 페이지를 새로고침 하지 않고도 주소를 변경 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다. 실습 1. index.js를 다음과 같이 수정한다. import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( , docume.. 2020. 1. 9.
Google tag manager_1 태그 관리자란... 사용자의 행동 추적 도구 컨테이너 : 태그, 트리거, 변수 등 관련 구성의 모음 컨테이너는 Gooogle Ads, Google Analytics, 타사 태그를 포함하여 사이트 또는 앱에서 수동으로 코딩한 다른 모든 태그를 대체할 수 있다. 수동으로 태그를 삽입하면 관리가 어렵다. 웹페이지의 속도가 저하될 수 있다. 태그 매니저를 이용하면 직접 코드를 추가하지 않아도 된다. 태그 삽입 과정이 빨라지며 로딩속도도 빨라진다. 개발자에게 요청하지 않아도 된다. Set up & Deploy Tags Triggers Variables Data layer Variables Events Use 태그 관리자를 이용해 광고 및 리마케팅 태그를 설정한다. 태그 구현 전략 개발 태그 관리자를 구현할 때는 .. 2020. 1. 9.
[Vue] Axios를 이용한 통신 - Get/Post/Delete 등 Vue 통신 vue 내에서 axios를 이용해서 통신하는 방법을 구현해 보았습니다. get data // vue에서의 foreach 같은 문법 {{ item }} // 혹은 {{ item.name }} {{ item.telephone }} 위의 방법대로 axios 뒤의 get 값을 post, delete 등으로 수정하시면 활용이 가능합니다. post시 데이터를 넣어줄 때에는 postContact: function() { axios.post("주소",{ name: this.name, telephone: this.telephone }) .then(response => this.addedContact = response.data) .catch(function(error) { console.log(error);.. 2020. 1. 8.
[REACT] SPA / Single Page Application SPA란? 싱글 페이지 어플리케이션. 페이지가 하나다. 처음 HTML 페이지를 하나 불러온 다음, 이후 페이지들은 JS로 로드한다. 기존 웹페이지 로딩방식의 단점 트래픽이 너무 많이 나올 수 있다. (=비교적 안나온다.) 사용자가 몰려 서버에 높은 부하가 나올 수 있다. (=서버에 높은 부하가 나오지 않는다.) 화면전환이 일어날 때마다 HTML을 계속 서버에 요청하면 사용자의 상태를 유지하기 힘들다. (=리액트는 사용자의 상태를 유지하기 쉽다.) 바뀌지 않는 부분까지 새로 불러와서 보여줘야해서 불필요한 로딩이 있어 비효율적이다. (=리액트는 바뀌는 부분만 새로 불러와서 효율적이다.) SPA 장점 뷰 렌더링을 사용자의 브라우저가 담당한다. 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여.. 2020. 1. 7.
[REACT] immer immer 란? 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 업데이트 하기 힘들다. 이럴때 immer를 사용한다. 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트 할 수 있다. immer 설치 yarn add immer immer 사용 immer를 사용하여 컴포넌트 상태를 작성할 때는 객체 안에 있는 값을 직접 수정하거나, 배열에 직접적인 변화를 일으키는 push, splice 등의 함수를 사용해도 무방하다. 따라서 불변성 유지에 익숙하지 않아도 쉽게 변화시킬 수 있다. immer를 사용한다고 해서 무조건 코드가 간결해지지는 않는다. onRemove의 경우 배열 내장 함수 filter가 더 깔끔하다. 따라서 불변성을 유지하는 코드가 복잡할 때 만 사용하자. 2020. 1. 7.
[Vue] Rest Api, http 통신하는 법 / Axios https://joshua1988.github.io/vue-camp/vue/axios.html Axios | Cracking Vue.js 액시오스 뷰에서 권고하는 HTTP 통신 라이브러리는 액시오스(Axios)입니다. Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양합니다. 액시오스 설치 프로젝트에 액시오스를 설치하는 방법은 CDN 방식과 NPM 방식 2가지가 있습니다. CDN 방식 NPM 방식 액시오스 사용방법 라이브러리를 설치하고 나면 axios라는 변수에 접근할 수 있게 됩니다. axios 변수를 이 joshua1988.github.io https://www.npmjs.com/package/axios axios P.. 2020. 1. 7.

티스토리툴바