profile
작지만 꾸준하게 성장하는 개발자🌳
post-thumbnail

Instagram Clone : React Native - part 6 [ DIRECT MESSAGES]

DM 기능을 추가하기 위해, LoggedInNav 스택 네비게이터 안에 또 다른 스택 네비게이터를 추가한다. MessagesNav 안에는 Rooms와 Room 두 개의 스크린이 있다. Rooms에서 채팅방을 선택하면, 해당 id의 채팅방으로 이동한다.채팅방 목록을 볼

3일 전
·
0개의 댓글
post-thumbnail

2021.10.11 TIL

✓  네비게이터 구조화프로젝트 전체 구조를 그림으로 그리면서 탭과 스택 네비게이터를 이용한 앱의 설계 방법을 익혔다. ✓  find in arrayfind메서드로 조건에 맞는 요소를 찾아, 대화 상대 유저를 찾을 수 있었다✓  백엔드 설계할 때, 프론트에서 필요한 데이

6일 전
·
0개의 댓글
post-thumbnail

Instagram Clone : React Native - part 5 [ UPLOAD PHOTO]

사진 촬영 기능을 위해, 상위 스택 네비게이터를 하나 더 만든다. 기존에 있었던 탭은 스택의 첫 번째 스크린이 되는 것이다. 카메라는 아래에서 올라오게 하기 위해, mode를 modal로 설정한다. 카메라 아이콘을 클릭했을 때, Upload 스크린으로 이동하게 한다.

6일 전
·
0개의 댓글
post-thumbnail

2021.10.10 TIL

✓  Apollo LinkonErrorLink로 에러 로그를 발생시키고 createUploadLink로 ReactNativeFile을 서버로 전송할 수 있다. ✓  Update ROOT_QUERY모든 query의 데이터가 저장되어 있는 ROOT QUERY를 수정하여 업

6일 전
·
0개의 댓글
post-thumbnail

2021.10.09 TIL

✓  useIsFocused Hook유저가 특정 컴포넌트를 보고있을 때, 함수를 동작하게 할 수 있다. ✓  Upload 타입 파일 만들기apollo-upload-client로 ReactNative 파일을 만들 수 있다. ✓  loading 상태일 때 표시하기useMu

6일 전
·
0개의 댓글
post-thumbnail

2021.10.08 TIL

✓  접근 권한 가져오기MediaLibrary를 통해 iOS와 안드로이드에서 미디어 파일과 카메라 촬영에 대한 접근 권한을 가져올 수 있었다. ✓  카메라 촬영 제어카메라 컴포넌트에 다양한 옵션을 주어서 촬영 방향, 확대, 플래시 등을 제어할 수 있게 앱을 만들었다.✓

2021년 10월 8일
·
0개의 댓글
post-thumbnail

2021.10.07 TIL

✓  Tabs in Stacks탭과 스택 네비게이터를 혼용하여 모바일 앱의 구조를 짜는 법을 익혔다. ✓  Material Top Tabs탭이 화면 상단에 있는 네비게이터를 구현하였다.✓  Header 스타일링스크린 Header를 내가 원하는대로 스타일링 해보았다.✓ 

2021년 10월 7일
·
0개의 댓글
post-thumbnail

Instagram Clone : React Native - part 4 [ LIKES, SEARCH & PHOTO]

좋아요를 누른 유저의 목록을 받는 query (seePhotoLikes)를 요청하기 위해 Like 스크린으로 사진의 id를 전달해야한다. navigation.navigate을 이용하여 전달한다.전달 받은 id로 query 요청을 한다. User 목록은 재사용 가능하니,

2021년 10월 7일
·
0개의 댓글
post-thumbnail

2021.10.06 TIL

✓  setOptions로 네이게이터 옵션 변경Navigation.setOptions로 navigation 이동 시, screen의 option을 변경 할 수 있다. ✓  useLazyQueryuseLazyQuery는 useMutation과 같이 요청을 발생시키는 함수

2021년 10월 7일
·
0개의 댓글
post-thumbnail

2021.10.05 TIL

✓  useQuery skip으로 쿼리 요청 하지 않기useQuery는 컴포넌트가 마운트 될 시에, 자동으로 실행되기 때문에 완벽하게 제어할 수는 없다. skip을 사용해서, 조건에 따라 쿼리를 요청하지 않을 수 있다. ✓  FlatList Seperator 만들기리스

2021년 10월 5일
·
0개의 댓글
post-thumbnail

Instagram Clone : React Native - part 3 [ FEED]

여러 탭을 만든다. 스택과 마찬가지로 Tabs.Navigator 안에 필요한 Tabs.Screen 넣는다. Screen 전체에 일괄적으로 옵션을 적용하기 위해선 Navigator에 screenOptions를 , 개별적으로 options를 Screen의 props로 넣는

2021년 10월 5일
·
0개의 댓글
post-thumbnail

2021.10.04 TIL

✓  Pull to Refresh스크롤을 반대로 당겨서 새로고침하는 기능을 구현해보았다. ✓  Infinite Scrolling 스크롤이 끝에 도달했을 때 쯤, 서버 요청을 하여 계속해서 데이터를 받아와 계속해서 렌더링하는 무한 스크롤링을 구현하였다. ✓  Cache

2021년 10월 4일
·
0개의 댓글
post-thumbnail

2021.10.03 TIL

✓  Stack과 Tab Navigator 결합Tab Navigator와 Stack Navigator를 같이 사용하여 자유로운 네비게이션이 가능하도록 만들었다. ✓  FlatList로 lazily하게 컴포넌트를 렌더컴포넌트가 화면 상에 있으면 렌더링 하고 없으면 렌더링

2021년 10월 2일
·
0개의 댓글
post-thumbnail

Instagram Clone : React Native - part 2 [ AUTHENTICATION]

스택 네비게이터는 화면을 넘어가는 것이 아닌 새 화면이 스택의 제일 위에 쌓이는 방식으로 구현된다. React.js에서 router를 만드는 것과 비슷하다. Navigator가 아닌 Screen에서 다른 Screen으로 이동 가능하다. React Native의 모든 컴

2021년 10월 2일
·
0개의 댓글
post-thumbnail

2021.10.02 TIL

✓  React Hook Forms on NativeReact Native에서 React Hook Forms의 사용법을 익혔다. ✓  navigation & routeReact Native 컴포넌트가 기본적으로 갖는 props다. navigation.navigate로

2021년 10월 2일
·
0개의 댓글
post-thumbnail

2021.10.01 TIL

✓  React Native CSSReact Native는 CSS 엔진이 React.js와 다르기 때문에, flex나 font-size 등 다른 방식으로 작동한다. ✓  View / Text in NativeView는 div, Text는 span과 비슷하다. Nati

2021년 10월 1일
·
0개의 댓글
post-thumbnail

Instagram Clone : React Native - part 1 [ SETUP]

React Native를 위한 Create React App와 같다.Create React App을 쓰는 이유는 webpack 등 별도의 설정 없이 쉽게 React JS를 사용하기 위한 것이다.Expo나 React Native CLI도 마찬가지다. CLI와 차이는 시작

2021년 10월 1일
·
0개의 댓글
post-thumbnail

2021.09.30 TIL

✓  Expo Go 사용법개발자 Expo 메뉴를 열고 여러 도구들을 사용하는 법을 익혔다. ✓  App Loading으로 Assets 로딩하기앱이 실행되기 전, 로드해야 할 데이터들을 가져온 후 렌더링 시키는 방법을 배웠다.✓  Stack Navigator 구현스택 네

2021년 9월 30일
·
0개의 댓글
post-thumbnail

2021.09.29 TIL

✓  React Native ExpoExpo는 별도의 설정 없이 React Native 프로젝트를 좀 더 쉽게 만들 수 있게 해준다. 하지만, 장점과 한계점이 뚜렷하여 앱의 요구사항들을 먼저 파악한 후 Expo로만 가능할지를 판단하는 것이 중요하다. ✓  Expo E

2021년 9월 29일
·
0개의 댓글
post-thumbnail

Instagram Clone : Frontend - part 4 [ PROFILE]

Profile 컴포넌트로 이동하는 Link를 프로필 사진과 유저이름에 걸어준다.Profile 컴포넌트를 만든 후, Route를 설정한다. 이때, path를 ":"과 함께 유저이름으로 설정한다. useParams로 파라미터의 값을 가져온다. 이제, ":" 뒤에 붙은 u

2021년 9월 28일
·
0개의 댓글