-
React-native-calenders 원더윅스 앱 만들기카테고리 없음 2024. 12. 25. 19:51
이번시간에는 앱에 캘린더를 추가해 보도록 하자. 먼저 expo에서 제공하는 켈린더가 있는지 확인하자. expo-calender를 검색하니 최상단에 https://docs.expo.dev/versions/latest/sdk/calendar/ 검색결과가 나온다. 검색 결과에 따라 들어가면 SDK 가 나온다. SDK는 Software Development Kit로 개발 키트라고 생각하면 된다. 무튼 expo-calender에서 제공하는 기능은 캘린더, 이벤트, 알림 레코드랑 상호작용하는 SDK인데. 우리가 원하는 기능은 UI를 만들어 주는 컴포넌트를 원했기 때문에 설치하지 말자. 다만 나중에 알람 기능을 만들 때 필요할 수 있으니 알아두자. 다른 검색 결과로 react-native-calenders가 나온..
-
React-native 생년월일 입력을 위한 DateTimePicker 추가하기React Native 2024. 12. 25. 11:40
아이의 생년월일을 입력하기 위해서 직접 string으로 입력하는 방법도 있지만, 다른 앱들을 살펴보면 달력이 나와서 달력을 클릭하면 클릭한 값을 넣어준다. 웹개발자라면 input에 type만 설정해도 달력이 나와서 설정할 수 있다. React-native에도 비슷한 기능을 하는 라이브러리나 메서드가 있지 않을까? 먼저 인터넷에서 찾아보자. DateTimePicker https://docs.expo.dev/versions/latest/sdk/date-time-picker/ DateTimePickerA component that provides access to the system UI for date and time selection.docs.expo.devexpo에서 제공하는 라이브러리가 있음을 알..
-
React-native AsyncStorage로 로그인 정보 로컬에 저장하기React Native 2024. 12. 25. 08:21
react-native에서 local에 저장하는 기능이 있을까? 한번 찾아보자. react-native localstroage 입력하는 바로 결과가 나온다. https://docs.expo.dev/versions/latest/sdk/async-storage/ AsyncStorageA library that provides an asynchronous, unencrypted, persistent, key-value storage API.docs.expo.dev문서에 따라서 설치를 진행해 보자 npx expo install @react-native-async-storage/async-storageAsyncStorage설치가 완료 되었으면 사용법을 보고 진행해 보자.https://react-native-asy..
-
React-native 모달 만들기 - 로그인 및 유저 정보 화면React Native 2024. 12. 22. 17:47
React-native expo 로 wonder weeks 앱 만들기 - 환경 세팅 하기 개발 환경 세팅이 모두 완료 후 실행하면 EXPO에서 생성된 애플리케이션이 실행되었다. 이번 시간에는 WONDER WEEKS에서 아이 이름과, 생년 월일(태어난날)을 입력하는 모달을 만들어 보자. React Native modal 분석하기 앱은 대부분의 기능들이 규격화되어있다는 점을 알면, 아마도 modal도 공홈에서 제공하고 있진 않을까? 하는 마음에 찾아보았다. https://docs.expo.dev/router/advanced/modals/ ModalsLearn how to use modals in Expo Router.docs.expo.dev 놀랍게도 모달을 만드는 방식에 대해 세밀하게 나와다는 점을 알 수..
-
React-native expo 로 wonder weeks 앱 만들기 - 환경 세팅 하기React Native 2024. 12. 21. 21:25
솔로프리너? 들어본 적 있는가? Solo + Entrepreneur의 합성어로, 1인 창업가나 1인 기업가라고 칭해지는데. 나도 한번 해보고 싶어서 도전해 본다. React Native의 expo를 선택한 이유는. 현 FE개발자로 JS랑 React가 익숙했기에 React Native에 대한 진입장벽이 낮게 느껴졌고, 개발 한 번으로 IOS, Android 둘 다 배포할 수 있다니. 군침이 싹 돈다. expo로 개발 한 이유는 별 생각 없었고, 공식 문서를 따라가다 보면 자연스럽게... expo로 개발을... https://reactnative.dev/docs/environment-setup 예전에는 이렇게까지 밀어주는 느낌은 못받았는데. 공식 문서를 따라 환경 세팅을 해보자. 1. React-nat..
-
FSD 프론트앤드 개발을 위한 최적화된 디자인 패턴front-end 2024. 3. 21. 10:14
들어가기 FSD 아키텍처가 무엇인지 아는가? Feature-Sliced Design의 줄임말로 애플리케이션을 Feature(기능) 단위로 조직화하여 관리하는 방법을 말한다. 끊임없이 변화하는 비즈니스 요구 사항에 맞서서 프로젝트를 더 이해하기 쉽고 체계적으로 만든다는 점에서 매우 흥미롭게 다가왔다. 개발은 변화에 민감하다. 각 기능들은 다른 기능들에 대해 격리되어 있어야 한다. 왜냐하면 하나의 변화로 인해서 다른 기능들이 고장 나는 경우가 너무 빈번했기 때문에. 어떻게 격리벽을 세워 코드를 안전하게 작성할 수 있을지에 대한 고민이 많았다. 그리고 유지보수와 확장성에도 좋은 코드를 작성하여 팀원분들에게도 좋은 코드리뷰를 하고 싶은 마음, 그러한 기준을 찾고 있었다. 클린 아키텍처, 실전주의 프로그래머 등 ..
-
[알고리즘] BFS 그래프 탐색알고리즘 2024. 2. 28. 19:09
BFS란? BFS(Breadth-First Search, 너비 우선 탐색 )은 그래프 탐색 알고리즘이다. 시작 정점에서 가장 가까운 정점을 방문하고 멀리 떨어진 정점을 나중에 방문하는 방식으로 탐색한다 BFS 탐색 과정? A를 탐색하고 B와 C를 탐색 리스트에 넣는다. 탐색 리스트 = [B, C] 탐색리스트에서 첫 번째 요소 B를 탐색하고 D를 탐색 리스트에 넣는다. = [ C, D ] 탐색리스트에서 첫번째 요소 C를 탐색하고 E를 탐색 리스트에 넣는다. = [ D, E ] 탐색리스트에서 첫번째 요소 D를 탐색하고 탐색 결과가 없어서 넘어간다. = [ E ] 탐색리스트에서 첫번째 요소 E를 탐색하고 탐색 결과가 없어서 넘어간다. = [] BFS의 등장 배경 A에서 E까지 가는 최단 경로를 찾고 싶다면 어..
-
제네릭 이해하기front-end 2024. 2. 27. 15:56
제네릭의 등장 배경 코드의 안정성과 재사용성을 높이기 위해 여러 종류의 객체를 다룰 수 있는 유연한 코드를 작성하기 위해 이해되나요? ㅋㅋ 저는 이해가 안 됩니다. ㅋㅋ 제네릭을 이해하기 위한 이야기 우리가 배열을 만들어야 한다고 생각해 보면, 배열에는 어떤 타입의 데이터가 들어올까요? 문자열, 숫자, boolean ... 어떤 데이터도 들어올 수 있습니다. 해결방안으로는 우리는 각각 모든 타입별로 제공하는 배열들을 만들어줘야 합니다. 예를 들면 다음과 같습니다. string일 때 사용하는 배열 - stringarray number일 때 사용하는 배열 - numberarray boolean일 때 사용하는 배열 - boolarray string이랑 number를 모두 사용하는 배열 - stringAndNu..