Algoroot's space

안녕하세요. 오늘은 최근 React native로 앱 개발을 하며 마주했던 이슈를 파헤쳤던 과정을 회고와 함께 말씀드리고자 합니다. 사실 정확히 말하면 이슈라고 할 수 없는 'IOS에서의 의도적인 행동'이었지만, 그냥 이슈라고 칭하겠습니다. 참고로 해당 이슈는 React-native단에서 해결할 수 있는 것이 아니라는 결론이 나서 결국에는 수동으로 이 과정을 구현하게 되었습니다. >> 수동으로 패스워드 타입 구현하기 하지만 이 과정에서 배운 점들이 많아 글을 쓰지 않을 수가 없었습니다...!! (누군가는 해결했을지도 모르겠네요.. 그렇다면 꼭 댓글을 남겨주세요.) Issue explained IOS에서 Input type ==='password' 일 때 값을 재 입력하게 되면 비밀번호 값이 유지되지 않습..

안녕하세요. 오늘은 React native로 공통/커스텀 헤더를 관리하기 위한 리팩토링 과정을 공유하고자 합니다. React Native Header App에서의 헤더는 빨간 테두리 영역입니다. (* 시간, 와이파이 배터리상태가 있는 최상단 부분 역시 헤더에 속하며, 이 부분을 StatusBar라고 합니다. ) Web에서 Router와 비슷한 역할을 하는 React-native Navigator/stack 에서는 screenOptions이라는 property를 제공하는데 이 property는 header를 커스텀할 수 있는 다양한 옵션들을 제공합니다. … headerBackImage : 헤더 왼쪽 부분을 그려주는 영역으로 뒤로 가기 액션이 포함되어 있습니다. headerRight: 헤더 우측에 해당하는 ..

안녕하세요. 오늘은 리엑트 네이티브에서 앱 디바이스 설정 창을 여는 방법에 대해 소개하겠습니다. 해당 기능은 유저가 어플리케이션의 알림 상태를 동의하지 않았을 경우 해당 애플리케이션 설정 창에서 알림을 허용하는 액션이 필요할 때와 같은 경우에 사용할 수 있습니다. 설정 후 다시 앱에 돌아왔을 때 동의 유무에 따른 분기처리 방법도 같이 말씀드리고자 합니다. 앱 설정 창 열기 앱 설정을 여는 것은 기본적으로 Linking에서 openSetting이라는 메서드를 제공합니다. import { Linking } from 'react-native'; Linking.openSettings(); 저 같은 경우는 유저가 알림설정을 했는지 안 했는지에 따라서 스크린 분기 처리가 필요했는데요. 설정을 한 후 다시 앱에 돌아..

안녕하세요 이번에는 React-date-picker을 타입스크립트 + SCSS로 완전히 새로운 UI를 구현해본 경험을 소개하고자 합니다. 거의 전체를 SCSS와 조합하여 스타일링을 새로 한 것으로 모든 영역에서 커스텀하는 것이 필요한 분들께 도움이 많이 될 것이라고 확신합니다. ** 구체적인 스타일링은 삭제하였습니다. 궁금하신게 있다면 댓글 달아주세요 :) 좌측은 React date picker에서 제공하는 기본 UI이고 우측은 제공하는 기능들을 통해 직접 커스텀한 date picker입니다. 라이브러리에서 제공하는 Demo 사이트를 통해서 필요한 옵션들을 끌어와 사용하였습니다. React-date-picker 라이브러리에서는 커스텀을 위한 여러 props를 제공합니다. 제공해주는 Props에 맞게 컴포..

안녕하세요 너무 오랜만에 블로그에 찾아왔습니다. 공부하던 시절 개발 현직자 분들이 현업에서 일하며 글쓰기 쉽지 않다는 말이 이제서야 공감이 가네요.. 좀 더 부지런해져야 겠습니다. 오늘은 프로젝트에서 구현했던 부분인 슬라이더 라이브러리 Swiper를 소개해볼까 합니다. 개인프로젝트와 직접 업무에 뛰어들면서의 차이는 디자인과 같게 구현해야한다는 점이죠. 이러한 면에서 어느정도 커스텀이 유용한 라이브러리를 찾는 것도 중요하다는 생각이 드는데요, 처음에는 Slick이라는 라이브러리를 설치해 구현했다가 디자인대로 커스텀하는 것에서 불편함이 느껴져서 다시 찾아보았고, npm trends에서도 최근 1년 사용성도 더 많고 업데이트도 빠르며 데모(Demo)가 잘 나와있는 Swiper라는 라이브러리르 사용하게 되었습니..

HTTP 비연결성 연결을 유지하지 않는 모델은 서버와 클라이언트간 연결하고 요청과 응답이 오면 연결을 바로 끊음으로서 최소한의 자원이 유지된다. HTTP는 기본이 연결을 유지하지 않는 모델이다. 일반적으로 초 단위의 이하의 빠른 속도로 응답한다. 1시간 동안 수천명이 서비스를 사용해도 실제 서버에서 동시에 처리하는 요청은 수십개 이하로 매우 작음 예) 웹 브라우저에서 계속 연속해서 검색 버튼을 누르지는 않는다. 비연결성은 서버 자원을 매우 효율적으로 사용할 수 있다. 비연결성 단점 TCP/IP 연결을 새로 맺어야 하게 되어 3 way handshake 시간이 추가된다. 웹 브라우저로 사이트를 요청하면 HTML 뿐만 아니라 자바스크립트, css, 추가 이미지 등 등 수 많은 자원이 함께 다운로드되는데 자원..

HTTP HyperText Transfer Protocol 인터넷에서 데이터를 주고받을 수 있는 프로토콜으로 지금은 모든형태의 데이터를 다 전송할 수 있으며 서버간의 데이터를 주고 받을 때도 HTTP를 이용한다. 이렇듯 지금은 HTTP 시대라고 보아도 무방하다. HTML, TEXT IMAGE, 음성, 영상, 파일 JSON, XML (API) 거의 모든 형태의 데이터 전송 가능 서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용 지금은 HTTP 시대! HTTP 역사 가장 많이 사용하는 것은 HTTP/1.1 버전이다. 대부분의 기능이 다 들어있으며 HTTP/2, HTTP/3 은 성능개선에 초점에 맞춰져 있다. HTTP/0.9 1991년: GET 메서드만 지원, HTTP 헤더X HTTP/1.0 1996년:..

아래의 URL을 통해 어떻게 웹 브라우저가 요청해서 진행되는지 알아보자. 1. google.com에 해당하는 DNS 서버를 조회한다. IP 200.200.200.2 2. port번호를 찾아낸다. port는 https로 생략된 443번 port이다. 3. HTTP 요청 메시지 생성 : 쿼리 정보, HTTP 버전 정보, Host정보가 들어간다. HTTP 메시지 전송 1. 웹 브라우저가 HTTP 메시지를 생성한다. 2. SOCKET 라이브러리를 통해 TCP/IP 계층에 전달한다 이전 단계에서 찾은 IP, PORT 정보로 3 way handshake 방식을 통해 서버와 연결한다. 연결이 성공되면 TCP/IP 계층으로 데이터를 전달한다. 3. HTTP 메세지가 포함된 TCP/IP 패킷을 생성한다. 4. 서버는 패..