본문 바로가기

Web Frontend

iOS 웹뷰 safe area inset 이슈 해결 방법 이슈 상황iOS 앱 내에서 웹뷰로 웹페이지를 그릴 때, 페이지의 전체 높이가 실제 기기 높이값보다 더 크게 잡혀서 상하스크롤이 항상 발생하는 이슈기존 코드 문제점 및 해결기존 코드에는 몇가지 문제가 혼재되어 있었다.첫번째, meta tag viewport 속성meta tag에 viewport 관련 속성을 넣고 있는데, 와 같이 name 이 아닌 property 로 잘못 셋팅하고 있어서 실제로는 적용이 안되고 있었다.viewport 와 같은 속성은 name 으로, open graph 관련 og 태그는 property 로 셋팅해야한다. MDN 문서두번째, iOS 는 상/하단에 상태바/하단바와 같은 기본 영역이 있다는 점을 고려해야한다. 와 같이 viewport-fit: cover 로 셋팅한 웹뷰는, 기기 ..
React, Redux, Webpack4, Babel7, Material UI 로 프로젝트 셋팅하기 2 2. React 와 ReactDOM 적용하기React의 DOM 렌더링 과정은 이 문서를 참고하여 공부했습니다. 이와 관련해서 이후 포스팅을 할 예정입니다. React, ReactDOM 설치하기 $ npm install --save react react-dom/index.js 에서 사용해보기import React from "react"; import ReactDOM from "react-dom"; let Hi = () => { return Hi Ryu! }; ReactDOM.render( , document.getElementById("root") ); 이제 React 코드를 어떻게 컴파일해야할지 Webpack 에게 알려주는 역할이 필요합니다. Babel 이 바로 그 역할을 합니다. Babel packag..
React, Redux, Webpack4, Babel7, Material UI 로 프로젝트 셋팅하기 1 팀에서 데이터 조회 및 운영툴이 필요하여 만들게 되었습니다.지금은 데이터 조회 기능이 전부인 작은 서비스이지만, 이후 팀에서 운영이 필요한 부분들을 모두 담을 애플리케이션이라 React, Redux, Webpack4, Material UI 를 스펙으로 서비스 스펙을 설정하게 되었습니다. 세부적인 코드는 업무 내용이라 여기 작성하진 못하겠지만, 기본적인 셋팅과 틀은 어디서나 공통적으로 사용될 내용이라 블로그에 기록을 해두면 좋을것 같아 함께 진행해보려 합니다. 0. 너로 정했다! 우선은 들어가기에 앞서, 많고 많은 Framework와 Library 중에 아래 도구들을 사용하기로 결정한 이유에 대해 정리해보았습니다.React바야흐로 춘추전국시대에서 살아남은 React와 Vue.작년에 Vue 로 팀내 운영툴을..
타입스크립트 타입스크립트 = 컴파일 했을 때 자바스크립트가 되는 언어 타입스크립트(TypeScript)는 마이크로소프트에서 개발 및 유지되는 자바스크립트 슈퍼셋이다.타입스크립트는 자바스크립트로 대규모 애플리케이션 개발을 위해 개발되었다.자바스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다.타입스크립트는 모든 운영체제, 모든 브라우저, 모든 호스트에서 사용가능한 오픈소스이다.- 위키백과 컴파일 시점에 타입 체크CoffeeScript, TypeScript, ClojureScript, GorillaScript 등 왜 타입스크립트를 쓰는가 기능 추가혁신의 자유로움 TypeScript는 인터페이스와 추상 클래스, 대수(algebraic) 데이터 타입 등의 기능을 JavaSc..
프론엔 기본 * 프레임워크- Application 개발시 코드의 품질, 필수적인 코드, 알고리즘, 암호화, 데이터베이스 연동 같은 기능들을 어느정도 구성이 되어있는 뼈대(구조)를 제공하도록 만들어진걸 프레임워크라고합니다. - 개발 구조나 설계 시 제공되는 인터페이스의 집합.- 어느정도 제공된 프레임워크의 구조에서 어플리케이션을 개발해야한다. * 라이브러리- 라이브러리는 특정 기능에 대한 API(도구 / 함수)를 모은 집합을 라이브러리라고 합니다.그 기능을 사용하기위해 불러와서 호출하는 식. * 프레임워크와 라이브러리의 차이프레임워크도 제어의 역전 개념이 적용된 대표적인 기술이다.프레임워크는 라이브러리의 다른 이름이 아니다.프레임워크는 단지 미리 만들어 둔 반제품이나, 확장해서 사용할 수 있도록 준비된 추상 라이브러리..

티스토리툴바