본문 바로가기

분류 전체보기

 (31)
[개발] Chrome 자동완성을 막아보자 안녕하세요 devport 입니다. 이번에 개발을 진행하면서 Chrome에서 Input타입 컴포넌트에 Name과 Password가 자동으로 입력되어 불편함을 느끼게 되었고 Chrome 버전마다 해결 하는 방법들이 상이하여 이를 막을 수 있는 방법을 히스토리 형식으로 남겨두려고 합니다. Chrome version Solution 87.0.4280.88 autocomplete="new-password"
[개발] CSS - Flex Box 요점 정리 안녕하세요 Devport 입니다. 이번 포스팅에서는 CSS 스타일 중 하나인 Flexible Box에 대한 사용방법에 대해서 간단하게 정리해보려고 합니다. Flex Container display: flex; flex-direction (default: row) Flex Items의 주가 되는 축을 설정합니다. 수평축 or 수직축 등.. row: 방향으로 표시 row-reverse: 방향으로 표시 column: 방향으로 표시 column-reverse: 방향으로 표시 flex-wrap (default: nowrap) Items의 여러 묶음을 설정합니다. nowrap: 줄바뀜이 되지 않고 영영을 벗어날수 있음 wrap: Items를 여러 줄로 묶음 (Item들이 컨테이너의 범위를 넘어서게 되려 할때 다음줄..
[개발] Frontend에서 Cors 해결방법 안녕하세요 devport 입니다. 웹 개발을 하다보면 같은 출처가 아닌 외부의 API를 사용하고자 할때 웹 브라우저에서 에러가 발생하게 됩니다. 에러가 발생하는 이유는 브라우저의 CORS 정책에 위반되기 때문입니다. FrontEnd개발 시에 극복할 수 있는 방법들에 대해서 알아보도록 하겠습니다. 우선 간단히 SOP, CORS 정책에 대해서 알아보도록 하겠습니다. SOP (Same-Origin Policy) 위키에서는 SOP를 "동일 출처 정책"이라고 합니다. 정책명 그대로 동일 출처의 리소스 (HTTP, IMG, CSS... 등)만을 요청할 수 있습니다. 그렇기 때문에 다른 출처의 데이터를 요청을 한다는 것은 정책에 위배되는 행위라고 볼 수 있습니다. 하지만 다른 출처의 요소들에 대해서 허용도 가능해야하..
[개발] Github 이슈와 커밋 메시지를 연결해보자 안녕하세요 devport 입니다. Github에 이슈를 대응하고 커밋할 때에 특정 포맷을 사용하게된다면 커밋된 내용이 자동으로 이슈에 반영되는 기능에 대해서 간단히 알아보도록 하겠습니다. Github commit message 이슈에 자동 링크 Github의 Repository에 대하여 Commit Message에 "#[Issue Number]"를 입력하게 될 경우 자동으로 이슈에 커밋 내용을 추가하게 됩니다. 추가된 이슈는 커밋 메시지와 함께 링크를 제공하게 되며 링크를 클릭하게 되면 변경 이력에 대하여 출력 하게 됩니다. 커밋과 함께 이슈를 Close 할 수 있는 Keyword 이슈에 올라온 버그 또는 기능을 수정하였을때에 Commit Message에 적절한 키워드를 사용하게되면 이슈를 같이 Clos..
[개발] React Native 노치 디자인 해결 방법 안녕하세요 devport 입니다. 이번에 React Native로 앱을 개발 하던중에 Apple의 iPhone이 사용하는 노치 디자인으로 인하여 상태표시 부분이 안보이는 현상이 있어서 해결하는 방법을 찾아보았습니다. 아이폰은 상단의 "상태 표시 줄"과 하단의 "Home indicator"부분으로 인하여 디자인 사용성에 영향을 받을 수 있습니다. 이것을 해결하기 위해서 안전영역(Safe area)영역을 추가하게되면 아래와 같이 보호 영역이 생성이 됩니다. 적용 소스 import * as React from 'react'; import { WebView } from 'react-native-webview'; import { SafeAreaView, StatusBar } from 'react-native'; ..
[개발] React Native 앱 개발에 대해 알아보자. 안녕하세요 devport 입니다. 이번에 하이브리드 앱을 개발할 수 있는 프레임워크 중 하나인 React Native에 대해서 알아 보도록 하겠습니다. 제가 이번 React Native를 알아보는 이유는 WebView에 이미 개발된 웹 호스트를 올려 실제 앱처럼 동작할 수 있다는 부분을 이용하기 위해서 입니다. 아무래도 포스팅의 방향도 React Native의 다양한 컴포넌트를 사용하는 방향으로 작성되지 않을 것을 여러분은 참고해주시면서 읽어주셨으면 합니다. React Native? React Native는 페이스북에서 개발 되었으며 오픈소스 모바일 애플리케이션 프레임워크 입니다. Android, IOS 등의 애플리케이션을 개발하기 위해서 사용되고 있으며 네이티브 플랫폼과 리액트라는 요소를 사용할 수 있..
화장실 벌레와 담배냄새를 한번에~ 에어스케이프 (AirScape) 안녕하세요 devport 입니다. 이번에 저희 집 화장실에 환풍기를 타고 들어오는 유령거미와 담배냄새 때문에 스트레스가 이만저만이 아니라서 어떻게 해야할지 고민하고 있을때 후배 집들이때 우연하게 본 에어스케이프 제품을 구매하게되었습니다. 내돈내산~ 가격은 저렴하진 않지만 담배냄새와 계속 출몰하는 유령거미 때문에 놀라는 마누라를 진정시키기 위해서 저에게는 꼭 필요한 제품입니다. 거미야 제발 나타나지마렴 ㅜㅜ 너무 거대해서 저도 자주 놀란답니다.. 집유령거미는 이렇게 생겼습니다. 습하고 어두운곳을 좋아하는 놈이라서 사람눈에 안보이는 곳에 숨어있다가 갑자기 훅 하고 나오게 되는데 그때마다 와이프는 소리치고 나보고 잡아달라는 스트레스를 주는 나쁜녀석...이죠 그리고 환풍기를 통해서 나오는 담배연기... 제발 화..

티스토리툴바