TIL (11) 썸네일형 리스트형 [TIL][230215] fork해서 Pull Request 보내기 프로젝트에서 사용하는 라이브러리 중 하나가 필수가 아닌 요소가 필수라고 index.d.ts 파일에 잘못 적혀 있었다. 타입 스크립트로 개발하니깐 해당 오류가 계속 떠있는 게 거슬려서 해당 부분을 수정한 뒤에 PR을 보내야겠다고 생각했다. 라이브러리 commit 현황을 보니깐 다행히 최근까지도 계속 관리되고 있는 라이브러리였는데 실제로 내가 보낸 PR을 며칠 뒤에 merge 되었다. PR을 보내는 방법은 1. 해당 라이브러리를 fork 해서 내 깃헙으로 가져온다. 2. 내 로컬로 clone 한 후에 수정할 부분을 수정하고 커밋한다. 3. 라이브러리에 Pull Request를 보낸다. 4. 라이브러리 관리자가 내가 보낸 pull request를 확인하고 merge 할지 말지 결정한다. [TIL][230204] axios, fetch 차이 react native에서 서버와 통신을 할 때 나는 그동안 axios를 써왔는데 친구는 fetch를 사용하였다. 그러고 보니 axios와 fetch의 차이점과 장단점에 대해 내가 정확히 설명할 수 없는 것 같아서 찾아보았다. - axios와 fetch 모두 promise 기반이다. - axios는 따로 모듈을 설치해줘야 하고 fetch는 그렇지 않아도 된다. - 그래서 axios가 제공하는 기능이 더 많다. (요청 취소 가능, 응답 시간 초과 처리 가능, 400, 500대의 에러 발생 처리 용이) - 하지만 react native와 같이 업데이트를 자주 하는 곳에서는 axios 버전이 못 따라갈 수 있다는 위험이 존재한다. - axios는 데이터를 객체로 받지만 fetch는 데이터를 문자열로 받기 때문.. [TIL][230201] 로그인 유지 node.js를 이용하여 회원가입, 로그인, 아이디 찾기, 비밀번호 찾기 기능을 구현했다. 전화번호 인증 절차도 필요한데 클라우드 플랫폼을 어떤 걸 쓸지 안 정해서 이걸 정해야 구현할 수 있을 것 같다. 첨에는 GCP를 사용하려고 했는데 네이버 클라우드 플랫폼이 더 괜찮은 것 같고 마침 동아리를 통해서 크레딧도 많이 받을 수 있어서 이걸 사용할 것 같다. 로그인을 일정 시간 동안 유지하기 위한 방법으로는 두 가지가 있다. 하나는 세션 방식이고 또 다른 하나는 JWT방식이다. 예전에는 세션 방식을 주로 사용했지만 요즘은 JWT 방식도 자주 사용되고 있다고 한다. - 세션 방식은 유저가 로그인하면 서버에서 관련 정보를 메모리나 캐시 등 빠르게 접근할 수 있는 저장소에 저장한 후에 세션키를 발급한다. 클라이언.. [TIL][230125] 깃, 깃허브 정리 깃, 깃허브 정리 왜 깃을 사용할까 1. 어떤 부분이 변경되었는지 쉽게 확인하기 위해 2. 개발하다가 전 단계로 다시 돌아가기 위해 3. 협업을 위해 작업 디렉터리(working directory)-스테이지(stage)-저장소(repository) - 작업 디렉터리: .git 숨김 폴더가 위치한 곳. 즉, 버전을 관리할 파일들이 위치한 곳. - 스테이지: 수정된 파일 중 다음 버전으로 만들 파일들이 위치한 곳. 명시적으로 보이지 않음. - 저장소: 버전을 만들어 관리하는 곳. 명시적으로 보이지 않음. - 저장소에 새로운 버전이 만들어지면 스테이지는 비워진다. - 작업 디렉터리=>스테이지: add, staged - 스테이지=>저장소: commit - tracked 파일: 스테이지에 올라온 적이 있는 파일(.. [TIL][230124] RN 강의 완강 RN 강의 정리 44. 네이티브 모듈 수정하기 - 라이브러리를 사용할 때 원하는 기능을 추가하고 싶다면 먼저 공 깃헙에서 fork 해서 내 깃헙으로 가져온다. 그리고 package.json에서 버전 부분을 지우고 내 깃헙에 라이브러리가 있는 주소를 적어준다. - 요즘 자주 쓰는 방법으로 patch-package라는 것도 있다. - 네이티브 파일을 수정해야 하기 때문에 해당 언어를 알아야 수정할 수 있다. 45. patch-package 수행하기 - android 네이티브 파일에서는 @ReactMethod 애노테이션이 붙은 게 react 컴포넌트였는데 ios에서는 RCT_EXPORT_METHOD가 그 역할을 한다. - 추가적인 공부가 많이 필요하다. - 이대로 npm i를 하면 수정한 게 다 날아가버린다... [TIL][230123] react native 강의 정리 오늘 아침에 갑자기 이미 배포한 다른 프로젝트에서 로그인 오류가 발생했다고 해서 혹시나 하고 확인해 봤는데 헤로쿠가 무료 플랜을 중지해서 최근에 railway로 갈아탔는데 500시간 제한을 넘겼기 때문에 멈춘 거였다. 헤로쿠는 요청이 있을 때만 서버가 켜졌는데 railway는 항상 켜져 있어서 한 달 내내 사용할 수 없는데 이걸 확인 안 했다. 그래서 개발자 플랜으로 업그레이드했다. --- 33. 주문 리덕스에 넣기 - 타입 스크립트는 객체나 빈 배열이 있으면 타입을 추론할 수 없기 때문에 따로 타입을 지정해 주자. - 객체의 타입은 주로 interface로 지정한다. - reducers로 미리 필요한 기능들을 만들어놓고 나중에 사용할 때 dispatch를 이용하여 action을 실행한다. 34. 수익금.. [TIL][230121] 리액트 네이티브 강의 서버 통신 25. 서버 주소 react-native-config로 관리하기 - axios를 이용하여 데이터를 받아올 때 url은 개발할 때는 로컬 주소, 배포할 때는 서버 주소여야 한다. 이렇게 분기 처리해야 하는 값은 환경 변수라고 부른다. __DEV__ ? 로컬 주소 : 실서버주소의 방식으로 처리해도 되지만 이런 걸 많이 쓸 경우 코드가 깔끔하지 않다. 이럴 때는 react-native-config를 사용한다. - react-native-config를 설치한 후 .env 파일을 만들어키=값의 형태로 환경변수를 적어주면 된다. - 로컬 주소가 localhost:~ 방식으로 연결 안 될 경우 10.0.2.2:~(안드로이드라면 아마 이걸 사용해야 할 것이다.) 혹은 외부 IP나 내부 IP~ 등으로 주소를 바꿔보자. .. [TIL][230120] 리액트 네이티브에 리덕스와 서버 연결 앱 리뉴얼하면서 생긴 의문 Q. TextInput에서 onChangeText에 들어가는 함수에 굳이 useCallback API를 사용해줘야 할까? useCallback은 함수가 불필요하게 re-rendering되는 걸 방지해 준다. 그래서 복잡한 함수의 경우 useCallback을 사용하면 앱 최적화를 할 수 있다. 현재 onClick={() => {}} 방식으로 익명함수를 사용하였는데 익명함수를 사용하면 코드를 짤 때는 정말 편하다. 하지만 화면이 render 될 때마다 이 함수도 새로 만들어져 비효율적이다. Q. 함수 선언 방식 function x(){}과 const x=()=>{}의 차이는 무엇일까? const x=()=>{} (arrow function)로 함수를 선언하면 이 함수가 선언되기 전.. 이전 1 2 다음