본문 바로가기

웹 프론트70

HTTP: Content-Type 에 대해 알아보자 (application/json, application/x-www-form-urlencoded, multipart/form-data) 웹 개발을 하게 되면 HTTP에 대해 조금 알아두는 것이 좋습니다. 그중에서 Content-Type에 대한 이해가 부족한 것 같아 정리를 해보았습니다. Content-Type Content-Type은 api 연동시에 보내는 자원을 명시하기 위해 보통 사용합니다. Content-Type을 깊게 이해하기 위해서는 HTTP의 request의 구조를 이해하는 것이 좋습니다. HTTP의 Request는 다음과 같이 4개의 파트로 나눌 수 있습니다. 위 그림에서 Message Body에 들어가는 타입을 HTTP Header에 명시해줄 수 있는데 이때 명시해줄 수 있도록 해주는 필드가 바로 Content Type입니다. 예를 들어 api 요청 시 request에 실어 보내는 데이터(body)의 type정보를 표현합니.. 2022. 2. 16.
React Native : 절대 경로 설정하기 (+ 타입스트립트) React Native를 개발하다 보면 절대 경로 설정을 하고 싶을 때가 있습니다. 이때 헤메시는 분들을 위해 간단하게 정리해보겠습니다. 1. babel-plugin-module-resolver 설치하기 먼저 아래와 같은 babel-plugin-module-resolver를 설치하여 줍니다. npm i babel-plugin-module-resolver 2. babel.config.js에서 alias 설정하기 babel.config.js는 기본적인 babel에 대한 설정을 저장하고 있는 config 파일입니다. 기본적으로 React-Native 프로젝트는 다음과 같이 babel.config.js가 구성되어 있습니다. module.exports = { presets: ['module:metro-react-.. 2022. 2. 1.
JS : 모바일 웹앱에서 video 태그 자동재생 구현하기 ( + 추가적으로 IOS safari에서 자동 재생 시 저전력 모드일때 멈추는 문제 예외처리) 모바일 웹앱을 만들때 비디오를 자동 재생하는 부분에서 애를 먹곤 합니다. IOS의 Safari와 안드로이드의 Chrome에 맞춰서 비디오를 자동 재생을 시키려면 몇가지 유의해야 할 점이 있습니다. 이에 대해서 알아보고 추가적으로 IOS Safari에서 저전력 모드일때 자동재생이 막히는 부분에서 예외처리 방법에 대해 알아보겠습니다. 모바일에서 Video 태그 자동재생 보통 모바일에서 비디오 태그를 자동재생 시킬때 필요한 몇가지 속성들이 있습니다. Video 태그에 자동재생, 즉 autoplay를 활성화 시키려면 기본적으로 muted 속성이 필요합니다. muted 속성은 video태그에서 소리를 막아주는 속성값입니다. muted 속성이 필요한 이유는 웹 브라우저를 켰을때 유저가 원하지 않는데 자동재생되며 소.. 2022. 1. 29.
React Native : 텍스트가 넘칠때 사용하면 좋은 flexShrink React Native에서 텍스트가 범위 밖을 넘어가서 고생을 했습니다. Flex 박스 레이아웃을 조금 공부해보니 flex-shink라는 좋은 속성이 있는 것을 알게 되어서 한번 적용해봤습니다. Flex 박스 레이아웃의 flex-shrink flex-shrink는 Flex 부모 레이아웃의 자식들의 영역에 대해서 자식 Box들의 넘치는 부분을 없애줄 수 있는 속성입니다. https://developer.mozilla.org/ko/docs/Web/CSS/flex-shrink flex-shrink - CSS: Cascading Style Sheets | MDN flex-shrink CSS property는 flex-item 요소의 flex-shrink 값을 설정하는 속성입니다. 만약 flex-item 요소의 .. 2021. 12. 23.
React Native: IOS 14에서 이미지 리소스 패치 안되는 문제 해결 React Native를 개발하던중에 IOS14 에뮬레이터에서 이미지 리소스가 패치가 안되는 문제가 발생했습니다. 문제 원인 https://jeffgukang.github.io/react-native-tutorial/docs/tips/image-error-ios14.html Image is not loading(iOS14) React Native Tutorial For Beginners - 2019 jeffgukang.github.io 문제점을 찾던중에 React Native에 대한 오픈소스 튜토리얼 페이지에서 원인을 찾을 수 있었습니다. 저는 React-Native 버전 0.61.5를 사용하고 있었기 때문에 위 문제가 나타난 것이었습니다. 해결법 해결법은 의외로 간단합니다. npm i -g patch-.. 2021. 12. 14.
React 에서 geolocation API를 hook 으로 만들어 써보기 React에서의 GeoLocation GeoLocation은 GPS 또는 네트워크를 이용하여 현재 위치 정보를 반환하는 API입니다. 즉 웹브라우저에서 현재 내 위치의 위도(latitude)와 경도(longitude)를 알아보고 싶을때 주로 사용합니다. 저는 React 프로젝트에서 해당 기능을 쓰고 싶어서 이를 React로 구현할 수 있는 방법을 찾아보았습니다. GeoLocation의 함수 Geolocation 함수는 보통 Javascript에서 window의 navigator.geolocation 객체를 통해 사용할 수 있는데요, 먼저 GeoLocation의 함수에 대해서 간단히 살펴보면 아래와 같습니다. clearWatch WatchPosition을 멈춘다. getCurrentPosition 현재 위.. 2021. 11. 3.
JS : 모바일에서 오른쪽 클릭 시 옵션메뉴 안나오게 하기 마우스 오른쪽 클릭을 눌렀을 때 나오는 메뉴를 contextmenu라고 합니다. 모바일에서는 보통 `LongClick` 시에 해당 메뉴가 나오게 되는데, 때에 따라 해당 부분때문에 모바일 웹앱을 만들때 방해가 될 수 있습니다. 이럴때는 하단 태그에 다음과 같은 JS 파일을 삽입해주면 문제가 해결됩니다. // context 메뉴 출력시 호출되는 event handler window.oncontextmenu = function(event) { event.preventDefault(); // 기본 태그 기능 막기 event.stopPropagation(); // 이벤트 전달 막기 return false; }; 2021. 7. 21.
자바스크립트 : 깊은 복사 vs 얕은 복사 깊은 복사 깊은 복사는 변수에 다른 변수의 값을 대입했을때 각각의 변수가 독립적으로 존재하고 값만 복사 되었을 때를 말합니다. 즉 원본의 값만을 복사하여 반환 합니다. // 일반변수의 깊은복사 let a = 2; let b = a; console.log (a, b) // 2, 2 b = 3; console.log (a, b) // 2, 3 // 배열의 깊은복사 const a = [1, 2, 3, 4]; const b = [...a]; b[3] = 3 console.log(a) // 1, 2, 3, 4 console.log(b) // 1, 2, 3, 3 얕은 복사 반면 얕은복사는 배열이나 객체등에서 해당 객체의 참조값을 대입했을때, 해당 참조값의 복사가 일어나 같은 주소를 가르키게 될 경우를 의미합니다. .. 2021. 6. 15.
React-Native : toast 메세지 구현하기 (react-native-easy-toast) React Native를 사용하다 보면 Toast 메세지를 사용해야할 때가 있습니다. Toast 메세지는 안드로이드 개발을 할 때 한번쯤은 접해봤을 텐데요 React-native에서도 쉽게 Toast 메세지를 사용할수 있는 라이브러리가 있습니다. react-native-easy-toast 라는 라이브러리 인데요 이를 이용하면 쉽게 Toast 메세지를 구현할수 있습니다. react-native-easy-toast 설치 아래와 같이 설치합니다. npm i --save react-native-easy-toast react-native-easy-toast 사용법 사용법은 무척 간단합니다. 요즘 Hooks를 쓰는 방법이 일반화되어있으니, React Hooks를 기준으로 설명드리겠습니다. 먼저 Toast에 대한 값.. 2021. 6. 14.
React Native : splash 화면 적용하기 React Native에서 데모 앱을 만드는데 Splash를 구현해야 할 일이 생겼습니다. React Native에서 splash를 적용하는 방법에 대해 알아보겠습니다. 1-1) Splash 구현을 위한 준비 단계 (Android) React Native에서 Splash를 구현하기 위해서는 react-native-splash-screen 라는 npm 라이브러리를 사용하는 것이 편리합니다. 1. react-native-splash-screen 라이브러리 설치 (공통) npm i react-native-splash-screen --save 2. android/app/src/main/ 맨 하단에 있는 MainActivity.java 파일 수정하기 (Android) package com.lottoproject;.. 2021. 5. 25.