분류 전체보기154 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. AWS : EC2 / S3 / CloudFront 트래픽 요금 분석 CloudFront에 대해 알아보다가 비용에 관련해서 궁금증이 생겼습니다. EC2로 발생하는 Traffic 요금과 S3로 발생하는 Traffic 요금, 그리고 CloudFront로 발생하는 Traffic요금 중 어떤 방식이 가장 저렴한지 조사를 해보았습니다. EC2란? EC2는 AWS에서 제공하는 클라우드 컴퓨팅 시스템입니다. 이 서비스를 통해서 아마존이 각 세계에 구축한 데이터 센터의 서버용 컴퓨터들의 자원을 원격으로 사용할 수 있습니다. 쉽게 말해, 아마존으로 부터 한 대의 컴퓨터를 임대하는 것입니다. 용량을 늘이거나 줄이기에 쉽고, 사용한 만큼만 지불합니다. 보안 및 네트워크 구성, 스토리지 관리가 효과적입니다. S3란? Amazon S3는 Amazon Simple Storage Service의 약.. 2021. 12. 13. AWS : A 레코드와 Cname의 차이 Route53을 쓰던 중에 A레코드와 CName을 사용해서 도메인과 ELB와 CloudFront와 같은 서비스를 연결할 때가 있었습니다. 이럴 때 그냥 무심코 구글링을 해서 도메인을 A레코드와 Cname으로 연동하여 쓰고 있었는데 정확하게 둘이 어떻게 다른지 잘 모르고 쓰고 있었던 것 같아서 간단하게 한번 정리해두어야겠다고 생각을 했습니다. A 레코드란? 도메인 주소와 서버의 IP 주소를 직접 매핑 시키는 방법을 말합니다. 단순하게 도메인과 IP를 연결시키는 방식이기 때문에 어렵지 않게 이해됩니다. 즉 3.155.24.33 이라는 IP가 있는데 해당 IP를 json-test.com과 같은 도메인으로 연결시킬 수 있습니다. 이럴 때 사용하는 방식이 A 레코드입니다. Cname Cname은 Canonical.. 2021. 12. 8. 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. 리눅스 : find / du 명령어를 이용하여 큰 용량의 파일 찾기 (용량 부족 시) 리눅스 용량 문제 리눅스를 운용하다 보면 가끔 디스크 공간이 부족하여 DISK I/O (디스크 복사 및 출력)에서 에러가 발생할 때가 많습니다. 저도 EC2에서 적은 용량의 스토리지만 사용하여 Ubuntu를 운용하다가 디스크 공간이 부족하여 파일 복사가 되지 않거나 디렉터리 이동이 되지 않는 문제가 발생했던 적이 종종 있습니다. 이럴 때 가장 좋은 방법은 스토리지의 크기을 늘려주는 방법입니다. EC2를 쓰고 있다면 EC2에 연결된 EBS의 크기를 클릭 몇 번으로 확장할 수가 있지만, 물리 HDD를 쓰고 있을 때는 용량 확장이 까다롭습니다. 또 클라우드를 쓸 때는 비용 절감 문제로 디스크 공간 확보가 어려울 수가 있습니다. 디스크 공간을 확장하기전에 어떤 파일이 용량을 가장 크게 차지하는지, 또는 불필요하.. 2021. 10. 18. Docker : mysqldump를 이용하여 백업 및 마이그레이션 docker의 mysql 컨테이너 docker를 사용하다 보면 mysql, mongodb와 같은 데이터베이스 컨테이너를 활용하여 쉽게 DB 서버를 구축할 때가 많습니다. 저는 mysql 컨테이너를 이용하여 간단한 프로젝트에서 DB를 구축해서 테스트 및 배포를 진행하여 보았습니다. docker를 통한 mysql 설치는 아래 링크를 참고해주세요. ** 저는 docker image로 mysql 5.7 버전을 사용하였습니다 ** http://jmlim.github.io/docker/2019/07/30/docker-mysql-setup/ Docker를 통한 MySQL 설치하기. · 기억하기 위한 개발노트 Docker를 통한 MySQL 설치하기. 30 Jul 2019 | Docker docker MySQL 도커 M.. 2021. 9. 28. 이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음
