썬이의 IT세상

라고 쓰고 그동안 정들었던 expo와 생이별하기라 읽는다. Expo는 앱 개발을 보다 더 쉽고 편하게 만들어 주기 위한 React Native 라이브러리인데, Expo의 단점은 Linking을 요구하는 기술이라던가, Expo에서 지원하지 않는 기술들은 사용할 수 없다는 게 가장 크다. 더군다나 빌드할 때 시간을 오래 잡아먹고, 앱의 사이즈도 커서 내가 추구하는 가볍고 심플한 앱에는 맞지 않아서 'Private Box' 앱에서 Expo를 뗴어내는 작업을 포스팅하고자 한다. 먼저, 프로젝트 폴더에 expo eject 명령어를 사용해준다. Ejecting to ExpoKit is now deprecated. Upgrade to Expo SDK +37 or downgrade to expo-cli@4.1.3 터미..

클라이언트가 서버에게 ' 비디오 파일, 이미지 파일을 줘 ' ' 이 파일을 내 디바이스에 저장해 줘' 라고 요청을 보낸다고 가정해보자. 그렇다면 서버는 요청에 따라 적합한 처리를 하여 클라이언트에게 응답을 줄 것이다. 하지만 당연히 컴퓨터는 컴퓨터의 언어로 요청을 처리해야하기에 이를 구분할 수 있도록 하는 체계가 필요하다. 그 체계를 바로 API (Application Programming Interface) 라고 한다. 정리하자면, API는 클라이언트, 서버와 같은 서로 다른 프로그램에서 요청과 응답을 주고 받을 수 있게 만든 체계이다. 이 API 를 클라이언트의 관점에서 바라봤을 때 클라이언트가 서버에게 보내는 요청은 크게 4가지 요소로 나눌 수 있는데, Create Read Upload Delete..

React Native 앱을 만들면서, TouchableOpacity 혹은 Button 안에 Icon Image를 삽입하고 Text를 넣을 경우, 이미지가 버튼의 크기보다 클 경우에 짤리는 경우가 있다. 이렬 경우 Margin / Padding, Width/Height 등의 속성을 사용해도 찝찝하다. 이미지 크기가 다르더라도 원본의 비율을 그대로 가져오고 싶을 때, style 속성에서 이런 식으로 스타일을 주면 해결된다.

이번 시간에는 Android Studio로 Build한 Debug Apk 파일을 USB 없이 와이파이 환경에서 디버깅하는 법을 다뤄보겠다. 제목에는 USB 없이라고 되어있지만, 사실 초기 설정에는 USB 연결이 1회 필요한데, 이는 adb tcp/ip port를 열기 위함이다. 그리고 스마트폰 환경설정에서 '개발자 옵션'을 켜두어서 세팅을 해주어야 한다. 스마트폰에서 개발자 모드를 실행하고, 데스크탑과 스마트폰을 USB 연결을 해준다. 개발자 옵션 내에서 USB로 디버깅 / Wifi 환경에서 디버깅을 체크해주고, cmd에서 adb devices 를 하여 스마트폰과 PC가 잘 붙었는 지 확인해준다. 모든 준비가 끝났다면, cmd창에서 adb tcpip 5555 //Port 5555 Open 를 입력해준 후..

프로젝트에 새로 투입되어, 소스 파일을 받고 테스트 해보려 하는데, react-native run-android 명령어를 쳐도 실행이 되지 않는 것이었다 ㅠㅠ expo로만 앱개발을 했어서, react-native로 빌드하는 것은 생소했고 https://dev-yakuza.posstree.com/ko/react-native/install-on-windows/ 윈도우(Windows)에 react native 개발 환경 구축하기 react-native로 앱을 개발하기 위해 윈도우(Windows)에 개발 환경을 구축해 보고, react-native로 생성한 프로젝트가 잘 동작하는지 확인해 봅니다. dev-yakuza.posstree.com 이렇게 차근차근 잘 알려주신 글이 있는데도 계속 에러가 떠서 며칠 스트레..

https://k-taeyang.tistory.com/11 [React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 2 UseState https://k-taeyang.tistory.com/9 [React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 1 React에서 말하는 Hook은, React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하면, 기존 Clas.. k-taeyang.tistory.com 오늘은 React Hooks의 useEffect에 대해 중점적으로 알아보자. 우선, useEffect 함수는 리액트 컴포넌트가 랜더링 될때마다, 특정 작업을 실행할 수 있도록 하는 Hook이다. 앞선 시간에 배..

https://k-taeyang.tistory.com/9 [React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 1 React에서 말하는 Hook은, React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하면, 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. // 그렇다고 Reac k-taeyang.tistory.com 지난 시간에 이어서, 이번에는 리액트 훅에서 UseState에 대해 중점적으로 다뤄보자. 먼저, 리액트 컴포넌트에서 동적인 값을 상태(State) 라고 부른다. 사용자 인터랙션(User Interaction)을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는..

개발 중인 private box 앱은 expo cli 를 사용하여 만든 앱인데, 최근에 node.js를 최신 버전으로 업데이트 하고 이후에 expo start를 하니 지원이 안된다고 한다.. 그래서 node.js를 다운그레이드 하기 위해 nvm을 설치하고 이전 버전을 다운하고 nvm use 명령어를 사용하니 띠용... 이게 뭔말이더냐 살짝 당황했지만 바로 구글링 해서 찾아본 결과.. 해당 이슈는 명령 프롬포트(cmd)를 관리자 권한으로 실행하면 해결된다는 간단한 것이었다! 짠! 아주 간단한 이슈였지만 해결되고나니 기분 좋다 :)

React에서 말하는 Hook은, React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하면, 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다. // 그렇다고 React로부터 Class를 제거하지는 않고, 존재하는 코드와 함께 나란히 작동한다고 공식문서에 나와있다. 일단 리액트 훅을 이해하기 위해서는 Side Effect의 개념을 알아야 한다. side effect를 알아야 React hook 개념이 이해가 되고, 그 hook 안에 useState, useEffect가 속해있는 것이다. ◼ Side Effect React Component가 화면에 1차로 랜더링 된 이후에, 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Sid..

개발 지식을 쌓다보면 자연스레 접하게 되는 스택(Stack), 큐(Queue). 개발자라면 무조건 알아야하는, 아주 중요한 데이터 구조인데 사실 이들은 실제로 프로그래밍 언어들에서 존재 하지 않는, 일종의 '규칙'이다. ◼ 스택(Stack) 스택은 차곡차곡 쌓아 올린다는 것을 의미하는 단어이다. 즉, 자료구조에서 말하는 스택은 위의 이미지처럼 차곡차곡 쌓아 올린 형태의 자료구조를 말하며, 시간 순서에 따라 자료가 쌓여서 가장 마지막에 삽입된 자료가 가장 먼저 삭제된다는 구조적 특징을 가진다. 이러한 스택의 구조를 후입선출(LIFO : Last-In-First-Out) 구조라고 한다. ◼ 스택의 활용 예시 - 웹 브라우저 방문 기록 / 뒤로 가기 : 가장 나중에 열린 페이지부터 다시 보여준다. - 역순 문..